CSS Library

Professional Services Playground - Latest and Greatest
Templates

z2. Library Styles

Status: In Progress

Status: Awaiting Testing

Status: Under Review

Status: Approved For Use

Author: John Doe

Default Style



Please submit all pages you have contracted Blackbaud to build for you. We ask that you be specific and detailed. 
Include notes for your page builder about layout preferences, how you would like to see content combined, or if you have preferences towards specific styles or functionality you would like used. Ideally, photos are uploaded per page for specified use, but there is a buik upload option below if you don't have preferences. Revision edits to photos or anything that was not specified in your notes will be school responsibility as all content is self managed.

Bulk Upload Option

SMALL PRINT PULLED FROM CONTRACT AS A REMINDER:
With the exception of text, all content types are limited to a maximum of ten (10) items per content piece (for example: we will populate 10 News stories per news group, or 10 photos per gallery). The remaining items are school responsibility to populate.

ITEMS THAT ARE NOT INCLUDED IN THIS SERVICE OFFERING:
- Population of calendar events, which the School can do through data import;Population of new or historical news stories;
- Population of academic course descriptions, which the School can do through data import;
- Population of faculty and staff directory personnel listings, which the School can do through data import;
- Configuration of Athletic settings and population of team, schedule, and opponent information, which the School can do through data import;
- Configuration of Store settings and population of Store items;
- Population of behind-the-password content such as Resource Board posts;
- Creation of Giving of Inquiry forms;
- Copywriting; 

Centered Style



Please submit all pages you have contracted Blackbaud to build for you. We ask that you be specific and detailed. 
Include notes for your page builder about layout preferences, how you would like to see content combined, or if you have preferences towards specific styles or functionality you would like used. Ideally, photos are uploaded per page for specified use, but there is a buik upload option below if you don't have preferences. Revision edits to photos or anything that was not specified in your notes will be school responsibility as all content is self managed.

Bulk Upload Option

SMALL PRINT PULLED FROM CONTRACT AS A REMINDER:
With the exception of text, all content types are limited to a maximum of ten (10) items per content piece (for example: we will populate 10 News stories per news group, or 10 photos per gallery). The remaining items are school responsibility to populate.

ITEMS THAT ARE NOT INCLUDED IN THIS SERVICE OFFERING:
- Population of calendar events, which the School can do through data import;Population of new or historical news stories;
- Population of academic course descriptions, which the School can do through data import;
- Population of faculty and staff directory personnel listings, which the School can do through data import;
- Configuration of Athletic settings and population of team, schedule, and opponent information, which the School can do through data import;
- Configuration of Store settings and population of Store items;
- Population of behind-the-password content such as Resource Board posts;
- Creation of Giving of Inquiry forms;
- Copywriting; 

Gray Style



Please submit all pages you have contracted Blackbaud to build for you. We ask that you be specific and detailed. 
Include notes for your page builder about layout preferences, how you would like to see content combined, or if you have preferences towards specific styles or functionality you would like used. Ideally, photos are uploaded per page for specified use, but there is a buik upload option below if you don't have preferences. Revision edits to photos or anything that was not specified in your notes will be school responsibility as all content is self managed.

Bulk Upload Option

SMALL PRINT PULLED FROM CONTRACT AS A REMINDER:
With the exception of text, all content types are limited to a maximum of ten (10) items per content piece (for example: we will populate 10 News stories per news group, or 10 photos per gallery). The remaining items are school responsibility to populate.

ITEMS THAT ARE NOT INCLUDED IN THIS SERVICE OFFERING:
- Population of calendar events, which the School can do through data import;Population of new or historical news stories;
- Population of academic course descriptions, which the School can do through data import;
- Population of faculty and staff directory personnel listings, which the School can do through data import;
- Configuration of Athletic settings and population of team, schedule, and opponent information, which the School can do through data import;
- Configuration of Store settings and population of Store items;
- Population of behind-the-password content such as Resource Board posts;
- Creation of Giving of Inquiry forms;
- Copywriting; 

Dark Style



Please submit all pages you have contracted Blackbaud to build for you. We ask that you be specific and detailed. 
Include notes for your page builder about layout preferences, how you would like to see content combined, or if you have preferences towards specific styles or functionality you would like used. Ideally, photos are uploaded per page for specified use, but there is a buik upload option below if you don't have preferences. Revision edits to photos or anything that was not specified in your notes will be school responsibility as all content is self managed.

Bulk Upload Option

SMALL PRINT PULLED FROM CONTRACT AS A REMINDER:
With the exception of text, all content types are limited to a maximum of ten (10) items per content piece (for example: we will populate 10 News stories per news group, or 10 photos per gallery). The remaining items are school responsibility to populate.

ITEMS THAT ARE NOT INCLUDED IN THIS SERVICE OFFERING:
- Population of calendar events, which the School can do through data import;Population of new or historical news stories;
- Population of academic course descriptions, which the School can do through data import;
- Population of faculty and staff directory personnel listings, which the School can do through data import;
- Configuration of Athletic settings and population of team, schedule, and opponent information, which the School can do through data import;
- Configuration of Store settings and population of Store items;
- Population of behind-the-password content such as Resource Board posts;
- Creation of Giving of Inquiry forms;
- Copywriting; 

Build Notes



Please submit all pages you have contracted Blackbaud to build for you. We ask that you be specific and detailed. 
Include notes for your page builder about layout preferences, how you would like to see content combined, or if you have preferences towards specific styles or functionality you would like used. Ideally, photos are uploaded per page for specified use, but there is a buik upload option below if you don't have preferences. Revision edits to photos or anything that was not specified in your notes will be school responsibility as all content is self managed.

Bulk Upload Option

SMALL PRINT PULLED FROM CONTRACT AS A REMINDER:
With the exception of text, all content types are limited to a maximum of ten (10) items per content piece (for example: we will populate 10 News stories per news group, or 10 photos per gallery). The remaining items are school responsibility to populate.

ITEMS THAT ARE NOT INCLUDED IN THIS SERVICE OFFERING:
- Population of calendar events, which the School can do through data import;Population of new or historical news stories;
- Population of academic course descriptions, which the School can do through data import;
- Population of faculty and staff directory personnel listings, which the School can do through data import;
- Configuration of Athletic settings and population of team, schedule, and opponent information, which the School can do through data import;
- Configuration of Store settings and population of Store items;
- Population of behind-the-password content such as Resource Board posts;
- Creation of Giving of Inquiry forms;
- Copywriting; 

Design Notes



Please submit all pages you have contracted Blackbaud to build for you. We ask that you be specific and detailed. 
Include notes for your page builder about layout preferences, how you would like to see content combined, or if you have preferences towards specific styles or functionality you would like used. Ideally, photos are uploaded per page for specified use, but there is a buik upload option below if you don't have preferences. Revision edits to photos or anything that was not specified in your notes will be school responsibility as all content is self managed.

Bulk Upload Option

SMALL PRINT PULLED FROM CONTRACT AS A REMINDER:
With the exception of text, all content types are limited to a maximum of ten (10) items per content piece (for example: we will populate 10 News stories per news group, or 10 photos per gallery). The remaining items are school responsibility to populate.

ITEMS THAT ARE NOT INCLUDED IN THIS SERVICE OFFERING:
- Population of calendar events, which the School can do through data import;Population of new or historical news stories;
- Population of academic course descriptions, which the School can do through data import;
- Population of faculty and staff directory personnel listings, which the School can do through data import;
- Configuration of Athletic settings and population of team, schedule, and opponent information, which the School can do through data import;
- Configuration of Store settings and population of Store items;
- Population of behind-the-password content such as Resource Board posts;
- Creation of Giving of Inquiry forms;
- Copywriting; 

Specific Notes



Please submit all pages you have contracted Blackbaud to build for you. We ask that you be specific and detailed. 
Include notes for your page builder about layout preferences, how you would like to see content combined, or if you have preferences towards specific styles or functionality you would like used. Ideally, photos are uploaded per page for specified use, but there is a buik upload option below if you don't have preferences. Revision edits to photos or anything that was not specified in your notes will be school responsibility as all content is self managed.

Bulk Upload Option

SMALL PRINT PULLED FROM CONTRACT AS A REMINDER:
With the exception of text, all content types are limited to a maximum of ten (10) items per content piece (for example: we will populate 10 News stories per news group, or 10 photos per gallery). The remaining items are school responsibility to populate.

ITEMS THAT ARE NOT INCLUDED IN THIS SERVICE OFFERING:
- Population of calendar events, which the School can do through data import;Population of new or historical news stories;
- Population of academic course descriptions, which the School can do through data import;
- Population of faculty and staff directory personnel listings, which the School can do through data import;
- Configuration of Athletic settings and population of team, schedule, and opponent information, which the School can do through data import;
- Configuration of Store settings and population of Store items;
- Population of behind-the-password content such as Resource Board posts;
- Creation of Giving of Inquiry forms;
- Copywriting; 

Code for Implementation

List of 2 items.

  • Option 1- Reverse all Rows - Custom CSS: Row Style in Mobile Media Query

    On the Mobile Media query, add flexbox to reverse the order of columns.
    /* --- Mobile --- */
    @media(max-width:767px) {

    /*INT:Reverse Col stack on Mobile - setting flex so the order of columns can be reversed*/
    .style-xxxxx{ display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-direction: column-reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse;}

    }/* ---END Mobile --- */



  • Option 2 - Set only last column on top - Custom CSS in Mobile Media Query

    Use this option if you only want to affect the last column. The first step is to apply flex and direction: column to the row in the mobile media query. Then target the last column, using onMessage's last-col selector, and set the order of that column to the first with a -1. Using a negative number will place the item ahead of all others.
    /* --- Mobile --- */
    @media(max-width:767px){

    .style-xxxx{
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    }/*INT:Reverse Col stack on Mobile - setting flex, so the last column can be reordered*/

    .style-xxxx .last-col{
    -webkit-box-ordinal-group
    : 0;
    -ms-flex-order: -1;
    order: -1;
    }/*INT:Reverse Col stack on Mobile - setting last column to show first*/

    }/* ---END Mobile --- */
FOR INTERNAL USE ONLY
Designed and built by a monkey with a paintbrush
Maintained by a group of children who call themselves professionals