Design a stylesheet  



To search for an existing stylesheet, use the search tools in Blackbaud NetCommunity. For example, at the top of the Stylesheets screen, to search for a stylesheet, enter a partial name in the Name field. At the bottom of the Stylesheets screen, select the number of stylesheets on the screen in the Results Per Page field. If you know the page number in Stylesheets where your information is stored, select it in the Page field.



1.  From Web Site, click Layouts. The Layouts screen appears.



Warning: When you design and customize your website, we recommend you test the rendering of your site in multiple browsers. For example, if your primary browser is Internet Explorer, we recommend you also test your site with Mozilla Firefox. If your site renders differently, we recommend you modify your stylesheets so your site has a similar look and feel in all browsers you test.



2.  To edit an existing stylesheet, click Edit in the Actions column. The Stylesheet Designer screen appears.



If you create a new stylesheet, first save the stylesheet properties. For more information about stylesheet properties, see Create a stylesheet.



3.  To override the default stylesheet:



a.  Click the plus sign to the left of Defaults. The default styles list expands.



note: The Defaults styles apply to common elements throughout your web pages that use the stylesheets you select, such as Form Titles and Textboxes.



b.  Click an element, such as .BBFormTable. The Cascading Stylesheet (CSS) information appears on the right side of the screen, such as “border:1pt solid buttonface;”.





c.  To override the default style of this element, enter CSS text in the box on the right screen.



4.  To override a specific style class:  



a.  Click the plus to the left of the node, such as Job Board. The list expands.



b.  Click an element, such as .JobBoardPostLink:link. The CSS information appears on the right side of the screen, such as “color:06C;text-decoration:none;”. If you override the .BBFormTable stylesheet in Defaults, your CSS text information appears here as well.



c.  To override the style class, enter CSS text in the box on the right screen.



5.  To create custom styles and classes:



a.  At the end of the tree view, click Custom CSS.



b.  In the Custom Styles frame, enter your CSS text for the stylesheet. For example, you can customize the body of an HTML Document part type or define classes to use throughout the website.  



6.  To save your changes, click Save and Close. You return to Stylesheets.