Runboard.com
You're welcome.
Runboard Extra! The Runboard Directory Runboard Knowledge Base

Ugly blue checkboxes in Chrome since the last update? checkbox

See how to fix it here!

Chat room Runboard Knowledge Base (wiki) Search Facebook Twitter





runboard.com       You are not logged in.

Page:  1  2  3  4  5 

 
Autumn77 Profile
Live feed
Blog
Friends
Miscellaneous info

Regular poster

Registered: 08-2017
Posts: 183
Karma: 7 (+7/-0)
Reply | Quote
Code for different banners


I would like a different betterIn each forum .Susa gave me a code which I put into my test My Country Home board but am not sure how to tweak it.

URL is. ..
Http://bmycountryhome.runboard.com


---

10/17/2017, 5:19 pm Link to post Email Autumn77   PM Autumn77 Blog
 
Joxcenia Profile
Live feed
Blog
Friends
Miscellaneous info

Global Administrator
Runboard staff member

Registered: 11-2005
Location: Whoosher House
Posts: 3441
Karma: 56 (+57/-1)
Reply | Quote
Re: Code for different banners


You change the forum numbers and image urls per code/line. Copy & paste as many lines/codes as needed to get all of the forums set up.








---

Whoosh-ChelSierra-Muse-Twi-Saga
10/17/2017, 10:30 pm Link to post Email Joxcenia   PM Joxcenia Blog
 
Joxcenia Profile
Live feed
Blog
Friends
Miscellaneous info

Global Administrator
Runboard staff member

Registered: 11-2005
Location: Whoosher House
Posts: 3441
Karma: 56 (+57/-1)
Reply | Quote
Re: Code for different banners


From my 'Twilight' test board in the CSS box:


/* BANNERS */


#header1 { float: center; }
#header2 { float: center; }

#ak_board_home #header1,
#ak_forum_1 #header1,
#ak_forum_2 #header1,
#ak_forum_6 #header1 {
   height: 296px;
   background:url('http://gifyu.com/images/Twilight.png') no-repeat center;
}

/* The Author Forum */

#ak_forum_3 #header1 {
   height: 425px;
   background:url('http://gifyu.com/images/StephenieMeyer.png') no-repeat center;
}

#ak_forum_3 #header2 {
   height: 150px;
   background:url('http://gifyu.com/images/StephenieMeyerBanner.png') no-repeat center;
}

/* Books-Movies Forums */

#ak_forum_4 #header1 {
   height: 425px;
   background:url('http://gifyu.com/images/Twilight-1.png') no-repeat center;
}

#ak_forum_4 #header2 {
   height: 150px;
   background:url('http://gifyu.com/images/TwilightBanner.png') no-repeat center;
}

/* The Cullens Forum */

#ak_forum_5 #header1 {
   height: 425px;
   background:url('http://gifyu.com/images/CullenCoven.png') no-repeat center;
}

#ak_forum_5 #header2 {
   height: 150px;
   background:url('http://gifyu.com/images/TheCullensBanner.png') no-repeat center;
}


On some forums I have two images: #header1 & #header2

Last edited by Joxcenia, 10/18/2017, 2:18 am


---

Whoosh-ChelSierra-Muse-Twi-Saga
10/17/2017, 10:41 pm Link to post Email Joxcenia   PM Joxcenia Blog
 
Susa Profile
Live feed
Blog
Friends
Miscellaneous info

Global Administrator


Registered: 07-2006
Location: Oχάιο
Posts: 3791
Karma: 106 (+115/-9)
Reply | Quote
Re:


Autumn, your main banner needs moved to your CSS, rather than being in your html. Then we can do coding for each forum banner. All of that needs to be in your CSS.

You probably need to add a couple more forums to try this on. I am going to be pretty scarce tomorrow, but when I get home I will be glad to help you figure it out.

---


SS eH PF
10/18/2017, 1:43 am Link to post PM Susa Blog
 
Lesigner Girl Profile
Live feed
Blog
Friends
Miscellaneous info

Global Administrator
Head of Runboard staff

Registered: 11-2005
Posts: 25471
Karma: 426 (+479/-53)
Reply | Quote
Re: Code for different banners


I removed this from the HTML:

<br>
<center>
<img src="http://gifyu.com/images/IMG_0526.jpg"/> </a>
</center>


...and replaced it with this...

<div id="banner"></div>



In the CSS, I added this:

#banner {
   height: 389px;
   background: url('http://gifyu.com/images/IMG_0526.jpg') no-repeat center;
}




Now that I have changed the code to allow for different banners in different forums, all you need to add is more CSS to put a different banner in your one existing forum...


To have a different banner in the Main Chat forum, add this CSS below the CSS I added, and fill in the blanks as appropriate (more detail below the code)...

#ak_forum_1 #banner {
    height: ___px;
    background-image: url('______');
}



For the first blank, replace it with the height of the image you're using for the banner in that forum.

For the second blank, replace it with the URL of the image.

If you need more help, just post the URL to your image here, and someone can fill in the blanks for you.


Note: If you add more forums in the future and want different banners in those forums, you can add another snippet of CSS with #ak_forum_2, #ak_forum_3, etc., where the number corresponds with the f# at the end of the URL for that forum.

---
Runboard Knowledge Base
Runboard Support Forums
Find other message boards
10/18/2017, 5:35 am Link to post Email Lesigner Girl   PM Lesigner Girl Blog
 
Susa Profile
Live feed
Blog
Friends
Miscellaneous info

Global Administrator


Registered: 07-2006
Location: Oχάιο
Posts: 3791
Karma: 106 (+115/-9)
Reply | Quote
Re:


Thank you, Lesa!

---


SS eH PF
10/18/2017, 1:47 pm Link to post PM Susa Blog
 
Autumn77 Profile
Live feed
Blog
Friends
Miscellaneous info

Regular poster

Registered: 08-2017
Posts: 183
Karma: 7 (+7/-0)
Reply | Quote
Re:


Thanks LG! I will check it out . How fun !😀

---

10/18/2017, 1:57 pm Link to post Email Autumn77   PM Autumn77 Blog
 
Autumn77 Profile
Live feed
Blog
Friends
Miscellaneous info

Regular poster

Registered: 08-2017
Posts: 183
Karma: 7 (+7/-0)
Reply | Quote
Re:


Hmm ...not working for me.
 Here's the URL

http://gifyu.com/images/IMG_0903425642322643f6b7.gif

I just noticed your code Jox- may should try it...?

---

10/18/2017, 3:32 pm Link to post Email Autumn77   PM Autumn77 Blog
 
Susa Profile
Live feed
Blog
Friends
Miscellaneous info

Global Administrator


Registered: 07-2006
Location: Oχάιο
Posts: 3791
Karma: 106 (+115/-9)
Reply | Quote
Re:


Try this code, Autumn:

#ak_forum_1 #header {
background: url(http://gifyu.com/images/IMG_0903425642322643f6b7.gif) no-repeat center;
height: 193px; /* --------- Main Chat---------- */
}

---


SS eH PF
10/18/2017, 8:39 pm Link to post PM Susa Blog
 
Autumn77 Profile
Live feed
Blog
Friends
Miscellaneous info

Regular poster

Registered: 08-2017
Posts: 183
Karma: 7 (+7/-0)
Reply | Quote
Re:


Boo.

Still trying to get it to work on my test board.
Http://bmycountryhome.runboard.com



---

10/19/2017, 2:30 am Link to post Email Autumn77   PM Autumn77 Blog
 


Add a reply

Page:  1  2  3  4  5 



You are not logged in (login)