Support » Theme: Enspire » CSS Tweaking Cheatsheet for those who want more vibrant colors

  • Resolved techtangerine

    (@techtangerine)


    I really love this theme, but I felt that the colors that came with it were rather dull. So I am sharing my CSS tweaks. The finished product will look like this, but feel free to mix and match.

    Note to Alex: You are free to incorporate any portion thereof in the actual theme (if you like it).

    
    
    /*Editing to Stylesheet to replace #1db954 green with #1c7a1e green. */
    
    ::selection {
      background: #1c7a1e;
    }
    
    ::-moz-selection {
      background: #1c7a1e;
    }
    
    a {
      color: #1c7a1e;
    }
    
    .themeform label .required {
      color: #1c7a1e;
    }
    
    .themeform button[type="submit"] {
      background: #1c7a1e;
    }
    
    .sidebar-toggle {
      background: #1c7a1e;
    }
    
    .page-title .meta-single li.comments a {
      background: #1c7a1e;
    }
    
    .page-title .meta-single li.comments a:before {
      content: '';
      border-right: #1c7a1e;
      border-top: #1c7a1e;
    }
    
    .square-icon:hover .square-icon-inner {
      background: #1c7a1e;
    }
    
    .site-title a {
      background: #1c7a1e;
    }
    
    .toggle-search.active {
      background: #1c7a1e;
    }
    
    .search-expand {
      display: none;
      z-index: 101;
      background: #1c7a1e;
    }
    
    @media only screen and (min-width: 720px) {
      #nav-topbar .nav > li.current-post-parent > a {
        background: #1c7a1e;
      }
    
      #nav-topbar .nav li.current-post-parent > a {
        color: #1c7a1e;
      }
    }
    
    .post-hover:hover .post-title a {
      color: #1c7a1e;
    }
    
    .post-comments {
      background: #1c7a1e;
    }
    
    .post-comments > span:before {
      content: '';
      border-right: #1c7a1e;
      border-top: #1c7a1e4;
    }
    
    .post-title a:hover {
      color: #1c7a1e;
    }
    
    .post-tags a:hover {
      background-color: #1c7a1e;
    }
    
    .author-bio .bio-avatar:after {
      background: #1c7a1e;
    }
    
    .post-nav li a:hover i {
      color: #1c7a1e;
    }
    
    .widget > h3 > span {
      border-bottom: #1c7a1e;
      color: #ffffff;
    }
    
    .widget_rss ul li a {
      color: #1c7a1e;
    }
    
    .widget_calendar a {
      color: #1c7a1e;
    }
    
    .widget_calendar caption {
      background: #1c7a1e;
    }
    
    .alx-tabs-nav li.active a {
      color: #1c7a1e;
      border-bottom-color: #1c7a1e;
    }
    
    .alx-posts li:hover .post-item-title a {
      color: #1c7a1e;
    }
    
    .comment-tabs li.active a {
      color: #1c7a1e;
      border-bottom-color: #1c7a1e;
    }
    
    .comment-awaiting-moderation {
      color: #1c7a1e;
    }
    
    .commentlist li.comment-author-admin > .comment-body:after {
      background: #1c7a1e;
    }
    
    .child-menu a:hover {
      color: #1c7a1e;
    }
    
    .child-menu .current_page_item > a {
      color: #1c7a1e;
    }
    
    .wp-pagenavi a {
      color: #1c7a1e;
    }
    
    .wp-pagenavi span.current {
      background: #1c7a1e;
    }
    
    /* Finish Editing to Stylesheet to replace #1db954 green with #1c7a1e green. */
    
    #header .pad {
      background-color: #eb5201;
    }
    
    /*  header : nav topbar
    /* ------------------------------------ */
    
    #nav-topbar .nav-toggle {
      background: transparent;
      color: #ffffff;
    }
    
    #nav-topbar .nav-text {
      color: #ffffff;
    }
    
    @media only screen and (min-width: 720px) {
      /* common */
    
      #nav-topbar .nav li a {
        color: #ffffff;
        font-weight: 300;
      }
    
      #nav-topbar .nav li a:hover {
        color: #1c7a1e;
      }
    
      /* level 1 */
    
      #nav-topbar .nav > li:hover > a {
        background: transparent;
        color: #1c7a1e;
        border-color: #eee;
      }
    
      #nav-topbar .nav > li.current-post-parent > a {
        background: #ff991a;
        color: #fff!important;
      }
    
      #nav-topbar .nav li.current-post-parent > a {
        color: #ff991a;
      }
    
      /* level 2 & 3 */
    }
    
    @media only screen and (max-width: 719px) {
      /* common */
    
      #nav-topbar .nav li a {
        color: #ffffff;
        border-top: 1px solid #eee;
      }
    
      /* level 1 */
    
      #nav-topbar .nav li.current-post-parent > a {
        background: rgba(0,0,0,0.06);
        color: #1c7a1e;
      }
    }
    
    /* End of Navigation menu Colors */
    
    /* BLOG HEADING */
    
    .page-title h2 {
      color: #ff991a;
    }
    
    .page-title span {
      color: #eb5201;
    }
    
    /* End of BLOG HEADING */
    
    /* The main background color */
    
    .pad.group {
      background-color: #fceebf;
    }
    
    /* Preventing the footer from acquiring the main background color. This overrides the setting */
    
    /* in the theme customization */
    
    #footer-bottom .pad {
      background-color: #eb5201;
    }
    
    /* Getting rid of white gaps in the corner of the header */
    
    #header {
      background: #eb5201;
    }
    
    /* Sidebar background colour  */
    
    .sidebar.s1 {
      background-color: #ff991a;
    }
    
    /* Adding color to another portion of the homepage and post body generated because of a long sidebar  */
    
    .main-inner.group {
      background-color: #fceebf;
    }
    
    /* Carousel Items background color and text color (If you use the carousel */
    
    .owl-item .post {
      background: #9dd946;
    }
    
    .owl-item .post-title {
      color: #eb5201;
    }
    
    .square-icon {
      background-color: #9dd946;
    }
    
    #commentform.comment-form {
      background-color: #ff991a;
    }
    
    .post-grid .square-icon {
      background-color: #fceebf;
    }
    
    .single .post-title {
      color: #eb5201;
    }
    
    .post-title a {
      color: #eb5201;
    }
    
    #subheader .pad {
      background-color: #fea66c;
    }
    
    .widget_text .textwidget p {
      color: #ffffff;
    }
    
    /* Front ad widget size change from 50% to 100% so that single widget can take entire screen space...good for a slider. Note that you will not be able to display the other widget next to it  */
    
    .front-widget-col {
      width: 100%;
      float: left;
    }
    
    /* Making annoying dividing line above front ad widget disappear  */
    
    #header-ads {
      opacity: 0;
    }
    
  • The topic ‘CSS Tweaking Cheatsheet for those who want more vibrant colors’ is closed to new replies.