Skip to main content ↑ ↓
Poster background Started by CrimeS · · Read 8985 times 0 Members and 1 Guest are viewing this topic. previous topic - next topic

Poster background

I was looking at some themes and what came to my attention was that no one, separated the poster background from the actual message background. I don't mean just the background for the info, but split each message to left and right, so that the poster's background has height of 100% (it's not full when the message is longer).

Adding a class .poster and setting its background kind of works, the height isn't stretched. Anyone has a quick solution to that? :D

Re: Poster background

Reply #1 –

I'm tempted to say:
Code: [Select]
.poster {
    float: none;
}
.postarea {
    display: table-cell;
}
It looks like the whole template was already prepared for that, but for some reason it was not used... not sure why though.
Bugs creator.
Features destroyer.
Template killer.

Re: Poster background

Reply #2 –

Oh, that's great! Must try this with a light grey in my theme! Thanks for finding this one!

Re: Poster background

Reply #3 –

I do remember, I made this SPB mod (Smart Post Bit) which changes that area a bit. I like it the same background color with the post but may be changing that will be better.

Re: Poster background

Reply #4 –

I remembered there was something, but I couldn't remember the name...
Bugs creator.
Features destroyer.
Template killer.

Re: Poster background

Reply #5 –

Is it possible to extract the poster backgound from the post background so that they are both a frame? I made a screenshot...

Re: Poster background

Reply #6 –

Quote from: CrimeS – I was looking at some themes and what came to my attention was that no one, separated the poster background from the actual message background. I don't mean just the background for the info, but split each message to left and right, so that the poster's background has height of 100% (it's not full when the message is longer).

Adding a class .poster and setting its background kind of works, the height isn't stretched. Anyone has a quick solution to that? :D
Ok. I nailed it down to this:
Code: [Select]
div.windowbg, div.windowbg2 {
	overflow: auto;
	padding: 10px 0;
}
The full height can be achieved by changing 10px to 0. You may need to add that back in .poster and .postarea instead to achieve the same padding for both.

Re: Poster background

Reply #7 –

@Jorin You can get pretty close to that by adding a left border to the postarea div

So in custom.css add
Code: [Select]
.postarea {
	border-left: 4px solid #ccc;
}
div.windowbg, div.windowbg2 {
	padding: 0 0;
}

Probably want to be more selective on the windowbg padding as that will change it everywhere, but as an experiment I think that would get you something like what you posted.

Re: Poster background

Reply #8 –

Quote from: ahrasis – Ok. I nailed it down to this:
Code: [Select]
div.windowbg, div.windowbg2 {
	overflow: auto;
	padding: 10px 0;
}
The full height can be achieved by changing 10px to 0. You may need to add that back in .poster and .postarea instead to achieve the same padding for both.

So, what in overall needs to be done to achieve that? I'm not getting the desired result (eh, I should take bigger breaks).

Re: Poster background

Reply #9 –

You have to combine it with what emanuele has shown in reply#1.[1] That is all you need to do.
1 Doing only that suggestion will leave 10px padding on top and bottom.↵

Re: Poster background

Reply #10 –

Ah I see. It works perfectly! Thank you very much.  I hope that other people will find this useful as well.

Re: Poster background

Reply #11 –

Great! I wanted to use a background image with a very light grey variation of our logo, so I tried this and it works great.

Edit: No, it doesn't.  :o  See screenshot please. My css code is this:

Code: [Select]
.poster {
    float: none;
	background-image: url(../../images/theme/bg_poster.png);
}
.postarea {
	display: table-cell;
}
div.windowbg, div.windowbg2 {
	 overflow: auto;
	 padding: 10px 0;
}

Oh, and when an image larger then forum width is posted with img bcc inside a post, the area floats to the right and leaves the screen. The text inside the post cannot be read anymore because it is beyound the screen.  :D

Funny, but not for a productive board.  :-\
 

Re: Poster background

Reply #12 –

please try
Code: [Select]
.postarea {
	display: table-cell;
	width: 100%;
}
Thorsten "TE" Eurich
------------------------

Re: Poster background

Reply #13 –

Almost... I tried:

Code: [Select]
.poster {
    float: none;
	background-image: url(../../images/theme/bg_poster.png);
	background-repeat: no-repeat;
}
.postarea {
	display: table-cell;
	width: 100%;
}
div.windowbg, div.windowbg2 {
	 overflow: auto;
	 padding: 10px 0;
}

...because I don't want the background to be repeated.

Re: Poster background

Reply #14 –

You may have to resort to setting some widths to make those "table cells" behave .. try just this for an experiment.
Code: [Select]
.poster {
    float: none;
	background: url(../../images/theme/bg_poster.png) no-repeat;
	min-width: 15em;
}
.postarea {
	display: table-cell;
	width: 100%;
}
.post_wrapper  {
	width: 100%;
}
div.post_wrapper {
	padding: 0;
}