Flare css puzzles and questions

[sdcinvan]

Hello all,

Hopefully, I can obtain some help on a few css issues.

Renaming a CSS class

NOTE: Tried this but it doesn't work! http://webhelp.madcapsoftware.com/flare ... lasses.htm
Also looked at this link (didn't help): http://forums.madcapsoftware.com/viewto ... =6&t=12757

Why can't I rename a CSS style class (BookStyles.css)?

It is a style class with the name, "p.bullet_para_autonum" - a custom bullet class that allows bracketed auto-numbered bullets. Example: (1), (2), (3), etc.
I want to rename it to a more appropriate "p.bullet_bracket_autonum" but when I select the style class and rename, the new name doesn't take.

Additionally, I needed another custom style class with capital letters (e.g. (A), (B), etc.) so I copied the above style class. The resulting name is: "p.bullet_para_autonum1". Again, I can't rename the style class! What am I doing wrong? I suppose I could go outside of Flare and manually rename the style classes in a text editor. Unfortunately, I suspect that doing so would break any bulleted text that is currently using this style class. I was hoping for a more elegant way (that propagates the name change throughout my project).

Finally, I attempted renaming in all three available mediums (e.g. default, print, non-print).


Simplified view (et al) column widths keep resetting!

I constantly need to resize the column width of... for instance, the css class names. Taking the above example, the moment I attempt to rename a class, the view flashes/resets all the column sizes. There may be a way to configure column sizes (please do tell) but it doesn't actually solve this mysterious behavior (I am inclined to consider this a bug).

NOTE: This annoying behavior exists in many different areas. For instance, in advanced css view, if I have expanded the "p" class to see the above sub.class, renaming (or any other change) will close the parent class and reset the view to the top level.


Multiple mediums are maddening! AKA I need to duplicate style classes across multiple mediums

I'm still a newbie so I'll admit that my madness may be a result of my lack of understanding.
I am finding it extremely frustrating that when I make a change to one medium (e.g. print), there is no option to 'clone' that change across to other mediums (e.g. non-print, default). Though my only output (at the moment) is PDF, eventually I do plan to output to ePub and/or some web format. BUT at least 80% of the css changes I am making are valid for all mediums!

I can see this becoming a huge problem as my customizations grow.

Q. Do I use import styles? This is a frustrating tool that is incredibly slow to initiate. Flare actually shows (non-responding) for about 20 seconds before the Import Styles window appears. Selecting Project Stylesheets requires about another 15 seconds before the styles bottom pane appears. Selecting a particular style type, from the pull-down menu... another 5 seconds before a response. Check box the two styles (described above) to import... well, I have no idea what happens when I click OK because nothing changes to my other mediums. This is very confusing.


Can I search the css?

Again... newbie here. There are many times that I need to find a particular style or style. Searching for it would be a lot more efficient. Is there a way to do this?


XML editor window - Styles column buttons do not work

Scenario - I am happily editing content and I realize that I need to make a slight adjustment to custom style class (e.g. header h2 with a page break called h2.pagebreak). The handy right-side window displays the style class so I select it and then click Edit Style. But this does nothing. But it is inconsistent, under some circumstances, clicking Edit Style brings up the style sheet. I am unsure why.


How do I search and replace a style property across all styles and all mediums?

Real scenario: Our official corporate color has changes and my heading style colors need to be changed. This is quite easy to accomplish by doing a search/replace in the .css with Notepad... How can this be accomplished inside of Flare?

Thank you,
Shawn

[Msquared]

I appreciate some of your frustrations, and I'll tell you what I do, which does get round some of them. Some of the Flare purists may throw their hands up in horror, but it works for me, and I single source across four different mediums (two web and two PDF). I'm sure there are other equally valid approaches though.

I only ever edit my stylesheets in the text editor. I do this outside Flare, using Notepad++, but you can do this from within Flare (right click on the stylesheet, and select Open With > Internal Text Editor. This means I can search and replace as much as I like, and I don't have to worry about the limitations of Flare's stylesheet editor. I think you will find that quite a few of us edit CSS files directly. I'm an ex-developer, so I'm confident doing this, which helps a lot.

I have a separate stylesheet for each medium (this doesn't, and in fact, can't, apply to table stylesheets, see below). Yes, I have a separate stylesheet for each medium, that is, four in all. I just specify a different stylesheet for each target (a target always applies to a single medium only). The advantages are several. I make sure the styles are defined in the same order in each stylesheet and keep them in step very easily using file comparisons (so it is easy to clone changes in one "medium" into another, as it's just a case of copying across into a different stylesheet, and adjusting anything that needs to be different). I also don't have to worry about selecting the correct medium before editing a style, as, for that stylesheet, all the styles are in the default medium, so the different mediums exist in name only.

A disadvantage (the only one that I have found) is that the view in the Flare XML editor isn't quite WYSIWYG for all mediums. All views are based on the stylesheet that is associated with your default target, and as I mentioned above, this stylesheet only contains definitions for one medium. So you can change the medium shown in the Flare editor, and nothing will happen as you don't have any specific definitions for that medium in your default stylesheet. This is less of a hinderance than it seems - the Flare XML Editor doesn't always reproduce everything exactly as it would be in the output anyway. All you need to do is select "Preview As" in the top left of the editor to see the WYSIWYG view for that target/medium.

I have set up table stylesheets differently though. I did use the Flare table stylesheet editor for that - Flare auto-generates a lot of row and cell styles based on how you define headers, borders, footers etc, and I don't fancy hand crafting that. You must have all your mediums in one stylesheet here, as the table stylesheet to use is defined at the point where the table is placed in a topic, not at the target level. In this case, the medium defined in the target is used to choose the correct table stylesheet definitions to apply to the table.

The table stylesheet editor is far easier to use, and is more visual, so it's easier to see that you've covered everything. There are also far fewer styles to define - unlike the ordinary stylesheet, you aren't suddenly going to find you need to define some more styles for some obscure hyperlink pop-up style, and then forget to apply them to all mediums. And you can preview the table styles you have defined for each medium to check you've covered it all. So no worries there.

I made the decision to use separate stylesheets for each medium very early on, while I was still a Flare newbie, and was well aware that I was swimming against the tide. But I've not regretted it at all, and posts like yours make me glad I went that way.

And, as for your problem with renaming styles, I would simply do it in Notepad++. then I would use the "Find in Files" feature of Notepad++ to do a global search and replace outside Flare to make the topics match the new style name. If your sources are under source control, you will need to check them out before you do this, as Notepad++ won't be able to write to anything that isn't checked out. Then I'd revert all files that hadn't been changed - your source control system should have a command to do this - before checking in the files that have really changed.

If you aren't working under source control, or even if you are, and are cautious by nature, take a backup of your project before you start fiddling with it outside Flare!

[whunter]

I am finding it extremely frustrating that when I make a change to one medium (e.g. print), there is no option to 'clone' that change across to other mediums (e.g. non-print, default). Though my only output (at the moment) is PDF, eventually I do plan to output to ePub and/or some web format. BUT at least 80% of the css changes I am making are valid for all mediums!

For changes that you want to apply to all mediums, make the change in the default medium. As long as the other mediums don't have defined settings for that class/property, they will automatically inherit the setting from default.

So for example if you have a class p.special where the font color is set to blue, and you want to change it to green, change it in the default medium. As long as the other mediums in the stylesheet don't have an explicit declaration for font color for p.special, they will inherit the setting from default.

[sdcinvan]

Happy Friday Marjorie,

Thank you so much for your great response. I truly appreciate your thoughts and I am inclined to agree with you.

I can't help but feel frustrated that something so core to Flare and Flare being so mature (@v9) that the css editor would be so poorly designed; assuming that all those issues are real. I'll work on these problems over the weekend and seriously look at your suggestion as the solution.

Laura (MadCap support) also suggested using the "default" medium. Any changes in this medium are propagated to the others. Amazing tip that I wish I knew a week ago.

Thank you so much!

[sdcinvan]

I am finding it extremely frustrating that when I make a change to one medium (e.g. print), there is no option to 'clone' that change across to other mediums (e.g. non-print, default). Though my only output (at the moment) is PDF, eventually I do plan to output to ePub and/or some web format. BUT at least 80% of the css changes I am making are valid for all mediums!

For changes that you want to apply to all mediums, make the change in the default medium. As long as the other mediums don't have defined settings for that class/property, they will automatically inherit the setting from default.

So for example if you have a class p.special where the font color is set to blue, and you want to change it to green, change it in the default medium. As long as the other mediums in the stylesheet don't have an explicit declaration for font color for p.special, they will inherit the setting from default.

Fantastic info.

I'll duplicate all my "print" css properties into the default in Notepad ++.

BTW, without resorting to renaming Notepad ++ to the Windows Notepad name, is there a way to add or change the external editor to Notepad ++?

Thank you.

[Msquared]

To open CSS files in Notepad++, you can right click on the file in Windows Explorer and select Open With. Then navigate to the Notepad++ executable and select it. After that, the next time you right click on a .CSS file, Open With Notepad++ will be available as an option.

Alternatively, you can change the file association so CSS files are always associated with Notepad++. One of the tools in the Control Panel does that. I can't remember what it's called, and I'm not on my PC at present, but I think it's fairly obvious.

[SteveS]

As an aside, if you are using Flare's inbuilt stylesheet editor, I find it much better to work in advanced view.

The ability to sort styles to display can make it a bit easier to nvigate through large styleshhets...

[sdcinvan]

To open CSS files in Notepad++, you can right click on the file in Windows Explorer and select Open With. Then navigate to the Notepad++ executable and select it. After that, the next time you right click on a .CSS file, Open With Notepad++ will be available as an option.

Alternatively, you can change the file association so CSS files are always associated with Notepad++. One of the tools in the Control Panel does that. I can't remember what it's called, and I'm not on my PC at present, but I think it's fairly obvious.

Thank you Marjorie but what I meant was... that in Flare, the external css editor choice is limited to Windows Notepad. I was wondering if there was a way to change the selection from Notepad to Notepad ++?

If not, I suggested that I could rename Notepad ++ to the same name as the Windows Notepad application. It's not like I will ever need the Windows version again.

[Msquared]

I do have Notepad++ shown in Flare as an Open With option.

I also have a couple of other text editors shown in the list to choose from.

I don't think I set anything special in Flare. I wonder how that happened?

[sdcinvan]

I do have Notepad++ shown in Flare as an Open With option.

I also have a couple of other text editors shown in the list to choose from.

I don't think I set anything special in Flare. I wonder how that happened?

Hello Marjorie,

Well, technically your suggestion was correct. It was simply a matter of setting NotePad ++ as the default .css editor. Set that in Windows File Explorer and afterwards, it automagically appears as an option in Flare.

Newbie problem #40 of 200 taken care of.

[wclass]

...
Thank you Marjorie but what I meant was... that in Flare, the external css editor choice is limited to Windows Notepad. I was wondering if there was a way to change the selection from Notepad to Notepad ++?
...

This earlier thread might explain the list of editors available, and how they are changed:
http://forums.madcapsoftware.com/viewto ... 12&t=14805

[SteveS]

Getting Windows to recognise an application as one that can open a file with a specific extension is not a Flare thing, but a windows thing.

Once you open a specific file type with a program, Windows adds it to the programs registered for that file type. Once registered it's shown in the open with list.

To add a program to the registered list, right click a file of the required type in Windows explorer (aka file explorer in W8). Click Open with... from the resulting context menu. Click browse on the dialog box and find the program you want to use. If you do not want to use that program all the time, clear the checkbox about always using the program. When you've browsed to the required program, click OK all the way out of the dialog boxes. The file type will now be registered for that particular program.

[sdcinvan]

Getting Windows to recognise an application as one that can open a file with a specific extension is not a Flare thing, but a windows thing.

Once you open a specific file type with a program, Windows adds it to the programs registered for that file type. Once registered it's shown in the open with list.

To add a program to the registered list, right click a file of the required type in Windows explorer (aka file explorer in W8). Click Open with... from the resulting context menu. Click browse on the dialog box and find the program you want to use. If you do not want to use that program all the time, clear the checkbox about always using the program. When you've browsed to the required program, click OK all the way out of the dialog boxes. The file type will now be registered for that particular program.

Thanks Steve.

Yes, I understand how this works in Windows but I wasn't clear that Flare's available editor options were connected to the Windows default launch options.

Thanks

[Msquared]

Another little tip when editing CSS files using a text editor.

Notepad++ is wonderful for anything that involves find/replace in multiple files, and anything that needs regular expressions (for example, tidying up Flare content imported from Word), but there is another rather wonderful (free) text editor that I wouldn't be without either, called PSPad.

The beauty of PSPad is that it allows you to open two windows in the same file, and view them side-by-side. So, if you are struggling to see if your stylesheet is consistent across all your mediums, open the stylesheet in PSPad, split the window vertically, and view a medium in each side of the split, to compare them, although you will have to do a visual comparison, not an automatic one.

While we're on my favourite text editor tools, allow me to recommend Beyond Compare, which is the most wonderful file and content comparison utility ever. it's not free, but you can get a 30 day licence (30 days of use, not elapsed days, so it may last a lot longer). It's about £40, I think, so not that expensive either.

Not only can you do highly-customisable comparisons between files, including forcing the alignment if required (that's how I ensure my multiple CSS files all contain the same style definitions), but you can open the same file in both sides of the comparison and force the alignment to automatically compare two parts of the same file. I have used that to compare different mediums in the same file - you may remember that table stylesheets have to have all the mediums in the same file.

[Msquared]

And just by-the-by, my task yesterday and today has been to rebrand one of my PDF output formats (I single source web and PDF outputs for two different product brandings, so I have four different mediums, and, as I described above, four separate CSS stylesheets, one for each medium).

Part of the rebranding exercise has been to make the heading and cross reference styles for one product look more like (but not indentical to) the comparible styles for the other product. This part involved changes to autonumbering definitions, margins, cross reference text etc etc for five different heading levels.

I compared the two CSS files, and made the required changes using Beyond Compare, and the job took me about 20 minutes in total, including regenerating the PDF to check all was well.

Am I glad I decided to maintain a separate CSS file for each medium? You bet I am!

[sdcinvan]

Thank you Marjorie, excellent information here.

BTW, you can do side-by-side comparisons with Notepad ++ by dragging the tab out of the main program.

Also and even cooler, Notepad ++ has an incredible assortment of plugins (see Plugins/Plugin Manager from pull-down menu) and one of them is called Compare. The Compare tool is quite well made and may not require one to purchase Beyond Compare (an excellent tool - I agree).

Thanks again.

[sdcinvan]

I love this!!

I have my Flare project on one monitor and my stylesheet opened in NotePad ++ on my other monitor! When I make changes to my stylesheet and click Ctrl-S, the modifications are instantly reflected in my project. I love instant gratification!
Another very nice feature about NotePad ++ is that if I make changes to the stylesheet in Flare (while I have the same stylesheet opened on my other screen), NotePad ++ will instantly detect any saved changes and update the content. So cool!

So, if anyone is still using Windows NotePad and a single monitor... stop that! You're doing it wrong.

[Msquared]

And Notepad++ (and PSPad too) give you nice colour-coding and nesting information, so you can see the structure and sense of what you are editing.

Although to be fair, you could do this in Flare, by opening the stylesheet using Flare's text editor, which is also colour-coded, then floating that tab and moving it to your second screen. I do that sometimes too.

[Daniel Lemke]

Thank you Marjorie, excellent information here.

BTW, you can do side-by-side comparisons with Notepad ++ by dragging the tab out of the main program.

Also and even cooler, Notepad ++ has an incredible assortment of plugins (see Plugins/Plugin Manager from pull-down menu) and one of them is called Compare. The Compare tool is quite well made and may not require one to purchase Beyond Compare (an excellent tool - I agree).

Thanks again.

You can do manual side-by-side comparison Notepad++ in two ways, and one of them is really awesome.

You can right-click on a tab for the options. If you clone to a new instance, you can have two fully separate instances of Np++ with the same file open. But, when you edit one, and save it, the changes will not appear in the second instance automatically. This is troublesome if you make edits in each instance before you save one of them.

The option I like best is called Clone to other view. This will split the screen in half and show the same file in each half. You can make edits to one side and they will instantly affect the other side and there are no conflict issues with saving. This is how I have been comparing my default/print/screen mediums lately, and it helps clean up redundancies and reorganize the file; e.g., moving all the list styles into the same section of your CSS file.