MH Magazine: Common CSS Customizations

Custom CSS code for minor modifications in MH Magazine

When you’ve already configured your magazine WordPress theme and have started publishing awesome content, sometimes there is need for minor customizations that are beyond a standardized options panel and require custom coding. While theme customizations are beyond regular theme support, we have here collected some common CSS customizations for MH Magazine which you can apply to your website and modify these customizations as you like.

How to inspect CSS code on your site?

In order to inspect CSS code on your site, you could have a look at the stylesheet (style.css) of your theme or make use of tools such as Firebug or your browser’s inspect tool which you can use to inspect the elements on your site, see how the CSS code has been applied and then use that to make your own customizations. This also might be helpful: Basic CSS Tutorial.

How to apply custom CSS code to your site?

There are several ways of how you can apply custom CSS code to your site. But one thing you really shouldn’t do is modifying the original theme files, because these changes will be lost after theme updates. To apply custom CSS code to your site, you either could use the option in your WordPress dashboard under under Appearance => Customize => Theme Options => Custom CSS, install a plugin for custom CSS code (e.g. Simple Custom CSS) or make use of a custom child theme.

Custom CSS code for MH Magazine

These are examples of how you can change CSS code in MH Magazine. Feel free to use this code and modify to meet your personal requirements:

.mh-custom-header { text-align: center; }

Center menu items in main navigation:

.mh-main-nav ul { display: table; margin: 0 auto; }

Change the padding for items in main navigation:

.mh-main-nav li a { padding: 10px 20px; }

Disable uppercase letters in main menu:

.mh-main-nav { text-transform: none; }

Hide main navigation:

.mh-main-nav { display: none; }

Show header navigation on mobile devices:

@media screen and (max-width: 767px) {
    .js .mh-header-nav { display: block; }
}

Show additional navigation on mobile devices:

@media screen and (max-width: 767px) {
    .js .mh-extra-nav { display: block; }
}

Hide page title:

.page-title { display: none; }

Hide date in news ticker:

.mh-ticker-item-date { display: none; }

Hide category in news ticker:

.mh-ticker-item-cat { display: none; }

Hide tags on posts:

.entry-tags { display: none; }

Hide grey image placeholders:

.mh-image-placeholder { display: none; }

Hide one sidebar when having two sidebar layout enabled:

.mh-sidebar { display: none; }
.mh-content { width: 100% !important; }
.mh-copyright { text-align: center; }
.mh-carousel-caption { display: none; }

Change font size within caption of MH Slider widget:

.mh-slider-title { font-size: 24px; }
.mh-slider-content .mh-excerpt { font-size: 14px; }

Share this with your friends

9 Comments

  1. I have put some minor changes in the custom css file accessed by Appearance => Customize => Theme Options => Custom CSS. The changes are visibly working and I click save, save occurs but when I try to exit I get the standard message about leaving the page without saving.

    • Hi Trevor, we just checked and we don’t get that message after saving custom CSS. You could check if everything on your website is up to date (plugins, themes and WordPress). It’s also possible that a plugin on your website is causing the message to appear, so you could disable plugins and check again. For support, please always send a support request through the form on this page and our support staff will be more than happy to assist.

  2. Wondering if you could provide CSS to add the text “MENU” beside the hamburger icon on mobile. Thanks a million. Or even CSS to replace hamburger icon.

  3. I decorated my blog with the help of a custom CSS code in your post, so thank you. Very very helpful post thank you…

    • Hi Rob, you could hide the category in the MH Carousel widget with a line of CSS:

      .mh-carousel-caption { display: none; }

      You can add CSS code in your WordPress dashboard under Appearance => Customize => Additional CSS.

Leave a Comment

Your email address will not be published.


*