Forum Support

 
Advanced Search


[1]

Offline jimbondox
Free Member
Posts: 795
Posted 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

Offline mikenicoll
Free Member
Posts: 20162 WWW
Posted 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

Offline jimbondox
Free Member
Posts: 795
Posted 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

Offline mikenicoll
Free Member
Posts: 20162 WWW
Posted 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

Offline jimbondox
Free Member
Posts: 795
Posted 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

Offline mikenicoll
Free Member
Posts: 20162 WWW
Posted 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

Offline jimbondox
Free Member
Posts: 795
Posted 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

Offline jonahh
Free Member
Posts: 23789 WWW
Posted 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

Offline jimbondox
Free Member
Posts: 795
Posted 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

Offline jonahh
Free Member
Posts: 23789 WWW
Posted on: November 06, 2015, 01:40:09 PM

Oh ok haha yeah that works Smiley
Logged

Offline jimbondox
Free Member
Posts: 795
Posted on: November 06, 2015, 03:05:48 PM

Thanks again as always for the help
Logged

Offline jonahh
Free Member
Posts: 23789 WWW
Posted on: November 09, 2015, 01:26:29 PM

Sure thing, you are most welcome
Logged
[1]

Jump to:  


Powered by SMF | SMF © 2013, Simple Machines
Joomla Bridge by JoomlaHacks.com
Page created in 0.031 seconds with 23 queries.
Need some help getting your site up and running? Be sure to check out our tutorials area, post on the forum or hire us
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.