Forum Discussion

memerylane's avatar
memerylane
Expert
14 years ago

Foreground color restrections?

Hi all,

 

We're setting up our community, and I'm running into what seem to be some restrictions on the color schemes.

 

I want our foreground color to be a shade of black (or perhaps white) and the #1 arrow sections on the image below to be the shade of red seen on #2. I'd like #2 to be a gray/off-white shade like #1 is.

 

However, I don't seem to be able to do do this. Namely, because the #1 area is set to be 20% of the foreground color.

 

Any thoughts on how to get around this? I noticed that on Best Buy, for instance, they have the foreground color on those module title but the color behind it is different, i.e. not 20% of the text color.


adacomm.JPG
  • KaelaC's avatar
    KaelaC
    14 years ago

    Ah, I see.  By default the background of the lia-panel-heading-bar div is 20% of the foreground color.  However, like Jeff said, you can always overwrite that default with css.  

     

    #lia-body .lia-content .lia-panel .lia-panel-heading-bar {background color: #A10022; color:#FFFFFF;}

#lia-body .lia-content table.lia-list-wide th, #lia-body .lia-content table.lia-list-wide th a {
    color: #000000;
}

#lia-body .lia-content table.lia-list-wide th {
    background-color: #EAEAEA;
}

     

    Add this to the CSS tab in your skin will switch the color scheme of the heading bars and sub headings.  I added a quick screen shot so you can see what it would look like.


    switch-header.png
  • JeffS's avatar
    JeffS
    14 years ago

    Hi Matt,

     

    This should do the trick for the area in question:

     

    #lia-body .lia-content .lia-browser-category-list .lia-browser-category-heading {color: #FFFFFF;}

12 Replies

Sort By
  • JeffS's avatar
    JeffS
    Lithium Alumni (Retired)
    14 years ago

    Hi Matt,

     

    The foreground determines the color for #1, however the midtone color is what you're looking at with #2. Check out this guide for details on skin properties: http://lithosphere.lithium.com/t5/Documentation-TKB/Launch-Skin-Color-Settings-Guide/ta-p/6401

     

    If you want to style the heading bar to red specifically without having to change the value added for your foreground, you could use the following CSS:

     

    #lia-body .lia-content .lia-panel .lia-panel-heading-bar {background-color:#CC0000;}

    This would set the heading bar to #CC0000 on all pages. If you're looking for something more specific/granular, it would just need to be scoped down to the class or ID you're working with.

     

    Hope this helps. :)

  • memerylane's avatar
    memerylane
    Expert
    14 years ago

    Our midtone is already set to the red color, though. It's not changing that module, only #2 of what I showed.

     

    I'm attaching a screenshot of the skin colors to prove I'm not crazy :)

     

    It looks like #1 is inheriting the Selection Color on Community Base Skin for some reason.


    colors.JPG
  • JeffS's avatar
    JeffS
    Lithium Alumni (Retired)
    14 years ago

    Hi Matt,

     

    To better illustrate how this works, take a look at the PDF attachment in this post: http://lithosphere.lithium.com/t5/Documentation-TKB/Launch-Skin-Color-Settings-Guide/ta-p/6401

     

    Once you've downloaded and opened the attachment, scroll down to page 17. You should notice that the foreground value is responsible for a number of areas. What is happening here is that the heading-bar is taking a 20% lighter shade of the current hex value entered for the foreground.

     

    Using the CSS I provided in my previous post would override this, so you're able to keep the foreground color set at #333333 without changing the color in other areas that the foreground pulls color to.

     

    Please let me know if I need to clarify anything.

  • KaelaC's avatar
    KaelaC
    Lithium Alumni (Retired)
    14 years ago

    Ah, I see.  By default the background of the lia-panel-heading-bar div is 20% of the foreground color.  However, like Jeff said, you can always overwrite that default with css.  

     

    #lia-body .lia-content .lia-panel .lia-panel-heading-bar {background color: #A10022; color:#FFFFFF;}

#lia-body .lia-content table.lia-list-wide th, #lia-body .lia-content table.lia-list-wide th a {
    color: #000000;
}

#lia-body .lia-content table.lia-list-wide th {
    background-color: #EAEAEA;
}

     

    Add this to the CSS tab in your skin will switch the color scheme of the heading bars and sub headings.  I added a quick screen shot so you can see what it would look like.


    switch-header.png
  • MoniqueL's avatar
    MoniqueL
    Lithium Alumni (Retired)
    14 years ago

    I just wanted to add another note about setting/customizing skins. What Kaela and Jeff said should help you solve your dilemma, also this solution works well when you base your custom skin with the "Community  Base Skin" that you appear to be using judging from the screen shot attached.

     

    Note that when using one of the many other base skins lithium offers (White UI, Castle Rock UI, Pacifica UI, et. al) that this css may need some tweaking as each "base"  skin you can select varies slightly in style, but they retain the same classes and image file names so overriding them with your preferred customizations would be relatively the same.

  • memerylane's avatar
    memerylane
    Expert
    14 years ago

    Thank you all very much! We'll use this information moving forward to make adjustments.

  • memerylane's avatar
    memerylane
    Expert
    14 years ago

    Hmm. Almost there, but not quite apparently.

     

    Most of the elements took when I inserted the aforementioned CSS code, but the module background is still off-white.

     

    I've attached a picture. I imagine there's just one more setting I need to change or override?


    offwhite.jpg
  • JeffS's avatar
    JeffS
    Lithium Alumni (Retired)
    14 years ago

    Looks like just a small syntax error (missing a dash in background-color). Try changing:

     

    #lia-body .lia-content .lia-panel .lia-panel-heading-bar {background color: #A10022; color:#FFFFFF;}

     

    to this

     

    #lia-body .lia-content .lia-panel .lia-panel-heading-bar {background-color: #A10022; color:#FFFFFF;}
  • memerylane's avatar
    memerylane
    Expert
    14 years ago

    Another question/issue on this has come up:

     

    Everything looks good on the Community page, but when I get to the Category page, the text for the Category's name appears in gray rather than white. I've attached a screenshot.

     

    I'm sure it's an easy fix, but would someone mind sharing the CSS with me to remedy this?


    categorytext.jpg