SmartTheme – Custom Scripts

To set smaller homepage hero height, use following snippet: 

.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 {
padding: .7em 2em;

Was this article helpful?

Related Articles

Need Support?
Can't find the answer you're looking for? Don't worry we're here to help!
Contact Support