Changing Color of Main Menu and Comment Boxes « Support Forum | Kriesi.at

Support Forum » Choices

Changing Color of Main Menu and Comment Boxes

8 posts from 3 voices

Started 4 months ago by Fire_Safety_Sales
Latest reply from Ismael
This topic is closed
This topic is not a support question

Tags:

No tags yet.

Fire_Safety_Sales
Member

Hi guys,

I was wondering if there was a way to change the color of the main menu so that everything looked white rather than just whatever someone's mouse was currently hovered over. Also, I was asked to find a way to change the comment/text boxes in the dark theme of Choices to a lighter color so it was easier to see the outline. One last area I was asked to change was a widget that lists the latest blog posts. The post show up in dark gray, and then they are highlighted in red when the mouse hovers over them.

My site can be found at http://www.firesafetysales.com

Sorry if this is a lot. I appreciate the help.

Posted 4 months ago #
Fire_Safety_Sales
Member

Also hoping you could tell me how to change the gray color of the titles in my tabbed content.

Thanks!

Posted 4 months ago #
Nick
Moderator
Hi,

1) here is the css to change color of the tabbed content, just pick a color you like
```
.main_color .sidebar_tab, .main_color .tabcontainer .tab {
color: red;
}
```
2) Way to change the color of the main menu so that everything looked white

Here are the codes for the colors of various background and texts of menus and submenus. if you can provide an illustration of what color you want where, i can better help but the code below will let you change to white which is #FFF
```
.header_color .main_menu ul:first-child > li a:hover, .header_color .main_menu ul:first-child > li.current-menu-item > a, .header_color .main_menu ul:first-child > li.current_page_item > a, .header_color .main_menu ul:first-child > li.active-parent-item > a {
color: #888888;
}

.header_color .main_menu ul, .header_color .main_menu .menu ul li a, .header_color .pointer_arrow_wrap .pointer_arrow {
background-color: #111111;
color: #888888;
}

.header_color .main_menu ul, .header_color .main_menu .menu ul li a, .header_color .pointer_arrow_wrap .pointer_arrow {
background-color: #111111;
color: #888888;
}
```
3) Change the comment/text boxes to see the outline.

Please provide a url to the page where this is located

4) Change widget dark gray, and then they are highlighted in red when the mouse hovers over them.

Please provide a url to where this is located

Thanks,

Nick
Posted 4 months ago #
Fire_Safety_Sales
Member

Hi Nick,

Thanks for the help.

1) I was talking about when I use the tab shortcode as well within a page, the headline text of other tabs are dark gray if they are not highlighted. You can see what I'm talking about here: http://www.firesafetysales.com/home/stat-x-first-responder/ , under the additional information section.

3) http://www.firesafetysales.com/home/contact-us/ -- Looking to make the boxes on this page lighter

4) http://www.firesafetysales.com/home/contact-us/ -- Same link, but you'll see on the right where it says "Our Blog" that the headlines below are in gray and then turn to red. Wanted to know if I could make these appear white instead of gray.

Thanks again.

Posted 4 months ago #
Fire_Safety_Sales
Member

Please ignore my number 1... code was perfect for what I was looking for. Thanks

Posted 4 months ago #

Nick
Moderator

Hi,

#3 There you have the border, background, and text colors for all the different input boxes, just change them to what you like.

.main_color .input-text, .main_color input[type="text"], .main_color input[type="input"], .main_color input[type="password"], .main_color input[type="email"], .main_color textarea, .main_color select {
border-color: #444444;
background-color: #222222;
color: #888888;
}

The code below is for the submit button on the page for #3

.main_color .button:hover, .main_color .ajax_controlls a:hover, .main_color #submit:hover, .main_color .big_button:hover, .main_color .contentSlideControlls a:hover, .main_color input[type="submit"]:hover {
background-color: #eb3b3b;
color: #111111;
border-color: #eb3b3b;
}

#4 - this is for the first word 'Our' in 'Our Blog'

.main_color .widget_first {
color: #a81010;
}

This is for the links you wanted white below Our Blog .. #FFF is white...

#top .main_color .sidebar a {
color: #FFF !important;
}

Please add all this to the bottom of your custom.css file.

Thanks,

Nick

Posted 4 months ago #

Fire_Safety_Sales
Member

Exactly what I was looking for, thanks for the help.

Posted 4 months ago #
Ismael
Moderator

Hi Fire_Safety_Sales,

Glad that Nick helped you. :)

Cheers,
Ismael

Posted 4 months ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.

Kriesi.at - Wordpress Themes and HTML Templates

Changing Color of Main Menu and Comment Boxes

Topic Closed

Support Forum usage - Please read

Check out some of our WordPress Themes

Blog Categories

Latest Themes

Pages

About me…