CSS Styling FAQ


#1

What CSS can I use to recolor specifically the question text on FAQs? Or is there an even easier way?


#2

What do you mean exactly?
Creating FAQs should have the same text editor as if you were posting or creating a page.


#3

FAQs are grabbed from the FAQ posts (not really sure how else to describe them). Since the FAQ “posts” are created in the same way any other blog post would be created they inherit the same traits as that post type. I would like to specifically change the font color of the question part of the FAQ, but because the question falls into the title section, I cannot edit the color.

Hope this helps better explain it!


#4

OK… Let me go create a FAQ page so I can help you solve this…

When creating FAQ’s, you have two styling options they are simple and fancy. Depending on which you use, you need to use the appropriate chunk of CSS.

What I have done is to add a couple of lines of customize css and told it to over-ride the theme’s default by using the !important attribute - adjust the hex colors to suit your site.

To make this work, the code needs to be added to - Theme Options > Advanced > Custom CSS

If choosing Simple then use this code:

/* -- default state-- start -- */
.mk-toggle.simple-style .mk-toggle-title { 
background-color: #cccccc !important;  
font-color: #000000; 
font-weight: bold;
}

/* -- hover state -- start -- */
.mk-toggle.simple-style .mk-toggle-title:hover { 
background-color: #000000 !important;  
font-color: #000000; 
font-weight: bold; 
}

CSS code for the alternative Fancy style.

/* -- default state-- start -- */
.mk-toggle.fancy-style .mk-toggle-title { 
background-color: #99ccff !important;  
font-color: #000000; 
font-weight: bold;
}

/* -- hover state -- start -- */
.mk-toggle.fancy-style .mk-toggle-title:hover { 
background-color: #99ffff !important;  
font-color: #000000; 
font-weight: bold; 
}

Hope this helps you Michael.

[extra code added to cover both style settings]


#5

Thank you for the help! However, the code didn’t work. You can find the FAQ section in question near the bottom of the page here: http://0d7.3a7.myftpupload.com/


#6

Sorry my bad.

In the FAQ settings, it needs to be set to “Fancy” style instead of “Simple”, otherwise it’s just black and white.


#7

Based on your page, you can add the following code in custom CSS:

#faq-list-69 .mk-toggle.simple-style .mk-toggle-title {
	color: red !important;
}

#8

My apologies for the late reply, but thank you for the help! It worked!


#9

Hey all - So this code works but I am trying to style the “?” icon to be brighter and the text inside the FAQ container to be larger.

Can someone point out how to reference the “?” and also how to call out the p #text so I cna change the font color / and size?

Thanks!