CSS 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.

Other Color Variables

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

Other Variables

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

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.