quesacco
Jr. Member
Offline
Posts: 51
|
|
« on: July 11, 2014, 03:43:20 PM » |
|
hello there,
I changed the color of some of the boxes but it removed the rotating effect that there is on mouse over. How can I activate that effect? That effect is still on the images where I did not change the color.
Thanks
Frederique
|
|
|
Logged
|
|
|
|
mikenicoll
|
|
« Reply #1 on: July 11, 2014, 08:29:11 PM » |
|
Hello,
Please post a URL
Also, check that the colors you changed didn't add extra <p> tags in the editor when you hit submit.
-Mike
|
|
|
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
|
|
|
quesacco
Jr. Member
Offline
Posts: 51
|
|
« Reply #2 on: July 13, 2014, 03:52:57 PM » |
|
Hello there,
This the link. It is still in development, so although you might recognize the BG image, it will be replaced shortly.
[url]http://www.quesacco.com/clients/ccafcb-j3-2014/index.php?lang=fr/url]
Regards,
Frederique
|
|
|
Logged
|
|
|
|
mikenicoll
|
|
« Reply #3 on: July 14, 2014, 09:36:46 PM » |
|
Hello, 1) You haven't implemented all the CSS for your new class names properly including things like hover states. You also have a typo in one of your class names where "vertex" is spelled "verte" 2) We don't provide support for custom coding new Tab Show classes into the Framework but I would advise you to look at the s5_info_slide.css file again and make sure any css pertaining to other classes such as .s5_is_css_6 .s5_is_slide_css is also applied to your new classes that you coded in. You are missing some css definitions on your new classes that are present for the ones already pre-programmed 3) You can also change the background color of pre-existing classes if this is easier by adjusting the already coded classes below: s5_info_slide.css.s5_is_css_6 .s5_is_slide_css { background-color: #000000; color: #ffffff; height: 100%; left: 0; margin-left: 0; margin-top: 0; opacity: 1; position: absolute; transform: translateY(-100%); width: 100%; } -Mike
|
|
|
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
|
|
|
quesacco
Jr. Member
Offline
Posts: 51
|
|
« Reply #4 on: July 16, 2014, 04:38:37 PM » |
|
Hello Mike,
Actually "verte" means green in French. Just my way to differentiate my codes from the original ones.
If you could just indicate which part does the rotation, I will take care of the rest. There are so many codes it is complicated to find the right ones.
Changing the color of that class does not seem to work.
Thanks
Regards,
Frederique
|
|
|
Logged
|
|
|
|
mikenicoll
|
|
« Reply #5 on: July 16, 2014, 09:24:29 PM » |
|
Hello, The following CSS from the Template.CSS file generates these effects. .s5_is_css_5 img, .s5_is_css_6 img { transition: all 300ms ease-in 0s; }
.s5_is_css_1 img, .s5_is_css_5 img, .s5_is_css_6 img { transform: scale(1) rotate(0deg); } .s5_is_css_1:hover img, .s5_is_css_5:hover img, .s5_is_css_6:hover img { transform: scale(1.1) rotate(-5deg); } -Mike
|
|
|
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
|
|
|
sparkiii
Jr. Member
Offline
Posts: 24
|
|
« Reply #6 on: August 06, 2014, 07:18:57 PM » |
|
Changing the color of that class does not seem to work.
Thanks
Regards,
Frederique
Hi, I have found this as well, did you work out where this BG color can be change ? Thanks Nat
|
|
|
Logged
|
|
|
|
mikenicoll
|
|
« Reply #7 on: August 07, 2014, 07:47:28 PM » |
|
Hello, You can change this at the following lines in the Template.CSS file: .s5_is_css_6 .s5_is_slide_css, .s5_is_css_5 .s5_is_slide_css:hover, .s5_is_css_5:hover .s5_is_slide_css { background-color: #272727 ! important; }
.s5_is_css_6 .s5_is_slide_css:hover, .s5_is_css_6:hover .s5_is_slide_css, .s5_is_css_6 .s5_is_slide_css:hover { background-color: #000000 ! important; }
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
|
|
|
grafichero
Jr. Member
Offline
Posts: 9
|
|
« Reply #8 on: August 19, 2014, 09:25:40 AM » |
|
Hi, i'm having a problem on the mouse over rotating and zooming effect: the image is bigger, as in the demo (i.e. mens glasses), but doesn't fit into the div, it comes out as in the first image of the attachment.
this is the code i added:
.s5_is_css_5 img, .s5_is_css_6 img { transition: all 300ms ease-in 0s; } .s5_is_css_5 img, .s5_is_css_6 img { transform: scale(1) rotate(0deg); -ms-transform:scale(1) rotate(0deg); /* IE 9 */ -webkit-transform:scale(1) rotate(0deg); /* safari chrome */ } .s5_is_css_5:hover img, .s5_is_css_6:hover img { -ms-transform:scale(1.1) rotate(-5deg); /* IE 9 */ -webkit-transform:scale(1.1) rotate(-5deg); /* safari chrome */ transform: scale(1.1) rotate(-5deg); }
I also have
.s5_is_css_5 .s5_is_slide_css { background-color: #000000; color: #ffffff; height: 100%; left: 0; margin-left: 0; margin-top: 0; opacity: 0.15; position: absolute; transform: translateY(-102%); width: 100%; } but if i change transform: translateY(-102%); to 100% it is like the image is too short, like in the second image.
I tried on the clean version of the template as well, but i get the same weird effect. Can you help me please? What's wrong with my css? Best regards, Rita
|
|
|
Logged
|
|
|
|
mikenicoll
|
|
« Reply #9 on: August 19, 2014, 09:23:29 PM » |
|
Hello Rita,
Could you post a URL so I can take a closer look?
|
|
|
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
|
|
|
|
mikenicoll
|
|
« Reply #11 on: August 20, 2014, 05:40:13 PM » |
|
Hello,
Would you be able to PM me back end Super User so I can look at the source of each module and its styling properties?
Thanks,
|
|
|
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
|
|
|
mikenicoll
|
|
« Reply #12 on: August 21, 2014, 05:33:35 PM » |
|
Hello, 1) Change the display to block; instead of inline-block; Template.CSS - Line 75
.module_round_box_outer img { display: block; line-height: 100%; } 2) The y-translate should be 100% instead of 102% in the info slide css file .s5_is_css_5 .s5_is_slide_css { transform: translateY(-100%);} 3) Your images need to be larger and make sure they are set to 100% width and height so they can fill the container size.
|
|
|
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
|
|
|
grafichero
Jr. Member
Offline
Posts: 9
|
|
« Reply #13 on: August 22, 2014, 01:49:34 AM » |
|
thank you very much it works!! The images are not right, i will change them with bigger ones. thank you again, have a nice day. Rita
|
|
|
Logged
|
|
|
|
mikenicoll
|
|
« Reply #14 on: August 22, 2014, 05:15:07 PM » |
|
NP
|
|
|
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
|
|
|
|