Forum Support

Shape 5
March 28, 2024, 08:09:36 AM *
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: Need help with coding  (Read 963 times)
jimbondox
Jr. Member
**
Offline Offline

Posts: 795



« on: October 23, 2015, 02:22:20 PM »

need coding help

I am screwing it up, I want to get 3 images with text in top module but some how I can't figure it out correctly

I have

Code:
<div class="s5_wrap">
<div class="overlay_outer three">
<div class="overlay_inner">
<div class="overlay_hover_outer"><img src="http://s510713255.onlinehome.us/images/icon-remote-start.png" width="150" height="125" /><br /><br />
<h3>Remote Start Your Car</h3>
<span>If your car is too cold in the Winter or too hot in the Summer, SmartStart is the perfect solution! Remote start your car from the comfort of your home or office.</span></div>
</div>
</div>
</div>
<div class="overlay_outer three">
<div class="overlay_inner">
<div class="overlay_hover_outer"><img src="http://s510713255.onlinehome.us/images/icon-remote-start.png" width="150" height="125" /><br /><br />
<h3>Remote Start Your Car</h3>
<span>If your car is too cold in the Winter or too hot in the Summer, SmartStart is the perfect solution! Remote start your car from the comfort of your home or office.</span></div>
</div>
</div>
<div class="overlay_outer three">
<div class="overlay_inner">
<div class="overlay_hover_outer"><img src="http://s510713255.onlinehome.us/images/icon-remote-start.png" width="150" height="125" /><br /><br />
<h3>Remote Start Your Car</h3>
<span>If your car is too cold in the Winter or too hot in the Summer, SmartStart is the perfect solution! Remote start your car from the comfort of your home or office.</span></div>
</div>
</div>

and want it to look like this : (Yes I know the text and images would be different and it the same w/o the image url. I just did that so the image will come up if you cut and paste)

Thanks



Logged
mikenicoll
Global Moderator
*****
Offline Offline

Posts: 20162



WWW
« Reply #1 on: October 24, 2015, 10:48:56 PM »

Hello,

Using your coding in the Eventfull Template all I needed to do was change the Heading color and padding values to get it to look good. Here is an example using the exact code you posted. By default the heading color was white on white and the images were too close so I added a 30px padding value to the outer area.

See attached.

Regards,
Logged

Mike Nicoll
------------
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
jimbondox
Jr. Member
**
Offline Offline

Posts: 795



« Reply #2 on: October 28, 2015, 08:19:37 PM »

yours didn't line up either. and the height width is too big

is it the template?
Logged
mikenicoll
Global Moderator
*****
Offline Offline

Posts: 20162



WWW
« Reply #3 on: October 28, 2015, 10:26:58 PM »

Hello,

Remove the width value below.

Code:
com_content.css - line 947

.overlay_hover_outer img {
    margin-bottom: 0;
    width: 100%;
}
Logged

Mike Nicoll
------------
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
jimbondox
Jr. Member
**
Offline Offline

Posts: 795



« Reply #4 on: October 29, 2015, 06:26:07 AM »

would this mess up other images and modules I have throughout the website? should i be using something else?
Logged
mikenicoll
Global Moderator
*****
Offline Offline

Posts: 20162



WWW
« Reply #5 on: October 30, 2015, 05:03:17 PM »

Hello,

That coding applies to all images using the class .overlay_hover_outer. You could add another selector before it to be more specific if such as the #s5_top_row1_1 which would then only apply to elements in that row using that class.

Regards,
Logged

Mike Nicoll
------------
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
jimbondox
Jr. Member
**
Offline Offline

Posts: 795



« Reply #6 on: November 02, 2015, 01:43:58 AM »

How would I do that?

Or is there an easy way without doing the overlay? or can I just copy the css and change it to something like .overlay_hover_outer_1 and use that for my need?
Logged
jonahh
Administrator
*****
Offline Offline

Posts: 23789



WWW
« Reply #7 on: November 02, 2015, 02:55:13 PM »

Hello,

If you do this I believe it should work:

Code:
#s5_top_row1_area1 .overlay_hover_outer img {
width:auto !important;}

Regards,
Logged

Jonah Hall
------------
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
jimbondox
Jr. Member
**
Offline Offline

Posts: 795



« Reply #8 on: November 05, 2015, 01:54:59 PM »

I did not want to change the coding so i came up with plan B with basic html
top row1-1. 1-2 and 1-3
LOL

Going Old School on ya's!
Logged
jonahh
Administrator
*****
Offline Offline

Posts: 23789



WWW
« Reply #9 on: November 06, 2015, 01:40:09 PM »

Oh ok haha yeah that works Smiley
Logged

Jonah Hall
------------
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
jimbondox
Jr. Member
**
Offline Offline

Posts: 795



« Reply #10 on: November 06, 2015, 03:05:48 PM »

Thanks again as always for the help
Logged
jonahh
Administrator
*****
Offline Offline

Posts: 23789



WWW
« Reply #11 on: November 09, 2015, 01:26:29 PM »

Sure thing, you are most welcome
Logged

Jonah Hall
------------
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.