ElkArte Community

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

I'm tempted to say:

.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.

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

I do remember, I made this SPB mod (Smart Post Bit) (http://www.elkarte.net/community/index.php?topic=2102.0) which changes that area a bit. I like it the same background color with the post but may be changing that will be better.

Ok. I nailed it down to this:

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.

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

So in custom.css add

.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.

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

You have to combine it with what emanuele has shown in reply#1.^[1] That is all you need to do.

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

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:

.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.  :-\

please try

.postarea {
	display: table-cell;
	width: 100%;
}

Almost... I tried:

.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.

You may have to resort to setting some widths to make those "table cells" behave .. try just this for an experiment.

.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;
}

Thanks, but that's no solution.  :(

Well worth a try, hope someone comes up with one.

ETA: I just put that in a custom.css on the default and it seemed to do what you wanted, so no idea whats going on.