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;}
  • 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.

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