head/base and side code

[Jessecast]

I woud like to ask someone to make a head/base and a side code that would make themes like  that possible.

[Stinky666]

Apr 6, 2013 12:38:17 GMT -8 Jessecast said:

I woud like to ask someone to make a head/base and a side code that would make themes like View Attachment that possible.

Think you messed up somehow
But I second this. Would be great if it can be done by someone, or even better if it can be done with a template mod + CSS or H&F

[Jessecast]

bump

[Jessecast]

bump

[Jessecast]

Bump

[Shrike]

This may be a bit temperamental to use, but it doesn't rely on any extra scripts, only CSS, so it should be fast. If a browser doesn't support multiple backgrounds then the code automatically won't do anything to cause problems.

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.

updated

/* 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 {
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 {margin: 0 @container_side_image_margin;}
/* End of head/base/side image code. */

Old code, do not use:

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/width, replace| 0; |with the appropriate dimension and unit, example| 500px;
If the width seems incorrect, check for any plugins (such as sidebars) that are redefining the forum or wrapper width and try that value.
*/

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

@container_head_image_height: 0;
@container_side_image_width: 0;
@container_base_image_height: 0;

/* Do not edit past here if you aren't sure how. */
body.multiplebgs .container .boards {
background-image: @container_head_image_url, @container_side_image_url, @container_side_image_url, @container_base_image_url;
padding: @container_head_image_height @container_side_image_width @container_base_image_height;
background-position: top left, top right, bottom left, top left;
background-repeat: repeat-x, repeat-y, repeat-x, repeat-y;
width: (@wrapper_width - (@container_head_image_height + @container_base_image_height));
}
/* End of head/base/side image code. */

Why this isn't using [code] tags, sorry if this makes it harder to read

[Stinky666]

Apr 10, 2013 17:33:31 GMT -8 Shrike said:

This may be a bit temperamental to use, but it doesn't rely on any extra scripts, only CSS, so it should be fast. If a browser doesn't support multiple backgrounds then the code automatically won't do anything to cause problems.

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.

/* 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/width, replace| 0; |with the appropriate dimension and unit, example| 500px;
If the width seems incorrect, check for any plugins (such as sidebars) that are redefining the forum or wrapper width and try that value.
*/

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

@container_head_image_height: 0;
@container_side_image_width: 0;
@container_base_image_height: 0;

/* Do not edit past here if you aren't sure how. */
body.multiplebgs .container .boards {
background-image: @container_head_image_url, @container_side_image_url, @container_side_image_url, @container_base_image_url;
padding: @container_head_image_height @container_side_image_width @container_base_image_height;
background-position: top left, top right, bottom left, top left;
background-repeat: repeat-x, repeat-y, repeat-x, repeat-y;
width: (@wrapper_width - (@container_head_image_height + @container_base_image_height));
}
/* End of head/base/side image code. */

Why this isn't using [code] tags, sorry if this makes it harder to read

You rock.
Can't test this just yet because I gotta go in 30mins, so I will test this once I have done my course and had my appointment.. so about 4hrs or so from now.

[Jessecast]

Thank you so much now themes like I want should be able to be done

[Stinky666]

Apr 10, 2013 17:33:31 GMT -8 Shrike said:

This may be a bit temperamental to use, but it doesn't rely on any extra scripts, only CSS, so it should be fast. If a browser doesn't support multiple backgrounds then the code automatically won't do anything to cause problems.

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.

/* 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/width, replace| 0; |with the appropriate dimension and unit, example| 500px;
If the width seems incorrect, check for any plugins (such as sidebars) that are redefining the forum or wrapper width and try that value.
*/

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

@container_head_image_height: 0;
@container_side_image_width: 0;
@container_base_image_height: 0;

/* Do not edit past here if you aren't sure how. */
body.multiplebgs .container .boards {
background-image: @container_head_image_url, @container_side_image_url, @container_side_image_url, @container_base_image_url;
padding: @container_head_image_height @container_side_image_width @container_base_image_height;
background-position: top left, top right, bottom left, top left;
background-repeat: repeat-x, repeat-y, repeat-x, repeat-y;
width: (@wrapper_width - (@container_head_image_height + @container_base_image_height));
}
/* End of head/base/side image code. */

Why this isn't using [code] tags, sorry if this makes it harder to read

I'm using the latest Firefox, and unfortunately this seems to not do anything for me
stinky666themes2.freemessageboards.com/

The default theme is what has the h/b/s
The h&b are 726px, so I made sure to even set the forum width to 700px. yet nothing unfortunately.

Any help appreciated, the code, if it helps:

/* 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/width, replace| 0; |with the appropriate dimension and unit, example| 500px;
If the width seems incorrect, check for any plugins (such as sidebars) that are redefining the forum or wrapper width and try that value.
*/

@container_head_image_url: url("http://i49./f284/prophetfx/topheadthread.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_side_image_width: 726px;
@container_base_image_height: 29px;

/* Do not edit past here if you aren't sure how. */
body.multiplebgs .container .boards {
background-image: @container_head_image_url, @container_side_image_url, @container_side_image_url, @container_base_image_url;
padding: @container_head_image_height @container_side_image_width @container_base_image_height;
background-position: top left, top right, bottom left, top left;
background-repeat: repeat-x, repeat-y, repeat-x, repeat-y;
width: (@wrapper_width - (@container_head_image_height + @container_base_image_height));
}
/* End of head/base/side image code. */

[Shrike]

I've just had a look and facepalmed twice at two typos I made: the body.multiplebgs should be html.mutliplebgs and there shouldn't be a space between .container .boards

However, now that I've fixed that, I've noticed that I got a lot of this all backwards. I'll post a new version of this all shortly.

[Stinky666]

Apr 13, 2013 8:06:29 GMT -8 Shrike said:

I've just had a look and facepalmed twice at two typos I made: the body.multiplebgs should be html.mutliplebgs and there shouldn't be a space between .container .boards

However, now that I've fixed that, I've noticed that I got a lot of this all backwards. I'll post a new version of this all shortly.

Hahaha alright no worries. Could you possibly quote or tag me when you post it? That'd be hugely appreciated.
Also, even if you wasn't, pretend you were sleep deprived or ill or something. TThey are the best excuses for making errors

[Shrike]

Apr 13, 2013 8:08:21 GMT -8 Stinky666 said:

Apr 13, 2013 8:06:29 GMT -8 Shrike said:

I've just had a look and facepalmed twice at two typos I made: the body.multiplebgs should be html.mutliplebgs and there shouldn't be a space between .container .boards

However, now that I've fixed that, I've noticed that I got a lot of this all backwards. I'll post a new version of this all shortly.

Hahaha alright no worries. Could you possibly quote or tag me when you post it? That'd be hugely appreciated.
Also, even if you wasn't, pretend you were sleep deprived or ill or something. TThey are the best excuses for making errors

Looking at the timestamp, it was 2:33am so I'll go with sleep deprivation

Anyway, fixed it all now. The main difference is that I'm assuming that most people will do it the way you have: 3 images all the same width (which is as wide as the whole thing should be) with the head/base ones being a certain height and then the one used for the sides being only a few px high. As a result, I realised that we now need to say how much of that width is represented by the side images (because the code doesn't know where it should fit inside the image).

I've bolded the variable that changed so you can see why. You should be able to replace the old one with this (in the spoiler tag), Stinky666, as I've left the other variables in. You'll want to change the forum width to 726px.

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: url("http://i49./f284/prophetfx/topheadthread.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 {
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 {margin: 0 @container_side_image_margin;}
/* End of head/base/side image code. */

New blank code

/* 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 {
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 {margin: 0 @container_side_image_margin;}
/* End of head/base/side image code. */

[Stinky666]

Shrike. Works wonders. For Firefox at least
Thanks a lot. Really do appreciate it.

[Stinky666]

Double post for the win
How would I make this add to the info center without copy and pasting?

I tried adding different variations of .stats to the following line:

html.multiplebgs .container.boards > .title-bar, html.multiplebgs .container.boards > .content {margin: 0 @container_side_image_margin;}


So far I have tried:
html.multiplebgs .container.boards .container.stats > .title-bar, html.multiplebgs .container.boards .container.stats > .content {margin: 0 @container_side_image_margin;}
and
html.multiplebgs .container.boards.stats > .title-bar, html.multiplebgs .container.boards.stats > .content {margin: 0 @container_side_image_margin;}


I think it's obvious, but I just can't put my finger on it

[Shrike]

Apr 13, 2013 14:20:03 GMT -8 Stinky666 said:

Double post for the win
How would I make this add to the info center without copy and pasting?

I tried adding different variations of .stats to the following line:

html.multiplebgs .container.boards > .title-bar, html.multiplebgs .container.boards > .content {margin: 0 @container_side_image_margin;}


So far I have tried:
html.multiplebgs .container.boards .container.stats > .title-bar, html.multiplebgs .container.boards .container.stats > .content {margin: 0 @container_side_image_margin;}
and
html.multiplebgs .container.boards.stats > .title-bar, html.multiplebgs .container.boards.stats > .content {margin: 0 @container_side_image_margin;}


I think it's obvious, but I just can't put my finger on it

You've got the right sort of idea. First of all, however, I had a look at other pages on the forum where people might want to add this and we can actually simplify this a bit (I'll edit the earlier post too). Here's what the second part of the code looks like with that change, specifically that the second bold part is shorter than before. You'll want to edit your code to reflect that before we continue.

html.multiplebgs .container.boards {
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 {margin: 0 @container_side_image_margin;}

The two bold parts are the selectors. To add the head/base images to other areas, we need to add these selectors again, but with a small change. In the case of the info center, this means changing .boards to .stats. Everything else stays the same. We can now just add these new selectors on after the others by putting a comma after the first one. Now the selectors will look like this:

html.multiplebgs .container.boards, html.multiplebgs .container.stats
html.multiplebgs .container.boards > div, html.multiplebgs .container.stats > div

To add it to different areas, you just repeat the process but with the corresponding class for that area.