Custom Site Theming
      Back to home
      1. CampaignDrive Help Center
      2. CampaignDrive Knowledge Base
      3. Custom Site Theming

      Using Custom CSS in Your CampaignDrive Instance

      Below are snippets of CSS code that you can use in your CampaignDrive instance.

      Hide the Standard Four-Tile Layout on the Home Page

      Place this code into your Advanced CSS Setting area and you will hide the standard four-tile layout and be able to build a custom layout using site parts.

      .item-list {
            #one, #two, #three, #four {
                display: none;
           }
      }

      Changing the Color of the Brand Switcher

      .header-holder .login-bar a {
          color: #73736F;
      }

      .navbarBrandSwitcher .bsLinks {
          text-decoration: none;
          border-bottom: 1px dashed;
          vertical-align: central;
          color: #73736F;
          cursor: pointer;
      }
      .navbarBrandSwitcher .bsLinks:hover, .navbarBrandSwitcher .navbar-default a:focus.bsLinks, .navbar-default .navbarBrandSwitcher a:focus.bsLinks, .navbarBrandSwitcher .navbar-primary a:focus.bsLinks, .navbar-primary .navbarBrandSwitcher a:focus.bsLinks {
          color: #F8B90D;
          text-decoration: none;
          border-bottom: 1px solid #73736f; }

      Changing the Color of the Navigation Bar and the Brand Switcher

      #top > div > div.col-xs-6.col-sm-6.col-md-5.col-lg-4.navbarBrandSwitcherPanel > div > div > div > div:nth-child(1) > div > div:nth-child(2) > a {
        color: #55734d;
      }

      #top > div > div.col-xs-6.col-sm-6.col-md-5.col-lg-4.navbarBrandSwitcherPanel > div > div > div > div:nth-child(2) > div > div.brand-location > span:nth-child(1) {
        color: #55734d;
      }

      #top > div > div.col-xs-6.col-sm-6.col-md-5.col-lg-4.navbarBrandSwitcherPanel > div > div > div > div:nth-child(2) > div > div.brand-location > span:nth-child(3) {
        color: #55734d;
      }

      #top > div > div.col-xs-6.col-sm-6.col-md-5.col-lg-4.navbarBrandSwitcherPanel > div > div > div > div:nth-child(3) > div > div:nth-child(2) > a {
        color: #55734d;
      }

      .fa-sign-out:before {
        color: #55734d;
      }

      .fa-user:before {
        color: #55734d;
      }

      .fa-map-marker:before {
        color: #55734d;
      }
        
        #top > div > div.col-lg-10.title_container.pull-right.text-right.navbarBrandSwitcher.navbarBrandSwitcherHorizontal > a:nth-child(2) {
          color: #55734d;
      }

      #top > div > div.col-lg-10.title_container.pull-right.text-right.navbarBrandSwitcher.navbarBrandSwitcherHorizontal > span:nth-child(4) {
        color: #55634d;
      }

      #top > div > div.col-lg-10.title_container.pull-right.text-right.navbarBrandSwitcher.navbarBrandSwitcherHorizontal > span:nth-child(5) {
        color: #55634d;
      }

      #top > div > div.col-lg-10.title_container.pull-right.text-right.navbarBrandSwitcher.navbarBrandSwitcherHorizontal > a:nth-child(7) {
        color: #55634d;
      }

      Hiding center search bar/centering logo and change the search text color

      #top .col-md-4, #top .col-md-5 {display:none;}
      #top .col-md-3 {width: 100%}
      #top .col-md-3 .logo.pull-left {float: none !important; display: inline-block;}
      #top .col-md-3 .navbar-header {text-align: center;}
      #top .login-bar .bsLinks, #top .login-bar a, #top .title_container .bsLinks {color: #888888}
      #top .col-md-5 {display: block; position: absolute; right: 0;}
      #top .row {position: relative;}

       

      Global Font Change

      This is a code snippet to use in the "Advance Settings" area of the Theme Manager for updating the font in your CampaignDrive instance. 

      @import url('https://fonts.googleapis.com/css?family=Oswald');


      .navbar-primary .navbar-nav > li > a,
      ul.dropdown ul li > a {
          font-family: 'Oswald', sans-serif;
          text-transform: uppercase;
          font-size: 14px;
      }


      @import url('https://fonts.googleapis.com/css?family=Montserrat');

      * {
            font-family: 'Montserrat', sans-serif;
      }