Runboard.com
Слава Україні!
open to all ages
Runboard Design
  CSS
    The Runboard Navigation Bar
Chat Twitter 
Help & Support FB Search 
 

Runboard       Sign up ● Create Account ● learn about it ● Sign in ● lost password?

 
Pastor Rick Profile
Live feed
Blog
Friends
Miscellaneous info
Head Administrator

Registered: 07-2005
Location: Texas
Posts: 241
Karma: -1 (+0/-1)
Reply ● Quote
The Runboard Navigation Bar

The CSS coding shown below is "minimalist" in nature. The aim is to provide a board owner or admin the option of changing the primary display color of Runboard's navigation bar to better match the look and feel of a message board community.

I am not going to document every CSS setting involved with the navigation bar as I believe doing so would stray into the boundary between front-end design coding and back-end Runboard system development.

To use one of these color Runboard navigation bars just copy and paste the desired CSS color codes in your message boards custom CSS area.
( Control Panel :: Board management :: Edit colors and theme :: CSS management )

Runboard Default CSS SettingsImage
/* RUNBOARD DEFAULT NAV BAR */

#rb-navbar, #bookmarks_popup h3 {
    background-color: #333333;
    background-image: url(https://cdn.runboard.com/sp/svg?from=555555&to=000000);
    background-image: linear-gradient(to top, #000000 0%, #555555 100%);
}
.ajax-search-form input[type="text"] {
    background: #333333;
    color: #EEEEEE;
}
#rb-navbar a.navbar-link:hover, #rb-navbar ul ul a:hover {
    background: #333333;
}
#rb-navbar a.navbar-link:link, #rb-navbar a.navbar-link:visited, #rb-navbar a.navbar-link:active, #rb-navbar a.navbar-link:hover {
    color: #EEEEEE;
}
#bookmarks_popup, #cpanel_popup {
    background: #F3F3F3;
}
#rb-navbar ul#cpanel_popup_boards {
    background: #F3F3F3;
}
Red CSS SettingsImage
/* RUNBOARD RED NAV BAR */

#rb-navbar, #bookmarks_popup h3 {
    background-color: #630000;
    background-image: url(https://cdn.runboard.com/sp/svg?from=900&to=300);
    background-image: linear-gradient(to top, #350000 0%, #980000 100%);
}
.ajax-search-form input[type="text"] {
    background: #630000;
    color: #EEEEEE;
}
#rb-navbar a.navbar-link:hover, #rb-navbar ul ul a:hover {
    background: #630000;
}
#rb-navbar a.navbar-link:link, #rb-navbar a.navbar-link:visited, #rb-navbar a.navbar-link:active, #rb-navbar a.navbar-link:hover {
    color: #EEEEEE;
}
#bookmarks_popup, #cpanel_popup {
    background: #FFF3E7;
}
#rb-navbar ul#cpanel_popup_boards {
    background: #FFF3E7;
}
Red (Rose) CSS SettingsImage
/* RUNBOARD RED ROSE NAV BAR */

#rb-navbar, #bookmarks_popup h3 {
    background-color: #D39595;
    background-image: url(https://cdn.runboard.com/sp/svg?from=FEB4B4&to=AA7878);
    background-image: linear-gradient(to top, #AA7878 0%, #FEB4B4 100%);
    color: #111111;
}
.ajax-search-form input[type="text"] {
    background: #D39595;
    color: #111111;
}
#rb-navbar a.navbar-link:hover, #rb-navbar ul ul a:hover {
    background: #D39595;
}
#rb-navbar a.navbar-link:link, #rb-navbar a.navbar-link:visited, #rb-navbar a.navbar-link:active, #rb-navbar a.navbar-link:hover {
    color: #111111;
    text-shadow: none;
}
#bookmarks_popup, #cpanel_popup {
    background: #FFF3E7;
}
#rb-navbar ul#cpanel_popup_boards {
    background: #FFF3E7;
}
Green CSS SettingsImage
/* RUNBOARD GREEN NAV BAR */

#rb-navbar, #bookmarks_popup h3 {
    background-color: #336633;
    background-img: url(http://cdn.runboard.com/sp/svg?from=339933&to=005500);
    background-image: linear-gradient(to top, #005500 0%, #339933 100%);
}
.ajax-search-form input[type="text"] {
    background: #336633;
    color: #EEEEEE;
}
#rb-navbar a.navbar-link:link, #rb-navbar a.navbar-link:visited, #rb-navbar a.navbar-link:active, #rb-navbar a.navbar-link:hover {
    color: #EEEEEE;
}
#rb-navbar a.navbar-link:hover, #rb-navbar ul ul a:hover {
    background: #336633;
}
#bookmarks_popup, #cpanel_popup {
    background: #E8F1E8;
}
#rb-navbar ul#cpanel_popup_boards {
    background: #E8F1E8;
}
Blue CSS SettingsImage
/* RUNBOARD BLUE NAV BAR */

#rb-navbar, #bookmarks_popup h3 {
    background-color: #333366;
    background-img: url(http://cdn.runboard.com/sp/svg?from=333399&to=000055);
    background-image: linear-gradient(to top, #000055 0%, #333399 100%);
}
.ajax-search-form input[type="text"] {
    background: #333366;
    color: #EEEEEE;
}
#rb-navbar a.navbar-link:link, #rb-navbar a.navbar-link:visited, #rb-navbar a.navbar-link:active, #rb-navbar a.navbar-link:hover {
    color: #EEEEEE;
}
#rb-navbar a.navbar-link:hover, #rb-navbar ul ul a:hover {
    background: #333366;
}
#bookmarks_popup, #cpanel_popup {
    background: #F4F4F8;
}
#rb-navbar ul#cpanel_popup_boards {
    background: #F4F4F8;
}
Grey (Gainsboro) CSS SettingsImage
/* RUNBOARD GREY NAV BAR */

#rb-navbar, #bookmarks_popup h3 {
    background-color: #DDDDDD;
    background-img: url(http://cdn.runboard.com/sp/svg?from=EEEEEE&to=CCCCCC);
    background-image: linear-gradient(to top, #CCCCCC 0%, #EEEEEE 100%);
    color: #111111;
}
.ajax-search-form input[type="text"] {
    background: #DDDDDD;
    color: #111111;
}
#rb-navbar a.navbar-link:link, #rb-navbar a.navbar-link:visited, #rb-navbar a.navbar-link:active, #rb-navbar a.navbar-link:hover {
    color: #111111;
    text-shadow: none;
}
#rb-navbar a.navbar-link:hover, #rb-navbar ul ul a:hover {
    background: #DDDDDD;
}
#bookmarks_popup, #cpanel_popup {
    background: #FEFEFE;
}
#rb-navbar ul#cpanel_popup_boards {
    background: #FEFEFE;
}
Yellow (Butter) CSS SettingsImage
/* RUNBOARD YELLOW NAV BAR */

#rb-navbar, #bookmarks_popup h3 {
    background-color: #FDF6C5;
    background-img: url(http://cdn.runboard.com/sp/svg?from=FFFFCC&to=CCCC99);
    background-image: linear-gradient(to top, #CCCC99 0%, #FFFFCC 100%);
    color: #111111;
}
.ajax-search-form input[type="text"] {
    background: #FDF6C5;
    color: #111111;
}
#rb-navbar a.navbar-link:link, #rb-navbar a.navbar-link:visited, #rb-navbar a.navbar-link:active, #rb-navbar a.navbar-link:hover {
    color: #111111;
    text-shadow: none;
}
#rb-navbar a.navbar-link:hover, #rb-navbar ul ul a:hover {
    background: #FDF6C5;
}
#bookmarks_popup, #cpanel_popup {
    background: #FDFDF7;
}
#rb-navbar ul#cpanel_popup_boards {
    background: #FDFDF7;
}
Yellow (Peach) CSS SettingsImage
/* RUNBOARD YELLOW PEACH NAV BAR */

#rb-navbar, #bookmarks_popup h3 {
    background-color: #FFD2BA;
    background-img: url(http://cdn.runboard.com/sp/svg?from=FFCCCC&to=FFDDAA);
    background-image: linear-gradient(to top, #FFDDAA 0%, #FFFFCC 100%);
    color: #111111;
}
.ajax-search-form input[type="text"] {
    background: #FFD2BA;
    color: #111111;
}
#rb-navbar a.navbar-link:link, #rb-navbar a.navbar-link:visited, #rb-navbar a.navbar-link:active, #rb-navbar a.navbar-link:hover {
    color: #111111;
    text-shadow: none;
}
#rb-navbar a.navbar-link:hover, #rb-navbar ul ul a:hover {
    background: #FFD2BA;
}
#bookmarks_popup, #cpanel_popup {
    background: #FFF9F4;
}
#rb-navbar ul#cpanel_popup_boards {
    background: #FFF9F4;
}
Orange (Peel) CSS SettingsImage
/* RUNBOARD ORANGE NAV BAR */

#rb-navbar, #bookmarks_popup h3 {
    background-color: #C78F2A;
    background-img: url(http://cdn.runboard.com/sp/svg?from=FFBD5C&to=CC7A00);
    background-image: linear-gradient(to top, #CC7A00 0%, #FFBD5C 100%);
}
.ajax-search-form input[type="text"] {
    background: #C78F2A;
    color: #EEEEEE;
}
#rb-navbar a.navbar-link:link, #rb-navbar a.navbar-link:visited, #rb-navbar a.navbar-link:active, #rb-navbar a.navbar-link:hover {
    color: #EEEEEE;
    text-shadow: none;
}
#rb-navbar a.navbar-link:hover, #rb-navbar ul ul a:hover {
    background: #C78F2A;
}
#bookmarks_popup, #cpanel_popup {
    background: #FDFAF2;
}
#rb-navbar ul#cpanel_popup_boards {
    background: #FDFAF2;
}

Last edited by Pastor Rick, 5/14/19, 3:35 am


---

○ Advertise Boards On TRD ○ Concepts ○ DE ○
5/13/19, 2:09 am Link to this post Email Pastor Rick   PM Pastor Rick Blog
 
Pastor Rick Profile
Live feed
Blog
Friends
Miscellaneous info
Head Administrator

Registered: 07-2005
Location: Texas
Posts: 241
Karma: -1 (+0/-1)
Reply ● Quote
Re: The Runboard Navigation Bar

I added navigation bar "previews" to the first post to give everyone a visual clue on what each of the navbar CSS codes looks like when in use.

Please, do not be afraid to use one of the code sets to see if a colored navbar works on your board. If you don't like the results delete the code add-on and the default Runboard settings will once again take effect.

---

○ Advertise Boards On TRD ○ Concepts ○ DE ○
5/13/19, 8:55 pm Link to this post Email Pastor Rick   PM Pastor Rick Blog
 


Add a Reply



Powered by AkBBS 1.1 - Link to us - Blogs - Hall of Honor - - Create your free forum
You are not logged in (login)