-
AuthorPosts
-
October 8, 2014 at 1:03 pm #332342
Wordpress: v4.0
Enfold: v3.0.1
Revolution Slider: v4.6.0As the subjects says, the settings done under Enfold Theme Options -> General Styling override a CSS e.g. for a button (e.g. border color) created in Revolution Slider. I do not know if this is the theme’s or plugin’s fault, I just know that the button is correctly shown in RevSlider’s preview, but it’s not correct after the page has been generated by WordPress.
October 8, 2014 at 1:15 pm #332356Hey Gilletti!
Can you post the link to your website please? Enfold is compatible with Revolution slider so that should not be the issue but still we would like to have a look
Best regards,
YigitOctober 8, 2014 at 2:41 pm #332428This reply has been marked as private.October 9, 2014 at 9:48 am #333062Please let me know if it’s a more complicated problem so that it’s not easy and quick to fix. Nevertheless this status would help me.
Regards, GillettiOctober 9, 2014 at 10:48 am #333096This reply has been marked as private.October 10, 2014 at 4:09 am #333605Hi!
Thank you for using Enfold.
The theme doesn’t override any of the button’s styling. Revo slider itself change the button styling. As you can see in this code, there are inline styling that overrides .buttontest styling. Try adding !important value on the button’s css properties.
<div class="tp-caption tp-fade tp-resizeme start" data-x="100" data-y="100" data-speed="300" data-start="500" data-easing="Power3.easeInOut" data-splitin="none" data-splitout="none" data-elementdelay="0.1" data-endelementdelay="0.1" data-endspeed="300" style="z-index: 2; white-space: nowrap; -webkit-transition: all 0s ease 0s; transition: all 0s ease 0s; min-height: 0px; min-width: 0px; line-height: 21px; border-width: 0px; margin: 0px; padding: 0px; letter-spacing: 0px; font-size: 13px; left: 411.5px; top: 100px; visibility: visible; opacity: 1; transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, -0.0025, 0, 0, 0, 1);"><a href="#" class="buttontest" style="-webkit-transition: all 0.2s ease-out 0s; transition: all 0.2s ease-out 0s; min-height: 0px; min-width: 0px; line-height: 50px; border-width: 5px; margin: 0px; padding: 0px; letter-spacing: 0px; font-size: 20px; max-width: 100px;">Buttontest</a> </div>
Best regards,
IsmaelOctober 10, 2014 at 9:13 am #333738Unfortunately the !important trick does not help perfectly, I tried it before. The button size and the text aligning is still not correct after doing so.
But honestly speaking I do not understand your answer because if I change e.g. the “Border colors” under Enfold Theme Options -> General Styling, then the button style changes too.
October 12, 2014 at 10:14 am #334469Hi!
Add the following to Quick CSS or custom.css to override the button style to your desired style.:
.buttontest { border: 5px solid #EDA933 !important; color:#FF7302 !important; }
Regards,
ArvishOctober 12, 2014 at 12:51 pm #334486Done, you can have a look if you wish.
But then the above written “The button size and the text aligning is still not correct after doing so” happens, that’s the problem.
Regards, GillettiOctober 13, 2014 at 8:06 am #334686Hey!
Please use this:
.buttontest { border: 5px solid #EDA933 !important; color: #FF7302 !important; max-width: none !important; line-height: 40px !important; }
Regards,
IsmaelOctober 13, 2014 at 10:02 am #334751Still not exactly the same and honestly speaking it is not user-friendly to spend so much time for each button. I think we can close this topic, it seems that Enfold and RevSlider are not 100% compatible regarding this area.
Thank you and best regards,
Gilletti -
AuthorPosts
- The topic ‘Enfold's "General Styling" overrides Revolution Slider's CSS’ is closed to new replies.