18 November 2013
Museum Core offers a lot of flexibility. With all the custom color and typography controls, there are a ton of options for you to customize the look of your site. However, sometimes the color wheels are just too overwhelming — coming up with good color combinations is hard, especially if you aren’t a designer.
Museum Core is built on Bootstrap 3. Among other things, this means it’s built to be mobile first with easy-to-use classes if you wanted to add some custom content or display things in a certain way. That means it’s great for child themes, especially if you’re already familiar with Bootstrap, and there’s lots of existing documentation for Bootstrap so you can get a head start. But what it also means is that Museum Core — and likely any Boostrap 3-based theme — can be extended by using Bootstrap themes. Bootswatch is a site that offers Bootstrap 3 theme stylesheets that you can add to your project (though there are others out there which can be found by a simple Google search for “bootstrap themes”). Here’s how you can use Bootswatch (or other Bootstrap 3 themes) with Museum Core. This tutorial is going to assume that you already have a copy of Museum Core. If not, download and install it from the WordPress.org repository.
Get the theme
The first step is to get the theme. There are marketplaces that sell Bootstrap themes, but for this example, we’re just going to get a free one off Bootswatch. To start, I’m going to pick one with a white background, but later we’ll look at how to use one with a colored background which will need a few extra adjustments to get it to work. Click on the dropdown under Download to get just the CSS file.
This is a standard CSS file that is set up to work with Bootstrap’s classes and styles. Next we’ll need a way to add that CSS to your site. Leave this open (no need to actually download it) and move on to the next step.
Get a plugin
Since Core 2.0, in-theme custom CSS has been discontinued. There are better ways of handling it outside the theme. Both Jetpack and My Custom CSS give you nice-looking CSS editors and, in the case of Jetpack, support multiple file revisions so you can go back to an earlier version. If you’re already using Jetpack because of its numerous other handy components (comments, sharing, forms, stats, tiled galleries, carousels, etc), the easiest thing is to use the built-in CSS editor. Otherwise, if you don’t already have Jetpack — and don’t have any use for any of Jetpack’s numerous features — a slimmer solution would be to use My Custom CSS. Either way, you’ll get a CSS editor into which you can copy and paste the CSS that you just got from Bootswatch. So all you need to do is go to the CSS editor you got with your plugin and paste the CSS in there after copying the code from Bootswatch (in Jetpack, the menu item will be under Appearance. In My Custom CSS you’ll have a new, top-level menu item).
At this point, you may be good to go. Certainly if you downloaded the Cosmo theme pictured above, you’ll end up with a nice-looking variation of the default style.
At this point, you might want to tweak the fonts or any of the other settings in the customize panel. However, if you selected a theme that has a colored or dark background, you might have ended up with something that looked like this:
If that’s the case, you may want to make a few more adjustments. First among them is changing the content background color. You’ll probably want to match this to the overall background color, so in the CSS file, do a search (CTRL/Command + F) for
body, and look for the rule that includes a
background-color. Select and copy the hex value for the background color.
Paste that into the Content Background Color box in the theme customizer.
From there you can make any other tweaks you feel necessary to get the site to look the way you want, but Content Background is the main one you need to worry about.
That’s it. Now you have as many theme styles for Museum Core as there are Bootstrap themes, and all you need to do is a little copy and paste, no design or coding experience required!