Forum Support

Shape 5
March 28, 2024, 06:18:04 PM *
Welcome, Guest. Please login or register.

Login with username, password and session length
News: Shape 5 Forum
 
   Home   Help Search Login Register  
Pages: [1]
  Print  
Author Topic: rotating effect of boxes on homepage  (Read 955 times)
quesacco
Jr. Member
**
Offline 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
Global Moderator
*****
Offline Offline

Posts: 20162



WWW
« 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 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
Global Moderator
*****
Offline Offline

Posts: 20162



WWW
« 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

Code:
.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 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
Global Moderator
*****
Offline Offline

Posts: 20162



WWW
« Reply #5 on: July 16, 2014, 09:24:29 PM »

Hello,

The following CSS from the Template.CSS file generates these effects.

Code:
.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 Offline

Posts: 24



« Reply #6 on: August 06, 2014, 07:18:57 PM »

Quote
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
Global Moderator
*****
Offline Offline

Posts: 20162



WWW
« Reply #7 on: August 07, 2014, 07:47:28 PM »

Hello,

You can change this at the following lines in the Template.CSS file:
Code:
.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 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
Global Moderator
*****
Offline Offline

Posts: 20162



WWW
« 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
grafichero
Jr. Member
**
Offline Offline

Posts: 9



« Reply #10 on: August 20, 2014, 02:05:29 AM »

Here is the link
http://www.webhostingservice.it
Thank you Smiley
Logged
mikenicoll
Global Moderator
*****
Offline Offline

Posts: 20162



WWW
« 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
Global Moderator
*****
Offline Offline

Posts: 20162



WWW
« Reply #12 on: August 21, 2014, 05:33:35 PM »

Hello,

1) Change the display to block; instead of inline-block;

Code:
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

Code:
.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 Offline

Posts: 9



« Reply #13 on: August 22, 2014, 01:49:34 AM »

 Cheesy 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
Global Moderator
*****
Offline Offline

Posts: 20162



WWW
« Reply #14 on: August 22, 2014, 05:15:07 PM »

NP Smiley
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
Pages: [1]
  Print  
 
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF | SMF © 2013, Simple Machines
Joomla Bridge by JoomlaHacks.com
Valid XHTML 1.0! Valid CSS!
Looking for the largest variety in template designs? Look no more. Never buy 1 theme again. Signups start at just $89 for access to all of our themes.
Send Us An Email
Please send us your questions and we will email you back as soon as we can. Product support questions should be posted in our support forums under the Help menu. Our staff will assist you from there.