Homepage Layout with CSS3 Hover Effects - 8 Variations

[creyesx6]

Never mind, I was able to figure it out.
I needed to update the original "tpl_main_page" file instead of replacing the whole file with the one included in the module.

For those interested:
I copied <?php require($template->get_template_dir('tpl_homepage_hover_effects_1.php',DIR_WS_TEMPLATE, $current_page_base,'common'). '/tpl_homepage_hover_effects_1.php');?> and placed it under the "contentMainWrapperb" (I am using cherryzen template). I then updated stylesheet.css by adding margin-top:-400px on the #navColumnOne and #navColumnTwo and it worked for me.

Never mind, this actually did not work out as I hoped. It added the hover effects to all pages. I would like it to display on the home page only but with the left and right columns on both sides of it. Still looking for help.

[creyesx6]

Never mind, this actually did not work out as I hoped. It added the hover effects to all pages. I would like it to display on the home page only but with the left and right columns on both sides of it. Still looking for help.

I have been racking my brain on this. Any help would be greatly appreciated. Trying to keep hover effect between column 1 and column 2. Columns are falling below. link to view is www.casablancafurnitureinc.com. Thank you.

[picaflor-azul]

Never mind, I was able to figure it out.
I needed to update the original "tpl_main_page" file instead of replacing the whole file with the one included in the module.

For those interested:
I copied <?php require($template->get_template_dir('tpl_homepage_hover_effects_1.php',DIR_WS_TEMPLATE, $current_page_base,'common'). '/tpl_homepage_hover_effects_1.php');?> and placed it under the "contentMainWrapperb" (I am using cherryzen template). I then updated stylesheet.css by adding margin-top:-400px on the #navColumnOne and #navColumnTwo and it worked for me.

I am happy that you figured it out and posted your solution ;-)

Thanks,

Anne

[picaflor-azul]

I have been racking my brain on this. Any help would be greatly appreciated. Trying to keep hover effect between column 1 and column 2. Columns are falling below. link to view is www.casablancafurnitureinc.com. Thank you.

The best way to do this is to take the code for the tpl_homepage_hover_effects_1.php (or whichever version you are using) and add it to the define_main_page.php. Remove the tpl_homepage_hover_effects_1.php and then remove the call for the tpl_homepage_hover_effects_1.php in the tpl_main_page.php file. You will also need to do extensive resizing and positioning of the layout in the xhtml and css since the width will be much less than the original.


Thanks,

Anne

[creyesx6]

The best way to do this is to take the code for the tpl_homepage_hover_effects_1.php (or whichever version you are using) and add it to the define_main_page.php. Remove the tpl_homepage_hover_effects_1.php and then remove the call for the tpl_homepage_hover_effects_1.php in the tpl_main_page.php file. You will also need to do extensive resizing and positioning of the layout in the xhtml and css since the width will be much less than the original.


Thanks,

Anne

Thank you for your response and I made your suggested changes, however, the only problem I am having is the hover effects displays on all other pages as well. I am trying to have it display on the home page only instead of all other pages including product info page. Thank you.

[picaflor-azul]

Thank you for your response and I made your suggested changes, however, the only problem I am having is the hover effects displays on all other pages as well. I am trying to have it display on the home page only instead of all other pages including product info page. Thank you.

If you move the script to the define_main_page.php it will only show on the the home page.

Thanks,

Anne

[simon1066]

I'm unable to get the hover effects (effect #5) working on my install of IE9. First thought was I've broken the template, but none of the effects at:

http://www.picaflor-azul.com/free-demos/hover_effects/index.html

work at all, producing a simple image switch rather than any fancy effects.

Oddly, the effects work fine in FF when switching user agents to any version of IE. I wonder if someone could check the above link in an actual IE install to see if whether it's just me.

[picaflor-azul]

I'm unable to get the hover effects (effect #5) working on my install of IE9. First thought was I've broken the template, but none of the effects at:

http://www.picaflor-azul.com/free-demos/hover_effects/index.html

work at all, producing a simple image switch rather than any fancy effects.

Oddly, the effects work fine in FF when switching user agents to any version of IE. I wonder if someone could check the above link in an actual IE install to see if whether it's just me.

See the description in the readme.html file:

Cross Browser Compatible with modern browsers that support CSS3 properties. Older browsers will not show the CSS3 hover effects

You will only see the cool effects in modern browsers that support the CSS3 properties in use.

Thanks,

Anne

[mario75]

Hy, great module, Thank you Anne for all your great work.

I installed this module together with pure_css_mega_menu_module, in order to transform a little bit the front page of the store. That turned out great, except that I can not get rid of the extra line from the main page at the bottom of the hover efects module, before the footer.
- I cleaned out all from the main page using Define Pages Editor - .../includes/languages/english/html_includes/ashley_pink/define_main_page.php no blanks, no lines remained (noted that on the main page was the Easy slider from the Ashley Pink template)
- I turned off all the boxes from Index Listing
- I tried to edit the stylesheet.css on line 124 - padding to 0 resolves that only on main page, but on contact us and about us page the footer cuts the buttons on the bottom of the page.
I'm left with no idea, maybe someone could help me with this problem.
The site is only a test site at http://www.natural.harmonyhandmade.ro/
Also, if I implemented this mod, do I have to delete any other file(s) because the easy slider is no longer present on main page, in order to eliminate unuseful and maybe conflictual files.
Thanks.

[mario75]

Also, when I try to validate CSS, I get some errors of this kind:

.view-first img Property transition doesn't exist in CSS level 2.1 but exists in [css3] : all 0.2s linear
.....
.view-first h2 Property opacity doesn't exist in CSS level 2.1 but exists in [css3] : 0
....
.view-first p Property transform doesn't exist in CSS level 2.1 but exists in [css3] : translateY(100px)
...
.view Property box-shadow doesn't exist in CSS level 2.1 but exists in [css3] : 1px 1px 2px #e6e6e6

http://jigsaw.w3.org/css-validator/v...Dindex&lang=en
What should I do?
Thanks in advance