The time it takes to manage CSS positioning in Flare can be greatly reduced if you pair Flare with Firebug, a Firefox Add-in. You can also do similar things with Developer Tools in IE.

The cool thing about Firebug is that you can edit individual lines in your CSS in real time…and then apply those changes to your stylesheet in Flare.

This works for webhelp and HTML5 outputs only right now. PDF output is not supported, which makes me bitter but what can I do?

Once it’s installed, Firebug is available at the click of a button. I’ll do a build of a project I’m working on and then show you how Firebug works.

Here’s the mockup I was given by our graphic designer, Chris Flick.

welcome_page_mockup

It’s pretty straight forward except for that oval logo in the upper left corner of the text boxes. That’s the bear here. I’m going to use Firebug to tweak the positioning of that logo.

I’ve done some setup by creating nested divs and some initial styling including absolute/relative positioning. I can detail how I did this if you’d like me to.

For right now, I have this:welcome_preview

With the preview looking like this:

welcome_preview1

Now, I could mess with the stylesheet for a while trying to get the logo to move up to the right place….but I’d have to tweak the CSS, do a build, tweak again, etc.

Additionally, the preview in Flare won’t really show how the CSS changes are working.

So, I’m going to work in Firebug.

I’ve got Firebug installed as an add-in in Mozilla and now I’ll do a build and view the project in Mozilla.

Here’s my welcome page with Firebug activated. See the window below the misplaced logos? THAT is Firebug.

firebug_welcomeTo get started with the magic that is Firebug, I’m going to click the Inspect button:

click_to_inspect

I hover over the logo that I want to move and see this:

hover_over

I’m in the right area – but what I really want is to move the div tag containing the logo.

hover_over_div

I click on the div highlighted above and things change:

welcome_div_firebug

I can see the space that the div is occupying (the light blue area), the corresponding html code (the dark blue area), AND the CSS controlling the div (the highlighted area). This last area is what we’re going to work with.

Immediately under the height property on the left side of Firebug, I type:

position: absolute;
top: 0px;

welcome_firebug_position1

You’ll see how the logo has moved to the very top of the container div that I had originally set to position:relative. While the positioning of the logo has improved, it’s not where it needs to be.

Tip! you’re not working in Flare here!

 

I want to move the logo a bit higher – so I’m going to add some negative positioning to it.

top_positioning

Notice how the logo moves up as I change the top positioning.

-9px is the magic number!

Now I need to move it to the left just a little.

Immediately under the top property, I’m going to add:

left:0px;

Firebug will alphabetize the properties, so ‘left:0px;’ will move up in the list.

left_positioning

You can see that a -2px of positioning will fix the logo’s left position. (for the record, I think another half pixel would be even better – but I don’t think half pixels count.)

Now that we have the positioning correct – we need to add those properties to Flare. (We won’t talk about the number of times I’ve forgotten to do that and did a build only to find the logo still in the wrong place!)

So, I go over to Flare and add the properties so the div.welcome_eagle looks like this:

div.welcome_eagle
{
    background-repeat: no-repeat;
    height: 45px;
    background-image: none;
    position: absolute;
    left: -2px;
    top: -9px;
}

When I do a build, I see this:

final_build

If I hadn’t used Firebug, I would have had to do multiple builds, first a bunch to get the top positioning right….then a couple more to get the left positioning right.

Instead, I make the changes live in Firebug until it looks the way I want to look – and then add the changes to Flare…and do one build.

3 Responses to “CSS Positioning with Firebug”

  1. Jennifer Schudel December 3, 2013

    This is a great post! Using Firebug is such a great idea here. I had no idea you could use it like this. So very handy!

  2. Greg December 3, 2013

    Thank you so much for this tip.

  3. csshero December 13, 2013

    I would to suggest this new tool. In small words it is a visual firebug tool that allows you to save your CSS edits.
    Please feedback us and have a look on our live demo http://www.csshero.org/themes/

Leave a Reply?

Recent Posts

%d bloggers like this: