• Home
  • Contact
  • FAQs
    • What is Webcomics.com?
    • Member Benefits
    • How To Post an Article or News Item
    • How to Post a Webcomic on the List
    • How to Post a Comic
    • Terms of Service
  • Forums
  • WebComics List
  • Benefits
    • Print Vendors: Get multiple quotes
    • Banner stand: Discount
    • Consultation discount
    • “How To Make Webcomics” book: discount
    • “Webcomics Handbook”: discount
    • ALL benefits
  • My Account
    • Welcome
    • What is Webcomics.com?
    • My Subscription
    • Join us!
  • Account
  • Membership List
Twitter Email RSS

Webcomics.com

How To Make WebComics

Webcomics Handbook

‹ Best of Webcomics.com – April 2015 Webcomics.com poll: Income sources ›

CSS Crash Course: Firebug

You don’t need a subscription to read today’s post!

This post originally ran May 1, 2014. If you’ve ever been curious about the kind of information, tutorials and advice that you’ll get as part of your subscription to Webcomics.com, this is a good example.

If you’d like to join the site, you can get a 12-month subscription for $30 — or you can get a one-month Trial for $5 … with no obligation after your 30 days expire.  For less than three bucks a month, you can get a steady flow of information, tutorials and advice targeted towards your webcomic business — plus a private forum to discuss issues with other professionally minded cartoonists.

The key to making your Web site look the way you want it to look is learning CSS. But that’s a skill that few webcartoonists have at the ready — and it’s one that few of us want to invest the time to learning.

Thanks to Philip M. “Frumph” Hofer, I got a CSS crash course — and a sneaky tip to guiding me through applying my new know-how to become a self-taught CSS wizard. (Note: hit the Comments section of the original post for some additional tech notes and tips for doing this using other browsers.)

Chrome plus Firebug

The first step is installing the Chrome browser from Google. Firebug — the app that we’re going to use to inspect the CSS on our sites — is also available for the Firefox browser, but Frumph frowned on Firefox for this use.

Next, obviously, we’re going to install Firebug Lite. Simply click that link from your Chrome browser and follow the install instructions on the screen. Once you’ve successfully installed Firebug, there will be a little insect icon in the upper right-hand corner of your Chrome browser.

(Click on each image for a larger view)

Screen Shot 2014-04-29 at 7.25.56 PM

Go to your Web site and look under the hood

Mouse to any open space on your Web site (not on a link, 0bviously). If you’re on a PC, right-click. If you’re on a Mac, Option-click. You’ll see a pop-up dialogue box that offers many options. Select Inspect Element.

You’ll get a long window at the bottom of your browser window that looks like this.

Screen Shot 2014-04-29 at 7.31.31 PM

Click on the magnifying glass at the upper right-hand corner of that window.

Now, mouse over a part of your site that you’d like to improve.

You’ll see areas highlighted on your site — and corresponding areas highlighted in the Inspector window at the bottom.

Firebug_1

The window is split into two sections. On the left is the HTML associated with the highlighted area. On the right is the CSS code that’s being called into play in that area.

And just like that, you know which part of the CSS code you need to alter to adjust that element on your site.

Not so fast

A couple words of warning…

One bit of CSS code might control the look of several different element on your site.

For example, when I altered the Bulleted List style of Webcomics.com, I went to the Forum and saw that the entire style of that section of the site had been changed as well!

(Don’t worry. It’s fixable.)

Also, be sure to give that code in the Inspector a good, hard look. It might be that the code you’re looking for is a few lines higher or lower than the highlighted area.

The more you do it (and learn by trial-and-error) the more this will make sense to you.

Making an adjustment to your site

Let’s do a quick walk-through of Firebug in action.

Let’s say we wanted to adjust the spacing under those category headers on Webcomics.com.

Mousing over that section shows us this.

Screen Shot 2014-04-29 at 9.07.19 PM

In the Inspector window, you will see: html body div#page-wrap div#page -> etc. Those are the HTML elements that encompass this section of the Web site.

Looking through the CSS section, I see “margin-bottom.” Looks like a good place to start. Clicking to the right of the amount (10px), a box opens up.

Screen Shot 2014-04-29 at 9.09.04 PMThis is where it gets cool. Type a different amount into that box and then look up at your Web site.

It makes the change — in real time — on the Web page above.

Don’t worry. It’s not permanent (and nobody else visiting the site can see it). But using this feature you can tell:

  • Whether you’ve chosen the correct variable to alter and…
  • How that change will look on your Web site.

Here’s something else to pay attention to.

As you mouse over different part of code in the CSS section, you’ll see little checkboxes appear…

Screen Shot 2014-04-29 at 9.14.40 PM

Un-checking the code shows you what the affected areas in the page above would look like without that bit of CSS applied. Heck, you can even click under the code and add further variables.

Finally, note that little grey text to the right of each CSS code entry. That tells you which line inside the style.css file it occupies (which can be darned useful to know if you ever have to go hunting for it. In the example above, the CSS code h2.widget-title is on line 843 of style.css.

But unless you’re not going to hunt for it. There’s a better, more efficient way of making changes to your CSS.

Change that CSS

Instead of making changes to style.css, you’re going to override it. Assuming you have the Jetpack plug-in installed (and it’s highly recommended that you do), go to your WordPress dashboard and select Appearance -> Edit CSS.

To override that margin in the example above, you would add the following CSS code to the CSS Stylesheet Editor:

.sidebar .widget {
 margin-bottom: 20px;
 }

Now, chances are, you’re going to do a fair bit of tweaking, and if you’re not careful, this file is going to turn into an unfamiliar mess of tangled code. So add some headers in between these symbols  /*    */. That will help you find things when you’re looking for them later. Here’s an example:

Screen Shot 2014-04-29 at 9.33.40 PM

Once you plug in your override — and save the file — clear the cache* of your site, and your site will now appear to everyone with the CSS override you installed.

* (Varnish HTTP Purge is another highly recommended plug-in)

Baby Steps

Does this take the place of learning CSS? No, not really.

But is this an excellent way to familiarize yourself with CSS so it doesn’t seem so unchartable? Well, that was my experience. And that’s the first step to learning, isn’t it? In fact, I spent a couple hours just poking around my own site and seeing what changing different numbers would do. In the process I learned tons about CSS that I didn’t know before. And through a little trial-and-error, I fixed all sorts of things that had been bothering me about my site that I had no ability whatsoever to change before.

by Brad Guigar on May 8, 2015
Posted In: Archive Dive
Comments available to logged in users only.


Recent comments

  • dogss on You need to publish a vertical scroll NOW
  • Brad Guigar on Exclusive Member Benefit: Webcomics Handbook
  • BuddyGoodboyEsq on Exclusive Member Benefit: Webcomics Handbook
  • Ian on Getting Started with the Right Attitude
  • Brad Guigar on Getting Started with the Right Attitude

Search




Webcomics.com Poll

I design my comic specifically for smartphones and digital tablets.

  • Disagree (52%, 175 Votes)
  • Agree (48%, 161 Votes)

Total Voters: 336

Loading ... Loading ...
  • Polls Archive

Categories

  • Archive Dive
  • Articles
    • Advertising
    • Art
    • Business
    • Community
    • Conventions
    • Creativity
    • Crowdfunding
    • Digital publishing
    • Image prep
    • Lettering
    • Marketing / Social Media
    • Merchandise
    • Print publishing
    • Tech
    • Web site
      • Web Site Design
    • Writing
  • ComicLab
  • Edited and Ready
  • Events
  • Guest
  • Hot Seat critiques
  • Information
  • Interviews
  • Livestream Chat
  • Mail Bag
  • Member Benefits
  • Promos
  • Site News
  • Studios
  • Surviving Creativity
  • To-Do List
  • Uncategorized
  • Video
  • Webcomics Confidential
  • Webcomics Weekly
  • Webcomics.com Poll

Tags

AdSense advertising Comic Easel comments composition contract copyright creativity exercise credit cards Crowdfunding digital lettering digital publishing Facebook Google Analytics holiday Humor IP KDP Kickstarter Kindle legal lettering line weight Longform comics Manga Studio merchandise NCS panels Patreon Promotion PulsePoint readers revenue SEO shipping social media Square taxes trademark Twitter typography Web design word balloons WordPress writing

Special Features

Just now, in the forum…

  • Mixing First and Third Person Captions
  • Help with Toocheke
  • Label Printer for shipping
  • Patreon Merch
  • Pricing Your Comics

Recent Posts

  • Telegraphing a joke
  • Manga-inspired word balloons — and why you might want to rethink them
  • ComicLab Ep 241 — “My friends won’t buy my comics!”
  • Writing Humor
  • Draw larger

Recent Replies

  • Brad Guigar on Mixing First and Third Person Captions
  • Brad Guigar on Help with Toocheke
  • Brad Guigar on Label Printer for shipping
  • Andrew Fraser on Label Printer for shipping
  • Brad Guigar on Label Printer for shipping

Recent Topics

  • Mixing First and Third Person Captions by jpactor
  • Help with Toocheke by Andrew Fraser
  • Label Printer for shipping by Andrew Fraser
  • Patreon Merch by Jaycee Knight
  • Pricing Your Comics by Jaycee Knight

Recent Comments

  • dogss on You need to publish a vertical scroll NOW
  • Brad Guigar on Exclusive Member Benefit: Webcomics Handbook
  • BuddyGoodboyEsq on Exclusive Member Benefit: Webcomics Handbook
  • Ian on Getting Started with the Right Attitude
  • Brad Guigar on Getting Started with the Right Attitude
  • My Subscription
  • Store
  • Terms of Service
  • Account
  • Membership List

©2007-2022 Webcomics.com | Powered by WordPress with ComicPress | Subscribe: RSS | Back to Top ↑