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 https://www.casablancafurnitureinc.com. Thank you.

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.

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

Thanks,

Anne

creyesx6:

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 https://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

picaflor-azul:

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.

creyesx6:

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

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.

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.

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

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.

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/validator?profile=css21&warning=0&uri=http%3A%2F%2Fwww.natural.harmonyhandmade.ro%2Findex.php%3Fmain_page%3Dindex&lang=en
What should I do?
Thanks in advance

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.

I see that you have solved your problem ;)

It is a good idea to remove any usused files.

Thanks,

Anne

mario75:

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

http://jigsaw.w3.org/css-validator/validator?profile=css21&warning=0&uri=http%3A%2F%2Fwww.natural.harmonyhandmade.ro%2Findex.php%3Fmain_page%3Dindex&lang=en
What should I do?
Thanks in advance

Yes, this module uses css3 properties. See the readme:

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

Thanks,

Anne

For some reason, after I upload the files to the includes folder I still do not see the template in the template manager. I am pretty sure I am doing something wrong in this step here: > 3. Find the directory for the style that you want to install. Rename the YOUR_TEMPLATE directory to your template override directory name:

includes/languages/english/extra_definitions/YOUR_TEMPLATE

includes/templates/YOUR_TEMPLATE

4. If you already have the includes/templates/YOUR_TEMPLATE/common/tpl_main_page.php file in your template override directory, do not upload that file. Use your favorite file merging utility to merge the template package file with your file.

I had given it its own name, and most recently actually renamed it YOUR_TEMPLATE to see if that worked.

This template is absolutely beautiful and we would really like to use it, if we can figure out haw to get it up!

Thank-you

soledesignstudios:

For some reason, after I upload the files to the includes folder I still do not see the template in the template manager. I am pretty sure I am doing something wrong in this step here:

I had given it its own name, and most recently actually renamed it YOUR_TEMPLATE to see if that worked.

This template is absolutely beautiful and we would really like to use it, if we can figure out haw to get it up!

Thank-you

If you read the readme.html file you will see that there is a manual edit.

Thanks,

Anne

picaflor-azul:

I see that you have solved your problem ;)
I have solved my problem only by turning footer background color to transparent, because on white background the buttons from other pages apeared cut at the bottom by the footer background. If I move the footer lower looks unprety on the main page. So this was the best workaround I could think of.

picaflor-azul:

It is a good idea to remove any usused files.
Thanks,
Anne
I usualy upload my test files on the test store and only after all is good I upload them on the active store. I hope I don't have any extra files on the live store, but how can I be sure? Which are the files of the easy slider tht I can safely remove from live store?

picaflor-azul:

Yes, this module uses css3 properties. See the readme:
Thanks,
Anne
I felt stupid the moment after I posted the question, because that was the moment I've read the full title ...CSS3...
The store looks great and works perfect on every browser except IE7 which doesn't recognize the transparent background color, but white background color doesn't hurt the image a lot.
The question still remains: what to do to still validate css with no such errors? How do I convert the CSS2 to CSS3? Or is it a stupid question? :blush:
Thank you!

mario75:

I have solved my problem only by turning footer background color to transparent, because on white background the buttons from other pages apeared cut at the bottom by the footer background. If I move the footer lower looks unprety on the main page. So this was the best workaround I could think of.

I usualy upload my test files on the test store and only after all is good I upload them on the active store. I hope I don't have any extra files on the live store, but how can I be sure? Which are the files of the easy slider tht I can safely remove from live store?

I felt stupid the moment after I posted the question, because that was the moment I've read the full title ...CSS3...
The store looks great and works perfect on every browser except IE7 which doesn't recognize the transparent background color, but white background color doesn't hurt the image a lot.
The question still remains: what to do to still validate css with no such errors? How do I convert the CSS2 to CSS3? Or is it a stupid question? :blush:
Thank you!

I would recommend using google to do research on your CSS question. You can set the validator to show vendor extensions as warnings and not errors if it makes you feel better.

Thanks,

Anne

Hi,
I installed the module. it works fine on PC. however, if I browse with my mobile phone, the pictures are not clickable anymore. any solution?
many thx!

caborela:

Hi,
I installed the module. it works fine on PC. however, if I browse with my mobile phone, the pictures are not clickable anymore. any solution?
many thx!

This module is not optimized for use on a mobile device. Responsive functionality may be added to the package in the future.

Thanks,

Anne

Is there any way have the plug in under the main page code?

1fastdeal.com

I want to have the countdown timer above the plugin

jenkins2212:

Is there any way have the plug in under the main page code?

1fastdeal.com

I want to have the countdown timer above the plugin

You can remove the call for the tpl_homepage_hover_effects_number.php file and add it anywhere you like.

Thanks,

Anne