Applying CSS in FP (Full Version)

All Forums >> [Web Development] >> Cascading Style Sheets



Message

davids -> Applying CSS in FP (6/3/2003 8:26:13)

This seems like a simple question, but I can' t find a simple answer. My customer wants to have certain words in green or red. So I have created .green and .red classes in the stylesheet.

To apply them, I use <span class=green>text</span>. Simple enough, but I want the client to be able to apply the styles themselves in FP, since they don' t know html.

The style dropdown box on the FP toolbar will apply .green to the entire paragraph. Isn' t there a way to apply a class to a text without flipping to html?



pageoneresults -> RE: Applying CSS in FP (6/3/2003 19:02:40)

Sounds like there may be some conflicting classes in the style sheet. When viewing the style menu in FP, there will be indicators to the left of each style showing whether it is a block level (¶) or inline level (a) element.

If you have a generic class for colors, like...

.red{color:#f00;background:transparent;}
.green{color:#090;background:transparent;}

Those will appear in the styling menu without a block level or inline level indicator and can be applied to any element but, not using the FP styling menu (see my PS below).

If you have a p.red class and also a span.red class then they will both show up differently in the styling menu. One will have a block level indicator, the other will have an inline indicator. If the client is not selecting the right class, then that may be the reason for the discrepancy.

P.S. When using span.classname the indicator in the FP styling menu will have an a. If you use just general classes (.red) instead of (span.red) then there will not be an indicator next to it. For those who are using the FP styling menu, you must specify span.red in your style sheet so when selected from the style menu, it does not affect the entire paragraph.

This is where the hand coding knowledge comes in. I' m always switching to html view and inputing my own class names on elements. I do that mainly because I am now assigning multiple classes to one element which cannot be done through the FP styling menu.



davids -> RE: Applying CSS in FP (6/3/2003 19:23:55)

Thanks for taking the time to reply, but I don' t follow at all. You say,
quote:

When viewing the style menu in FP, there will be indicators to the left of each style showing whether it is a block level (¶) or inline level (a)element.

but I don' t see this either in the style box on the Formatting toolbar or when I click on Style on the Style toolbar. I am using FP 2000. Is that the problem?



pageoneresults -> RE: Applying CSS in FP (6/3/2003 20:12:02)

[url=" http://www.csstips.com/frontpage/images/fp-styling-menu.gif" ]FrontPage Styling Menu[/url]

The above is a screenshot from my FP2002. I believe FP2000 also has the styling menu in the upper left hand corner, it has been too long!

Once your external style sheet (file.css) is set up and then linked to properly from the head of your document, any page you open that references that style sheet will show the styles in the styling menu.

You' ll notice that I' ve included some span elements so that you can see what happens when you set up span specific classes. The a indicator now appears to the left of those span.classnames. I also dropped in a general color for green. Note how it does not have an indicator to the left of it. This is where the problem lies.

FP has no way of knowing that you are wrapping a word(s) in a span element while in normal view. The only way it knows is to specify span.green so that now you have a specific class for coloring text.

You and I both know that we can specify .green in our stylesheets which allows us to wrap any text in a <span> container and achieve green. All of that is of course done via hand in html view. But, the WYSIWYG interface of FP does not allow that functionality. You need to be specific.

span.red{color:#f00;bakcground:transparent;}
span.green{color:#090;background:transparent;}

Doing the above in your stylesheet will now classify that as a specific span class and will appear in the FP styling menu with an a indicator to the left of it. The user would highlight the text they want to make green, and then select the a green from the styling menu.

If that span.class is not specifically named, the <span></span> containers need to be added manually in html view.

<span> is an inline element. If you are applying styles to text in FP, you have to have specific span.class names for the styling menu to function properly (a green).

If you want to apply color to block level elements, you would specify block level specific classes, for example...

p.red{color:#f00;bakcground:transparent;}
p.green{color:#090;background:transparent;}

Your styling menu will now show the words red and green but instead of an a indicator, they will now have a block level indicator (¶). If I just position my cursor in front of a paragraph and select that ¶ green from the menu, the entire paragraph will turn to green. Front page will now change the <p> tag to <p class=" green" >. Remember, it is a block level element so I can click anywhere within the block and style it. If I am styling text, I have to highlight that text (select it) and choose a green from the styling menu.

P.S. I should point out that there are some fundamental flaws in FP' s styling menu. It treats all block level elements as <p> so trying to use the styling menu for block level elements will not work. Sure, you could do p.red but if you try to apply that ¶ red to let' s say a <li> which is also block level, it wraps the <li> in a <p> tag. This is where html coding gets totally thrashed.

I' m hoping for better support in the new version of FP. We shall see...



pageoneresults -> RE: Applying CSS in FP (6/3/2003 20:34:50)

Not to be long winded or anything...

If you are going to use CSS with FrontPage, you will no longer utilize the regular formatting buttons at the top of your editor. You know, those buttons that allow you to apply color to text, highlight, underline, etc. You will still use the <b> and <i> buttons as FP appears to not support the WYSIWYG for applying <strong> and <em> which are more semantically correct.

As semantics become more mainstream, the <strong> and <em> will be the coding specification, <b> and <i> will probably become [url=" http://www.webopedia.com/TERM/d/deprecated.html" ]deprecated[/url]. You can do this using FP' s styling functions, but it is complicated and requires that you know some more advanced functions in FP, or I should say, procedures to obtain the desired effect, it is not a simple process in WYSIWYG.

That Styling Menu at the top left of your formatting toolbar will become your friend. If you are coding style sheets to use in FP' s WYSIWYG interface, then you must use rule specific classes for styling text or inline elements. You can have generic classes for color...

.red{color:#f00;bakcground:transparent;}
.green{color:#090;background:transparent;}

...but they will be treated as if they were block level <p> elements. Only someone who knows how to circumvent the WYSIWYG interface and add style (classes) to their inline and block level elements would be able to use generic classes, i.e.

.red{color:#f00;bakcground:transparent;}
.green{color:#090;background:transparent;}
  • <li class=" red" >List Item - Block Level</li>
<p class=" red" >Paragraph - Block Level</p>

<p class=" red" >Paragraph - Block Level <span class=" green>Some green text here - Inline Level</span></p>.

Note how I can manually apply generic class names to any element I choose. Ya' can' t do this using the FP styling menus.



davids -> RE: Applying CSS in FP (6/4/2003 5:20:44)

Understood, and thanks again for your explanation. It seems that my FP 2000 does not show inline elements in the Style dropdown. As soon as I change the definition from .green to span.green, it disappears from the menu.

I have been kind of waiting for FP 2003 before upgrading. Anyway, I can always do things in html view, but I promote FP as a way for my customers to easily update the sites I create for them, so what matters is which version of FP they have.



marpacwm -> RE: Applying CSS in FP (6/4/2003 13:30:20)

I' m using FP2000 and also find that setting span.tag{} in CSS removes it from the list in FP. Can anyone confirm that this is normal behaviour for FP2000?



gorilla -> RE: Applying CSS in FP (6/5/2003 11:27:57)

quote:

ORIGINAL: marpacwm

I' m using FP2000 and also find that setting span.tag{} in CSS removes it from the list in FP. Can anyone confirm that this is normal behaviour for FP2000?


Yes, it is normal, and really quite annoying, behaviour.

Freja



Page: [1]

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
7.800293E-02