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

How to change color?

Discussion in 'Styling and Customization Questions' started by BenForum, Sep 8, 2012.

  1. BenForum

    BenForum Active Member

    how to change color of the following forum area

    Capture.JPG
     
  2. kkm323

    kkm323 Well-Known Member

    in (node_list.css)
    .nodeList .categoryForumNodeInfo,
    .nodeList .forumNodeInfo,
    .nodeList .pageNodeInfo,
    .nodeList .linkNodeInfo
    {
    @property "primaryContent";
    background-color: @contentBackground;
    padding: 10px;
    border-bottom: 1px solid @primaryLighterStill;
    @property "/primaryContent";

    padding: 0;
    }

    or add the following in extra.css

    .nodeList .categoryForumNodeInfo,
    .nodeList .forumNodeInfo,
    .nodeList .pageNodeInfo,
    .nodeList .linkNodeInfo
    {
    background-color: white !important;

    }
     
    BenForum likes this.
  3. BenForum

    BenForum Active Member

    thanks . can i get little more help from you

    i want to change color of navbar
     
  4. kkm323

    kkm323 Well-Known Member

    Admin
    ---->appearance
    -------->style properties
    ------------->Header and Navigation
     
    BenForum likes this.
  5. BenForum

    BenForum Active Member

    this only changes main area not the background how do i change it

    Capture.JPG as you can see background is still white
     
  6. kkm323

    kkm323 Well-Known Member

    sorry your arrow pointed somewhere else edit


    ---->appearance
    -------->style properties
    ------------->Building Blocks
    ------------------>Section Main
     
    BenForum likes this.
  7. BenForum

    BenForum Active Member

    thanks . also how do i change hover state color

    Capture.JPG
     
  8. kkm323

    kkm323 Well-Known Member

    if you are talking about selected tabs edit this:
    ---->appearance
    -------->style properties
    ------------->Header and Navigation
    ------------------>Selected Tab (edit background)

    if you want to edit the hover state
    place this code with your color in extra.css

    Code:
    .navTabs .navTab.PopupClosed:hover
            {
                background-color: red !important;
            }
     
    cmeinck and BenForum like this.
  9. BenForum

    BenForum Active Member

    for better understanding i want to change the hover state of logout button
     
  10. kkm323

    kkm323 Well-Known Member

    you have to write an independent class to do that.
     
    BenForum likes this.
  11. BenForum

    BenForum Active Member

    now that will put a pause on me as i don't know how to do that
     
  12. kkm323

    kkm323 Well-Known Member

    in "navigation_visitor_tab"
    search this line
    Code:
    <li class="navTab PopupClosed"><a href="{xen:link logout}" class="navLink visitorTabItem OverlayTrigger">{xen:phrase log_out}</a></li>
    replace to
    Code:
        <li class="navTab PopupClosed"><a href="{xen:link logout}" class="klogouthover navLink visitorTabItem OverlayTrigger">{xen:phrase log_out}</a></li>
    then add this in extra.css

    Code:
    .klogouthover:hover
            {
                background-color: black !important;
            }
     
  13. Morgain

    Morgain Well-Known Member

    How do I change the colour of the link text on the main navbar tabs?
    navbar.png
     
  14. M@rc

    M@rc Well-Known Member

    Add the contents below in your EXTRA.css :
    Code:
    .navTabs .navTab.PopupClosed .navLink {
    color: #000000;
    }
    Change the color to whatever you like.
     
  15. greenchicken

    greenchicken Member

    How do I change the color where the red x is?

    [​IMG]
     
  16. Shelley

    Shelley Well-Known Member

    Unsure whether you wanted to change all the text in the navbar, visitortabs or just the inbox link. I'm assuming you want to change the colour of the inbox text which you can do by pasting the following in EXTRA.CSS templatechanging the colour to your preference.

    Code:
    .navTabs .navTab.inbox .navLink {
    color: red; }
    
     
    Jake Bunce likes this.

Share This Page