[SNIPPET] Time of day Random header images

[Steve]

@cisco007
@Stoker

Random header that are set to show at certain times during the day, background images randomly change on load/refresh. (the more images the better tbh)

These instructions are for prosilver only.

upload this folder "headers" to prosilver/theme/images/***

timed_headers.zip

Now open colors.css
find:

Code: Select all

.headerbar {
	color: #FFFFFF;
}

.headerbar, .forumbg {
	background-color: #12A3EB;
	background-image: -webkit-linear-gradient(top, #6ACEFF 0%, #0076B1 2px, #12A3EB 92px, #12A3EB 100%);
	background-image: linear-gradient(to bottom, #6ACEFF 0%,#0076B1 2px,#12A3EB 92px,#12A3EB 100%);
	background-repeat: repeat-x;
}

replace with:

Code: Select all

.headerbar {
	color: #FFFFFF;
	background-image: url("./images/headers/rotate.php");		
}

.forumbg {
	background-color: #12A3EB;
	background-image: -webkit-linear-gradient(top, #6ACEFF 0%, #0076B1 2px, #12A3EB 92px, #12A3EB 100%);
	background-image: linear-gradient(to bottom, #6ACEFF 0%,#0076B1 2px,#12A3EB 92px,#12A3EB 100%);
	background-repeat: repeat-x;
}

You can: add more images into the header folders, use the script for any other CSS component.

MORNING = 7 am >
MIDDAY = 12pm >
AFTERNOON = 17pm <
EVENING = 21pm >
NIGHT = 12am > 7pm

header images in time folders are the same you need to make your own

[Fred Rimbert]

For the modification of the colours.css file to be taken into account, it is imperative to change the hash value of the corresponding line in the stylesheet.css file by prosilver

[Fred Rimbert]

replace with:

Code: Select all

.headerbar {
	color: #FFFFFF;
	background-image: url("./images/headers/rotate.php");		
}

.forumbg {
	background-color: #12A3EB;
	background-image: -webkit-linear-gradient(top, #6ACEFF 0%, #0076B1 2px, #12A3EB 92px, #12A3EB 100%);
	background-image: linear-gradient(to bottom, #6ACEFF 0%,#0076B1 2px,#12A3EB 92px,#12A3EB 100%);
	background-repeat: repeat-x;
}

If you want a responsive image header replace by this

Code: Select all

.headerbar {
    color: #FFFFFF;
    height: 90px; /* or what you want */
    background-image: url("./images/headers/rotate.php");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    position: relative;
} 

.forumbg {
	background-color: #12A3EB;
	background-image: -webkit-linear-gradient(top, #6ACEFF 0%, #0076B1 2px, #12A3EB 92px, #12A3EB 100%);
	background-image: linear-gradient(to bottom, #6ACEFF 0%,#0076B1 2px,#12A3EB 92px,#12A3EB 100%);
	background-repeat: repeat-x;
}

[Steve]

memberlist.php?mode=group&g=16