-
Posts
-
Hi Guys,
I’m hoping that one of you kind people will be able to tell me if it is possible to change specifically the ‘Elegant’ font size used within the Accordion Element.
The website is: https://www.pritchardsgarage.co.uk and under the image of the crashed car you will see that I have used an Accordion Element to produce a drop down for a hidden contact form.
The idea is that I want to use the Accordion as a type of ‘Call to Action’ but only show the form if visitors click on it.
Therefore I need to increase the font size of the Accordion Element to around 26 (like ‘The Vehicle Repair Experts’ in the banner above it.Im hoping this is an easy task to do, possibly within the Quick CSS area, but I cannot figure out what I need to change to just change that font size and no others.
Hope to hear from you with some appreciated guidance.
Best regards
MattHey Matt,
Thank you for the inquiry.
There are special fields in the Accordion element’s Advanced > Developer Settings panel where you can apply class names or a unique ID to the element. You can then use these class names or ID to create custom css rules in order to adjust the style of that specific element. Please check the following documentation for more info.
// https://kriesi.at/documentation/enfold/add-custom-css/
This should also help.
// https://css-tricks.com/how-css-selectors-work/
Best regards,
IsmaelThanks for your help Ismael.
Using your guidance which makes perfect sense, however I have tried this but I think that I might be missing something or doing something wrong as it does not work.
Currently the font size in the Accordion text is 17px and I would like to increase that to 26pxFollowing the instructions you suggested on: https://kriesi.at/documentation/enfold/add-custom-css
Within the Accordion element on the page, I have opened the element Advanced > Developer options and have added my Custom CSS Class name as: ‘accordion-font-size’
Next, within the Enfold theme Options > General Styling > Quick CSS, I have added the following line
.accordion-font-size { font-size: 26px; }Is there something else that I need to add or change to get this CSS code to work?
Any further assistance that you can give me would be greatly appreciated.Best regards
MattHi Matt,
The class is added to the parent element, but you are looking to target a paragraph within the parent element. You would have to target it this way instead:
.accordion-font-size .toggler { font-size: 26px; }Please try that out.
Best regards,
RikardHi Rikard
Thank you for your reply and assistance.
Although the code you suggested makes perfect sense to me, when I tried adding it in the: Enfold theme Options > General Styling > Quick CSS, It does not change the size of the font.
I have tested this on Safari and Chrome browsers, emptied the cache etc but the font size remains unchanged.
Would you have any other ideas that I can try?
Thanks again and kind regardsMatt
Hi,
Thank you for the update.
We could try a more specific selector. Please try to replace the code with the following.
div .togglecontainer.accordion-font-size p.toggler { font-size: 30px; }You may need to toggle or temporarily disable the Enfold > Performance > File Compression settings after adding the code.
Best regards,
IsmaelThat works perfectly Ismael,
Thank you so much for extending the time to figure this out and let me know the code to use.
The more specific selector worked, first time, and I didn’t need to toggle or disable the file compression, it just worked.I think that I have learnt something new with Enfold today, and I’m really pleased I have the solution too. So thanks again for your perseverance with this.
Best regards
Matt
- The topic ‘Changing the 'Elegant' font size in the Accordion Element’ is closed to new replies.