Change poster background

Started by Speed King, September 09, 2021, 06:57:55 AM

Previous topic - Next topic

Speed King

Hello,

I would change poster background in all topics, like vBulletin style.
I saw some custom SMF themes that have such feature, but I don't know how to make it  ::)
I tried to edit index.css file, but background is changed partially...

/* poster details and list of items */
.poster {
float: left;
/* Don't set this in em.It will eat too much space if people need to set large text sizes. */
width: 160px;
-webkit-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
word-wrap: break-word; /* IE fallback */
overflow-wrap: break-word;
}

I have added to this section

background: #fff5e5;

But new color fills only part of the post area, I would all post height (from top to bottom) to be filled with background color.

Click =>

Antechinus

Try this:
.poster::after {
display: block;
clear: both;
content: '';
}

Speed King

There is no change after adding this code  :-\

Antechinus

#3
Ok, this will nail it.
/* ---------------------------------------------------- */
/* Adjust parent .windowbg for better looks of content. */
#forumposts .windowbg,
#forumposts .approvebg,
#personal_messages .windowbg {
padding: 0;
}

/* -------------------- */
/* Grid parent element. */
/* -------------------- */
.post_wrapper {
    display: grid;
    grid-template-columns: 175px minmax(0,calc(100% - 175px));
    grid-auto-rows: 1fr min-content;
}

/* ---------------------- */
/* You need to kill this! */
.post_wrapper::after {
    display: none;
}

/* ----------------- */
/* First grid child. */
.poster {
    grid-column: 1 / 2;
    grid-row: 1 / 3;
width: 175px;
padding: 10px 0 10px 15px;
background: #fff5e5;
border-radius: 6px 0 0 6px;
}

/* ------------------ */
/* Second grid child. */
.postarea {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    margin: 0;      /* Override RC4 CSS. */
padding: 10px 15px 0 10px;
}

/* ----------------- */
/* Third grid child. */
.moderatorbar {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
    margin: 0;      /* Override RC4 CSS. */
padding: 0 15px 10px 10px;
}

/* ----------------------------------- */
/* Media queries, for smaller screens. */
/* ----------------------------------- */
@media screen and (max-width: 720px) {
    .post_wrapper {
        display: block;
    }
    .poster {
        width: auto;
min-height: 65px;
padding: 10px 10px 5px;
    }
    .poster h4, .poster .user_info {
margin-left: 60px;
    }
.poster li.avatar {
display: block !important;
float: left;
width: 50px;
margin: -1.4em 0 0 -60px;
text-align: center;
}
.poster img.avatar {
max-height: 50px !important;
max-width: 50px !important;
}
.poster li {
padding-right: 4px;
vertical-align: bottom;
}
.poster .blurb {
display: none;
}
}

Note that this does not support IE11. All other browsers should be ok.

Support for IE11 can be added if any of your users are still using it.

Speed King

Thanks, now poster background is OK, but an empty space appears between poster column and text in posts:

Click =>

Antechinus


Antechinus

Nevermind. I just checked that topic live in Firefox, Chrome, Edge and IE11. It's fine. Try hard refreshing your browser (Ctrl+F5).

Speed King

Problem with empty space between poster column and post text solved by me, by editing the grid in your code :)

Find:

/* Second grid child. */
.postarea {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    margin: 0;      /* Override RC4 CSS. */
    padding: 10px 15px 0 10px;
}

/* ----------------- */
/* Third grid child. */
.moderatorbar {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
    margin: 0;      /* Override RC4 CSS. */
    padding: 0 15px 10px 10px;
}

Change to:

/* Second grid child. */
.postarea {
    grid-column: 1 / 3;
    grid-row: 1 / 2;
    margin: 0;      /* Override RC4 CSS. */
    padding: 10px 15px 0 10px;
}

/* ----------------- */
/* Third grid child. */
.moderatorbar {
    grid-column: 1 / 3;
    grid-row: 2 / 3;
    margin: 0;      /* Override RC4 CSS. */
    padding: 0 15px 10px 10px;
}

Antechinus

Quote from: Antechinus on September 10, 2021, 01:18:19 AMNevermind. I just checked that topic live in Firefox, Chrome, Edge and IE11. It's fine. Try hard refreshing your browser (Ctrl+F5).
Like I said: I checked the topic in your screenshot live on your site (got the url from the screenshot) and there was no problem. And grid-column 1/ 3 means it starts right at the left edge of the post wrapper and goes all the way across to the right edge. That's not what was wanted.


So, I checked the source code on your site. The problem is that you have a cached minified CSS file (https://bg-nacionalisti.org/BNF/Themes/Maroon/css/minified_6883f01fae9ee63663e557b9b97b0166.css?smf21rc4_1631326022). That file is still forcing code on the page, meaning it is still forcing the original left margin on .postarea and .moderatorbar.

Clear your SMF file cache  in admin, and the code I wrote will be fine. :)

You should do this anyway, because sooner or later that cache will expire, and then a new minified file will be compiled, and then you will be back here wondering why the code you edited does not work anymore. ;)

Antechinus

Oh hang on a minute: where did you add the grid code?

If you added it in the CSS file BEFORE where the default margin is defined, then the default margin will override the zero margin that is supposed to be set. So if that is the case, just remove the default margin and use the original grid code.

This is what you want to get rid of:
.postarea, .moderatorbar {
    margin: 0 0 0 175px;
}

Speed King

Yes, I have added grid code before this:

.postarea, .moderatorbar {
    margin: 0 0 0 175px;
}

In my CSS file, the code above begins at line 3399

And the grid code begins at line 3280, just right after poster details code:

/* poster details and list of items */
.poster {
    float: left;
    /* Don't set this in em.It will eat too much space if people need to set large text sizes. */
    width: 160px;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
    word-wrap: break-word; /* IE fallback */
    overflow-wrap: break-word;
    text-align: center;
}
.poster h4 {
    font-size: 1.2em;
}
.poster h4, .poster h4 a, .poster li:hover h4 a, .poster h4 a:hover .poster li h4 a, .poster h4 a:focus {
    margin: 0;
    padding: 0;
    color: #a46e51;
}

.poster .profile .profile_icons li, .poster .im_icons li {
    display: table-cell;
    padding-right: 5px;
}

Antechinus

OK, so the real problem is that 175px margin. I mean you can leave it there if you really want to, but then you have to override it by editing the grid code.

IMO it would be better to reduce the number of potential issues, and remove the margin code you are having to override. It is just getting in the way of what you want to do. If you get rid of that margin code, the grid code makes sense the way it was originally. :)

Speed King

Yes, I have added original grid code at the end of the CSS file, and now everything is OK :)

Advertisement: