Runboard.com
You're welcome.
Runboard Extra! The Runboard Directory Runboard Knowledge Base
Chat room Runboard Knowledge Base (wiki) Search Facebook Twitter





runboard.com       You are not logged in.

 
Shannt Profile
Live feed
Blog
Friends
Miscellaneous info

Registered user

Registered: 02-2019
Location: Texas
Posts: 23
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.

Image

---

Visit my board: Our Country Home

10/18/2019, 7:49 pm Link to post Email Shannt   PM Shannt Blog
 
Susa Profile
Live feed
Blog
Friends
Miscellaneous info

Global Administrator


Registered: 07-2006
Location: Oχάιο
Posts: 3506
Karma: 101 (+110/-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.

---


SS eH PF
10/19/2019, 12:47 am Link to post PM Susa Blog
 
Joxcenia Profile
Live feed
Blog
Friends
Miscellaneous info

Global Administrator
Runboard staff member

Registered: 11-2005
Location: Whoosher House
Posts: 2371
Karma: 56 (+57/-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.





---

Whoosh-ChelSierra-Muse-Twi-Saga
10/19/2019, 1:51 am Link to post Email Joxcenia   PM Joxcenia Blog
 
Pastor Rick Profile
Live feed
Blog
Friends
Miscellaneous info

Moderator

Registered: 07-2005
Location: Texas
Posts: 10166
Karma: 271 (+330/-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.

---

Advertise Boards On TRDConceptsDE
10/19/2019, 4:14 am Link to post Email Pastor Rick   PM Pastor Rick Blog
 
Lesigner Girl Profile
Live feed
Blog
Friends
Miscellaneous info

Global Administrator
Head of Runboard staff

Registered: 11-2005
Posts: 25165
Karma: 424 (+477/-53)
Reply | Quote
Re: Images In Forum Descriptions


Thanks, Rick. I'll take this one. emoticon


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. emoticon

---
Runboard Knowledge Base
Website Creation Tutorials
10/19/2019, 6:48 am Link to post Email Lesigner Girl   PM Lesigner Girl Blog
 


Add a reply



You are not logged in (login)