Forum Support

Shape 5
April 20, 2021, 11:36:48 PM *
Welcome, Guest. Please login or register.

Login with username, password and session length
News: Shape 5 Forum
 
   Home   Help Search Login Register  
Pages: [1]
  Print  
Author Topic: Display side by side  (Read 616 times)
sCope1987
Jr. Member
**
Offline Offline

Posts: 10



« on: January 02, 2015, 09:49:00 AM »

Hello Shape5 team
A quick question:

How do I get into the BOTTOM ROW 3 widget listing
next to each other.

I speak the Whats Hot.
(Medieval II ... Call of Duty .... Wild Star ...)
Logged
Tristan Rineer
Global Moderator
*****
Offline Offline

Posts: 3858

Gravatar


« Reply #1 on: January 05, 2015, 09:06:33 AM »

I'm not sure what you mean.  If you want to have multiple columns of widgets, just place each widget in a different column of the row.  If you want multiple columns of content inside a widget, you'll need to either find a plugin that creates a widget capable of that function, or you'll need to use a text widget or clean markup widget to put in custom HTML.
Logged

Tristan Rineer
------------
Shape 5 Team



- Need a great host for your website? We highly recommend siteground.com!


- Put your trust in the hands of our extremely qualified staff to get your job done right!


- Firebug is the most powerful web development and debugging tool, and it will save you a lot of time, frustration and forum questions:
Install Firebug
sCope1987
Jr. Member
**
Offline Offline

Posts: 10



« Reply #2 on: January 09, 2015, 06:08:33 AM »




hope that will help u!
Logged
Tristan Rineer
Global Moderator
*****
Offline Offline

Posts: 3858

Gravatar


« Reply #3 on: January 09, 2015, 08:50:04 AM »

That widget is custom HTML, edits to content are generally not covered by support.  However, I poked around the demo with Firebug and was able to get it to do what you wanted with just a couple small edits to the HTML; the code below is the updated content for that widget that will make it display things in multiple columns.  Keep in mind that it will only look right if you are not using any of the other columns in that row.

Code:
<div style="float: left; width: 32%;"> <img src="[demourl]/images/bottom1.jpg" alt="bottom 1" style="float:left;width:81px;padding-right:10px;" />

<div style="">
<span class="s5highlight">Medieval II: Total War Cheats</span><br />
<span style="color:#b6b6b6;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec non turpis a sem
</span>
</div>
</div>


<div style="float: left; width: 32%;">
<img src="[demourl]/images/bottom2.jpg" alt="bottom 1" style="float:left;width:81px;padding-right:10px;" />

<div style="">
<span class="s5highlight">Call of Duty: Black Ops II</span><br />
<span style="color:#b6b6b6;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec non turpis a sem
</span>
</div>
</div>


<div style="float:left;width:32%;">
<img src="[demourl]/images/bottom3.jpg" alt="bottom 1" style="float:left;width:81px;padding-right:10px;" />

<div style="">
<span class="s5highlight">WildStar: Raiding Rampage</span><br />
<span style="color:#b6b6b6;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec non turpis a sem
</span>
</div>
</div>
<div style="clear:both;height:15px;"></div>

I recommend checking out the Codecademy HTML and CSS course to learn the basics of how HTML and CSS work; it's free, and if you combine that with Firebug, you should be able to figure a lot of things out on your own, which is generally faster than waiting on support.
Logged

Tristan Rineer
------------
Shape 5 Team



- Need a great host for your website? We highly recommend siteground.com!


- Put your trust in the hands of our extremely qualified staff to get your job done right!


- Firebug is the most powerful web development and debugging tool, and it will save you a lot of time, frustration and forum questions:
Install Firebug
sCope1987
Jr. Member
**
Offline Offline

Posts: 10



« Reply #4 on: January 09, 2015, 10:36:02 AM »

a realy big thx to u ..

And a big big thx for that link ...
Logged
sCope1987
Jr. Member
**
Offline Offline

Posts: 10



« Reply #5 on: January 09, 2015, 11:54:01 AM »

Code:
<div style="float: left; width: 32%;">
<img src="images/joinUs.png"  alt="bottom 1" style="margin-left:11px;float:left;width:81px;padding-right:10px;"/>

<div style="">
<span class="s5highlight">Werde ein Teil von niCe</span><br />
<span style="color:#b6b6b6;">
<a href="http://www.nice-team.eu/joomla/index.php/community/join-us-1-1">Join Us</a> <br>
</span>
</div>
</div>

how to add a link on the img. on line 2 ?
Logged
Tristan Rineer
Global Moderator
*****
Offline Offline

Posts: 3858

Gravatar


« Reply #6 on: January 12, 2015, 09:54:32 AM »

You can wrap the image with an <a> tag, just like the "Join Us" text lower in the code.
Logged

Tristan Rineer
------------
Shape 5 Team



- Need a great host for your website? We highly recommend siteground.com!


- Put your trust in the hands of our extremely qualified staff to get your job done right!


- Firebug is the most powerful web development and debugging tool, and it will save you a lot of time, frustration and forum questions:
Install Firebug
Pages: [1]
  Print  
 
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF | SMF © 2013, Simple Machines
Joomla Bridge by JoomlaHacks.com
Valid XHTML 1.0! Valid CSS!
Looking for the largest variety in template designs? Look no more. Never buy 1 theme again. Signups start at just $89 for access to all of our themes.
Send Us An Email
Please send us your questions and we will email you back as soon as we can. Product support questions should be posted in our support forums under the Help menu. Our staff will assist you from there.