How to override Local Formatting

[akobayashi]

It appears that local formatting had been used to apply colour to h1 style, which has no colour set in the stylesheet. I want to apply a different colour en mass, but changing the colour on the stylesheet is ineffective. I have 100 lines/pages to change. Moreover, a naming uri error comes up from time to time when trying to edit the font - the formatting may have been applied through a different editor.

Is there any way of overriding or cancelling the local formatting, if possible in one go?

Is it possible to create another style class, say sh1, of the same properties as for h1 with the desired colour and replace...?

thanks in advance

akagi

[LTinker68]

If the same inline formatting was applied to all the topics, then I'd use Flare's built-in find-and-replace feature with the "find in source code" field enabled. So you'd search on <h1 style="#FF0000" and replace it with <h1. Of course, the actual code to search on depends on what inline styles were applied. You could also use regular expressions, but I'm not familiar with them enough to write out what the regular expression would be.

[KevinDAmery]

Is there any way of overriding or cancelling the local formatting, if possible in one go?

Not with a stylesheet. The problem you're running into is cascading style precedence: in CSS, the closer style code is to the content, the higher priority it is. This means that style code that is inserted in a tag will over-ride anything in an external stylesheet.

You're best bet is to remove or replace the style code from the topics, using Lisa's suggestion or a regular expression. That way the stylesheet will take affect again. You could also go through the topics manually and reset the styles back to standard h1, but that would probably be more time consuming than a find & replace.

Is it possible to create another style class, say sh1, of the same properties as for h1 with the desired colour and replace...?

You can create a class of H1 - in your stylesheet it would look like

Code: Select all

h1.classname

You would then have to apply it to the H1 blocks in each topic in order to get it to take affect, though, so it would be a time consuming process.

[NorthEast]

You can create a class of H1 - in your stylesheet it would look like

h1.classname

You would then have to apply it to the H1 blocks in each topic in order to get it to take affect, though, so it would be a time consuming process.

You couldn't use that method, the local formatting would still override the h1 class.
Using a find and replace is the easiest way to do it.

[akobayashi]

Thank you everybody for making my options clearer!

Lisa, how do I enable "find in source code" field? Searching in Help for source code doesn't return anything, except in the XML Wizard in relation to importing a robohelp project. Looked at options ... Once I have source code view, I imagine I would use the Find in File/Replace function.

Could you please help?

thanks

akagi

[NorthEast]

It should appear in the help search - the topic is:
User Interface Elements - How to Use Each One > Using the Find and Replace Feature

To find and replace in source code, you'd need to
- Set up your find and replace terms (see notes below).
- Select Find in : (whole project). (maybe just do one topic first though, to test it)
- Tick Find in source code.
- Then click Start to start the search.


First of all, I'd look at the topic in text mode, and check how the formatting is used in your topics.

This might be in the h1 tag, e.g.:
<h1 style="color: #ff0000;"

Replacing this would be quite easy, you'd just replace it with <h1

Or it could be marked in a span tag, e.g.:
<span style="color: #ff0000;">

This would be more complicated, because if you want to remove the span tags, then you've also got to remove the closing closing </span> tag too.
You could just remove the style="color: #ff0000;" part to remove the formatting, and leave the span tags in. However, I don't know how you'd remove the span tags altogether using Flare's find and replace (I use a tool called Helpware FAR for jobs like this).

[KevinDAmery]

You can create a class of H1 - in your stylesheet it would look like

h1.classname

You would then have to apply it to the H1 blocks in each topic in order to get it to take affect, though, so it would be a time consuming process.

You couldn't use that method, the local formatting would still override the h1 class.
Using a find and replace is the easiest way to do it.

Yeah... was more addressing the question "can I make a custom style" with that one than how to deal with the local formatting.

[akobayashi]

Thanks for your kind explanations, Dave!

Now, when I see the file in the editor, it has: <h1 xmlns="">Reference Topics</h1>
When I remove xmlns="", the colour remains unchanged, and does not conform to the colour set for h1 in the style sheet the topic is linked to.
If I then apply a change of colour manually, then it shows the span style tag with the colour value.
eg: <h1 class="class1"><span style="color: #00008b;">Welcome to PSE Partner Self-Care Application</span> </h1>

I also notice that, for example, div has <div id="centerColumn">, <div id="header" xmlns="">
neither of which are defined in the stylesheet.

Is the topic referring to an external stylesheet? I copy the top declarations:
<?xml version="1.0" encoding="utf-8"?>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" xmlns:madcap="http://www.madcapsoftware.com/Schemas/MadCap.xsd" class="" lang="en">
<head><title>Reference Topics</title>
<link href="../Resources/Stylesheets/style.css" rel="stylesheet" type="text/css" xmlns="" />

So, I surmise that, as I don't want to sever the link to the external stylesheet, my option to change the h1 colour may be to replace xmlns="" by the span/colour valued tag, which can be done en masse.

Best Regards

akagi

[NorthEast]

So, I surmise that, as I don't want to sever the link to the external stylesheet, my option to change the h1 colour may be to replace xmlns="" by the span/colour valued tag, which can be done en masse.

No, I wouldn't do that.
You don't want to add span tags to your topics, I was just suggesting that your topics may already include span tags (as an alternative to the style being set in the h1 tag).

Looking at the code you've included, it looks like the colour setting is coming from your stylesheet.

What properties are set for h1 and h1.class1 in your stylesheet (style.css)?
Do they not include the red colour?

[akobayashi]

I just realized another problem with this manual replacement method...

Most of the files are single sourced from another project and merged. The colour for h1 needs to remain as it is in the other project.
The merge doesn't happen often, but would be nice to minimise the amount of work required after merge.

regards
akagi

[NorthEast]

I just realized another problem with this manual replacement method...

Most of the files are single sourced from another project and merged. The colour for h1 needs to remain as it is in the other project.
The merge doesn't happen often, but would be nice to minimise the amount of work required after merge.

regards
akagi

Manual replacement is only required if the colour style is being set in the topics - but looking at your examples, that doesn't appear to be the case.

I'd first identify where the colour is being set, if it is in your stylesheet then that's easy to change.

[KevinDAmery]

I just realized another problem with this manual replacement method...

Most of the files are single sourced from another project and merged. The colour for h1 needs to remain as it is in the other project.
The merge doesn't happen often, but would be nice to minimise the amount of work required after merge.

regards
akagi

This isn't as difficult as it sounds. Each project can have its own stylesheet with different colour settings. For example, you posted that the topics have styles <h1 class="class1"> - what you can do is in each project set the h1.class1 style to use the colour appropriate to that project (in other words, for the project you are currently working on, set it to the colour you want, but for the other project leave it as the other colour). Each project can be set to use the stylesheet in its own Content\Resources\Stylesheets folder, so they will not interfere with one another.

If I then apply a change of colour manually, then it shows the span style tag with the colour value.
eg: <h1 class="class1"><span style="color: #00008b;">Welcome to PSE Partner Self-Care Application</span> </h1>

This is over-riding the styles in h1.class1 with the colour in the span tag. It will work, but as Dave says it isn't the most efficient approach (if you needed to change it later you would need to update or remove all the span tags, which would be a lot of work). It would be better to get h1.class1 working the way you want instead.

[akobayashi]

Thanks Dave.

In the stylesheet, no colour is set for h1. I can't see a h1.class in the stylesheet. (where do I view all classes?)
In advanced view, nothing comes up as locally set properties. (The only properties set in the stylesheet are display, font size and weight, margin, mc-auto-number-offset, -position, mc-disable-glossary terms and mc-heading-level.)

But if from Simplified view of the stylesheet I right click to show properties and go to Paragraph or Borders tab, the example shown is in the red colour!

This is where I started. Would be great to solve this!

akagi

[NorthEast]

If you like, copy and paste the text from your CSS file here; it'll be easier than trying to guess what's wrong.

[akobayashi]

Hi Dave,

Thanks very much for the suggestion.

To get to the point. As I was sending the file to you, I opened the stylesheet in Crimson Editor and surprise surprise! All sorts of details were defined, which are not displayed when opening the stylesheet within Flare. I edited the file in C editor and the colour change takes effect on the topic page! So as far as my immediate problem is concerned, solved.

I am curious, though, to find out why the details do not show on Flare and how I can manage to merge the two views. The tags are different? I suppose I can set something via Flare and see what it appears as in C edtor?

I should have added in my last post that as the stylesheet had no indication of the colour being set, and when I defined the colour I wanted (blue) via Falre, this had no effect on the h1 displayed, although when I created a new topic, it did take effect.

Your advice will be really really appreciated, to get out of this quagmire.

akagi

I can't attach any files - so here it is copied: /*<meta />*/

/*******************************************************
TITLE: Fluid Box Layout V1.0
DATE: 20060810
AUTHOR: The CSS Tinderbox - http://www.csstinderbox.com

The following customizations have been added:

'#Head', 'table', 'p', 'li', 'ul','centerColumn h3', 'centerColumn4'
'a:visted', 'breadcrumbs-proxy', and 'a.Popup'.

.warning class to blockquote.

classes .class1 A and .class1 A: hover to A and A:Hover.

expandingHead, expandingBody, and dropDownHotSpot tags.
*******************************************************/

/*
A:visited
{
color: #CDC59B;
text-decoration: none;
}
*/

body
{
margin: 0;
padding: 0;
color: #282282;
text-align: left;
font-family: Verdana, Helvetica, Arial, sans-serif;
font-size: 1em;
}

p
{
padding: 0 0 0 1.8em;
font-size: 0.9em;
mc-breadcrumbs-count: 4;
}

table
{
border-collapse: collapse;
border-width: 1px;
border-style: none;
border-color: #C0C0C0;
font-size: 0.9em;
margin: 1.5em;
font-family: Verdana, Helvetica, Arial, sans-serif;
}

.navcellOff
{
background-color: #2e4f84;
}

.navcellon
{
background-color: #1D64AD;
}

td
{
border: 1px #C0C0C0 solid;
}

A
{
color: #282282;
text-decoration: underline;
}

.class1 A
{
color: #2A2B49;
text-decoration: none;
}

A:hover
{
color: #9b;
}

.class1 A:hover
{
color: #2A2B49;
text-decoration: none;
}

ul
{
margin-top: 0.3em;
margin-bottom: 0.3em;
margin-left: 3em;
padding: 0em;
font-size: 1em;
list-style-image: url(../../images/bullet_go.jpg);
}

ol
{
margin-top: 0.3em;
margin-bottom: 0.3em;
margin-left: 3em;
padding: 0em;
font-size: 1em;
}

li
{
margin-top: 0.3em;
margin-bottom: 0.3em;
margin-left: 3em;
padding: 0em;
}

blockquote
{
background-image: url(../../images/dialog-information.jpg);
background-color: #ffffff;
background-repeat: no-repeat;
background-position: left center;
margin-left: 1.8em;
padding-top: 1em;
padding-bottom: 1em;
padding-left: 1em;
padding-right: 2em;
border-top: 1px solid #cccccc;
border-bottom: 1px solid #cccccc;
}

.warning
{
background-image: url(../../images/dialog-warning.jpg);
background-color: #ffffff;
background-repeat: no-repeat;
background-position: left center;
margin-left: 1.8em;
padding-top: 1em;
padding-bottom: 1em;
border-top: 1px solid #cccccc;
border-bottom: 1px solid #cccccc;
}

#centerColumn
{
margin-top: 1.2em;
margin-left: 6em;
margin-right: 6em;
voice-family: "\"}\"";
voice-family: inherit;
margin-left: 2em;
margin-right: 2em;
padding: 1em .5em 2em .5em;
text-align: left;
font-size: 0.8em;
background: #FFF url(../../images/column_bg.gif) repeat-x;
border: 1px solid #999999;
}

html > body #centerColumn
{
margin-left: 1em;
margin-right: 1em;
}

#CatapultToc
{
padding: 50px;
}

#centerColumn h2
{
padding: 0 0 0 1.6em;
font-size: 1em;
font-weight: 300;
color: #666666;
}

#centerColumn h3
#{
padding: 0 0 0 1.2em;
font-size: 1.3em;
color: #9b1e3c;
}#
{
padding: 0 0 0 1.2em;
font-size: 1.3em;
color: #000008b;
}
#centerColumn h4
{
padding: 0 0 0 1.6em;
font-size: 1.0em;
color: #9b1e3c;
}

#header
{
padding: 0 0 0 20px;
}

#header h1
{
margin: 0;
padding-top: 10px;
padding-left: 0 0 0.2em;
font-size: 1.8em;
font-weight: 900;
color: #00008b;
border-bottom: 1px solid #999999;
}

breadcrumbsProxy
{
border-top-width: 0px;
border-left-width: 0px;
margin-top: 0.5em;
margin-left: 1.1em;
margin-bottom: 0.2em;
padding-bottom: 0.2em;
border-bottom: solid 0px black;
mc-breadcrumbs-prefix: 'You are here: ';
mc-breadcrumbs-count: 8;
color: #666666;
font-size: 8.5pt;
font-weight: 400;
}

a.Popup
{

}

expandingHead
{
font-style: normal;
font-weight: normal;
cursor: hand;
text-decoration: none;
color: #006600;
}

expandingBody
{
font-style: italic;
color: #282282;
font-family: Verdana, ' Helvetica', ' Arial', ' sans-serif';
font-size: 0.9em;
}

dropDownHotSpot
{
cursor: hand;
font-style: normal;
text-decoration: none;
color: #282282;
font-family: Verdana, ' Helvetica', ' Arial', ' sans-serif';
font-size: 0.9em;
}

popupBody
{
border: solid 0px #000000;
color: #282282;
font-family: Verdana, ' Helvetica', ' Arial', ' sans-serif';
font-size: 1em;
padding-top: 1em;
padding-right: 1em;
padding-left: 0px;
padding-bottom: 0px;
padding: 0px;
background-color: #fffacd;
height: auto;
width: auto;
}

popupHead
{
text-decoration: none;
color: #006400;
}

popup
{
height: auto;
width: auto;
}

#Head
{
margin-top: 1.2em;
margin-left: 1.5em;
margin-right: 25em;
background: #003366 none 0;
white-space: nowrap;
}

#Head #Tabs
{
margin: 0 0 0 1em;
padding: 2px;
}

#Head #Tabs ul
{
margin-left: 0;
padding: 0;
list-style-type: none;
}

#Head #Tabs li
{
margin: 0;
padding: 0;
list-style: none;
border-style: none;
display: inline;
}

#Head #Tabs a
{
font-size: 12px;
padding: 3px 10px;
text-decoration: none;
color: #fff;
background: #2e4f84;
}

#Head #Tabs a:hover
{
color: #fff;
background: #1D64AD;
}

xref
{
mc-format: 'create a contract for the partner flashpoint';
}





best regards
akagi

[NorthEast]

First of all, I'm assuming this is a stylesheet someone has given you to use with Flare?

The definitions in there seem a quite complicated, and it seems to be designed for a quite specific page layout.
For example, there are quite a few ID (#) styles in there using complex selectors; the #header h1 {...} style will apply to h1 tags used inside another tag, such as an h1 tag inside a div tag with the ID header. However, I'm not sure if you use this type of structure in your topics; was the stylesheet previously used for a website?

Anyway, to modify your stylesheet (if you're allowed to do that) might not be very easy if you're not that familiar with CSS. Can you get help from the person who designed the stylesheet in the first place?

[akobayashi]

Hi Dave

Thanks very much for your quick response!

It is possible that my colleague, who used to work with RoboHelp in his previous job and then created the style for MadCap based the style on a previously defined stylesheet. He also used to edit the files on Kompozer, as he found Flare not very easy to use. He has left the company now and the buck stops with me.

I remember now, also, when I was rebranding the help some time ago and discussing the colour options with the then designer, we edited the stylesheet from an external editor (possibly Dreamweaver). We bypassed the stylesheet editing from Flare that time, so I didn't come across this issue.

I have crossed the immediate hurdle, by editing the stylesheet in Crimson Editor. Going forward, however, if I want to enable this stylesheet in Flare, what can I do? a) Is there a way of transferring the details? Do I start a brand new stylesheet and configure the details manually following the configuration in the existing one? b) How can I make the new stylesheet take effect on existing topics? From what I've recently tested, Flare-modified styles don't take effect over the existing styles in existing topics.

What might be the disadvantages of continuing to use the existing stylesheet? I'm trying to imagine what issues there may be, as I may have to do a number of style changes in the forthcoming months. Otherwise basically we're happy with the layout (div border, etc) and we've experienced no problem apart from a name space URI incorrect error that occasionally pops up.

Thanks again

akagi

[NorthEast]

Ok, this is getting a bit in-depth to go much further into. I'm not familiar with Kompozer, but as it seems to be a web authoring tool, I'm guessing that's where the page layout and stylesheet originate from.

Your stylesheet makes quite heavy use of ID names, which means it will only work if that structure of using ID names is also used throughout your topics.
Presumably your old topics look ok because they still use this structure, but if you're not using this structure in your new topics then they will look different.

For example, the #header h1 style means your h1s might look different in new topics to your old topics - if in the old topics, they are contained inside an element with the ID 'header'.

[akobayashi]

Hi Dave,

Thanks for your assessment. I'll send you a screenshot to your private address (if I can) to show you what the help looks like. It's nothing complicated.

At the next opportunity, I'll start a Flare stylesheet from scratch.

Thanks for your patience and sticking with me till the end!

best regards
akagi

[NorthEast]

Yep, from the screenshot, I'd guess that the box around the text is probably a div tag (or other container tag) - and that the div has a specific ID name; at a guess centerColumn. I'd also guess there's a div containing the heading, with the ID header.

So, if you look at the page in text mode, you might see something like:

<div id="header" ...>
<h1>Welcome to PSE....</h1>
...
</div>


That would explain things like the #header h1 styles, and why they look different to when you apply an h1 style in topics that don't have this structure.

[KevinDAmery]

To get to the point. As I was sending the file to you, I opened the stylesheet in Crimson Editor and surprise surprise! All sorts of details were defined, which are not displayed when opening the stylesheet within Flare. I edited the file in C editor and the colour change takes effect on the topic page! So as far as my immediate problem is concerned, solved.

I am curious, though, to find out why the details do not show on Flare and how I can manage to merge the two views. The tags are different? I suppose I can set something via Flare and see what it appears as in C edtor?

I should have added in my last post that as the stylesheet had no indication of the colour being set, and when I defined the colour I wanted (blue) via Falre, this had no effect on the h1 displayed, although when I created a new topic, it did take effect.

By default, Flare shows you what it considers to be "assorted relevant properties". I always change this to show all properties:

1) Make sure you're in the Advanced view rather than the Simplified View
2) In the pulldown at the top right, switch to "Show: Property Groups."

That will show you all properties of all styles.

Alternatively, you can open the stylesheet into the internal text editor - this will show you the same content as Crimson Editor does without having to deal with external tools. To open it this way, right click on the stylesheet and choose Open With from the context menu.

[NorthEast]

Also the majority of the styles in this particular stylesheet will be listed under (Identifiers) or (Complex selectors).

Either way, it's not easy to see and work out the combinations of styles involved, esp. in a stylesheet like this one.

[akobayashi]

Thanks Kevin and Dave,

Good to know that I can view and edit the stylesheet from within Flare.

Do the standard styles in Flare not include devices like box around the text and the header on the line?
If they do, which styles do I use, respectively?

akagi

[NorthEast]

Thanks Kevin and Dave,

Good to know that I can view and edit the stylesheet from within Flare.

Do the standard styles in Flare not include devices like box around the text and the header on the line?
If they do, which styles do I use, respectively?

akagi

Flare supports standard HTML and CSS; but as your stylesheet/layout appears to be generated from a template designed in a web-authoring tool, you're not necessarily just going to be able to place the resulting HTML in any another tool and expect to edit/output it in exactly the same way.

You can edit/recreate your pages with the same layout in Flare - e.g. you can create div tags and set IDs no problem ; but whether that is going to be a particularly easy or efficient way to write your help is another matter.

[akobayashi]

Hi Dave,

Thanks again -

but whether that is going to be a particularly easy or efficient way to write your help is another matter.

Plot thickens!

akagi