Creating Your Theme Stylesheet

Considerations when creating your theme stylesheet.
There are many aspects of QuotesDLX theming, so it's best to take a look at the sample SCSS file to get an idea of all the variations.
Sample Theme: a working sample theme named Forest is available to use as an example.
The Main CSS Wrapper
When your theme is created, QuotesDLX automatically adds a class to the base container that you can use for styling.
For example, if your theme slug is light-branded, then the CSS class you'll want to target is: quotes-dlx-block-theme-light-branded.
The prefix `quotes-dlx-block-theme-{slug} is a required format.
SASS File: you can check out an example of a SCSS file on GitHub.
Styling Tips
Use CSS Variables With Defaults
Your stylesheet should contain CSS variables in order to have a dynamic font size, font family, and a color palette.
Colors
For example, say that you've created a color with the slug bright-pink. When outputting the color in CSS, you should use a CSS variable to make it dynamic.
In this case, you can reference the color by using:
color: var( --qdlx-bubble-gum-accent, $accent );
The above $accent is a default declared further up in the stylesheet (if you using SASS).
Line Height
Here's anothre example using lineheight:
line-height: var( --qdlx-bubble-gum-line-height-tablet, 1.35 );
Font Families
Font families can be declared globally, or for the individual theme. The priority is the per-theme options over the advanced option. This is reflected in the following:
font-family: var( --qdlx-bubble-gum-secondary-font-family, var( --qdlx-secondary-font-family, inherit ) );
Each theme can have a primary and secondary font.
Font Sizes
Each theme can have a font size for each breakpoint (mobile, tablet, desktop).
// Some code// Mobile
font-size: var( --qdlx-bubble-gum-button-font-size-mobile, 14px );
​
// Tablet
font-size: var( --qdlx-bubble-gum-button-font-size-tablet, 15px );
​
// Desktop
font-size: var( --qdlx-bubble-gum-button-font-size-desktop, 16px);
In the above example, you'll want to set your own breakpoints.
Setting Breakpoints
 The plugin's breakpoints are as follows as defined by a mixin included with the sample theme.
/* Responsive styles - In hindsight, should've used mobile-first */
/* Mixin from: https://css-tricks.com/snippets/sass/mixin-manage-breakpoints/ */
/* It's only used here, so no external file for mixin? */
$breakpoints: (
  'xs':   420px,
  'small':  520px,
  'medium': 768px,
  'large':  1024px,
  'xl':  1200px,
  'xxl': 81.1400px
) !default;
​
@mixin respond-to($breakpoint) {
	// If the key exists in the map
	@if map-has-key($breakpoints, $breakpoint) {
	  // Prints a media query based on the value
	  @media (min-width: map-get($breakpoints, $breakpoint)) {
		@content;
	  }
	}
   
	// If the key doesn't exist in the map
	@else {
	  @warn "Unfortunately, no value could be retrieved from `#{$breakpoint}`. "
		  + "Available breakpoints are: #{map-keys($breakpoints)}.";
	}
  }
An attempt was made to have dynamic breakpoints, but unfortunately the CSS spec doesn't support this.
An example using the above mixin is:
figure blockquote.quotes-dlx-text-wrapper {
	font-family: var( --qdlx-bubble-gum-primary-font-family, var( --qdlx-primary-font-family, inherit ) );
	font-weight: 400;
	font-size: 1.1em;
	color: var( --qdlx-bubble-gum-secondary, $secondary );
	line-height: var( --qdlx-bubble-gum-line-height-mobile, 1.2 );
	margin: 0 !important; /* override core style */
	border: 0;
	quotes: none;
	vertical-align:baseline;
	font-style: inherit;
	padding: 68px 68px 24px 68px;
​
	@include respond-to('medium') {
		font-size: 1.35em;
		line-height: var( --qdlx-bubble-gum-line-height-tablet, 1.35 );
	}
	@include respond-to('large') {
		font-size: 1.5em;
		line-height: var( --qdlx-bubble-gum-line-height-desktop, 1.65 );
	}
}
User Interface Variations
Options for Variations in Appearance
Button Variations
For the Click to Tweet button, this can be enabled or disabled. Your styles will have to reflect both.
You also have the following variations regarding the label:
Show text only
Show text with an icon
Show an icon only
For icon alignment within the button, this can be set to left or right.
And finally, the button can be left-aligned, center-aligned, or right-aligned.
Here's an example using most of the variations:
.quotes-dlx-button {
	position: relative;
	background: var( --qdlx-bubble-gum-secondary, $secondary );
	color: var( --qdlx-bubble-gum-primary, $primary );
	padding: 15px 25px;
	border-radius: 4px;
	border: 4px solid var( --qdlx-bubble-gum-primary, $primary );
	display: inline-block;
	transition: all 0.3s ease-in-out;
	font-family: var( --qdlx-bubble-gum-secondary-font-family, var( --qdlx-secondary-font-family, inherit ) );
	font-weight: 500;
	font-size: var( --qdlx-bubble-gum-button-font-size-mobile, 14px );
	line-height: 1.0em;
​
	@include respond-to('medium') {
		font-size: var( --qdlx-bubble-gum-button-font-size-tablet, 15px );
	}
	@include respond-to('large') {
		font-size: var( --qdlx-bubble-gum-button-font-size-desktop, 16px);
	}
​
	.quotes-dlx-button-text {
		font-size: 1.25em;
	}
	.quotes-dlx-button-icon {
		font-size: var( --qdlx-bubble-gum-button-font-size-mobile, 14px );
		top: calc(50% - (0.125em + (var(--qdlx-bubble-gum-button-font-size-mobile, 14px) / 2)));
​
		svg {
			width: 100%;
			height: 100%;
		}
​
		@include respond-to('medium') {
			font-size: var( --qdlx-bubble-gum-button-font-size-tablet, 15px );
			top: calc(50% - (0.125em + (var(--qdlx-bubble-gum-button-font-size-tablet, 15px) / 2)));
		}
		@include respond-to('large') {
			font-size: var( --qdlx-bubble-gum-button-font-size-desktop, 16px);
			top: calc(50% - (0.125em + (var(--qdlx-bubble-gum-button-font-size-desktop, 16px) / 2)));
		}
	}
​
	&:hover {
		transition: all 0.3s ease-in-out;
		color: var( --qdlx-bubble-gum-light, $light );
		background: var( --qdlx-bubble-gum-primary, $primary );
		border: 4px solid var( --qdlx-bubble-gum-secondary, $secondary );
​
		svg path,
		svg use {
			fill: var( --qdlx-bubble-gum-secondary, $secondary );
			transition: all 0.3s ease-in-out;
		}
	}
​
	&:not(.text):not(.icon) {
		&.quotes-dlx-button-icon-left {
			.quotes-dlx-button-icon {
				right: auto;
				left: 15px;
			}
​
			.quotes-dlx-button-text {
				display: inline-block;
				padding-left: 28px;
				padding-right: 0;
			}
		}
	}
​
	&.icon {
		padding: 8px 20px;
		line-height: 0;
​
		.quotes-dlx-button-icon {
			position: relative;
			top: auto;
			bottom: auto;
			right: auto;
			padding: 0;
			margin: 0;
		}
	}
​
	&.full .quotes-dlx-button-text {
		display: inline-block;
		padding-right: 1.6em;
	}
​
	&.text .quotes-dlx-button-text {
		display: inline-block;
		padding-right: 0;
	}
}
The Meatball Menu
The Meatball Menu
The Meatball menu typically resides on the top right of the interface. You'll have to plan for styling this menu, as well as its pop-up.
Expanded Meatball Menu
Testing Styles
Set a Default Theme
Setting a Default Theme
Set your new theme as the default. You can then right+click the theme and open a preview in a new tab. Here, you can modify the theme and have a preview of your changes.
Preview on its own Tab
View the Theme in the Theme Options Admin Tab
Navigate to Theme Options and you'll see your default theme selected here. If it's not reflected, you can switch to the theme using the theme dropdown.
Theme Switcher Dropdown
You'll see a live preview if any colors are modified.
Additionally, you can set font variations and even custom font families. Each of these can easily be previewed.
Setting Colors and Desktop Sizes
Setting Custom Font Families
Stylesheet Conclusion
In summary, to create your own stylesheet, you should:
Plan for variations
Use CSS variables for dynamic properties
Use sane breakpoints
Preview the theme changes in the Theme Options tab
Themes - Previous
Creating Your Own Theme Plugin
Next - Developers
Changelog
Last modified 1yr ago