Standard color style guide

  • Author
    Posts
  • #19829

    manovotny
    Member

    This topic will cover how to change the color of many elements within Standard. This will also be a “living” FAQ, meaning we will continue to add some of the more common elements that we get asked about as requests come in for them.

    The examples below will use example colors, usually very bold and vibrant colors to make the change very visible and easy to spot. You can, of course, change these values to suit your own needs.

    Requirements

    In order to utilize this CSS, you will need to purchase the WordPress.com Custom Design upgrade.

    CSS Styles

    To use these CSS styles, just place any of them you want under “Appearance > Custom Design > CSS”.

    If you are unfamiliar with picking hex color values, you can use this online color picker to find your colors.

    /* Markup / Site Wide
    ---------------------------------------------------------------- */
    
    /* background */
    body {
    	background: #333333;
    }
    
    /* Navigation
    ---------------------------------------------------------------- */
    
    /* Above Header
    ---------------------------------------------- */
    
    /* background */
    #menu-above-header .navbar-inner,
    .navbar .fill {
    	background-color: #FF0000;
    	background-image: none;
    }
    
    /* shadow */
    #menu-above-header .navbar-inner {
    	-webkit-box-shadow: none;
    	-moz-box-shadow: none;
    	box-shadow: noine;
    }
    
    /* menu items active */
    #menu-above-header.navbar .nav .active > a,
    #menu-above-header.navbar .nav .active > a:hover {
    	background-color: #ABCDEF;
    	color: #FF0000;
    }
    
    /* menu items hover */
    #menu-above-header.navbar .nav > li > a:hover {
    	background-color: #ABCDEF;
    }
    
    /* text */
    #menu-above-header.navbar .nav > li > a {
    	color: #0000FF;
    }
    
    /* text hover */
    #menu-above-header.navbar .nav > li > a:hover {
    	color: #00FF00;
    }
    
    /* Below Header
    ---------------------------------------------- */
    
    /* background */
    #menu-under-header .navbar-inner,
    .navbar .fill {
    	background-color: #FF0000;
    	background-image: none;
    }
    
    /* shadow */
    #menu-under-header .navbar-inner {
    	-webkit-box-shadow: none;
    	-moz-box-shadow: none;
    	box-shadow: noine;
    }
    
    /* menu items active */
    #menu-under-header.navbar .nav .active > a,
    #menu-under-header.navbar .nav .active > a:hover {
    	background-color: #ABCDEF;
    	color: #FF0000;
    }
    
    /* menu items hover */
    #menu-under-header.navbar .nav > li > a:hover {
    	background-color: #ABCDEF;
    }
    
    /* text */
    #menu-under-header.navbar .nav > li > a {
    	color: #0000FF;
    }
    
    /* text hover */
    #menu-under-header.navbar .nav > li > a:hover {
    	color: #00FF00;
    }
    
    /* Breadcrumbs
    ---------------------------------------------- */
    
    /* background and border */
    .breadcrumb {
    	background-color: #ABCEDF;
    	background-image: none;
    	border: 1px solid #2A80D7;
    	-moz-box-shadow: none;
    	-webkit-box-shadow: none;
    	box-shadow: none;
    }
    
    /* links */
    .breadcrumb a {
    	color: #FF7032;
    }
    
    /* dividers */
    .breadcrumb .divider {
    	color: #FF0000;
    }
    
    /* active */
    .breadcrumb li:last-child {
    	color: #2A80D7;
    }
    
    /* text shadow */
    .breadcrumb a,
    .breadcrumb li,
    .breadcrumb span {
    	text-shadow: none;
    }
    
    /* Pagination
    ---------------------------------------------- */
    
    .pager a {
    	background: #FF0000;
    	color: #FFFFFF;
    }
    
    .pager a:hover {
    	background: #FFFFFF;
    	color: #FF0000;
    }
    
    /* Footer
    ---------------------------------------------- */
    
    /* background */
    #sub-floor {
    	background-color: #FF0000;
    }
    
    /* links */
    #sub-floor .navbar .nav > li > a {
    	color: #0000FF;
    }
    
    #sub-floor .navbar .nav > li > a:hover {
    	color: #00FF00;
    }
    
    /* credit text */
    #sub-floor #credit {
    	color: #00FF27;
    }
    
    /* credit links */
    #sub-floor #credit a {
    	color: #000AFF;
    }
    
    #sub-floor #credit a:hover {
    	color: #999999;
    }
    
    /* Drop Down / Sub Menus
    ---------------------------------------------- */
    
    /* background */
    .navbar .dropdown-menu {
    	background-color: #ABCDEF;
    }
    
    /* links */
    .navbar .dropdown-menu a {
    	color: #FF0000;
    }
    
    .navbar .dropdown-menu > li a:hover,
    .navbar .dropdown-menu > li.active a:hover {
    	color: #0000FF;
    }
    
    /* Header
    ---------------------------------------------------------------- */
    
    /* Header Text
    ---------------------------------------------- */
    
    /* site title */
    #site-title,
    #site-title a {
    	color: #FF0000;
    }
    
    #site-title a:hover {
    	color: #0000FF;
    }
    
    /* tagline */
    #site-description {
    	color: #00FF00;
    }
    
    /* Posts & Pages
    ---------------------------------------------------------------- */
    
    /* Standard Post Format & Pages
    ---------------------------------------------- */
    
    /* background */
    .post {
    	background-color: #ABCDEF;
    }
    
    /* titles */
    .post-title,
    .post-title a,
    .post-title a:visited {
    	color: #FF0000;
    }
    
    .post-title a:hover {
    	color: #FF00FF;
    }
    
    /* meta text */
    .post-header-meta,
    .post-meta {
    	color: #FF0000;
    }
    
    /* meta links */
    .post-header-meta a,
    .post-meta a {
    	color: #00FF00;
    }
    
    .post-header-meta a:hover,
    .post-meta a:hover {
    	color: #0000FF;
    }
    
    /* meta borders */
    .post-header {
    	border-bottom-color: #FF0000;
    }
    
    .post-meta {
    	border-top-color: #FF0000;
    }
    
    /* headings */
    .post .entry-content h1,
    .post .entry-content h2,
    .post .entry-content h3,
    .post .entry-content h4,
    .post .entry-content h5,
    .post .entry-content h6 {
    	color: #00FF00;
    }
    
    /* text */
    .post .entry-content {
    	color: #E632B6;
    }
    
    /* links */
    .post .entry-content a,
    .post .entry-content a:visited {
    	color: #00FFCC;
    }
    
    .post .entry-content a:hover {
    	color: #D9FF00;
    }
    
    /* Link Post Format
    ---------------------------------------------- */
    
    /* meta is the same as standard post format */
    
    /* background */
    .post.format-link .post-header {
    	background-color: #FF7032;
    	background-image: none;
    }
    
    /* links */
    .post.format-link .post-title a,
    .post.format-link .post-title a:visited {
    	color: #CCCCCC;
    }
    
    .post.format-link .post-title a:hover {
    	color: #333333;
    }
    
    /* Quote Post Format
    ---------------------------------------------- */
    
    /* meta, headings, text, and links are the same as standard post format */
    
    /* quote background */
    .post.format-quote .post-header {
    	background-color: #FF7032;
    }
    
    /* quote text */
    .post.format-quote .entry-content {
    	color: #CCCCCC;
    }
    
    /* quote links */
    .post.format-quote .entry-content a {
    	color: #333333;
    }
    
    .post.format-quote .entry-content a:hover {
    	color: #CCCCCC;
    }
    
    /* Comments
    ---------------------------------------------------------------- */
    
    /* background */
    #comments,
    #pings,
    #no-comments,
    #respond {
    	background: #FF00FF;
    }
    
    /* Widgets
    ---------------------------------------------------------------- */
    
    /* General
    ---------------------------------------------- */
    
    /* titles */
    .widget h4 {
    	color: #00FF00;
    }
    
    /* text */
    .widget {
    	color: #E632B6;
    }
    
    /* links */
    .widget a,
    .widget a:visited {
    	color: #00FFCC;
    }
    
    .widget a:hover {
    	color: #D9FF00;
    }
    
    /* Personal Image
    ---------------------------------------------- */
    
    /* picture background */
    .standard-pi-pic {
    	background-color: #ABCDEF;
    }
    
    /* bio background */
    .personal-image p {
    	background-color: #ABCDEF;
    }
    
    /* text */
    .personal-image p {
    	color: #FF0000;
    }
    
    /* links */
    .personal-image p a {
    	color: #00FF00;
    }
    
    .personal-image p a:hover {
    	color: #0000FF;
    }
    
    /* Search
    ---------------------------------------------- */
    
    /* search focus */
    #searchform #s:focus {
    	border-color: #FF0000;
    	-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075), 0 0 8px #FF0000;
    	-moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075), 0 0 8px #FF0000;
    	box-shadow: inset 0 1px 1px rgba(0,0,0,0.075), 0 0 8px #FF0000;
    }
    
    /* placeholder text */
    #searchform #s::-webkit-input-placeholder {
    	color: #FF00FF;
    }
    
    #searchform #s:-moz-placeholder {
    	color: #FF00F;
    }

The topic ‘Standard color style guide’ is closed to new replies.