[CSS] Head/Base Images

[Shrike]

Plugin coming at some point soon to make editing/compatibility easier

This will allow you to add head/base/side images to the containers on a page (typically categories on the main page). The code uses the multiple background images CSS feature which means it should be fast. If a browser doesn't support multiple backgrounds then this code automatically won't do anything so as not to cause problems. By default, it adds the images to board lists (ie. categories) and info centers. There are instructions later in this post for adding them to other areas.

This MUST go in a Theme's stylesheet (not in <style> tags in the footers or the CSS part of a plugin) for the variables to work. All instructions needed are in the comment at the top. If you only want to use some images (ie. head and base images but no side ones) then leave the variables for those as they are.

/* Start of head/base/side images code - Do not delete rows unless you know how LESS variables work.
For the image urls, replace the| @empty; |text with| url("http://example.com/image.png");
For the heights, replace| 0; |with the appropriate dimension and unit, example| 500px;
Do the same for the side margin; this is how much space on each side should be left to show the side image.
If the width seems incorrect, check for any plugins (such as sidebars) that are redefining the forum or wrapper width and try that value.
The code expects that the forum/wrapper width is the same as the width of the head/base images.
*/

@container_head_image_url: @empty;
@container_side_image_url: @empty;
@container_base_image_url: @empty;

@container_head_image_height: 0;
@container_base_image_height: 0;

@container_side_image_margin: 0;

/* Do not edit past here if you aren't sure how. */
html.multiplebgs .container.boards, html.multiplebgs .container.stats {
background-image: @container_head_image_url, @container_base_image_url, @container_side_image_url;
background-position: left top, left bottom, left @container_head_image_height;
background-repeat: repeat-x, repeat-x, repeat-y;
padding: @container_head_image_height 0 @container_base_image_height;
}

html.multiplebgs .container.boards > div, html.multiplebgs .container.stats > div {
margin: 0 @container_side_image_margin;
}
/* END of head/base/side image code */

To add head/base images to other areas

SPOILER: Click to show

Find these two lines in the second part of the code:

1. html.multiplebgs .container.boards, html.multiplebgs .container.stats {
2. html.multiplebgs .container.boards > div, html.multiplebgs .container.stats > div {

These are called CSS selectors. At the moment there are two for each CSS "rule", one for the board lists and another for the info centers. To add the images to other areas, we need to create a new selector. The selectors for each rule follow this format:

1. html.multiplebgs .container.class
2. html.multiplebgs .container.class > div

For each new area you want to add, copy the above lines and replace class with the appropriate class name from this list.

SPOILER: Click to show

Name of area	class name
Legend	legend
Shoutbox	shoutbox
Thread list	threads
Thread, Thread Summary	posts
Quick Reply	quick-reply
Search	search
Member List	members
View Profile	show-user
Edit Profile	edit-user
Inbox/Outbox/etc	conversations
Conversation (PM), Conversation Summary	messages
Reply	new-area
Related Topics and Stories	gravity-related-topics
Custom Page modules	pbcpe-widget
Board list (in code already)	boards
Info centers (in code already)	stats

If you find any others, let me know

When you've got the extra selectors, paste them after the corresponding lines in the original code, making sure to add a comma immediately after the last letter of the previous one. Example:

1. html.multiplebgs .container.boards, html.multiplebgs .container.stats, html.multiplebgs .container.shoutbox {
2. html.multiplebgs .container.boards > div, html.multiplebgs .container.stats > div, html.multiplebgs .container.shoutbox > div {

To add head/base images EVERYWHERE
This will add head/base images anywhere you see a title bar (on the default theme, the blue bars)

SPOILER: Click to show

Find these two lines in the second part of the code:

1. html.multiplebgs .container.boards, html.multiplebgs .container.stats {
2. html.multiplebgs .container.boards > div, html.multiplebgs .container.stats > div {

Replace them with these:

1. html.multiplebgs .container {
2. html.multiplebgs .container > div {

[Stinky666]

Absolutely fantastic and so easy to use. Thank you.
I completely forgot about Conversations and the reply page So thanks for reminding me of those.

Edit:
One you have forgot, or I am just blind. .stats for the Info Center.

[Shrike]

Apr 14, 2013 6:50:07 GMT -8 Stinky666 said:

Absolutely fantastic and so easy to use. Thank you.
I completely forgot about Conversations and the reply page So thanks for reminding me of those.

Edit:
One you have forgot, or I am just blind. .stats for the Info Center.

.stats is included in the code already so I didn't want to cause confusion by listing it twice. I'll add it with a note that it should already be in the code.

[Stinky666]

Apr 14, 2013 6:54:17 GMT -8 Shrike said:

Apr 14, 2013 6:50:07 GMT -8 Stinky666 said:

Absolutely fantastic and so easy to use. Thank you.
I completely forgot about Conversations and the reply page So thanks for reminding me of those.

Edit:
One you have forgot, or I am just blind. .stats for the Info Center.

.stats is included in the code already so I didn't want to cause confusion by listing it twice. I'll add it with a note that it should already be in the code.

Ahh right ok. My bad. I honestly went straight for the classes and didn't read the whole post, because I have it already lol.

[Stinky666]

Umm . Shrike!!
I have different "head" images for different area's of my forum. For example I use
this for my Info Center: exdat.net/v2/images/topheadicentervi1.png

this for my posts: exdat.net/v2/images/topheadpost.png

And this for everywhere else: exdat.net/v2/edv2stuff/tophead.jpg

I have added the code/css 3 times to do this. I have removed the appropriate parts frome ach area (for example: .stats from the first 2, .posts from the third and first). Yet EVERYWHERE is showing the "info center" head image

---

/* Head And Base */

@container_head_image_url: url("http://exdat.net/v2/edv2stuff/tophead.jpg");
@container_side_image_url: url("http://i49./f284/prophetfx/tryagain.jpg");
@container_base_image_url: url("http://i49./f284/prophetfx/edv2menu/bottomfoot.jpg");
@container_head_image_height: 43px;
@container_base_image_height: 29px;
@container_side_image_margin: 13px;

/* Do not edit past here if you aren't sure how. */
html.multiplebgs .container.boards, html.multiplebgs .container.threads, html.multiplebgs .container.shoutbox, html.multiplebgs .container.quick-reply, html.multiplebgs .container.gravity-related-topics, html.multiplebgs .container.legend {
background-image: @container_head_image_url, @container_base_image_url, @container_side_image_url;
padding: @container_head_image_height 0 @container_base_image_height;
background-position: left top, left bottom, left @container_head_image_height;
background-repeat: repeat-x, repeat-x, repeat-y;
}

html.multiplebgs .container.boards > div, html.multiplebgs .container.threads > div, html.multiplebgs .container.shoutbox > div, html.multiplebgs .container.quick-reply > div, html.multiplebgs .container.gravity-related-topics > div, html.multiplebgs .container.legend > div {margin: 0 @container_side_image_margin;}
/* End of head/base/side image code. */

/* Head And Base - POSTS */

@container_head_image_url: url("http://exdat.net/v2/images/topheadpost.png");
@container_side_image_url: url("http://i49./f284/prophetfx/tryagain.jpg");
@container_base_image_url: url("http://i49./f284/prophetfx/edv2menu/bottomfoot.jpg");
@container_head_image_height: 43px;
@container_base_image_height: 29px;
@container_side_image_margin: 13px;

/* Do not edit past here if you aren't sure how. */
html.multiplebgs .container.posts, html.multiplebgs .container.quick-reply {
background-image: @container_head_image_url, @container_base_image_url, @container_side_image_url;
padding: @container_head_image_height 0 @container_base_image_height;
background-position: left top, left bottom, left @container_head_image_height;
background-repeat: repeat-x, repeat-x, repeat-y;
}

html.multiplebgs .container.posts > div, html.multiplebgs .container.quick-reply > div {margin: 0 @container_side_image_margin;}
/* End of head/base/side image code. */

/* Head And Base - INFO CENTER */

@container_head_image_url: url("http://exdat.net/v2/images/topheadicentervi1.png");
@container_side_image_url: url("http://i49./f284/prophetfx/tryagain.jpg");
@container_base_image_url: url("http://i49./f284/prophetfx/edv2menu/bottomfoot.jpg");
@container_head_image_height: 43px;
@container_base_image_height: 29px;
@container_side_image_margin: 13px;

/* Do not edit past here if you aren't sure how. */
html.multiplebgs .container.stats {
background-image: @container_head_image_url, @container_base_image_url, @container_side_image_url;
padding: @container_head_image_height 0 @container_base_image_height;
background-position: left top, left bottom, left @container_head_image_height;
background-repeat: repeat-x, repeat-x, repeat-y;
}

html.multiplebgs .container.stats > div {margin: 0 @container_side_image_margin;}
/* End of head/base/side image code. */


[billyt]

could we see an example of what the code does...I can't seem to get it to work I did everything you said and no image shows anywhere.this does work with the new v5 board?

[Stinky666]

Apr 15, 2013 9:31:37 GMT -8 billyt said:

could we see an example of what the code does...I can't seem to get it to work I did everything you said and no image shows anywhere.this does work with the new v5 board?

Example of mine: exdat.freeforums.net/

If it isn't working, can you paste the code you are using (with the parts you have edited).

[billyt]

here is what I did and edited, I added this code to the bottom of the css style sheet I am just looking to add the image to the bottom..

/* Start of head/base/side images code - Do not delete rows unless you know how LESS variables work.
For the image urls, replace the| @empty; |text with| url("http://example.com/image.png");
For the heights, replace| 0; |with the appropriate dimension and unit, example| 500px;
Do the same for the side margin; this is how much space on each side should be left to show the side image.
If the width seems incorrect, check for any plugins (such as sidebars) that are redefining the forum or wrapper width and try that value.
The code expects that the forum/wrapper width is the same as the width of the head/base images.
*/

@container_head_image_url: @empty;
@container_side_image_url: @empty;
@container_base_image_url: url("http://i45.tinypic.com/10olo3r.jpg");

@container_head_image_height: 0;
@container_base_image_height: 17px;

@container_side_image_margin: 0;

/* Do not edit past here if you aren't sure how. */
html.multiplebgs .container.boards, html.multiplebgs .container.stats {
background-image: @container_head_image_url, @container_base_image_url, @container_side_image_url;
background-position: left top, left bottom, left @container_head_image_height;
background-repeat: repeat-x, repeat-x, repeat-y;
padding: @container_head_image_height 0 @container_base_image_height;
}

html.multiplebgs .container.boards > div, html.multiplebgs .container.stats > div {
margin: 0 @container_side_image_margin;
}
/* END of head/base/side image code */

[Shrike]

Apr 15, 2013 12:36:24 GMT -8 billyt said:

here is what I did and edited, I added this code to the bottom of the css style sheet I am just looking to add the image to the bottom..

SPOILER: Click to show

/* Start of head/base/side images code - Do not delete rows unless you know how LESS variables work.
For the image urls, replace the| @empty; |text with| url("http://example.com/image.png");
For the heights, replace| 0; |with the appropriate dimension and unit, example| 500px;
Do the same for the side margin; this is how much space on each side should be left to show the side image.
If the width seems incorrect, check for any plugins (such as sidebars) that are redefining the forum or wrapper width and try that value.
The code expects that the forum/wrapper width is the same as the width of the head/base images.
*/

@container_head_image_url: @empty;
@container_side_image_url: @empty;
@container_base_image_url: url("http://i45.tinypic.com/10olo3r.jpg");

@container_head_image_height: 0;
@container_base_image_height: 17px;

@container_side_image_margin: 0;

/* Do not edit past here if you aren't sure how. */
html.multiplebgs .container.boards, html.multiplebgs .container.stats {
background-image: @container_head_image_url, @container_base_image_url, @container_side_image_url;
background-position: left top, left bottom, left @container_head_image_height;
background-repeat: repeat-x, repeat-x, repeat-y;
padding: @container_head_image_height 0 @container_base_image_height;
}

html.multiplebgs .container.boards > div, html.multiplebgs .container.stats > div {
margin: 0 @container_side_image_margin;
}
/* END of head/base/side image code */

Are you by chance using IE 8? Multiple CSS backgrounds aren't supported in IE 8 (a TWO year old browser). All other major browsers have supported it for about 4 years. You've set up the code properly but, as mentioned in the first post, it won't do anything if your browser doesn't support multiple backgrounds. In the future, I might look into making a plugin to handle the relative complexity of supporting such obsolete browsers but this isn't a very high priority.

However, as you're only using one background image, we can remove the multiple backgrounds coding to make it work for you. Here is a code that will add only a base image. I've left in the variables you used so you can simply replace the old code with it:

/* Start of base image code - Do not repost - support.proboards.com/thread/458468/ */

@container_base_image_url: url("http://i45.tinypic.com/10olo3r.jpg");
@container_base_image_height: 17px;

/* Do not edit past here if you aren't sure how. */
.container.boards, .container.stats {
background-image: @container_base_image_url;
background-position: left bottom;
background-repeat: repeat-x;
padding: 0 0 @container_base_image_height;
}
/* END of base image code */

[Stinky666]

Hi Shrike, any idea(s) what's up with mine?

[billyt]

I am using firefox 20.0.1 and that code seem to do the trick I can see the image now, thanks !!

[Shrike]

billyt: If you're using a recent version of Firefox then what I thought was the problem isn't the case. After trying out your code myself, it turns out that the code will only work if you use all three images. While it is possible to edit the code to make this work properly, I feel it gets too close to being back at the V4 type of editing random lines of code.

Stinky666: The problem you're having is that the variables for the images are being redefined each time you repeat the blocks of code.
@container_head_image_url: url("http://exdat.net/v2/images/topheadicentervi1.png");
@container_side_image_url: url("http://i49./f284/prophetfx/tryagain.jpg");
@container_base_image_url: url("http://i49./f284/prophetfx/edv2menu/bottomfoot.jpg");
These ones for the info center are last, so they override the earlier ones. Again, this could be manually edited to work but this starts becoming a complicated way of customising things.

For now, to manually fix it, edit the variables into the code itself like this (using the first one as an example):
background-image: @container_head_image_url, @container_base_image_url, @container_side_image_url;
→
background-image: url("http://exdat.net/v2/edv2stuff/tophead.jpg"), url("http://i49./f284/prophetfx/tryagain.jpg"), url("http://i49./f284/prophetfx/edv2menu/bottomfoot.jpg");
You can then delete the &#64;variables for the image urls.

I'm now planning to make this into a plugin so that these problems can be handled automatically, as well as making applying the code to different areas easier. This will also give me a chance to make it work in older browsers. This should take only a few days, although I may be delayed with it. Sorry for the inconvenience with this.

[Stinky666]

Apr 15, 2013 15:43:54 GMT -8 Shrike said:

billyt: If you're using a recent version of Firefox then what I thought was the problem isn't the case. After trying out your code myself, it turns out that the code will only work if you use all three images. While it is possible to edit the code to make this work properly, I feel it gets too close to being back at the V4 type of editing random lines of code.

Stinky666: The problem you're having is that the variables for the images are being redefined each time you repeat the blocks of code.
@container_head_image_url: url("http://exdat.net/v2/images/topheadicentervi1.png");
@container_side_image_url: url("http://i49./f284/prophetfx/tryagain.jpg");
@container_base_image_url: url("http://i49./f284/prophetfx/edv2menu/bottomfoot.jpg");
These ones for the info center are last, so they override the earlier ones. Again, this could be manually edited to work but this starts becoming a complicated way of customising things.

For now, to manually fix it, edit the variables into the code itself like this (using the first one as an example):
background-image: @container_head_image_url, @container_base_image_url, @container_side_image_url;
→
background-image: url("http://exdat.net/v2/edv2stuff/tophead.jpg"), url("http://i49./f284/prophetfx/tryagain.jpg"), url("http://i49./f284/prophetfx/edv2menu/bottomfoot.jpg");
You can then delete the &#64;variables for the image urls.

I'm now planning to make this into a plugin so that these problems can be handled automatically, as well as making applying the code to different areas easier. This will also give me a chance to make it work in older browsers. This should take only a few days, although I may be delayed with it. Sorry for the inconvenience with this.

I will read this properly (scanned it only atm) after I have eaten and watched a movie.
Sorry for making/requesting more complex stuff. This is brilliant as it is for if you want h/b/s everywhere (or certain areas) using the same images. I just have to be awkward and want different ones lol.

Sorry for being a pain.

[Stinky666]

Hi Shrike.
Question.
I use my legend in my Info Center. On the default line 454 (possibly 456) I had to change overflow from hidden to visible, to allow it to "drop" over/outside the table.

However now, even though I still have that changed, it doesn't do it. It gets cut off. One can only assume that it's because of the head and base.
In the CSS for it, I tried adding on the margin line, overflow: visible, but that did nothing.

Hopefully this is an easy fix.
exdat.freeforums.net/

[Shrike]

Apr 20, 2013 12:32:44 GMT -8 Stinky666 said:

Hi Shrike.
Question.
I use my legend in my Info Center. On the default line 454 (possibly 456) I had to change overflow from hidden to visible, to allow it to "drop" over/outside the table.

However now, even though I still have that changed, it doesn't do it. It gets cut off. One can only assume that it's because of the head and base.
In the CSS for it, I tried adding on the margin line, overflow: visible, but that did nothing.

Hopefully this is an easy fix.
exdat.freeforums.net/

Is this still a problem for you? I've had a look at the linked forum and the legends seem to show without a problem. I don't believe changing the overflow should cause any problems like that, especially not changing it to visible. Can you provide a screenshot of what is happening that shouldn't?