Lessons.Ch11. CSS text in Microsoft – using styles in Library pages

[overview]

[/overview]

[text]

Working with style sheets in Library pages can be a bit tricky as Library page uses no formatting what so ever.. the text in a Library page is 'embedded' into the template page. THEN the text is formatted via the template pages style sheets.

If you were to format the text in a Library page, using the font toolbar for example, the end result when viewing the embedded content of the Library page in a web browser via the 'template' page it's embedded into… could be something quite different .. as the content of the Library page is embedded into your template pages.. then it's formatted via the template pages style sheets. So formatting the text directly in the Library page requires a small bit of prep, and careful application.

When creating new font styles, it's highly recommened that you create a new style sheet. Add your new font styles to that new style sheet. Then attach or import the new style sheet into an existing style sheet, or link it directly into your web page(s).

It will be 'much' easier to manage your new font styles using your own style sheet, than it would be if you added your new font styles into an existing style sheet .. which may contain over 100 styles.

The 'best' way to preview your new Library page style, is to view them directly through one of your template pages .. in your favorite web browser ( we suggest Firefox, as FF is one of easiest browsers to refresh and or clear the browser cache ).

THE PREP:

  1. open your web site in your web editor
  2. right click on one of the template pages containing the embedded Library page
  3. then click on the 'Preview in browser' command

  4. and preview a web page .. keep this page 'open' in your web browser as you make style changes.. that way you just need to refresh the page in your browser to see how your changes are taking effect…

    for all you folks working with the newer LIVEVIEW or LIVEPREVIEW.. this method is a bit 'old school' but it works like a charm .. Library components that are scripted such as the menu pages may not display 100% in the LIVEVIEW or LIVE PREVIEW modes.

  5. open your Library page

  6. click on the 'Task' or 'Task Panes' menu and click on the 'Apply Styles' command

  7. click on the 'Attach Style Sheet' icon/text and browse to the Site / styles folder

  8. select the style sheet that you will be adding the new font style to and click the open button, then ok

  9. your prep is complete

To create styles to be used in a Library page:

  1. to create your new style, just click on the 'New Style' icon/text in the 'Apply Styles' panel

  2. click on the 'Define in:' menu, and change to 'Existing Style Sheet' ( or new style sheet if you haven't created it yet )

  3. click on the 'browse' button and browse to the Site / styles folder

  4. and as you did during the 'PREP', click on the style sheet you want to add your new font style too

  5. then click the open button

  6. in the 'selector:' field give your style a name, and here are some rules and tips to help
     
    • always name your style starting with a period

      … example:  .newstyle

    • include the name of your website or some sort of accronym in the style name

      … example:   .frazoo_newstyle or .fw_newstyle ( fw for frazoo web, no exsiting styles start with a 2 letter accronyn )

      **If by chance you happen to pick a style name that is already in 'use' in another stylesheet, your new style may over write the existing style and create a total mess of your site

    • try to use some soft of descriptive names, so you know where or what this new style is used for

      … example:   .frazoo_whatsnew_h3

    • and as a final tip, notice all the letters are in lower case and the words are connected using the _  ( underscore ) you can use hyphens as well

      … example:   .frazoo-whatsnew-h3

  7. now you can start to build your new font style..starting with the 'font-family' apply a selection for each of the following properties

  8. it's important that you fill in all of the font properties.
  9. if your not sure what to select, just select normal or none
  10. Style sheets will pick up on higher level style sheets ( thus the name 'Cascading' ) … leaving blanks might allow a higher level font property to be applied in it's place.
  11. use the 'Preview' window to preview your new font style

  12. now you've created your new style, you'll want to apply the font to the text on your Library page
  13. click the ok button to close the Modify Style window
  14. click on the 'Options' button and change the options to:

  15. these settings will display the font styles in your style sheet.
  16. if you are using one of the default style sheets and not a new style sheet you'll need to scroll through the list of font styles to find your new style
  17. to apply your new font style to the text on your Library page, select the text with your mouse

  18. then click on the 'font style' in the 'Apply Styles' panel

  19. save the page, go back to the web page that you have open in your browser and press the 'refresh' button to see the new font style

  20. as you can see, the new green font color looks terrible on the red background, so it's time to go back to the 'Apply Styles' panel
  21. click on the 'arrow' located on the right side of the style name

  22. then click on 'Modify Style' to make changes

  23. continue modifying the style, previewing, modifying, previewing until you have something that works for you!

[/text]

This entry was posted in Lessons.Ch11. CSS text and tagged , , , , , , . Bookmark the permalink.

Comments are closed.