steve.fm

A work in progress

Fixing Style Bugs

I had a few instances where some tricky bugs were showing up on my site. One was that when images were being loaded from Ulysses, they were displaying as gigantic images, far outside of the width I had set my posts. This made things looks pretty weird.

I fixed this by adding the properties from the responsive image class into my style.less file, which I renamed stevefm.less for clarity. In Less, I’m able to add all the properties of one class to another simply by putting it inside the other class, like so:

.blog-post img {
    .img-responsive;
}

In standard CSS, it would look more like this:

.blog-post img {
    display: block;
    max-width: 100%;
    height: auto;
}

See how Less saves time?

The second bug I ran into was that my blog style was starting to creep into my admin style. This might be tricky to see, but my serif typeface, Garamond, was creeping into everything!

I fixed this by changing the add_action() tag parameter in my functions.php — which is basically the name of the action that the function gets added to. What I didn’t know was that 'init' was also used on the Admin side! The functions.php file now looks like this:

<?php 
    add_action('wp_enqueue_scripts', 'add_theme_styles');
    add_action('wp_enqueue_styles', 'add_theme_scripts');

    function add_theme_styles() {
        wp_enqueue_style('stevefm', get_stylesheet_directory_uri().'/stylesheets/stevefm.less');
   }

    function add_theme_scripts() {
        wp_enqueue_script('jquery.min', get_stylesheet_directory_uri().'/bower_components/jquery/dist/jquery.min.js');
        wp_enqueue_script('bootstrap.min', get_stylesheet_directory_uri().'/bower_components/bootstrap/dist/js/bootstrap.min.js');
   }
 ?>
Read more about Building Steve.fm