I’m building a help system that is supposed to look like slides. It’s for a classroom training effort and instead of PowerPoint (boo!), my client wants to use Flare (yeah!!).

Part of the design involves two div tags next to each other:

Screenshot_071614_095108_AM

Notice how the Description and Functionality boxes are side by side. Generally, this can be handled via two <div> tags floated left. No big deal, right?

Here’s the code for both <div> tags:

First, the larger <div> on the left:

div.description 
{
    background-image: none;
    background-repeat: no-repeat;
    background-color: #ffffff;
    border: solid 2px #733d02;
    margin-left: 0px;
    margin-top: 0px;
    margin-bottom: 15px;
    width: 70%;
}

And here is the code for the smaller <div> on the right

div.tips
{
    float: right;
    border: solid 0px #696969;
    padding: 0px;
    width: 27%;
    margin-left: 10px;
    margin-top: 0px;
    margin-right: 0px;
}

But sometimes the Functionality box (div.tips) isn’t there.  Like this:

Screenshot_071614_100159_AMThis situation occurs more than a little frequently. And it’s on pages like this where I want the width of the div.description tag to be 100%. Like this:

div.description 
{
    background-image: none;
    background-repeat: no-repeat;
    background-color: #ffffff;
    border: solid 2px #733d02;
    margin-left: 0px;
    margin-top: 0px;
    margin-bottom: 15px;
    width: 100%;
}

If I’m being honest here, the lack of the Functionality area on the right is going to happen more often than I’d like to contemplate AND there will be thousands and thousands of pages over a large number of projects. UGH.

And I may have mentioned this a couple of times on this blog – I am NOT a fan of working inefficiently. I prefer to work smarter, not harder. This situation could be problematic…how can I fix this without having to look at each page and determine whether or not the right-most <div> tag will be there and then set the width of the left-most <div> tag accordingly.

Uh….that is sooooo not happening. I’m fixing this mess with some handy-dandy CSS code.

When both <div> tags are there, div.description will be set to width:70% and the div.tips will be set to width:27%.

The 3% difference is there to account for padding and margin and borders around each div.

That’s great….but how do I tell CSS to determine IF the div.tips box is there and THEN to change the width of div.description? Sounds all code-y and scary.

Luckily for me, the nice folks over at W3C already thought about this and, by using an advanced CSS selector, it can be done with 2 lines of code in my style sheet.

<happy dance>

Screenshot_071614_112913_AM</happy dance>

In all fairness, I had to look up the actual name of the selector: Adjacent Sibling Combinator.

Ew….sounds ugly and unpleasant to work with.

However, this amazing Smashing Magazine article about Advanced CSS Selectors defines an Adjacent Sibling Combinator as:

Screenshot_071614_102911_AMThe solution to our problem is a great example of this:

div.tips + div.description
{
    width: 70%;
}

What I’m telling the style sheet to do is this:

When the two <div> tags appear together, the width of div.description will change to 70%.

In this screenshot, the yellow highlighted <div> tag is the parent container. The green highlighted <div> tags are the siblings. And technically, they are adjacent.

Screenshot_071614_111718_AM

This made me so happy, I could cry. No longer did I have to worry about which topics had both <div> tags and which doesn’t! It just works. Woohoooo!

Try it…and let me know if you have any questions.

Every time I import a document from Word, I am faced with lists, both ordered and unordered, with inline styles attached to them.

Screenshot_062514_120702_PM

If you check out the bulleted list in the XML Editor, it looks fine…

Screenshot_062514_120834_PM

But the problem here is this:

If you want to change the styles of <ul> tags in your project those inline styles may hinder your progress.

Why does this happen EVERY. SINGLE. TIME?

I talked to my buddies at MadCap Tech Support and they explained that Word doesn’t really do ordered and unordered lists the right way (shock!) and Flare can’t really figure out what to do with the proprietary code surrounding the lists….so it just turns the code in to inline styles. UGH.

So, now that I know WHY it happens….I have to figure out how to clean up the code in a way that doesn’t take forever.

The good news: fixing this particular example is easy. A simple Search and Replace like this:

Screenshot_062514_121558_PM

I copied the entire opening <ul> tag including the inline styles…and pasted it in to the Find What field.

Then, I typed in <ul> in the Replace With field.

I want to find all occurrences of this throughout the project so I select (whole project) in the Find In field

And finally (here’s the sneaky part), I make sure to check the Find in source code box.

That last item is the trick to making this work because the string I’m looking for is NOT in the XML editor…it’s only in the source code.

I click Start and then as I come to each occurrence, I replace it with the simplified version. Please note that I’m not going to use Replace All. Over the years, I’ve been burned too many times to use it again. So be warned….

You can see how my <ul> tag is nice and tidy now.

Screenshot_062514_122311_PM

Now this is all well and good, right? But what happens when you have this in addition to the example above:

Screenshot_062514_123115_PM

I don’t know about you – but I don’t have the time or the inclination to search for every possible option….so yeah, this is problematic.

BUT….there a solution and it’s called Regex. Or Regular Expressions.  And I’m going to show you how adding THREE characters to your search string will allow you to find EVERY. SINGLE. INSTANCE of this.

Seriously, when I learned this, I thought I was going to fall over. How many hours of my life have I squandered looking for all the permutations of the margin-left property….all for the lack of 3 little characters.

Here’s the solution:

Screenshot_062514_123905_PM

I’m not kidding…..replace ’26′ from the original search with ‘*.*’ in the Find what field.

And, as shown here, the only other change is to check the Use Regular Expressions box.

Screenshot_062514_124120_PM

It finds the following non-26 instances:

Screenshot_062514_124259_PM

and

Screenshot_062514_124420_PM

And by the time I’m done with replacing all these instances with the clean <ul> tag, I’m such a happy camper.

Now, to be fair, this is one of the easiest regex expressions EVER….but it works so who cares.

Try it….you’ll be giddy with the results.

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