Color of the line under the Title

Hello,

could you tell me if I can change the color of the line under the Title.

Can I also change the length of this line?

Could this line be different color for each widget?

Regards,
Ilona

Hello,

You can change all theme colors from theme options, but in case that you only want to change underlines you can use custom css code below:

.panel-grid-cell .widget-title:after {
    background-color: #000000;
    width: 100px;
}

For slider underline, use following css:

.text-slider .maintitle:after {
    background-color: #000000;
    width: 50%;
}

You can set width in px or % and off course set color values to your liking. Custom css code can be added from Appearance > Customize > Additional CSS field.

Best Regards!

Hello,

thank you very much. It works for color and for width, but now it is not on the middle of the screen. Can you help me one more time?

And could you tell me if I can have in one widget green line and in another white? In my first example - green and in my second screenshot - white.


Regards,
Ilona

Hi again,

Yes, default width is 50px and for centering it it also have negative margin of -25px so if you have set it to 100px set negative margin to -50px in order to move element to the left for half of its width like this:

.panel-grid-cell .widget-title:after {
    background-color: #BDCCA5;
    width: 100px;
    margin-left: -50px;
}

In order to have different colors, you need to inspect specific section in order to find its unique ID - example https://www.screencast.com/t/Dj8WiGM2kpgH . Then use that id and previously provided classes to apply different styling just for that section:

#pg-71-0 .panel-grid-cell .widget-title:after {
    background-color: red;
}

With that code only that section will have red color https://www.screencast.com/t/8AmDb4DiiZi .

Using same approach you can style lines in other sections differently.

Best Regards!

Sorry,

Forgot to mention that in order to inspect elements and sections on page, it is best to use Chrome browser and to use web inspector - keyboard F12.

It works! thank you!

Regards,
Ilona