XF 2.3 Gradient background in logo area

[Oliver Jones]

Hi,

I'd like to have a gradient background in the logo area, just like it is in the footer area of this forum. Ideally with exactly the same colours - but how do I do this?

Any assistance would be greatly appreciated - I'm not at all experienced in modifying styles, but I'd really like a gradient background for the logo area with the dark variation of the default style.

 

[Old Nick]

Basically it's this kind of code:

background: linear-gradient(0deg, @xf-contentAccentBg, xf-diminish(@xf-contentAccentBg, 5%));

You can change 0deg to change the direction of the gradient (ex: 180deg) and you can change @xf-contentAccentBg by another XF colour variable or by a HTML colour code like rgb(0,0,22)

Add the code to the Extra field.

 

[Old Nick]

You can have some fun here:

CSS Gradient — Generator, Maker, and Background

As a free css gradient generator tool, this website lets you create a colorful gradient background for your website, blog, or social media profile.

cssgradient.io

 

[Old Nick]

Ideally with exactly the same colours

Probably this code:

background: linear-gradient(0deg, xf-intensify(@xf-chromeBg, 12%), @xf-chromeBg);

 

[Oliver Jones]

Thank you very much, @Old Nick. It looks really awesome! For anyone else interested in the subject, this is what I did, and what it looks like under both style variations:

Dark theme:


Light theme:


Under Appearance > Styles and Templates > Style Properties > Default style - Style Properties > Header and Navigation, scroll down: