Sal Ferrarello
You are here: Home / Programming / Bootstra.386 WordPress Theme

Bootstra.386 WordPress Theme

Last updated on by

Chris McKenzie released a Bootstrap theme, Bootstra.386, which captures the look of 1980’s DOS programs (and the hearts of many geeks from the 80’s, myself included). Since, Bootstra.386 is a Bootstrap 2 theme, it was relatively easy for me to swap in Chris’s styles into the Bootstrap Genesis Starter Theme, creating a Bootstra.386 WordPress Theme.

Requirements

Since Bootstrap Genesis is a Genesis Child Starter Theme, Bootstra.386 Genesis does require the StudioPress Genesis Framework Parent Theme.

If you want to develop with either the Bootsta.386 Genesis Theme or Bootstrap Genesis Starter Theme, you’ll want to be running Grunt for CSS and JS processing, concatenation, and minification.

Converting Other Bootstrap 2 Themes

In addition the the straight Bootstrap theme, there are some Sass files, in /css/sass/supporting/, for styling WordPress specific elements like widgets.

Download

You can download the latest release of Bootstra.386 Genesis from its GitHub release page. Download Bootstra.386 Genesis WordPress Theme

Sal Ferrarello
Sal Ferrarello (@salcode)
Sal is a PHP developer with a focus on the WordPress platform. He is a conference speaker with a background including Piano Player, Radio DJ, Magician/Juggler, Beach Photographer, and High School Math Teacher. Sal can be found professionally at WebDevStudios, where he works as a senior backend engineer.

Reader Interactions

Comments

  1. Alex says

    Hello. I have a question about your theme, if I may. If I insert a image into a WordPress article, it’s somehow converted to black & white or 256 colors, I’m not really sure. But it’s clearly not the original image. How can I fix this? Thank you.

    Reply

    • Sal Ferrarello says

      Hi Alex, I’m applying the BOOTSTRA.386 Bootstrap Theme to my code so I’m not intimately familiar with the front-end code. It appears the following CSS is causing the change.

      
img {
   -webkit-filter: contrast(800%);
   -moz-filter: contrast(1000%);
   -ms-filter: contrast(800%);
    -o-filter: contrast(800%);
    filter: contrast(1000%);
}

      You should be able to add something like the following to remove the effect.

      
img {
   -webkit-filter: contrast(100%) !important;
   -moz-filter: contrast(100%) !important;
   -ms-filter: contrast(100%) !important;
    -o-filter: contrast(100%) !important;
    filter: contrast(100%) !important;
}
      Reply

Leave a Reply

Your email address will not be published. Required fields are marked *