Additional Block Styles

Changing Sidebar Block Styles

New style-overrides for sidebar blocks have been added. These are classes you add to certain blocks in the right sidebar. These will override the styles chosen on the Design Options page, and are intended for special uses only. To change sidebar block styles throughout you should select from the Design Options page.
 
Change Top Accent Color

  • accent-carbon
  • accent-blue-dk (Yale blue)
  • accent-blue-med
  • accent-green
  • accent-orange
 
 
 
 
Reverse Block Title Against a Full Background Color

  • callout-block (carbon color)
  • callout-gray (dark gray color)
  • callout-blue-dk (Yale blue)
  • callout-blue-med
  • callout-green
  • callout-orange
 
Remove Block Line
  • Add the block class “no-line-heading” to a block when you want a plain heading without a short underline.
Remove Accent Color (for all blocks site-wide)

To strip all the default styling add the class “block-plain” to the block.

When the Block Styles don’t display

Some Modules include Blocks that are missing the block-block CSS style that is necessary to use the styles listed in the examples above.  When you come across a Block that doesn’t have the styling, just add block-block to the CSS styles field. 

Agenda Module Block Configuration

Below is an example of a Block created by the Agenda Module. 

  1. Only the accent-blue-dk style is applied but does not change the heading for the Calendar & Events block

  2. Adding the block-block style fixes the problem. 

    calendar & events display

Removing “block lines” from all blocks site-wide

In order to remove the “block line” separating the block body from the header field, the block must be assigned the CSS class “no-line-header”. However, adding this style will only remove the “block line” under the header if the block is being displayed in one of the “Sidebar” content regions. In order to make this class effect all blocks site-wide, a special CSS rule needs to be created.

Creating a new CSS rule

  1. Enable the “CSS Injector” Module.

  2. Access the module by navigating to Configuration > Development > CSS Injector

  3. Create a new rule, title it “main CSS”

  4. Paste the following CSS code in the “CSS Code” field:
     

    .no-line-heading h2.block-title::after {

        content: none !important;

    }

  5.  Make sure the radio button “Add on every page except the listed pages” is selected, and uncheck “preprocess CSS” if it is checked. Click “Save”.