Autumn77
Regular poster
Registered: 08-2017
Posts: 196
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
PM Autumn77
Blog
|
Joxcenia
Global Administrator
Runboard staff member
Registered: 11-2005
Location: Whoosher House
Posts: 7810
Karma: 74 (+75/-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.
---
|
10/17/2017, 10:30 pm
|
Link to post
Email Joxcenia
PM Joxcenia
Blog
|
Joxcenia
Global Administrator
Runboard staff member
Registered: 11-2005
Location: Whoosher House
Posts: 7810
Karma: 74 (+75/-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
---
|
10/17/2017, 10:41 pm
|
Link to post
Email Joxcenia
PM Joxcenia
Blog
|
Susa
Global Administrator
Registered: 07-2006
Location: Oχάιο
Posts: 4623
Karma: 128 (+137/-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.
|
10/18/2017, 1:43 am
|
Link to post
PM Susa
Blog
|
Lesigner Girl
Global Administrator
Head of Runboard staff
Registered: 11-2005
Posts: 26740
Karma: 436 (+489/-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.
|
10/18/2017, 5:35 am
|
Link to post
Email Lesigner Girl
PM Lesigner Girl
Blog
|
Susa
Global Administrator
Registered: 07-2006
Location: Oχάιο
Posts: 4623
Karma: 128 (+137/-9)
|
Reply | Quote
|
|
Re:
Thank you, Lesa!
|
10/18/2017, 1:47 pm
|
Link to post
PM Susa
Blog
|
Autumn77
Regular poster
Registered: 08-2017
Posts: 196
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
PM Autumn77
Blog
|
Autumn77
Regular poster
Registered: 08-2017
Posts: 196
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
PM Autumn77
Blog
|
Susa
Global Administrator
Registered: 07-2006
Location: Oχάιο
Posts: 4623
Karma: 128 (+137/-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---------- */
}
|
10/18/2017, 8:39 pm
|
Link to post
PM Susa
Blog
|
Autumn77
Regular poster
Registered: 08-2017
Posts: 196
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
PM Autumn77
Blog
|