Changes to Style Sheets in Blackbaud NetCommunity 6.41

As part of the version 6.41 upgrade, the way that Blackbaud NetCommunity handles style sheets has changed from what you’re used to. I’ve run through some of the changes below.

The first thing that you will notice on the Style Sheet screen is that it is now split into mobile and desktop style sheets:

This is because from version 6.41 onward, you can target how content is displayed based on the type of device that someone is viewing your site on without having to create new layouts/templates.

When creating a new Style Sheet you can see this in more detail, you can target based on media, this allows you to show different content based on things like if a device is in portrait or landscape mode, you can also target styles based on different browsers.

What you will also see now is that multiple style sheets can be used so that they cascade in order when a page renders, to check the order of this click on the ‘Desktop Browsers’ or ‘Mobile Devices’ tabs on the style sheet screen.

Another change you may notice is how you add styles into the style sheet, this screen has been overhauled and simplified to look like the screen below:

If you want to add in custom CSS then just type it straight into the editor, if you want to style a specific part then select ‘Insert CSS selectors’ You should then see the screen below, this allows you to insert selectors for each part in BBNC and allows you to load any default values.

This is an example of what happens when you insert the selectors for the donation form, you can see the CSS classes relating to this part have been loaded and can be edited.

For more information on site design, review site design guide; if you have any specific questions leave me a comment below.

You can keep up with us on Twitter by following @bbsupport; we use the hashtag #bbnc when we discuss Blackbaud NetCommunity. Take a look at our Twitter Guide for more information.