Hi Gerd,
Just to clarify- are you looking to change the size of the title or do you want to change the selector itself?
If you just want to change the size and make it smaller this can be done easily using the Custom CSS in the FAQ settings, for example:
h4 {
font-size: 14px;
line-height: 16px;
}
Thread Starter
wpgerd
(@wpgerd)
Hello EtoileWebDesign,
sorry, I’m Beginner with CSS. I understand, with this code I change font-size and line-height of h4 overall.
I only want to change the class .ufaq-faq-category-title and .ufaq-faq-title. So I set
.ufaq-faq-category-title {
font-size: 24px;
}
.ufaq-faq-title {
font-size: 15px;
}
.ewd-ufaq-post-margin-symbol
font-size: 15px;
}
Possible I misunderstand something. Can you help? For me as beginner it would be easier to set categorie or title to h3, h4 or h5. but I understand, the way with the Custom CSS field is much more flexible. But you have to use the right commands 😉
Gerd
Hi Gerd,
Would you mind posting a link to your page so we can try and work this out for you? If you wanted to change to h3, h4, or h5 you would need to edit the HTML code itself which would be more complicated and this can probably be done using just the Custom CSS which would mean you woulnd’t have to re-edit the code after updates.
Thanks!
Thread Starter
wpgerd
(@wpgerd)
Hello EtoileWebDesign,
I try to test this on http://beta.tradenavigator.ch/faq/
Insert the code I wrote above in Custom CSS of Ultimate FAQ
Gerd
Hey Gerd,
I see what you mean, there seems to be some sort of conflict in the CSS, it’s likely that element has inherited some css from a parent container or a default style of the browser. We’ll take a look at this and see if we can figure out what’s going on.
In the meantime, for the .ufaq-faq-title and .ewd-ufaq-post-margin-symbol selectors you may want to try adding an a in front to designate it is a link and !important to see if it resolves the conflict:
a.ufaq-faq-title{
font-size: 15px !important;
}
a.ewd-ufaq-post-margin-symbol
font-size: 15px !important;
}
Thanks for getting back to us, we’ll see what we can do.
Hey EtoileWedDesign
i cant manage to make my css work i dont know why.. I was want a really simple thing, to make my font size smaller, but when i insert the css in the faq settings it doesnt work.
Any change you know whats wrong?
Thanks in advance!
Hi Maria,
is there a specific element’s font-size you want to make smaller or is it the ensemble? If it is the ensemble play around with the value here in the Custom CSS box:
.ufaq-faq-list {
font-size: 0.8em;
}
If it is a specific element, let us know.
Hey EtoileWebDesign,
it worked great thanks, i was writing something wrong so it wasn’t working… thanks a lot!
Just one more question… if i want to organize the faq with titles between them, like by groups, how can i display for example just 5 first, then a title, and then 5 more? Is it with “categories”? And if yes, can you give me an example like you did above? Hope i was specific enough.
Thanks again!!
Hi Maria,
we are glad to know that it now works.
You have guessed right for the categories. You would have to create your categories (titles) first.
For example, you can create the categories “Animals” and “Plants”. Then when you “Add new” FAQ, you can put in which category it belongs to. So, the FAQ “What is a cat?” can go under “Animals”, and the FAQ “What is a palm tree?” can go under “Plants”.
Hope this clarifies everything.
Regards,
Hey EtoileWebDesign,
thank you, you were of great help!! Can you just tell last css i need please, if i want a bigger space between the question and the answer? just to add a bit of space between them, they are to close to each other. To change the ensamble, not a specific element!
Thanks in advance again!!
Hi Maria,
Simply play around with the value of the Custom CSS code below:
.ewd-ufaq-post-margin {
margin-bottom: 2em;
}
For future CSS questions, I suggest you right click and click “Inspect element” on the element of the page you wish to make a change on to find its CSS class. The developer tool of your browser should open, and when you hover over the HTML code, it will highlight the specific element of the website that is coded on that HTML line. You should be able to play around with the CSS on the same window! 🙂
Also, if you have struggle understanding CSS, a great tool to learn is the link below: w3schools CSS
Hope you enjoy customizing your website!
Regards,
