Runboard.com
Слава Україні!
Lost? Hover on Bookmarks!
Runboard Extra! The Runboard Directory Runboard Knowledge Base

Welcome to Runboard Support, the place to find help with your Runboard user account or message board.

If you can't find the answer you need with our search feature, ask here, and a member of staff will respond to you personally.

Chat room Runboard Knowledge Base (wiki) Search Facebook Twitter

runboard.com       You are not logged in.

 
Ladyvelvetnightshade Profile
Live feed
Blog
Friends
Miscellaneous info

Registered user

Registered: 02-2014
Posts: 4
Karma: 1 (+1/-0)
Reply | Quote
Help with banner logo?


Um, I am using this skinfor my board, but I can't seem to figure out where to put my board logo (and I don't mean the community logo directly listed in the edit lay out/colors of your board). I have looked everywhere. But I am either missing it or...something. Can I get a little help or direction?
4/23/2014, 5:58 pm Link to post Email Ladyvelvetnightshade   PM Ladyvelvetnightshade Blog
 
Lesigner Girl Profile
Live feed
Blog
Friends
Miscellaneous info

Global Administrator
Head of Runboard staff

Registered: 11-2005
Posts: 26740
Karma: 436 (+489/-53)
Reply | Quote
Re: Help with banner logo?


Welcome to Runboard Support, Ladyvelvetnightshade. emoticon

Click here for instructions on how to apply that skin.

In the HTML Header, it says this:

<div class="banbox">
<h1>Board Name or logo here</h1></div>


There are a couple of different ways you can put a banner there.


Easy method:

Remove the words, "Board Name or logo here" and put an HTML <img> tag in its place. Example:

<div class="banbox">
<h1><img src="http://bakheva.runboard.com/img/rb/homepage2/logo.gif" alt="Name of your board" /></h1>


The part in blue would be the image URL. The part in green would be the name of your board. If your image host ever goes down for any reason, it will show the name of your board there in its place.

You could also turn that banner into a link to the main page of your board, and this blog post explains how turn an image into a link.


More advanced, but more versatile:

In addition to being more versatile, it will also prevent your pages from hanging up if your image host goes down, and is a better coding practice in general. If you want to use this method and want me to do it for you, I can if you give me the image URL and tell me it's ok.

Going back to that HTML as it is now:

<div class="banbox">
<h1>Board Name or logo here</h1></div>


You can change "Board Name or logo here" to the name of your board, and put the image in your CSS.

You'll see class="banbox" in that HTML header. To style it in your CSS, you would use .banbox (note the dot before the word).

Going back to the instructions for adding that skin, you'll see this in the CSS:

/* DEFINES BANNER AREA COLOR AND SIZES */
.banbox {
background-color : #0d0d0d;
border : 1px solid #767676;
width : 95%;
font-size : 11px;
color : #767676;
margin:0 auto;
text-align:center;
}


In the HTML Header, inside that banbox is an <h1> tag. To target that h1 tag in your CSS, you would use .banbox h1, which you'll see below.

Immediately below the } in the CSS I posted above, and before anything else, add the following, replacing IMG_URL_HERE with your image URL, and the height to the actual height of your image. Both are labeled in red below.

.banbox h1 {
height: 150px;
background: url('IMG_URL_HERE') no-repeat center;
text-indent: -10000px;
font-size: 10px;
overflow: hidden;
}


Those last 3 lines will hide the text, but having your board name there serves two purposes. One, having your board name in an <h1> tag can help with search engines when someone searches for that word or phrase. Two, anyone with poor or no eyesight who requires the aid of an aural screen reader will hear the name of your board. The same goes true for the "alt" tag in the first (simple) method I posted above.

If you choose the 2nd method and want a clickable link there, I can help with that two. At this board, this logo:

Image

...uses the 2nd method, and it uses a link.

I hope this helps. Please let us know if you need more assistance. emoticon

Last edited by Lesigner Girl, 4/23/2014, 6:47 pm


---
Runboard Knowledge Base
Runboard Support Forums
Find other message boards
4/23/2014, 6:45 pm Link to post Email Lesigner Girl   PM Lesigner Girl Blog
 
Ladyvelvetnightshade Profile
Live feed
Blog
Friends
Miscellaneous info

Registered user

Registered: 02-2014
Posts: 4
Karma: 1 (+1/-0)
Reply | Quote
Re:


Thank you so much! I never would have figured that out. I know virtually nothing about html or css, to be honest. I can make a banner in photoshop, but putting it in code like that...Ha...no way.

...Would it be the same with Seperators...or no?

Last edited by Ladyvelvetnightshade, 4/23/2014, 7:18 pm
4/23/2014, 7:16 pm Link to post Email Ladyvelvetnightshade   PM Ladyvelvetnightshade Blog
 
Lesigner Girl Profile
Live feed
Blog
Friends
Miscellaneous info

Global Administrator
Head of Runboard staff

Registered: 11-2005
Posts: 26740
Karma: 436 (+489/-53)
Reply | Quote
Re: Help with banner logo?


You're very welcome, Ladyvelvetnightshade!

That particular skin has separator styling defined in this part of the CSS:

/* DEFINES SEPARATOR COLORS */
.ak_msgform_poll_options_head_td, .ak_msg_seememberlist_head_user_td, .ak_msg_seememberlist_head_date_td, .ak_msg_seememberlist_head_im_td, .ak_msg_seememberlist_head_pm_td, .ak_msg_seememberlist_head_email_td, .ak_poll_table_header, .forum_list_header_newtext_td, .forum_list_header_forum_td, .forum_list_header_topics_td, .forum_list_header_posts_td, .forum_list_header_lastpost_td, .forumlist_separator_td, .topic_list_header_modbox_td, .topic_list_header_newtext_td, .topic_list_header_posticon_td, .topic_list_header_topic_td, .topic_list_header_startedby_td, .topic_list_header_replies_td, .topic_list_header_views_td, .topic_list_header_lastpost_td {
font-size : 11px;
height : 23px;
background-image : url(http://rbbt.net/skins/joshin_josh/box/sep.gif);
padding-top : 0;
padding-bottom : 0;
}


Those all affect different areas, but are grouped together like that because they're styled the same.

.ak_msgform_poll_options_head_td refers to the headers on polls,

.ak_msg_seememberlist_head_???_td all refer to different headers in the member list,

.forum_list_header_???_td all refer to the different headers on the list of forums, and

.topic_list_header_???_td all refer to the different headers on the list of topics inside each forum.


If you want to un-group some of those to style them differently, or just need help editing what's there, just let us know what you want to accomplish and we can help you with that. emoticon

---
Runboard Knowledge Base
Runboard Support Forums
Find other message boards
4/23/2014, 8:18 pm Link to post Email Lesigner Girl   PM Lesigner Girl Blog
 
Ladyvelvetnightshade Profile
Live feed
Blog
Friends
Miscellaneous info

Registered user

Registered: 02-2014
Posts: 4
Karma: 1 (+1/-0)
Reply | Quote
Re:


Okay, think I will just leave that alone then. I was only asking because I had been looking at another one called Energy as well, that I had been considering before I actually found the one I am using. Thank you so much!
4/23/2014, 9:27 pm Link to post Email Ladyvelvetnightshade   PM Ladyvelvetnightshade Blog
 
Lesigner Girl Profile
Live feed
Blog
Friends
Miscellaneous info

Global Administrator
Head of Runboard staff

Registered: 11-2005
Posts: 26740
Karma: 436 (+489/-53)
Reply | Quote
Re: Help with banner logo?


You're very welcome!

If you change your mind and decide to change all of these ImageImageImageImage images, just replace
http://rbbt.net/skins/joshin_josh/box/rsep.gif in that bit of code with your new image. If you do that, you might also want to find and change these border images in the code to match the new separators:

Image http://rbbt.net/skins/joshin_josh/box/rmid-l.gif (left border)

Image http://rbbt.net/skins/joshin_josh/box/rmid-r.gif (right border)

ImageImageImage http://rbbt.net/skins/joshin_josh/box/rtop-m.gif (top border)

Image http://rbbt.net/skins/joshin_josh/box/rtop-l.gif (top left corner)

Image http://rbbt.net/skins/joshin_josh/box/rtop-r.gif (top right corner)

ImageImageImage http://rbbt.net/skins/joshin_josh/box/rbot-m.gif (bottom middle)

Image http://rbbt.net/skins/joshin_josh/box/rbot-l.gif (bottom left corner)

Image http://rbbt.net/skins/joshin_josh/box/rbot-r.gif (bottom right corner)

If you make the images the same sizes as the existing ones, you won't have to change anything else in the CSS, and can just replace the image URLs. To get the dimensions of each image, right-click on one in my post here and choose "View image info" (exact wording can vary from browser to browser).

The width of the top and bottom border, and the height of the side borders don't really matter, in case you want to get fancy with your images. As long as the top and bottom have the same height, the sides have the same width, and the corners are the same both ways, it will still fit with the existing CSS. With your Photoshop skills, I think you could handle this. emoticon

I hope this helps. Don't hesitate to stop by any time you need more assistance. emoticon

Last edited by Lesigner Girl, 4/23/2014, 10:06 pm


---
Runboard Knowledge Base
Runboard Support Forums
Find other message boards
4/23/2014, 10:05 pm Link to post Email Lesigner Girl   PM Lesigner Girl Blog
 
Ladyvelvetnightshade Profile
Live feed
Blog
Friends
Miscellaneous info

Registered user

Registered: 02-2014
Posts: 4
Karma: 1 (+1/-0)
Reply | Quote
Re:


Image
4/24/2014, 4:28 pm Link to post Email Ladyvelvetnightshade   PM Ladyvelvetnightshade Blog
 
Queenyforever Profile
Live feed
Blog
Friends
Miscellaneous info

A Posting Machine

Registered: 01-2007
Location: Just north of the clouds...
Posts: 3787
Karma: 71 (+104/-33)
Reply | Quote
Re: Help with banner logo?


That she does, Ladyvelvetnightshade. emoticon

---

“Freedom and democracy are dreams you never give up.”

4/24/2014, 6:19 pm Link to post Email Queenyforever   PM Queenyforever Blog
 
Lesigner Girl Profile
Live feed
Blog
Friends
Miscellaneous info

Global Administrator
Head of Runboard staff

Registered: 11-2005
Posts: 26740
Karma: 436 (+489/-53)
Reply | Quote
Re: Help with banner logo?


Aww, thank you both. emoticon

---
Runboard Knowledge Base
Runboard Support Forums
Find other message boards
4/24/2014, 8:38 pm Link to post Email Lesigner Girl   PM Lesigner Girl Blog
 


Add a reply



You are not logged in (login)