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 remembered there was something, but I couldn't remember the name...
Is it possible to extract the poster backgound from the post background so that they are both a frame? I made a screenshot...
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. 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.