[Willem Van Oort]

Hi there,

Can you let me know the css to change the colour of the category bar dropdown to black. Also is there a way of adding text just above this: “Pick your Category”?

Can you also give me the CSS to highlight specific category entries – eg with background colour?

http://www.gaminginholland.com/connections-directory-test

Many thanks,
Dan

Attachments:

You must be logged in to view attached files.

[Steven Zahm]

@ Willem Van Oort

re: Can you let me know the css to change the colour of the category bar dropdown to black.

The enhanced category drop down is actually a third party library. Changing it style is pretty difficult. But this will change the face of it black.

.chosen-container-single .chosen-single {
    background: black !important;
    border: black !important;
}

.chosen-container-single .chosen-default {
    color: white !important;
}

The default coloring does fit very nicely already into the theme. I’d suggest leaving it as is.

re: is there a way of adding text just above this: “Pick your Category”?

Sure, edit the page and type it above the shortcode.

**re: **

Can you also give me the CSS to highlight specific category entries – eg with background colour?

Sure, this CSS will make the back ground color of all entries in the “Bars” category pink:

#cn-cmap div.bars div.cn-entry {
    background: pink !important;
}

Tweak as desired.

Hope that helps!

[Willem Van Oort]

Many thanks, that’s great. The only thing is that when you choose a category from the category bar, the text turns dark grey which is unreadable. What’s the code for that?

Also is it possible to put “Pick your Category” just above the category bar so that is doesn’t create more space at the top?

Thanks

[Steven Zahm]

@ Willem Van Oort

re; The only thing is that when you choose a category from the category bar, the text turns dark grey which is unreadable. What’s the code for that?

Try this:

.chosen-container-single .chosen-single {
    color: white !important;
}

re: Also is it possible to put “Pick your Category” just above the category bar so that is doesn’t create more space at the top?

Not really. One option would be to customize the CSS used to display paragraphs to remove the margin-after. This would affect the whole site. Another option would be to edit the page, switch the editor to the “Text” tab and add an inline list to the paragraph to remove the margin bottom. Something like this might work:

<p style="margin-bottom: 0;">Pick your Category</p>

Hope this helps!

[Author]

Posts