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

Editing colours

Discussion in 'Styling and Customization Questions' started by Pereira, Jun 28, 2012.

  1. Pereira

    Pereira Well-Known Member

    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
     
  2. Pereira

    Pereira Well-Known Member

    Any ideas?
     
  3. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    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 likes this.
  4. Pereira

    Pereira Well-Known Member

    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. Mendo

    Mendo Member

    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 likes this.
  6. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

  7. Pereira

    Pereira Well-Known Member

    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
     
  8. Shelley

    Shelley Well-Known Member

    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 likes this.
  9. Pereira

    Pereira Well-Known Member

    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
     
  10. Mendo

    Mendo Member

    The class is sectionFooter.
     
  11. Shelley

    Shelley Well-Known Member

    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;
    }
     
    
     
  12. Pereira

    Pereira Well-Known Member

    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.
     
  13. Shelley

    Shelley Well-Known Member

    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.
     
  14. Pereira

    Pereira Well-Known Member

    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.
     
  15. Steve F

    Steve F Well-Known Member

    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 likes this.
  16. Pereira

    Pereira Well-Known Member

    It worked.

    Now for the text under moderation tools:

    snip2.PNG
     
  17. Steve F

    Steve F Well-Known Member

    Did you use both classes from my post above? Those should take care of any Menu footer.
     
    Pereira likes this.
  18. Pereira

    Pereira Well-Known Member

    I stupidly left out the closing bracket when editing it.:oops:

    Thanks for the help!
     
    Steve F likes this.
  19. Pereira

    Pereira Well-Known Member

    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
     
  20. Steve F

    Steve F Well-Known Member

    Style Properties -> Footer -> Link and Link Hover
     
    Pereira likes this.

Share This Page