jimbondox
Jr. Member
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 <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
|
|
« 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
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
|
|
« Reply #3 on: 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%; }
|
|
|
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
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
|
|
« 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
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
|
|
« Reply #7 on: 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,
|
|
|
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
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
|
|
« Reply #9 on: November 06, 2015, 01:40:09 PM » |
|
Oh ok haha yeah that works
|
|
|
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
Posts: 795
|
|
« Reply #10 on: November 06, 2015, 03:05:48 PM » |
|
Thanks again as always for the help
|
|
|
Logged
|
|
|
|
jonahh
|
|
« 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
|
|
|
|