[jcink] unique images for forums

pronounshe/him
917written posts
Desmond Milesearned bits
offlinecurrently
Desmond Miles
Part of the Furniture
Desmond Miles Avatar
we will have peace at any cost
help pepeHands

we're trying to fancy up our forum a bit and put unique, individual images in our forum index.

here's what it looks like currently:






and here's an example of how we want it to look





Here's what we attempted to do, but with no suck luck:

.descimage {
background: #FFFFFF;
height: 15px;
width: 50px;
padding: 5px;
position: relative;
background-size: contain;
object-fit: contain;
}


and here's the html for it (this is from bonbon's morning sun)

<div class="cfs">

<div class="mboard">
<div class="title">
<h1><!-- |img_new_post| --> <!-- |name| --></h1>
<div class="topics">
<span><b><!-- |topics| --></b> topics</span>
<span><b><!-- |replies| --></b> replies</span>
</div>
</div>
<div class="mdesc">
<h2><!-- |description| --> </h2>
<div class="last">
<b>Last post:</b> <!-- |last_topic| --><br>
<b>by:</b> <!-- |last_poster| --><br>
<b>on:</b> <!-- |last_post| --></div>
</div>
</div>
<div class="subf">
<!-- |subforums_list| -->
</div>
</div>


obvs we're not sure to put it or handle it, so we come crying to any of yall lovely folk to help us out haha. 
stultifera navis
aliasnines
pronounsshe/her
583written posts
ninelieearned bits
offlinecurrently
ninelie
Part of the Furniture
ninelie Avatar
VOLITION [Medium: Success]
Use this code:
<div class="cfs">

<div class="mboard">
<div class="title">
<h1><!-- |img_new_post| --> <!-- |name| --></h1>
<div class="descimage" id="forum<!--|forum_id|-->"></div>
<div class="topics">
<span><b><!-- |topics| --></b> topics</span>
<span><b><!-- |replies| --></b> replies</span>
</div>
</div>
<div class="mdesc">
<h2><!-- |description| --> </h2>
<div class="last">
<b>Last post:</b> <!-- |last_topic| --><br>
<b>by:</b> <!-- |last_poster| --><br>
<b>on:</b> <!-- |last_post| --></div>
</div>
</div>
<div class="subf">
<!-- |subforums_list| -->
</div>
</div>


In the css, add these and repeat for each forum ID:
#forumNUM { background-image: url(IMGURLHERE); }

Replace 'NUM' with a number (e.g. #forum1) that corresponds to the forum of the image you want. So for example, Forum ID #13 has its own bg url so you'll set it as #forum13 and paste in the url for it. Copy and paste that line for every forum. If you want a default background image, then just throw in a background-image style for .descimage.

You can check the unique ID number of your forum by accessing the direct URL for the forum, and grabbing the numbers at the end of the link.
pronounshe/him
917written posts
Desmond Milesearned bits
offlinecurrently
Desmond Miles
Part of the Furniture
Desmond Miles Avatar
we will have peace at any cost
thank you so much for replying!

But hmm, it didn't seem to change anything? Is it possible there's something else in the stylesheet that may be overriding the image and preventing it from appearing? I know you wouldn't know from my screenshots alone, haha, but I'm just curious if there's something I can look for. 
stultifera navis
aliasnines
pronounsshe/her
583written posts
ninelieearned bits
offlinecurrently
ninelie
Part of the Furniture
ninelie Avatar
VOLITION [Medium: Success]
Desmond Miles Avatar
thank you so much for replying!

But hmm, it didn't seem to change anything? Is it possible there's something else in the stylesheet that may be overriding the image and preventing it from appearing? I know you wouldn't know from my screenshots alone, haha, but I'm just curious if there's something I can look for. 

Without the actual forum page for me to Chrome Inspect, there's nothing I can do because there is no full context on what I'm working with.

You can always PM me the URL to me if you don't feel comfortable sharing it publically. I can take a deeper dive this way and reach the core of the problem.
pronounshe/him
917written posts
Desmond Milesearned bits
offlinecurrently
Desmond Miles
Part of the Furniture
Desmond Miles Avatar
we will have peace at any cost
ninelie Avatar
Desmond Miles Avatar
thank you so much for replying!

But hmm, it didn't seem to change anything? Is it possible there's something else in the stylesheet that may be overriding the image and preventing it from appearing? I know you wouldn't know from my screenshots alone, haha, but I'm just curious if there's something I can look for. 
Without the actual forum page for me to Chrome Inspect, there's nothing I can do because there is no full context on what I'm working with.

You can always PM me the URL to me if you don't feel comfortable sharing it publically. I can take a deeper dive this way and reach the core of the problem.
yeah i'll do that haha uno momento
3,084written posts
Kitten4uearned bits
offlinecurrently
Kitten4u
Part of the Furniture
Kitten4u Avatar
[nospaces]

[attr="class","infoBG"]
[attr="class","infoBG2"]
[attr="class","infoBack"]
[attr="class","infoTitle"][attr="class","fa fa-star-o"] threadarchived
[attr="class","infoDiv"]

[attr="class","infoBody"]

To keep the forum clean and so people know that all threads in certain areas are current and that the OP is likely to still have interest, we archive threads that haven't gotten posts for 2 weeks. This thread is being archived for that reason. If you would like this thread reopened, contact a staff member.