Shannt
Regular poster
Registered: 02-2019
Location: Texas
Posts: 143
Karma: 0 (+0/-0)
|
Reply | Quote
|
|
Images In Forum Descriptions
Is there a way to add images to the forum descriptions?
Something like this below. I tried using the [ img ]URL[ /img ] but it didn't work.
---
|
10/18/2019, 7:49 pm
|
Link to post
Email Shannt
PM Shannt
|
Susa
Global Administrator
Registered: 07-2006
Location: Oχάιο
Posts: 4623
Karma: 128 (+137/-9)
|
Reply | Quote
|
|
Re:
We'll have to wait for Lesa or Pastor Rick for this. I am sure that they have ideas for you.
|
10/19/2019, 12:47 am
|
Link to post
PM Susa
Blog
|
Joxcenia
Global Administrator
Runboard staff member
Registered: 11-2005
Location: Whoosher House
Posts: 7810
Karma: 74 (+75/-1)
|
Reply | Quote
|
|
Re: Images In Forum Descriptions
If there is a way with CSS/HTML, I'm sure Rick and Lesa will know how to do it.
---
|
10/19/2019, 1:51 am
|
Link to post
Email Joxcenia
PM Joxcenia
Blog
|
Pastor Rick
Moderator
Registered: 07-2005
Location: Texas
Posts: 10257
Karma: 272 (+331/-59)
|
Reply | Quote
|
|
Re: Images In Forum Descriptions
Yes, there is a way to do this. I'll explain on Sunday if Lesa doesn't beat me to it.
|
10/19/2019, 4:14 am
|
Link to post
Email Pastor Rick
PM Pastor Rick
Blog
|
Lesigner Girl
Global Administrator
Head of Runboard staff
Registered: 11-2005
Posts: 26740
Karma: 436 (+489/-53)
|
Reply | Quote
|
|
Re: Images In Forum Descriptions
Thanks, Rick. I'll take this one.
Hi Shannt!
How you do it depends on the effect you're looking for. Since you have everything centered, I figure you probably want your images to look like it's inline with the text, instead of off to the left, and am going to work from that premise.
I added the following to your CSS:
/* FORUM LIST DESCRIPTION */
.forumlistdescription {
display: inline-block;
vertical-align: middle;
}
It doesn't affect how it already looks, but it will make it possible to add the images, and I wanted to place it within the CSS where it would make sense: With the other topic list stuff.
I have also added the WELCOME image to the description area of your "Getting To Know You" forum, and will use it as an example to explain how to do the rest of your forums.
Here is the CSS I added for your first forum:
#fl_td_1_2 .forumlistdescription {
padding-left: 96px;
min-height: 38px;
background: url('https://i.postimg.cc/gJgLYNbF/welcome.gif') no-repeat left;
}
Now, for the explanation.
Targeting:
First, we have to know how to target the thing we are styling.
#fl_td_1_2 refers to the area that contains your first forum's name and your first forum's description.
For each forum after that, add one to the first number.
#fl_td_2_2 = the 2nd forum
#fl_td_3_2 = the 3rd forum
etc...
.forumlistdescription refers to the description itself. Putting #fl_td_1_2, #fl_td_2_2, #fl_td_3_2, etc before each .forumlistdescription will specify which .forumlistdescription we are targeting.
#fl_td_1_2 .forumlistdescription will target the description for the first forum on the topic list page.
#fl_td_2_2 .forumlistdescription will target the description for the second forum on the topic list page
#fl_td_3_2 .forumlistdescription will target the description for the third forum on the topic list page, etc.
After your target (#fl_td_1_2 .forumlistdescription), you need a { to specify that you are done defining the target, and are about to define the styles. After the last style for that target, you need } to specify that you are done defining the styles for that target.
It is also very important to use colons and semi-colons properly.
Some examples might be easier than explaining:
color: red;
height: 100pxb];
The basic format:
target {
property-name: property-value;
property-name: property-value;
}
The actual styling:
Let's go back to the one I already added an image to, and go through the styling line-by-line.
#fl_td_1_2 .forumlistdescription {
padding-left: 100px;
min-height: 38px;
background: url('https://i.postimg.cc/gJgLYNbF/welcome.gif') no-repeat left;
}
Since the images are being used in the background instead of as content that displays inline like an [img] or <img> tag would create, we need to add enough empty space for the whole image to show, without having the text overlap it.
To create enough space for the image to the left of your text, you need padding-left. To determine how much padding you need, take the width of your image, and add a few pixels to leave some space between the image and your text.
To make sure there's enough vertical space (height) for the image, use min-height. Your WELCOME image is 38px tall, so the min-height should be 38px.
Your WELCOME image is 96px wide by 38px high. After adding a few pixels to the width, the CSS looks like this:
padding-left: 100px;
min-height: 38px;
Finally, the image itself.
background: url('https://i.postimg.cc/gJgLYNbF/welcome.gif') no-repeat left;
background is shorthand for many different background properties, including background-color, background-image, background-position, background-repeat, etc.
With all that said...
I went ahead and put some placeholder code in your CSS, using a 1×1px transparent gif. All you need to do is change the amount of padding, the min-height, and the image URL.
|
10/19/2019, 6:48 am
|
Link to post
Email Lesigner Girl
PM Lesigner Girl
Blog
|