Month: March 2016

Colorful Sidebar Menus

Posted on by

If you add a sidebar with a menu widget, you may notice that the menu is displayed in a very simple manner. Below is code that you can add to your custom CSS to add some style to your sidebar menu. This code will work with websites using the Hale 2015 and Sherman themes.

Code

#page-sidebar .widget.widget_nav_menu {
padding-left:0;
padding-right:0
}

#page-sidebar .widget ul {
margin:0
}

#page-sidebar .widget ul li {
padding:1em;
margin:0
}

#page-sidebar .widget ul li.current-menu-item,#page-sidebar .widget ul li.current-menu-item:hover,#page-sidebar .widget ul li.current-menu-item:active {
background:#0f4786
}

#page-sidebar .widget ul li:hover,#page-sidebar .widget ul li:active {
background:#dbe3ed
}

#page-sidebar .widget ul li.current-menu-item a,#page-sidebar .widget ul li.current-menu-item:hover a,#page-sidebar .widget ul li.current-menu-item:active a {
color:#fff
}
Note: The colors are marked in red — feel free to change them to whatever HEX codes you want!

Result

To see how this CSS code looks on an actual sidebar menu, visit the Development page.

User Roles

Posted on by

Buttons

Posted on by

To add buttons to your page/post, you must be in the 'Text' editor view.

Compatible Tags

You can make buttons out of the following HTML tags:

Tag Sample Code
 a 
<a class="btn btn-default" href="https://www.google.com" role="button">Link</a>
 button 
<button class="btn btn-default" type="submit">Button</button>
 input (type: button) 
<input class="btn btn-default" type="button" value="Input">
input (type: submit) 
<input class="btn btn-default" type="submit" value="Submit">

Button Classes

You may use the following btn btn-* classes to produce buttons of different colors:

Class Sample Code Output
btn-default 
<button type="button" class="btn btn-default">Default</button>
btn-primary 
<button type="button" class="btn btn-primary">Primary</button>
btn-success 
<button type="button" class="btn btn-success">Success</button>
btn-info 
<button type="button" class="btn btn-info">Info</button>
btn-warning 
<button type="button" class="btn btn-warning">Warning</button>
btn-danger 
<button type="button" class="btn btn-danger">Danger</button>
btn-link 
<button type="button" class="btn btn-link">Link</button>

Button Sizes

You may use the following btn btn-* classes to produce buttons of different sizes:

Class Sample Code Output
btn-lg 
<button type="button" class="btn btn-primary btn-lg">Large button</button>
N/A (default) 
<button type="button" class="btn btn-primary">Default button</button>
btn-sm 
<button type="button" class="btn btn-primary btn-sm">Small button</button>
btn-xs 
<button type="button" class="btn btn-primary btn-xs">Extra small button</button>

Block Buttons

You may also create buttons that fill the entire width of the parent div by adding a btn-block class. For example: