Skip to contentSkip to author details

css

A 3-post collection

Integrating Bootstrap with the Casper Ghost Theme

Written by Michael Earls
 blog  bootstrap  css  programming  ghost  theme  casper

I have been working on my blog lately to customize the theme and provide some features that I wanted. I started with the default Ghost theme (Casper) and modified it to suit my needs.

I have shared my theme (I named it "Ghost Cerkit Theme") on GitHub in a new repository:

Ghost Cerkit Theme

I added a few features, like Google custom Search and Disqus comments. I also added a sidebar that shows Author information for the author of the first post on the site. This is for blogs that have a single author that want to show their information on all pages (except the Author page, where it is suppressed).

To use the theme, there are a few customization options that you'll have to change. The hardest one is probably the Google custom search. Instructions for how to create a custom search engine can be found on the Ghost website. In order for your custom search to work, you will need to put your search engine id in the hidden cx form field on the search form.

I had to make significant changes to the screen.css file in order for Bootstrap to work properly. There are a lot of settings in the default theme that interfere with Bootstrap. I believe the best way to see what changed would be to view the diffs for the css file (and some of the core .hbs templates).

In addition to the custom search form, I also added the ability for the user to change the current site theme. Since the custom theme utilizes Bootswatch themes, I was able to add a selection box containing all of the Bootswatch themes. When the user picks a new theme, the site changes to that theme and stores its name in a cookie on the user's browser. Whenever the user visits a page on the site in the future, the chosen theme is used instead of the default theme. There is also a reset button to return the site to the original theme as defined by the site owner. It is possible to hide the theme selector. Just add the following code to the header:

showThemeSelector = false;

I also replaced the Casper pagination control with a Bootstrap pagination control that shows more detail. However, in order for this to work, I had to utilize JavaScript. This might affect SEO a bit, but with the theme retaining the meta tags for navigation, I don't think there will be a major impact.

I will be writing up additional blog entries about how I implemented the Bootstrap pagination for Ghost as well as an entry about the theme selector.

The theme still needs some polish to remove all of the CSS that interferes with Bootstrap. I worked as hard as I could to remove any customizations that are specific to my personal site, but there are still some things that need to be done in order for it to work completely.

I retained the MIT license on the original Casper theme so that there are no constraints on usage. I thought about licensing it under GPL 2, but adding a more restrictive sublicense seemed inappropriate in this case. If you use the code and feel inclined to give me attribution, that would be great. Just link to my website (https://cerkit.com).

Dynamic Bootstrap themes with ASP.NET using server-side bundling

Written by Michael Earls
 bootstrap  bundling  css  themes  VB.NET

I am setting up a system that needs to load the bootstrap theme that is being used from the web.config file (eventually, this might move to a database field for runtime changes).

Initially, I had my theme defined in the bundle.config file like so:

<?xml version="1.0" encoding="utf-8" ?> 
<bundles version="1.0"> 
    <styleBundle path="~/Content/css"> 
        <include path="~/Content/bootstrap.css" /> 
        <include path="~/Content/Site.css" /> 
        <include path="~/Content/bootstrap-theme.superhero.min.css" /> 
    </styleBundle>
</bundles>

This worked well for statically defined theme, but I need to make it dynamic. It turns out that this was quite easy. Simply remove the theme from bundle.config and add it to BundleConfig.vb (or BundleConfig.cs for C# projects).

Before doing that, let’s go ahead and add it to the web.config file:

<appSettings>  
    <add key="theme" value="bootstrap-theme.superhero.min.css"/>
</appSettings>

Then, we just add this one line to the bottom of the BundleConfig.vb file:

bundles.GetBundleFor("~/Content/css").Include("~/Content/" & ConfigurationManager.AppSettings("theme"))

It is important to notice that the virtual path for the bundle matches the same name as the path defined in your bundle.config file.

Now, whenever pages on your site are served, the theme css will be served along with the other bundled css. After testing, I’m pretty sure that the newly included css is last in line.

To change your theme, simply change it in web.config and reload. Or, replace the call to ConfigurationManager.AppSettings to a database call to retrieve the theme.

Also, make sure you’ve downloaded and saved the css theme to the Content folder before trying to access it.

You can get some nice free themes from Bootswatch.

CSS Goodness!

Written by Michael Earls
 apple safari  chrome  css  firefox  google chrome  safari  wordpress

I just finished working on two custom templates/themes for WordPress. I used no HTML tables, just

tags and CSS. There were two tags – one each for the XHTML validation badge and the CSS validation badge. All the other images were background-images in CSS.

What’s most shocking is that I have one code base (XHTML and CSS) that works in IE 7+ (even in IE 7 quirks mode), Google Chrome, Firefox, and Apple Safari. I’m psyched. This is the first time in my career that I haven’t had to write javascript to detect the browser version. Of course, I am assuming that my visitors have more recent versions of their browser. That’s why I put a “this site optimized for…” deisclaimer at the bottom. Hopefully, it won’t look too awful in older browsers.

The sites both validate against XHTML and CSS. I’m really excited about this. I almost can’t believe it.

As soon as my domain name (cerkit.com) transfers to GoDaddy, I’ll post my new custom template/theme to the site and start piling on the blog entries!