Customising the sytle of the classic protect element

[blake1marc]

Please can you let me know how to change the color of the following parts of the classic protect element:
Login heading Colour
Background Colour
Username Field Colour
Password Field Colour

Many thanks in advance,

Marc

[Prasant]

Hello Marc,

Thanks for asking.

You can add following CSS under X > Theme Options > CSS:

.h-protect {
    color: #ddd;
}

.x-protect {
    background-color: #a99494;
}

.x-protect label {
    color: #ddd;
}

.x-protect input[type="text"], .x-protect input[type="password"] {
    color: #ddd;
}

You can change the color code as per requirement.

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

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

Please note that providing support for custom codes (like CSS changes) falls outside the scope of support we can offer. In case of any issues with the layout because of custom codes we won’t be able to provide support.

Thanks.