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.

Share

I’m working with a junior help developer on a rework of an older help system and one of the things she’s tweaking is the masterpage.

This project was completed waaaay back in 2008 and since then, we’ve developed a style guide for online help systems. This project is really benefiting from some style-guide-love. We won’t talk about how ugly the project was . UGH.

Anyway, something I saw today was how a word (acronym, technically) was appearing in the footer of the masterpage as a converted glossary term.

footer_view

The project is set to convert glossary terms when found – but in this instance, it’s a no-go. The underlined word looks like a link and is confusing.

footer_view2

So we need to set Flare to ignore that glossary term. And we’ll do it via C-S-S. Yeah!

First I need to see if there’s a particular style class associated with that line of text.

footer_classLuckily for me, there is. SOoooo, my plan is to ignore any glossary terms that appear in <p.footer> tags.

Let’s hop over to the CSS and find p.footer and go to the Unclassified property group.

p_unclass

And within Unclassified, scroll down to mc-disable-glossary-terms and set it to true.

disable_true

Let’s do a build and see what happens.

footer_no_glossaryNo glossary term popup!

Yeah!

Give it a try and let me know how it goes for you.

 

Share
Page 1 of 5812345102030...Last →
%d bloggers like this: