: Need help with coding
: jimbondox 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

<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

: Re: Need help with coding
: mikenicoll 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,

: Re: Need help with coding
: jimbondox October 28, 2015, 08:19:37 PM

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

is it the template?

: Re: Need help with coding
: mikenicoll October 28, 2015, 10:26:58 PM

Hello,

Remove the width value below.

com_content.css - line 947

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

: Re: Need help with coding
: jimbondox 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?

: Re: Need help with coding
: mikenicoll 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,

: Re: Need help with coding
: jimbondox 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?

: Re: Need help with coding
: jonahh November 02, 2015, 02:55:13 PM

Hello,

If you do this I believe it should work:

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

Regards,

: Re: Need help with coding
: jimbondox 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!

: Re: Need help with coding
: jonahh November 06, 2015, 01:40:09 PM

Oh ok haha yeah that works :)

: Re: Need help with coding
: jimbondox November 06, 2015, 03:05:48 PM

Thanks again as always for the help

: Re: Need help with coding
: jonahh November 09, 2015, 01:26:29 PM

Sure thing, you are most welcome

Shape 5

Joomla Templates => Eventfull - Club => : jimbondox October 23, 2015, 02:22:20 PM