Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • #25171


    I am just working on a website and I tried to change the main title of all pages on that site.

    I tried the following code for the background (to make the stretched title background blue):

    .title_container { background-color: #1C75BC !important; }

    It all works so far. Is this code correct?

    How do I add a small thin line between the main title container background and the underlining “arrow” of the main menue? Because they are both blue now and the underlining merges with that container.

    And which code do I need to change the text color for the main title as well as the breadcrumbs?

    Thanks & Regards,




    Yes, that is correct.

    You change the border color of the header. Add this on your custom.css or Quick CSS

    .header_color div {
    border-color: red;

    For the breadcrumb text, use this

    .breadcrumb-trail span {
    color: blue;

    .breadcrumb-trail span a {
    color: blue !important;




    Hey Ismael,

    Thanks for your answers.

    It all works fine. I have just two last questions. Please check:

    1. Ok, I’ve changed the color of the “main title” to white with this code:

    .title_container h1 { color: white !important; }

    .title_container a { color: white !important; }

    Is this correct?

    2. The header border color change isn’t the thing we want to achieve. As you can see, the header and the line under the selected main menue topic are merged together. We want to separate it from each other using a thin white line (1px for example).

    Thanks & best regards,




    1) Yes

    2) Try following css code

    .title_container {
    border-top: 3px solid #fff;

    Best regards,



    Hi Peter,

    first, thanks for all the great help from all of you. :)

    Second, the border top css did work, but somehow it appears a little shadow with 3px width at this place when I add the border. How can I fix this?

    Thanks & best regard,




    Insert following code into the quick css field

    #header_main {
    border: none !important;

    It will remove the light grey border from the header div.

    Best regards,


Viewing 6 posts - 1 through 6 (of 6 total)

The topic ‘"Main Title" background color and font color’ is closed to new replies.