CSS Styling

You can add or override CSS in LWA in multiple ways. This page covers those ways and also provides more information about our styling.


CSS Framework - Pixelbones

The already-included LWA templates uses a CSS framework we adpated from the excellent Barebones CSS framework (a fork of Skeleton), we call ours Pixelbones. When creating a custom template, you can choose whether or not to leverage this framework, and add overriding CSS rules to modify specific parts.

Frameworks are usually geared towards providing a consistent style across different web pages, but are more speific for themes (for example, a Bootstrap-based theme). Our framework is more specifically geared towards styling only our generated templates and also attempt to use the strongest CSS rules possible to avoid themes adding their own aesthetic rules which may thow off the consistency between themes. The advantage here is that most themes will display a LWA template the same way, the trade-off is your custom CSS rules need to be more specific than ours.

Structure

The CSS structure is as following. Note that stylesheet locations refer to scss files, but the end-CSS stylesheet would be the .min.css or .css extension file in the same location:

  • .lwa-bones - /templates/login-with-ajax.scss
    • .pixelbones - /assets/css/pixelbones.scss
      • normalize.css - /assets/css/normalize.css
  • Individual template styles - /templates/login-with-ajax.css

Since we use SCSS for our templates, we wrap each inclusion within itself, meaning in the final CSS files, .pixelbones rules always have a .lwa-bones prefixed to it, so that we are as specific as possible.

Pixelbones will be applied to any element containing the pixelbones classname, and further LWA-specific styling if enclosed by an element with classname lwa-bones, this is how it's applied on our templates:

  • lwa-wrapper lwa-bones
    • lwa pixelbones
    ...

Overriding CSS Rules

You can add custom CSS via traditional means such as WordPress customizer, our theme stylesheet or settings.

If you would like to override the Pixelbones rules, you will likely need to use a combination of added specificity and the !important rule. For example, to change the button style you'd need to do the following:


		body .lwa-bones .pixelbones button, body .lwa-bones .pixelbones .button {
		    margin-bottom: 10px !important;
		}
	

What we've done here is added body to the current rule so that it's more specific and overrides our rules. You could also use something like an id like #content.


CSS Variables

Another way to modify specific templates or all of them would be to use our CSS variables. Here's a list of them and an example on how you'd override it.

Global Color Variables

These four variables have the largest impact on your color scheme as they are reused to build HSL colors by following variables further down.

Variable Default Description
--theme-hue 0 (black) Base hue for the theme, used in borders and text colors.
--accent-hue 220 (blue) Hue used in links, button backgrounds, etc.
--accent-s 86% HSL Saturation used in links, button backgrounds, etc.
--accent-l 57% HSL lightness used in links, button backgrounds, etc.

Other Color Variables

These build on the color bases above, but can be overriden completely.

Variable Default Description
--text-color-normal hsl(var(--theme-hue), 0%, 13%) text color; button:hover:focus color
--text-color-softer hsl(var(--theme-hue), 0%, 33%) button color; button:hover border
--accent-color hsl(var(--accent-hue), var(--accent-s), var(--accent-l)) link; button-primary bg+border; textarea,select:focus border
--accent-color-hover hsl(var(--accent-hue), calc(var(--accent-s) - 10%), calc(var(--accent-l) - 8%)) link hover; button-primary:hover:focus bg+border
--border-color hsl(var(--theme-hue), 0%, 73%) button border
--border-color-softer transparent textarea,select,code,td,hr border
--background-color hsl(var(--theme-hue), 0%, 33%) transparent body background; textarea,select background
--button-primary-color white primary button text color

Other Variables

Variable Default Description
--base-font-size 16px default font size
--base-line-height 18px default line height
--avatar-size 60px Size of an avatar when logged in.
--avatar-rounded 50% The roundedness of round avatars (circular by default)
--links-case none link capital case

Example

The following would change the background of all templates to a ghastly yellow.


		body .lwa-bones .pixelbones {
		    --background-color: yellow;
		}
	

Overriding Stylesheets

Aside from adding CSS to your theme via traditional means, you can also completely override our own stylesheets by copying them into one of the custom template locations. For example, you could copy the CSS files like so:

  • /wp-content/plugins/login-with-ajax/templates/
    • login-with-ajax.css
    • login-with-ajax.min.css
  • Copy these to :
  • /wp-content/plugin-templates/login-with-ajax/
    • login-with-ajax.css
    • login-with-ajax.min.css

The above example only copies the .css and .min.css files. You need to modify both files as each will display whether or not you're in debug mode.

We recommend you copy the .scss file and edit that instead, compiling so that the .min.css, .css and .map files are all generated automatically.

By copying the CSS file over to your custom template location, this file will be loaded instead of the CSS file located in our folder.


Debug Mode

When in regular production mode, a minified version of the CSS files will be loaded, meaning the file with the .min.css extension. If you would like to load the regular un-minified version, you can do so by enabling WP_DEBUG mode by making sure the following line in your wp-config.php is set as follows:

define('WP_DEBUG', true);

This line is usually always present, if not, add it to the top of the file below the <?php opening tag.