Lessons Learnt from Customizing My CSS for This Blog

... or, Behind the Scenes:  How I do my styling for this blog.  Shorter post this time with list of takeaways.

Quick post this time; this will mainly be a list of things learnt rather than the deep discussion style as seen in previous posts.  I will alternate between those styles of listing takeaways and detailed walkthroughs in the future -- so don't lose your patience if you're more of a long-form reader.

Note that although I use the ethereal theme here, the layout looks quite different and reveals the patterns on the background to the right side on desktop; the theme is also not adaptable, and on mobile in the default theme there is a bug where the background and the text gets misaligned that gets fixed in my version.  If you print any page on this blog, you'll also find that lots of unnecessary elements are removed.  Don't take my word for it — try to print this page and see what you get!  (Make sure to turn off Background Graphics when printing).

Now, y'all may think this is just your regular dose of CSS magic.  But what exactly is this magic?  Today, I'll summarize some of the things that made me a better CSS magician.

Today, I'll be showing the CSS setup I've created for my blog, and some things I learnt in the process.  The code is injected as a style tag in the head of the HTML of the template before the real theme code starts, with Mobile also using the "Custom" theme that we customized.

1. First, if you're trying to modify CSS in a codebase, use !important.  I know this sounds meme-worthy, but it's often helpful not to worry about the load order of scripts if we do this.
2. Second, blogger themes are kind of a mystery in terms of how the layout is built; therefore, it's more beneficial to search the resulting HTML of the blog for the values you need, rather than trying to reverse engineer what class you need to override.
3. Third, if you don't know something about the CSS code, you can often just let it go.  Fooling around with the properties you do know can get you surprisingly good results.
   
   (I think the above 2 items here applies for reading any codebase.  You should aim to understand the big flows of the logic (item 2 in this list), and then know the specific details you're dealing with, and research from there rather than overwhelming yourself with the whole thing).
   
4. Next, a CSS quirk: 100% refers to the entire parent box, including the margins.  This is often important, or you won't get good math.
5. You can use CSS media queries to customize behavior on print.  Unlike changing general CSS, this is an area where Inspect Element is helpful to know what to hide.
6. For blogger, make sure you wrap things in a CDATA block in the style element, or quotes are going to be escaped.

I now present the CSS code of this website:

My CSS Setup (Updated 7/17/26 to reflect my current code for hiding navigation bar)

.navbar {
  display: none;
}

.content-fauxcolumn-outer,
.region-inner {
  max-width: 1000px !important;
  width: calc(100% - 200px) !important;
  margin-left: 40px !important;
  margin-right: 160px !important;
}

body {
  min-width: 0 !important;
}

.content-outer,
.content-fauxcolumn-outer,
.region-inner {
  min-width: 0 !important;
}

@media screen and (max-width: 1000px) {
  .main-inner .column-right-outer {
    display: none !important;
  }

  .main-inner .columns {
    padding-right: 0 !important;
  }
}

@media screen and (max-width: 800px) {

  .content-fauxcolumn-outer,
  .region-inner {
    /* ends at 600px for smooth transition */
    width: 600px !important;
    margin-right: 0 !important;
  }
}

@media screen and (max-width: 700px),
print {
  .main-inner .column-right-outer {
    display: none !important;
  }

  .content-fauxcolumn-outer,
  .region-inner {
    min-width: 0 !important;
    width: 100% !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
  }

  .main-inner .columns {
    padding-right: 0 !important;
  }

  @media print {

    /* Targeted ad selectors */
    .inline-ad,
    [class*="inline-ad"],
    [id*="inline-ad"],
    .ad-wrapper,
    .adsbygoogle {
      display: none !important;
    }

    /* Hide headers, footers, and specific promotional widgets */
    footer,
    .footer-outer,
    .widget.PopularPosts,
    .widget.FeaturedPost,
    .post-feeds,
    .blog-pager,
    .blog-feeds {
      display: none !important;
    }

    div.comments {
      display: none !important;
    }
  }
}