-
Posts
-
Hi Guys,
I have accordians that are normally in dark red and you have provided me with a code snippet [quick css] to set it up correctly.
I want to be able to over-ride these rules on selected pages and make the accordians either pink or green [my theme default colour]. Can you tell me how to do this, please?
See https://lavitrineduvin.com/en/2015/11/20/clairette-du-languedoc/
for the page I want to change the top right accordion to green.
The code snippet you gave me for the normal accordians is:
p.toggler.activeTitle * {
color: white;
}
p.toggler.activeTitle {
background-color: #b02b2c;
}p.toggler strong {
color: #b02b2c;
}p.toggler.activeTitle:hover strong {
color: #b02b2c;
}Thanks!
B.
Hey belenenses!
Drag a codeblock element to your pages and add the code inside a style tag like so.
<style type = "text/css"> insert your CSS code here and change it's color </style>Regards,
ElliottHi Elliott,
Thanks for the info. I have done as you said but without the desired change happening.
See https://lavitrineduvin.com/en/2015/11/20/clairette-du-languedoc/
I also tried putting the code block into the accordion block itself, but still no change. What else is required?Site codes below.
Thanks!
B.
Hey!
Please turn on custom CSS field for ALB elements – http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/ and edit your element to give it a custom CSS class and then change your code to following one
.your-custom-class p.toggler.activeTitle * { color: white; } .your-custom-class p.toggler.activeTitle { background-color: #b02b2c; } .your-custom-class p.toggler strong { color: #b02b2c; } .your-custom-class p.toggler.activeTitle:hover strong { color: #b02b2c; }You can give each element a different class and adjust the code to apply the changes on certain elements
Regards,
YigitHey!
Well, you should as following – http://i.imgur.com/oPSXEkM.png but you do not. Please try de-activating all active plugins and check if that helps. If not, please try editing the file via FTP. You can find the file in wp-content/themes/enfold/functions.php
Regards,
YigitHi Yigit,
When I deactivate plug ins it becomes Appearance>Install Plug-ins
I cannot understand FTP. Can you do it for me, please?
Account info below.
Cheers!
B
Hi!
We are going to need FTP credentials. If you do not know them, please contact your hosting provider and they can give you. Then please post them here privately.
Cheers!
YigitHi
“…edit your element to give it a custom CSS class and then change your code to following one…”By ‘element’ do you mean the Code Block box or the Accordian box? I have given the CSS class a name [Toggler] and input the code you gave me into the Code Block. Nothing happens to the Accordian …
Please see:
https://lavitrineduvin.com/en/2015/11/23/picpoul-de-pinet/Thanks!
B
Hey!
Please edit your accordion and give it a custom class “your-custom-class” (or change it as needed, if you change it you would need to change all “.your-custom-class” in the code i posted to new class) and add the code to Quick CSS field in Enfold theme options > General Styling not into code block element
Best regards,
YigitHi Yigit,
That’s got it – many thanks!
One final alteration for now. Can you let me have the code that will add colored lines around the edges of the accordians so they show up more clearly on the page? In other words, red lines round the red accordians and green around the green?
Thanks!
B
Hi!
Can you please post a screenshot and show the changes you would like to make? You can upload your screenshots on imgur.com or Dropbox public folder and post the links here.
Cheers!
YigitHi Yigit
Please see this at
https://www.dropbox.com/s/ygvte8qrc9wfxwa/Accordians.jpg?dl=0
I want the lines to be very fine/thin AND NOT THICK like in the image.
Over to you?
Thanks.
B
Hi Yigit,
The green accordians have returned to being red. What have I done wrong?
Please see:
https://lavitrineduvin.com/en/2015/11/23/picpoul-de-pinet/
Thanks!
B
Hi!
I can see that you are using this code in your source code:
p.toggler strong { color: #b02b2c; }Change it to:
p.toggler strong { color: green; }Check your custom css code in Quick CSS field or custom.css if some code is causing this issue. Remove all code to check which one is causing it.
Regards,
AndyHi
Thanks, but…I have tried changing as you suggested but with no success.
Yigit seems to be the expert on this matter. Can he take a look at it, please?
Thanks,
B.
Hi!
Please use following code instead
.enable_toggles * { border-color: #719430 !important; }Regards,
Yigit
- You must be logged in to reply to this topic.