Simple Machines Community Forum

Customizing SMF => Graphics and Templates => Topic started by: Speed King on September 09, 2021, 06:57:55 AM

Title: Change poster background
Post by: Speed King on September 09, 2021, 06:57:55 AM
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 => (https://postimg.cc/G9VfnpQf)
Title: Re: Change poster background
Post by: Antechinus on September 09, 2021, 07:13:46 AM
Try this:
.poster::after {
display: block;
clear: both;
content: '';
}
Title: Re: Change poster background
Post by: Speed King on September 09, 2021, 12:49:30 PM
There is no change after adding this code  :-\
Title: Re: Change poster background
Post by: Antechinus on September 09, 2021, 04:47:43 PM
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.
Title: Re: Change poster background
Post by: Speed King on September 10, 2021, 12:18:40 AM
Thanks, now poster background is OK, but an empty space appears between poster column and text in posts:

Click => (https://postimg.cc/FYYtpZ28)
Title: Re: Change poster background
Post by: Antechinus on September 10, 2021, 01:12:42 AM
Is that browser Edge, or IE11?
Title: Re: Change poster background
Post by: Antechinus on September 10, 2021, 01:18:19 AM
Nevermind. I just checked that topic live in Firefox, Chrome, Edge and IE11. It's fine. Try hard refreshing your browser (Ctrl+F5).
Title: Re: Change poster background
Post by: Speed King on September 10, 2021, 10:12:07 PM
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;
}
Title: Re: Change poster background
Post by: Antechinus on September 10, 2021, 10:23:48 PM
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. ;)
Title: Re: Change poster background
Post by: Antechinus on September 10, 2021, 10:28:35 PM
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;
}
Title: Re: Change poster background
Post by: Speed King on September 10, 2021, 11:26:38 PM
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;
}
Title: Re: Change poster background
Post by: Antechinus on September 10, 2021, 11:37:15 PM
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. :)
Title: Re: Change poster background
Post by: Speed King on September 11, 2021, 12:01:29 AM
Yes, I have added original grid code at the end of the CSS file, and now everything is OK :)