docs / Content CSS Setting
  • If you are citizen of an European Union member nation, you may not use this service unless you are at least 16 years old.

  • Finally, you can manage your Google Docs, uploads, and email attachments (plus Dropbox and Slack files) in one convenient place. Claim a free account, and in less than 2 minutes, Dokkio (from the makers of PBworks) can automatically organize your content for you.

View
 

Content CSS Setting

OverviewAdminContent CSS

 

 
Home
Dashboard
Workspaces
Users
Reports
Admin
Info
Logo
Themes
Network Access
Subscription
Email Delivery
Personal Workspaces
User Profiles
Content CSS
Customize Tabs
Google Analytics
Types
Properties
Amazon S3 Export
API Documentation
Security
 

 


 

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; }