---
title: "Additional Options – Using Custom Scripts (Smart Theme v3)"
description: "Additional Options – Using Custom Scripts (Smart Theme v3)"
url: https://docs.optimizepress.com/en/articles/182-additional-options-using-custom-scripts-smart-theme-v3
collection: "SmartTheme (Legacy)"
updated: 2026-06-11
language: en
---

# Additional Options – Using Custom Scripts (Smart Theme v3)

Additional Options – Using Custom Scripts (Smart Theme v3)

To set smaller homepage hero height, use following snippet:

```javascript
/* 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:

```javascript
@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.

```javascript
/* 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;
}
```

![](https://staticfiles.gleap.io/helpcenter/6952dad473c72323c1c59109/20251229205624_3550)

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.