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 your browser’s inspect tool 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:
- Center logo in header
- Center menu items in main navigation
- Change the padding for items in main navigation
- Disable uppercase letters in main menu
- Hide main navigation
- Show header navigation on mobile devices
- Show additional navigation on mobile devices
- Hide page title
- Hide date in news ticker
- Hide category in news ticker
- Hide tags on posts
- Hide grey image placeholders
- Hide one sidebar when having two sidebar layout enabled
- Center copyright notice in footer
- Hide category in MH Carousel widget
- Change font size within caption of MH Slider widget
Center logo in header:
.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; }
Center copyright notice in footer:
.mh-copyright { text-align: center; }
Hide category in MH Carousel widget:
.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; }