XF 1.3 How to make a fix background with gradient on the header

[Jericho M]

Hello there!

Need your help on how to make a fix background with gradient on the header like http://www.cnyrunning.com/

I really want to implement this on my forum but don't know where to edit the settings.

Hoping for your help and Thank you so much in advance..

Jericho M

 

[Jake Bunce]

Admin CP -> Appearance -> Style Properties -> General -> Body
> Miscellaneous

Add this property:

background-attachment: fixed;

That will cause the background image to remain fixed while the rest of the page scrolls normally. The image will be a gradient in your case.

For reference:

http://www.w3schools.com/cssref/pr_background-attachment.asp

 

[MapleOne]

How do I adjust the standard Xenforo header gradient to match that of the footer?

The footer gradient looks quite nice and would be nice to have on the header as well.

 

[Deleted member 184953]

@MapleOne I will try something like that, assuming you are running XF 2...

.p-header {
    background: linear-gradient(180deg, xf-intensify(@xf-chromeBg, 12%), @xf-chromeBg);
}

 

[MapleOne]

@MapleOne I will try something like that, assuming you are running XF 2...

.p-header {
    background: linear-gradient(180deg, xf-intensify(@xf-chromeBg, 12%), @xf-chromeBg);
}

Oooooh, how marvelous that looks.

Thank you so very much for that

 

[MapleOne]

On mobile I use column #1 as a text box

Column #2, #3 & #4 they are pretty spaced out.

Is there ant way to add column #4 into the same line as column #2 & #3?

It seems a waste to me to have the entire column #4 take up a new line with a big space beside it when there is so much free space beside column #2 & #3.

 

[Deleted member 184953]

On which device the footer is displayed like that ?
On a iPhone 12 Pro it seems to be well displayed for example, In this case 3 columns on the same line would be a bit narrow, right?

 

[Deleted member 184953]

Please ask question concerning Footer Pro in the add-on thread.

 

[MapleOne]

On which device the footer is displayed like that ?

On a Pixel 7 pro and most of my families devices. Seems a little wasted space, maybe some css could fix it?

I don't think it would be tight even on your device.

@Brogan - Sorry, accidentally posted this in wrong topic, could you move the posts?

 

[Deleted member 184953]

may some css could fix it?

In footer-pro.less template,
FIND

.fp-blockColumn {
    width: 50%;
    min-width: 50%;
    margin-left: 0;
    &.asText {
        min-width: 100%;
    }
}

REPLACE BY

.fp-blockColumn {
    width: 33%;
    min-width: 33%;
    margin-left: 0;
    &.asText {
        min-width: 100%;
    }
}

 

[MapleOne]

Yes that is so much nice, looks great