Changing the color of text in Box Titles - how?

  • I would like to change the color of the text which appears in a Box Title. Currently it is just Black.

    The Title Text (or "header text") of a Box would be more noticeable (and look better) if in color - perhaps a medium Blue or dark Red.


    I am assuming this change is done with CSS Code - Can anyone give me the CSS Code which would enable me to make this change?


    Please see the attachment for further detail of what I want to achieve:

  • Hello Ruff Seas,

    I'm a new member to WoltLabs, and I'm learning new things myself. This might be what you are looking for.


    Code
    .boxesSidebarLeft .boxTitle, .boxesSidebarRight .boxTitle {
    color: rgb(128, 0, 0);
    }

    The only source of knowledge is experience. - Albert Einstein

    Edited 2 times, last by Rich ().

  • There's a dedicated color value for them, look for the category wcfSidebarHeadline in the style editor's color palette.

    Alexander Ebert
    Senior Developer WoltLab® GmbH

  • Hello Ruff Seas,

    I'm a new member to WoltLabs, and I'm learning new things myself. This might be what you are looking for.


    Code
    .boxesSidebarLeft .boxTitle, .boxesSidebarRight .boxTitle {
    color: rgb(128, 0, 0);
    }

    Thanks for the reply!

    I will try this a little later - right now I am trying to figure out why I cannot get a positive result by following Alexander Ebert's reply in Post #3

  • There's a dedicated color value for them, look for the category wcfSidebarHeadline in the style editor's color palette.

    Well I did find the section you mentioned - and I made color changes to all three (3) in the drop down menu under the category wcfSidebarHeadline.

    And I clicked on "submit".


    However, there has been no change in the color of the Headline TEXT for my Boxes.

    Maybe this change only takes effect with NEWLY established Boxes - not the Boxes already established?:/

  • Thanks for the reply!

    I will try this a little later - right now I am trying to figure out why I cannot get a positive result by following Alexander Ebert's reply in Post #3

    You're welcome, and I did try Alexander Ebert's way and it did work for me, so I don't know what may be different with the way you are doing it.

    Something new I learn working with the color palette.

    The only source of knowledge is experience. - Albert Einstein

  • Well I did find the section you mentioned - and I made color changes to all three (3) in the drop down menu under the category wcfSidebarHeadline.

    And I clicked on "submit".


    However, there has been no change in the color of the Headline TEXT for my Boxes.

    Maybe this change only takes effect with NEWLY established Boxes - not the Boxes already established?:/

    Did you correct in style , the good style ?


    DO you have change in this style in advenced setting ? click on the screen to see if there something here and if there are something copy the setting and paste it here ?


    the color must change all the box new and old except if it is not the good style or if there are something hard coded

  • You're welcome, and I did try Alexander Ebert's way and it did work for me, so I don't know what may be different with the way you are doing it.

    Something new I learn working with the color palette.

    Hi Rich,

    Thanks for replying!

    See my answer to marcbelgique below.

    Did you correct in style , the good style ?


    DO you have change in this style in advenced setting ? click on the screen to see if there something here and if there are something copy the setting and paste it here ?


    the color must change all the box new and old except if it is not the good style or if there are something hard coded

    Thanks for your help - I made the changes in my "test" style but forgot to also make the change in the "style" that I am using "live" (i.e., the good style) as you worded it. And yes, I do see the change (addition) in the CSS Code - Advanced Settings.


    The color changes have taken effect on all Box Titles; I may possibly change (or modify) the color somewhat after looking at the Titles for awhile.

    I like the colored Titles - much better than the black color!

  • There's a dedicated color value for them, look for the category wcfSidebarHeadline in the style editor's color palette.

    Is there a way to change the font from "normal" to "BOLD" (in the CSS Code that provides for this color change) ?

    I tried replacing the word "normal" with Bold, but it does not make the change. I want to see if "BOLD" looks better than "Normal".

    Any suggestions?


    UPDATE:

    PLEASE REFER TO POST #12 and Post #13 below!

    Edited once, last by Ruff Seas: added sentence ().

  • Hello Ruff Seas,

    Alexander Ebert might have another option that is the right way, but after I put this in my CSS code with the box title, the font is bold.


    Code
    font-weight: bold;

    The only source of knowledge is experience. - Albert Einstein

    Edited once, last by Rich ().

  • if you made change in css , think about that


    Code
    /*===============change color of box ==================*/
    your code
    /*==================change to bold title box==========*/
    your code

    insert comment in the css to know a month ou six month later what's this code change ....

  • Hello Ruff Seas,

    Alexander Ebert might have another option that is the right way, but after I put this in my CSS code with the box title, the font is bold.


    Code
    font-weight: bold;

    It did not work for me.

    *And I also see in CSS that there is currently NO coding showing for wcf Sidebar Headline.

    However, the color changes were made - as the "black" Side Bar Headline color BLACK (original) is currently DARK BLUE - which is

    the color I changed it to in the "Color Pallete".


    The CSS Coding showing is the code change I implemented for the following:


    #content >header >div >h1{

    color:darkblue;

    font-weight: normal;

    }


    The code SHOWN ABOVE changes the TITLE TEXT for things like - FORUM, DASHBOARD, ARTICLES ....

    And changing the word "normal" to "bold" does change the font to BOLD - however I have it set to "normal" as bold font for the TITLE TEXT

    is too over-powering.


    *Rich, can you show me the CSS Code (Styles) which you have that relates to wcf Sidebar Headline ?

    Edited 2 times, last by Ruff Seas: minor change ().

  • if you made change in css , think about that


    Code
    /*===============change color of box ==================*/
    your code
    /*==================change to bold title box==========*/
    your code

    insert comment in the css to know a month ou six month later what's this code change ....

    Yes, but WHAT is the CODE - ("your code")

    When I change the wcfSideBarHeadline, I do not see any code appearing in the CSS reflective of that change.


    See my attachment ...

  • *Rich, can you show me the CSS Code (Styles) which you have that relates to wcf Sidebar Headline

    Would this CSS Code work???


    #content >sidebarheadline >div >h1{

    color: darkblue;

    font-weight: bold

    }

    Hello Ruff Seas,


    I don't know where you are exactly getting your coding that you have there in the styles. I did look around in mine, but can't see where the coding is specific to the sidebar. I have not explore everything yet. I was in the Color Palette section for the sidebar header, but don't see any CSS coding?


    This is how I work with the CSS coding at times. I was taught how to do this by a Administrator of a community forum I used to be a member of long ago. This can be done using a Firefox or Chrome browser. Not sure on other browsers. I'm still learning a lot about the CSS. I have to be careful at times when working with this, because if I go to change one thing that I want, that same change can apply to something else that I don't want.


    When it comes to figuring out what coding to use to make changes, let's say changing the color, size, etc, I will look on the net for it. I will type something like CSS Font color, and will get the css coding for it.


    I'm new at learning how to work with the WoltLab board in general, but getting there little by little :) Working with other forums has help me out a lot as well.


    Hope you can see the video, if not, I can always make screen shots. I can't explain things in technical terms, but can show a video :)

    The only source of knowledge is experience. - Albert Einstein

  • WOW! Rich, looks like you went to a lot of work to provide an answer for me.


    Appreciate you making the Video - I paused the video where the CSS Code is shown (near the end of the video) and I will try inserting that

    code soon (have to go for right now); will let you know how it turned out for me.


    I noticed that you are using the new 3.1 version. I plan to purchase the new version 1 Feb 2018. Currently I am using 3.0.11pl1.

  • No problem, I like creating the videos. I'm learning new things with that as well.

    The only source of knowledge is experience. - Albert Einstein

  • No problem, I like creating the videos. I'm learning new things with that as well.

    Well .......... the code did not work:(

    I checked it three times to make sure I had it typed into the CSS the same as you showed me .... no luck.


    To answer your question in Post #15:

    The Code I showed therewith is something I put together by looking at the code for changing Header Titles.

    I haven't tried it. This code doesn't work either.


    Looking at your Video again, I see that Version 3.1 has an additional line of options compared to 3.0:

    To wit: Global CSS and SCSS.

    Perhaps this is why the code works for you, but doesn't work for me?


    Well at least I got the color change (black TO dark blue) to work properly for the Side Bar Header Text -

    e.g., the directions Alexander Ebert gave in Post #3


    And I will copy the Video you gave me - maybe sometime in the future that will come in handy!:)

    Edited 4 times, last by Ruff Seas: updated additional info ().

  • Hi Ruff Seas,

    Sorry it did not work for you. The professionals need to come in now and help :) Hope you get it work out.

    The only source of knowledge is experience. - Albert Einstein