Header widgets

[POPFIZZ]

How do I gain more control of the look and feel of my header widget? When the user drops down the blue tab in the right corner, I would like the height of the white box to be smaller, contol of the text if possible, and also I would like the text to show up on the right-hand side near where the blue tab vs. the left, as that’s more intuitive and quicker for the end-user.

[Prasant]

Hello @POPFIZZ,

Thanks for asking.

You can add following CSS under X > Theme Options > CSS to change style widgetbar:

.x-widgetbar-inner {
    padding: 1% 0; /* will change height of widget bar */
}

.x-widgetbar-inner p {/* will change color, font size of text and shift the text to right side */
font-size: 15px; 
color: #ddd; 
float: right;
 
}

.x-widgetbar-inner p a {
color: #864848; /* will change link color */
}

I have found the proper CSS code selector using the Chrome browser Developer Toolbar:

https://www.youtube.com/watch?v=wcFnnxfA70g

For the CSS code itself, I suggest that you get started with this tutorial:

https://www.youtube.com/watch?v=yfoY53QXEnI

Thanks.

[POPFIZZ]

Thank you - this worked.

[friech]

You’re more than welcome, glad we could help.

Cheers!