• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

Editing colours

Pereira

Well-known member
#1
Where do I go to edit the colour of these areas:

The text and the drop-down colours here:

capture.PNG

The button and the border around it:

capture2.PNG

The text here:

Capture3.PNG

and here:
capture4.PNG
 

Jake Bunce

XenForo moderator
Staff member
#3
This post shows the navbar CSS:

http://xenforo.com/community/threads/change-the-color.8749/#post-120671

Some of them have style properties, others don't. In either case you can always duplicate that CSS into the EXTRA.css template and set any colors you want using your own CSS definitions. It's best to use EXTRA.css instead of modifying the other .css templates.

The "post new thread" button is this property:

Admin CP -> Appearance -> Style Properties -> Buttons -> Call-to-Action Button

The bottom of the Inbox menu is:

Admin CP -> Appearance -> Style Properties -> Building Blocks -> Section Footer
 

Pereira

Well-known member
#4
Thanks! I've got the thread button styled but please forgive me as I'm still not sure where to edit the other areas.

Is there any style property groups that only change the colour of the font in the following areas (i.e in a non-hover/non-selected state):

text.PNG

or does a template need to be edited?

Also I still haven't found were to edit the colour of the hover-state on the member tab:

tab selected.PNG
 
#5
Where it says 'Mark Forums Read' etc that is under

Appearance > Styles > Skin Name > Style Property Groups > Style Properties: Header and Navigation > Selected Tab Sub-Link

The hover state one is in the Popup Menus and I'm pretty sure the 'Home, Members, Help' is under Style Properties: Header and Navigation > Navigation Tab or one of those in that section. I must've set an option somewhere else that overrides that on my forum, looking at the element in Chrome it looks like about 5 different classes are affecting that area.
 

Pereira

Well-known member
#7
I have most of it done now but I still don't know where to edit the these borders:

snip.PNG

Also where do I edit the colour of the text here:

snip2.PNG
 

Shelley

Well-known member
#8
Unsure whether this is in the style properties but you can adjust the menus and place the following in extra.css templateadjust and inputting the values to your preference.

Code:
.Menu {
    border-color: #6CB2E4;
    border-right: 1px solid #6CB2E4;
    border-style: solid;
    border-width: 5px 1px 1px;
 
}
edit: You can adjust the menus by going into style properties >> popup menus >> menu
 

Pereira

Well-known member
#9
Unsure whether this is in the style properties but you can adjust the menus and place the following in extra.css templateadjust and inputting the values to your preference.

Code:
.Menu {
    border-color: #6CB2E4;
    border-right: 1px solid #6CB2E4;
    border-style: solid;
    border-width: 5px 1px 1px;
 
}
edit: You can adjust the menus by going into style properties >> popup menus >> menu
Yep, I'm a dumb. Should have checked there first. ><

I was looking for it in navigation.css :rolleyes:

Still looking for where to edit the text here tho:

View attachment 31131
 

Shelley

Well-known member
#11
Yep, I'm a dumb. Should have checked there first. ><

I was looking for it in navigation.css :rolleyes:

Still looking for where to edit the text here tho:

View attachment 31131
If you are only wanting to modify the conversation footer links try adding the following into extra and change colour to suit if your wanting it to appear in all menus replace #conversationMenu with .Menu

Code:
#ConversationsMenu .sectionFooter a{
    color: red !important;
}
 

Pereira

Well-known member
#12
sectionFooter controls the background of the text tho plus the same colour is inherited from @primaryLighish here too:

save.PNG

I need to change the colour of the text only, preferably through all menus.
 

Shelley

Well-known member
#13
I'm unsure what your wanting to do. Are you wanting all the section footer text modified/altered? if so add the following into EXTRA inputting your colour preference. Or you could do it via the style properties.

Code:
.sectionFooter, .sectionFooter a {
color: red !important;
}
I'm still unsure what your wanting to accomplish whether it's modify all the section footer text or not.
 

Pereira

Well-known member
#14
I tried editing the sectionFooter colour but it changed the background colour instead.

I only want to change the colour of the text in these areas which inherit the @primaryLightish colour:

save.PNG


snip2.PNG

and also the same text under the alerts drop-down menu.
 

Steve F

Well-known member
#15
This should work, some are links and some are not so you have to specifying.

Code:
.Menu .sectionFooter
{
    color: red;
}
 
.Menu .sectionFooter a
{
    color: red;
}
 

Pereira

Well-known member
#19
One last area....

Where do I change the colour of the text here at the bottom of the page (including the style selector on the opposite side):

capture.PNG