Ladyvelvetnightshade
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
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.
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:
...uses the 2nd method, and it uses a link.
I hope this helps. Please let us know if you need more assistance.
Last edited by Lesigner Girl, 4/23/2014, 6:47 pm
|
4/23/2014, 6:45 pm
|
Link to post
Email Lesigner Girl
PM Lesigner Girl
Blog
|
Ladyvelvetnightshade
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
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.
|
4/23/2014, 8:18 pm
|
Link to post
Email Lesigner Girl
PM Lesigner Girl
Blog
|
Ladyvelvetnightshade
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
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 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:
http://rbbt.net/skins/joshin_josh/box/rmid-l.gif (left border)
http://rbbt.net/skins/joshin_josh/box/rmid-r.gif (right border)
http://rbbt.net/skins/joshin_josh/box/rtop-m.gif (top border)
http://rbbt.net/skins/joshin_josh/box/rtop-l.gif (top left corner)
http://rbbt.net/skins/joshin_josh/box/rtop-r.gif (top right corner)
http://rbbt.net/skins/joshin_josh/box/rbot-m.gif (bottom middle)
http://rbbt.net/skins/joshin_josh/box/rbot-l.gif (bottom left corner)
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.
I hope this helps. Don't hesitate to stop by any time you need more assistance.
Last edited by Lesigner Girl, 4/23/2014, 10:06 pm
|
4/23/2014, 10:05 pm
|
Link to post
Email Lesigner Girl
PM Lesigner Girl
Blog
|
Queenyforever
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.
---
“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
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.
|
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)
|