Skin Painter Overview

How to Create the CSS Style Sheets.
One of the reasons this script is fast and powerful is that it creates two style sheets from the values you store in the skin table using the Skin Painter. The CSS style sheets drive the elements without having to access the database each time.

If you are like me and like to tinker with colors and fonts, you will want to use PLAN A (Direct write to disk) Otherwise, PLAN B (Cut and paste) will get the job done but is slower if you plan to make a lot of changes.

PLAN A (Automatically writes the CSS style sheet to disk.)
Temporarily set the /enewsviews/style/nv_body.css and /enewsviews/nv_menu.css file rights to give the user EVERYONE MODIFY permissions. eNewsViews will then write the style sheets to the /style/ directory each time you click Save in the Skin Painter.

Here are the step by step instructions to temporarily change the rights on a Windows box from teh console.

  • Navigate to http://YOUR_WEB_ROOT/enewsviews/style/nv_body.css and nv_menu.css
  • highlight both files and right click on the files then click Properties.
  • Click on the tab marked Security.
  • Click on the user named EVERYONE. Make sure that Modify has a check mark and Click OK.
  • NOTE - When you are done setting up the script in Skin Painter, set the rights of the /enewsviews/skin/nv_style.css back to EVERYONE READ ONLY.

    PLAN B (Manually cut and paste the CSS style sheet.)
    If eNewsViews is unable to write to disk when you click save in the Skin Painter, a screen will provide instructions to manually cut and paste CSS style sheets.

    You will be instructed to right click and view the source of the page and simple instructions of what goes where will be available.

    Remember to refresh your web page on your browser in order to see the changes you made through the Skin Painter. If you can not see your changes, here is a quick checklist of reasons your changes are not being recognized:

    • The file rights of the /style/nv_menu.css and /style/nv_body.css are not temporarily set to EVERYONE MODIFY.
    • Your browser cache has not been cleared and temporarily set to refresh the page with each visit.
    • You need to click the page refresh button of the web page that contains the IFRAMEs.

    If the following conditions are met, the Skin Painter should work just fine. If you still have problems, try the cut and paste method. If cut and paste works, you have a file rights / write to disk problem. Otherwise, you have browser cache clearing problem.

    Script Titles
    .redtitle CSS element
    The page title found at the top of every page.

    Script Text
    .reg CSS element (regular text)
    The textual descriptions found on the pages which include:
    • Field Labels
    • Fair Use Notice
    • Disclaimer
    • Help Files, Documents, etc.
    Menu Background
    (Part of the CSS BODY element.)
    This is the only element defined in the nv_menu.css file.

    Page Background
    (Part of the CSS BODY element.)
    If you do not add a path to the eNewsViews style sheet in the heading of your web page, eNewsViews will work perfectly. However, if you want to use the style sheet that eNewsViews creates to drive other elements in your web page, then you need to add the path to the ../enewsviews/style/nv_body.css style sheet.

    EXAMPLE:
    <head>
    <link href="../enewsviews/style/nv_body.css"rel="stylesheet" type="text/css">
    </head>

    You can separately set the background colors of the two IFRAMES used to display eNewsViews. One IFRAME is used for the eNewsViews menu and one is used for the eNewsViews body. If you do not specify a page background color for the web page itself, the web page will assume the eNewsViews body color if you use the eNewsViews style sheet.

    If you want a separate background color for the web page that contains the IFRAMES, then you need to add an additional <BODY> tag within the <HEAD> of your web page AFTER the path to the stylesheet.

    EXAMPLE:
    <head>
    <link href="../enewsviews/style/nv_body.css"rel="stylesheet" type="text/css">
    <style>
    Body { background-color: #FFFFFF }
    </style>
    </head>

    This would make the eNewsViews IFRAMES the colors you set in Skin Painter on a page with a white background. From there you can color each of the separate areas of eNewsViews how ever you like. Think of it as three layers.

    • Web Page background color configured within the head of the page
    • IFRAME background colors configured within Skin Painter
    • Various eNewsViews table element background colors. I.e., Headline, quote and description background colors configured within Skin Painter
    Script Links
    .lm CSS element. (little menu)
    These are the small hyperlinks located on many of the eNewsViews pages that are used for navigation

    Input Fields
    .suf CSS element (set up fields)
    The text style in the input fields and the input fields themselves. All of the input fields can be configured.

    Large Links
    .bm CSS element. (big menu)
    These are the hyperlinks located on many of the pages that are used for Enter buttons.

    News Section
    Posted By and Date:              
    Post Views | Read Views (0)
    Headline
    Quote
    Comment
    Vertical Spacer

    Posted by and Date
    .pb CSS element (post by)
    This is section above the headline. It has separate properties from the Post/Read Views menu to the right of it to help define the post views section if you choose.

    Post Views
    .vm CSS element (views menu)
    This are the read | Post Views hyperlinks. Each hyperlink group can be defined differently although it is a good practice to make them the same color so as to not confuse the user.

    Headline
    .hl CSS element (headline)
    This is the headline hyperlink that takes the user to each news story. The hyperlink will pop a blank page for the headline so the user does not leave your web site.

    Quote
    .dt CSS element (description table or article quote)
    If you do not add a quote, then the comment table slides up into it's place.

    The quote is a great way to get the debate started. You do not need to add quote marks as they will be added automatically. Be careful that you are not quoting copyrighted material from a source that cares. See the Fair Use Disclaimer for more information.

    Comment
    .ct CSS element (comment table)
    If you do not add a comment no blank space will show.

    This is where the News Admin that posted the headline can comment on the story. It is a great way to point out what the article left out, shape the debate, etc.

    Spacer
    .vspacer CSS element (vertical spacer)
    This is a vertical spacer that can be added between the news stories. A little white space is very helpful in making the page easier to understand.

    eNewsViews Copyright © 2004-2005 Ray Wiltfong