Smart Theme v3 Additional Options – Using Custom Scripts

To set smaller homepage hero height, use following snippet:

/* REDUCE HERO ON BLOG MAIN PAGE */
.op-homepage-hero, .op-homepage-hero-container {
    min-height: 100px;
}

To set the logo width and height to the exact width/height of your own logo, use the following CSS and just change the width and height to match your own logo:

@media screen and (min-width: 757px) {
/* change logo size to exact width and height of actual logo size */
.navbar .navbar-brand img {
  width: 300px!important;
  height: 80px!important;
  max-width: 300px;
  max-height: 80px;
}
/* set to exact logo height for fixed static header */
.op-navbar.fixed .navbar-brand img {
  max-height: 80px;
}
} /* end logo size setting */

Here are a few more custom CSS scripts that might be useful.

/* Change SmartTheme Main Menu Text-Transform to normal text */
.op-navbar .navbar-menu a {text-transform: none;}
/* Change padding for SmartTheme Footer */
.op-footer {
    padding-top: 30px;
    padding-bottom: 20px;
}
/* Better blog post grid for SmartTheme */
/* Lets set the grid background and border radius */
.op-content-grid-row>.box-item .post-box, .op-related-articles-grid-row>.box-item .post-box {
    background-color: #f5f5f5;
    padding: 10px;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
}
/* now lets set background color behind the grid so the grid items pop better */
.blog .content-area, .archive .content-area {
background-color: #183e89;
}
/* Better style for homepage hero button */
/* Homepage Hero Button when using standard header title option in blog hero settings */
/* will not work if selecting latest post or video for hero area */
.op-homepage-hero-button {
border-radius:3px;
font-size:22px;
padding: .7em 2em;
}

You can add a custom script across your SmartTheme pages under WordPress dashboard >> Appearance >> Theme Options >> Custom Script. We allow adding tracking codes, analytics, javascript, jquery, HTML and select php codes in the header, after header and footer section. Custom CSS should be added to CSS section only.

With this, you can custom modify the function and look of your elements, sections and even the whole display of your theme. This is a very powerful feature to track user behaviour and completely make your site standout from the rest of SmartTheme users.