Add Your Own CSS With the Stylesheet Overlay Module

Outline

  • The Problem - I need to override some CSS
  • Using Stylesheet Overlay
  • Case Study for Managing CSS,
    or, How I Do It

The Problem

The Problem

You add something new to your site, but it just doesn't look the way you thought it would.

I want to override Doug Fir

line???

How to add my own CSS?

I don't have access to themes

 

I could put it in a block?

Stylesheet Overlay

Module List

Once enabled this adds a content type.

 

Set up:

  1. Set your module permissions to use the "Full CSS" filter format in the permission table
  2. In Text Formats (admin/config/content/formats), add a new text format called "CSS"
    1. Set the Roles
    2. Enable the CSS filter
  3. Create your first Stylesheet Overlay node

The CSS is added to the <head> of the HTML page.

  • Loaded fast, no call to the server
  • Loaded after the theme/module CSS
    • Overrides!!!

Good:

Bad:

  • Loaded on every page
  • Not cached by Drupal or the browser* - Some server tricks to speed things up

What it does

*I think

More bad

  • Version control?
    • Can use Revisions to help this
  • Bloat?
  • Easy to mess up

Demo

Let's make the site title 50px

Case Study

All the pieces

  • Code/text editor
  • Sass + Compass
  • Git
  • Remote git repository
  • Stylesheet Overlay

Code/text Editor

  • Color coding
  • Code completion

Sublime Text, PHPstorm (more of an IDE), Atom, Text Wrangler, vi/vim

Sass

http://sass-lang.com/guide

http://sassmeister.com

"It allows you to use variables, nested rules, mixins, inline imports, and more, all with a fully CSS-compatible syntax. Sass helps keep large stylesheets well-organized, and get small stylesheets up and running quickly, particularly with the help of the Compass style library."

Compass

  • Preprocessing
  • Error checking
  • Output styles - expanded or compressed!
  • Style library

Use compressed on production sites

 

http://compass-style.org​

Compass

compass compile -s expanded


compass compile -s compressed

Compass

compass compile -s expanded

/* line 109, ../sass/modules/_views.scss */

.view-newsletters ul li {
  list-style: none;
}

Git for version control

Gitlab/Github for external backup or collaboration

Demo

  • Directory structure
  • Variables and imports: Colors
  • Expanded v. compressed
  • Adding to Stylesheet Overlay

Credits

Add Layer icon by Mentaltoy, The Noun Project

CSS file icon by Alexander Bickov, The Noun Project

Alert icon by Stefano Vetere, The Noun Project

Book icon by Julia Simplicio, The Noun Project

Stylesheet Overlay Module

By John McQueen

Made with Slides.com

Stylesheet Overlay Module

Presentation for Drupal Architect Meeting

  • 1,457

More from John McQueen