About

The Content CSS setting of your network allows you to globally apply CSS settings to every page created in your network.

The scope of this setting is limited to just your content inside workspace pages, and the settings in place here will not be applied to the file manager, the tasks, the dashboard or any other portion of the service. 

You cannot use this part of the service to adjust the size of core elements, or effect change on the page layout.  This limitation is to ensure that as PBworks is developed, and new features get added, your customizations will not interfere with them, and conversely, that our enhancements will never interfere with your adjustments.

Tips

• The best way to get started with this setting is to set up a page with lines of text with all possible formats.  Make six lines and make each line a unique format (Normal, Heading 1, Heading 2 etc.).  Make a bulleted and numbered list and create a table with text inside (perhaps with each format).  Then, open the Admin panel in a different tab of your browser.  That way, while you are making adjustments on the Content CSS setting, you can simply refresh the page in the other tab to see what affect you are having.
• This setting does not require <style></style> tags, or any HTML tags in your code.  Treat this setting as if it is an external CSS page.  HTML tags will be removed upon save.
• Once you save this setting, your code will be slightly altered to ensure compatibility across browsers.  For instance, if you set an element to color #FF0000 (red), that will be transformed to "rgb(255, 0, 0)" on save. 
• When you specify a value for an attribute, remember to place a semi-colon ";" immediately after.  In the example below, each value is ended by a ";".
• This is a global setting and so be sure that the rules you set here are appropriate to set across the network. 
• You may want to type out your CSS in an external text editor, like Notepad, first, and then copy the text in.  That way, when you save the text and your CSS is sanitized by our system, your original will remain.

Changing a heading

To start, let's change the "Heading 1" values so that every time Heading 1 is used, the text becomes very large and very red in view mode.  Copy and paste this content into the setting (Note: only copy the content from "h1" to the last end bracket ("}") character.  This example is for demonstration purposes only, so the changes you make are very apparent.

h1  
{  
font-family: Lucida Grande;   
color: #FF0000;   
font-size: 80px;   
text-align: right;  
} 

Let's go line by line to see what each line changes:

• h1 : This limits the change to the tag "h1".  Whenever anyone uses the "Heading 1" format, the changes between the brackets will apply.
• {   :  The open bracket sets where the definitions starts.
• font-family:  The font-family is the name of the font the h1 text will use.  Something very important to consider when selecting a font, is that only fonts that are available on a system will appear for a user.  So, while your own system may have many obscure and perhaps even custom made fonts to choose from, those will not be displayed unless the computer viewing the page has that specific font installed.  If your audience is limited, then you may be able to use a font that is common for your systems, but if you're unsure of the computer viewing your pages, you may want use one of the fonts in this list:
• Lucida Grande
• Tahoma
• Impact
• Verdana
• Trebuchet MS
• Courier New
• Lucida Console
• Arial
• Arial Black
• color:  To define a color, it's best to use the hexidecimal value, to ensure you're getting the precise color needed in all browsers.  You may want to use this as a reference, and remember to start each value with a "#" character and then no spaces between the six character value.  For example, the "Golden Rod" color is "DA A5 20", and so the value would be represented by "#DAA520".
• font-size:  Fonts are calculated in pixel height.  For a larger font, set the "px" value to something larger (like 120px).
• text-align:  By default, text is aligned to the left (when the character set in use is a left-to-right language).  Use "center", "right", or "justify" values to change the text alignment.
• }  :  Take care to always end your  CSS definition with a closing bracket.

Changing other text

Text that is not a heading (h1, h2, h3, etc.) is encapsulated in a paragraph tag ("p").   Be careful when setting styles on this tag in particular, as this is the "Normal" default format for all text on all pages in your network.

p  
{  
font-family: Times New Roman;   
color: #FF0000;   
font-size: 12px;   
} 

Changing links

To specify the colors for links, you may want to specify each state that a link can be in.

a:link { color: #FF0000; } 
a:visited { color: #00FF00; } 
a:hover { color: #FF00FF; } 
a:active { color: #0000FF; }