RocketTheme - TOPIC: Tutorial: add more accent colors to a theme's Core Style.

Welcome Guest! Login

0 items Join Now

danthecardman
Newbie
Posts: 11
Thanks: 5

Tutorial: add more accent colors to a theme's Core Style.

Posted 7 years 9 months ago

I am using Joomla 3.6.2
My website is Danthecardman.com

In the attached pictures the Xenon theme the Core Styles has 3 accent colors, while the Citadel theme had only 2.

Xenon Theme:

This image is hidden for guests.
Please log in or register to see it.

Citadel Theme:

This image is hidden for guests.
Please log in or register to see it.

I wanted to add an additional accent color to the Citadel template. Here is how I went about doing so.

The key was in understanding the Gantry documentation "Customizing Theme Files": http://docs.gantry.org/gantry5/advanced/customizing-theme-files

on my host server there were two files: "accent.yaml" and "presets.yaml" needing to be overridden:
The first was "accent.yaml" located in this folder: //templates/rt_citadel/blueprints/styles
The other file was "presets.yaml" located in this folder: //templates/rt_citadel/gantry

Step 1:
Create a duplicate folder structures in the custom folder located here:[url=] //templates/rt_citadel/custom[/url]
//templates/rt_citadel/custom/blueprints/styles
//templates/rt_citadel/custom/gantry

Step 2:
Append the desired code you are wanting to override and save the modified files to the corresponding //templates/rt_citadel/custom folders.

Step 3:
Here is the accent.yaml file I uploaded to //templates/rt_citadel/custom/blueprints/styles folder -Notice line 16 in the accent.yaml file now has a 3rd color where as the original file only had 2 colors.

name: Accent Colors
description: Accent colors for the Citadel theme
type: core

form:
  fields:

    color-1:
      type: input.colorpicker
      label: Accent Color 1
      default: "#f9b234"
    color-2:
      type: input.colorpicker
      label: Accent Color 2
      default: "#111111"
    color-3:
      type: input.colorpicker
      label: Accent Color 3
      default: "#121212"

Step 4:
Here is the presets.yaml file I uploaded to //templates/rt_citadel/custom/gantry folder -Notice line 15 in the presets.yaml now has a 3rd color where as the original file only had 2 colors.

preset1:
  image: 'gantry-admin://images/preset1.png'
  description: 'Preset 1'
  colors:
    - '#f9b234'
    - '#ffffff'
    - '#111111'
  styles:
    base:
      background: '#eeeeee'
      text-color: '#666666'
    accent:
      color-1: '#f9b234'
      color-2: '#111111'
      color-3: '#121212'
    font:
      family-default:   'sintony, sans-serif, Tahoma, Geneva, Arial'
      family-title:     'cabin, sans-serif, Tahoma, Geneva, Arial'
      family-promo:     'raleway, sans-serif, Tahoma, Geneva, Arial'
      family-subpromo:  'playfairdisplay, sans-serif, Tahoma, Geneva, Arial'
      family-logo:      'blanch, sans-serif, Tahoma, Geneva, Arial'
      family-weather:  'weather'
    top:
      background: '#f9b234'
      text-color: '#ffffff'
    navigation:
      background: 'rgba(0,0,0, 0.5)'
      text-color: '#ffffff'
    slideshow:
      background: '#ffffff'
      background-image: 'gantry-media://backgrounds/slideshow/img-01.jpg'
      video: 'gantry-media://videos/slideshow/sample.webm'
      text-color: '#666666'
    header:
      background: '#ffffff'
      text-color: '#666666'
    above:
      background: '#111111'
      background-image: 'gantry-media://backgrounds/above/img-01.jpg'
      text-color: '#ffffff'
    showcase:
      background: '#ffffff'
      text-color: '#666666'
    utility:
      background: '#ffffff'
      text-color: '#666666'
    feature:
      background: '#111111'
      text-color: '#ffffff'
    main:
      background: '#ffffff'
      text-color: '#666666'
    expanded:
      background: '#f9b234'
      text-color: '#ffffff'
    extension:
      background: '#ffffff'
      text-color: '#666666'
    bottom:
      background: '#f9b234'
      text-color: '#ffffff'
    footer:
      background: '#111111'
      background-image: 'gantry-media://backgrounds/footer/img-01.jpg'
      text-color: '#ffffff'
    copyright:
      background: 'rgba(0,0,0, 0.0)'
      text-color: '#acacac'
    offcanvas:
      background: '#121212'
      text-color: '#ffffff'
      toggle-color: '#ffffff'
    breakpoints:
      large-desktop-container: 80rem
      desktop-container: 60rem
      tablet-container: 48rem
      large-mobile-container: 30rem
      mobile-menu-breakpoint: 48rem
preset2:
  image: 'gantry-admin://images/preset2.png'
  description: 'Preset 2'
  colors:
    - '#ff5144'
    - '#ffffff'
    - '#111111'
  styles:
    base:
      background: '#eeeeee'
      text-color: '#666666'
    accent:
      color-1: '#ff5144'
      color-2: '#111111'
    font:
      family-default:   'sintony, sans-serif, Tahoma, Geneva, Arial'
      family-title:     'cabin, sans-serif, Tahoma, Geneva, Arial'
      family-promo:     'raleway, sans-serif, Tahoma, Geneva, Arial'
      family-subpromo:  'playfairdisplay, sans-serif, Tahoma, Geneva, Arial'
      family-logo:      'blanch, sans-serif, Tahoma, Geneva, Arial'
      family-weather:  'weather'
    top:
      background: '#ff5144'
      text-color: '#ffffff'
    navigation:
      background: 'rgba(0,0,0, 0.5)'
      text-color: '#ffffff'
    slideshow:
      background: '#ffffff'
      background-image: 'gantry-media://backgrounds/slideshow/img-01.jpg'
      video: 'gantry-media://videos/slideshow/sample.webm'
      text-color: '#666666'
    header:
      background: '#ffffff'
      text-color: '#666666'
    above:
      background: '#111111'
      background-image: 'gantry-media://backgrounds/above/img-01.jpg'
      text-color: '#ffffff'
    showcase:
      background: '#ffffff'
      text-color: '#666666'
    utility:
      background: '#ffffff'
      text-color: '#666666'
    feature:
      background: '#111111'
      text-color: '#ffffff'
    main:
      background: '#ffffff'
      text-color: '#666666'
    expanded:
      background: '#ff5144'
      text-color: '#ffffff'
    extension:
      background: '#ffffff'
      text-color: '#666666'
    bottom:
      background: '#ff5144'
      text-color: '#ffffff'
    footer:
      background: '#111111'
      background-image: 'gantry-media://backgrounds/footer/img-01.jpg'
      text-color: '#ffffff'
    copyright:
      background: 'rgba(0,0,0, 0.0)'
      text-color: '#acacac'
    offcanvas:
      background: '#121212'
      text-color: '#ffffff'
      toggle-color: '#ffffff'
    breakpoints:
      large-desktop-container: 80rem
      desktop-container: 60rem
      tablet-container: 48rem
      large-mobile-container: 30rem
      mobile-menu-breakpoint: 48rem
preset3:
  image: 'gantry-admin://images/preset3.png'
  description: 'Preset 3'
  colors:
    - '#6d4ae0'
    - '#ffffff'
    - '#111111'
  styles:
    base:
      background: '#eeeeee'
      text-color: '#666666'
    accent:
      color-1: '#6d4ae0'
      color-2: '#111111'
    font:
      family-default:   'sintony, sans-serif, Tahoma, Geneva, Arial'
      family-title:     'cabin, sans-serif, Tahoma, Geneva, Arial'
      family-promo:     'raleway, sans-serif, Tahoma, Geneva, Arial'
      family-subpromo:  'playfairdisplay, sans-serif, Tahoma, Geneva, Arial'
      family-logo:      'blanch, sans-serif, Tahoma, Geneva, Arial'
      family-weather:  'weather'
    top:
      background: '#6d4ae0'
      text-color: '#ffffff'
    navigation:
      background: 'rgba(0,0,0, 0.5)'
      text-color: '#ffffff'
    slideshow:
      background: '#ffffff'
      background-image: 'gantry-media://backgrounds/slideshow/img-01.jpg'
      video: 'gantry-media://videos/slideshow/sample.webm'
      text-color: '#666666'
    header:
      background: '#ffffff'
      text-color: '#666666'
    above:
      background: '#111111'
      background-image: 'gantry-media://backgrounds/above/img-01.jpg'
      text-color: '#ffffff'
    showcase:
      background: '#ffffff'
      text-color: '#666666'
    utility:
      background: '#ffffff'
      text-color: '#666666'
    feature:
      background: '#111111'
      text-color: '#ffffff'
    main:
      background: '#ffffff'
      text-color: '#666666'
    expanded:
      background: '#6d4ae0'
      text-color: '#ffffff'
    extension:
      background: '#ffffff'
      text-color: '#666666'
    bottom:
      background: '#6d4ae0'
      text-color: '#ffffff'
    footer:
      background: '#111111'
      background-image: 'gantry-media://backgrounds/footer/img-01.jpg'
      text-color: '#ffffff'
    copyright:
      background: 'rgba(0,0,0, 0.0)'
      text-color: '#acacac'
    offcanvas:
      background: '#121212'
      text-color: '#ffffff'
      toggle-color: '#ffffff'
    breakpoints:
      large-desktop-container: 80rem
      desktop-container: 60rem
      tablet-container: 48rem
      large-mobile-container: 30rem
      mobile-menu-breakpoint: 48rem
preset4:
  image: 'gantry-admin://images/preset4.png'
  description: 'Preset 4'
  colors:
    - '#00bde2'
    - '#ffffff'
    - '#111111'
  styles:
    base:
      background: '#eeeeee'
      text-color: '#666666'
    accent:
      color-1: '#00bde2'
      color-2: '#111111'
    font:
      family-default:   'sintony, sans-serif, Tahoma, Geneva, Arial'
      family-title:     'cabin, sans-serif, Tahoma, Geneva, Arial'
      family-promo:     'raleway, sans-serif, Tahoma, Geneva, Arial'
      family-subpromo:  'playfairdisplay, sans-serif, Tahoma, Geneva, Arial'
      family-logo:      'blanch, sans-serif, Tahoma, Geneva, Arial'
      family-weather:  'weather'
    top:
      background: '#00bde2'
      text-color: '#ffffff'
    navigation:
      background: 'rgba(0,0,0, 0.5)'
      text-color: '#ffffff'
    slideshow:
      background: '#ffffff'
      background-image: 'gantry-media://backgrounds/slideshow/img-01.jpg'
      video: 'gantry-media://videos/slideshow/sample.webm'
      text-color: '#666666'
    header:
      background: '#ffffff'
      text-color: '#666666'
    above:
      background: '#111111'
      background-image: 'gantry-media://backgrounds/above/img-01.jpg'
      text-color: '#ffffff'
    showcase:
      background: '#ffffff'
      text-color: '#666666'
    utility:
      background: '#ffffff'
      text-color: '#666666'
    feature:
      background: '#111111'
      text-color: '#ffffff'
    main:
      background: '#ffffff'
      text-color: '#666666'
    expanded:
      background: '#00bde2'
      text-color: '#ffffff'
    extension:
      background: '#ffffff'
      text-color: '#666666'
    bottom:
      background: '#00bde2'
      text-color: '#ffffff'
    footer:
      background: '#111111'
      background-image: 'gantry-media://backgrounds/footer/img-01.jpg'
      text-color: '#ffffff'
    copyright:
      background: 'rgba(0,0,0, 0.0)'
      text-color: '#acacac'
    offcanvas:
      background: '#121212'
      text-color: '#ffffff'
      toggle-color: '#ffffff'
    breakpoints:
      large-desktop-container: 80rem
      desktop-container: 60rem
      tablet-container: 48rem
      large-mobile-container: 30rem
      mobile-menu-breakpoint: 48rem
preset5:
  image: 'gantry-admin://images/preset5.png'
  description: 'Preset 5'
  colors:
    - '#00c67e'
    - '#ffffff'
    - '#111111'
  styles:
    base:
      background: '#eeeeee'
      text-color: '#666666'
    accent:
      color-1: '#00c67e'
      color-2: '#111111'
    font:
      family-default:   'sintony, sans-serif, Tahoma, Geneva, Arial'
      family-title:     'cabin, sans-serif, Tahoma, Geneva, Arial'
      family-promo:     'raleway, sans-serif, Tahoma, Geneva, Arial'
      family-subpromo:  'playfairdisplay, sans-serif, Tahoma, Geneva, Arial'
      family-logo:      'blanch, sans-serif, Tahoma, Geneva, Arial'
      family-weather:  'weather'
    top:
      background: '#00c67e'
      text-color: '#ffffff'
    navigation:
      background: 'rgba(0,0,0, 0.5)'
      text-color: '#ffffff'
    slideshow:
      background: '#ffffff'
      background-image: 'gantry-media://backgrounds/slideshow/img-01.jpg'
      video: 'gantry-media://videos/slideshow/sample.webm'
      text-color: '#666666'
    header:
      background: '#ffffff'
      text-color: '#666666'
    above:
      background: '#111111'
      background-image: 'gantry-media://backgrounds/above/img-01.jpg'
      text-color: '#ffffff'
    showcase:
      background: '#ffffff'
      text-color: '#666666'
    utility:
      background: '#ffffff'
      text-color: '#666666'
    feature:
      background: '#111111'
      text-color: '#ffffff'
    main:
      background: '#ffffff'
      text-color: '#666666'
    expanded:
      background: '#00c67e'
      text-color: '#ffffff'
    extension:
      background: '#ffffff'
      text-color: '#666666'
    bottom:
      background: '#00c67e'
      text-color: '#ffffff'
    footer:
      background: '#111111'
      background-image: 'gantry-media://backgrounds/footer/img-01.jpg'
      text-color: '#ffffff'
    copyright:
      background: 'rgba(0,0,0, 0.0)'
      text-color: '#acacac'
    offcanvas:
      background: '#121212'
      text-color: '#ffffff'
      toggle-color: '#ffffff'
    breakpoints:
      large-desktop-container: 80rem
      desktop-container: 60rem
      tablet-container: 48rem
      large-mobile-container: 30rem
      mobile-menu-breakpoint: 48rem
preset6:
  image: 'gantry-admin://images/preset6.png'
  description: 'Preset 6'
  colors:
    - '#f3600b'
    - '#ffffff'
    - '#111111'
  styles:
    base:
      background: '#eeeeee'
      text-color: '#666666'
    accent:
      color-1: '#f3600b'
      color-2: '#111111'
    font:
      family-default:   'sintony, sans-serif, Tahoma, Geneva, Arial'
      family-title:     'cabin, sans-serif, Tahoma, Geneva, Arial'
      family-promo:     'raleway, sans-serif, Tahoma, Geneva, Arial'
      family-subpromo:  'playfairdisplay, sans-serif, Tahoma, Geneva, Arial'
      family-logo:      'blanch, sans-serif, Tahoma, Geneva, Arial'
      family-weather:  'weather'
    top:
      background: '#f3600b'
      text-color: '#ffffff'
    navigation:
      background: 'rgba(0,0,0, 0.5)'
      text-color: '#ffffff'
    slideshow:
      background: '#ffffff'
      background-image: 'gantry-media://backgrounds/slideshow/img-01.jpg'
      video: 'gantry-media://videos/slideshow/sample.webm'
      text-color: '#666666'
    header:
      background: '#ffffff'
      text-color: '#666666'
    above:
      background: '#111111'
      background-image: 'gantry-media://backgrounds/above/img-01.jpg'
      text-color: '#ffffff'
    showcase:
      background: '#ffffff'
      text-color: '#666666'
    utility:
      background: '#ffffff'
      text-color: '#666666'
    feature:
      background: '#111111'
      text-color: '#ffffff'
    main:
      background: '#ffffff'
      text-color: '#666666'
    expanded:
      background: '#f3600b'
      text-color: '#ffffff'
    extension:
      background: '#ffffff'
      text-color: '#666666'
    bottom:
      background: '#f3600b'
      text-color: '#ffffff'
    footer:
      background: '#111111'
      background-image: 'gantry-media://backgrounds/footer/img-01.jpg'
      text-color: '#ffffff'
    copyright:
      background: 'rgba(0,0,0, 0.0)'
      text-color: '#acacac'
    offcanvas:
      background: '#121212'
      text-color: '#ffffff'
      toggle-color: '#ffffff'
    breakpoints:
      large-desktop-container: 80rem
      desktop-container: 60rem
      tablet-container: 48rem
      large-mobile-container: 30rem
      mobile-menu-breakpoint: 48rem

Last Edit: 7 years 9 months ago by danthecardman. Reason: More typos corrected
The following users have thanked you: David Goode, Matt, Thomas Esher

#1308586

- David Goode
- Preeminent Rocketeer
- Posts: 17058
- Thanks: 890
- Web Designer and Host
Re: Tutorial: add more accent colors to a theme's Core Style.

Posted 7 years 9 months ago
- Nice guide for other members. Well done.
- The following users have thanked you: danthecardman
- Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information
#1309171
- danthecardman
- Newbie
- Posts: 11
- Thanks: 5
Re: Tutorial: add more accent colors to a theme's Core Style.

Posted 7 years 8 months ago
- Thank you David. Your feedback was very encouraging.
#1310811

danthecardman
Newbie
Posts: 11
Thanks: 5

Re: Tutorial: add more accent colors to a theme's Core Style.

Posted 7 years 8 months ago

Update:

Matt from the Mod Squad suggested I, "modify the .scss to pull in the new color where appropriate."

Here is how I went about doing so:

The file needing an override is:

_colors.scss
Its location can be found here: /scss/configuration/_colors.scss
Create additional folders within the custom folder: //templates/rt_citadel/custom/scss/configuration/
Copy and paste the _colors.scss file to your custom folder location as such: //templates/rt_citadel/custom/scss/configuration/_colors.scss
Finally, in the _colors.scss file, line #21 has been modified with the additional accent color:

// Basics
$white:							#ffffff;
$black:							#000000;
$off-white:						#f7f7f7;
$grey: 							#95a5a6;
$darkgrey: 						#282828;
$pink: 							#d13b7b;
$red: 							#ef4a44;
$purple: 						#874f9a;
$blue: 							#279fba;
$orange: 						#ee7933;

// Base
$base-background:				#eeeeee !default;
$base-text-color:				#666666 !default;
$base-border-color:				#E7E8EA !default;

// Accents
$accent-color-1:				#f9b234 !default;
$accent-color-2:				#111111 !default;
$accent-color-3:				#121212 !default;

// Page Surround
$pagesurround-background: 		$base-background !default;

// Top
$top-background:				#f9b234 !default;
$top-text-color:				#ffffff !default;

// Slideshow
$slideshow-background:			#ffffff !default;
$slideshow-background-image:	false !default;
$slideshow-text-color:			#666666 !default;

// Header
$header-background:				#ffffff !default;
$header-text-color:				#666666 !default;

// Above
$above-background:				#111111 !default;
$above-background-image:		false !default;
$above-text-color:				#ffffff !default;

// Showcase
$showcase-background:			#ffffff !default;
$showcase-text-color:			#666666 !default;

// Utility
$utility-background:			#ffffff !default;
$utility-text-color:			#666666 !default;

// Feature
$feature-background:			#111111 !default;
$feature-text-color:			#ffffff !default;

// Main
$main-background:				#ffffff !default;
$main-text-color:				#666666 !default;

// Expanded
$expanded-background:			#f9b234 !default;
$expanded-text-color:			#ffffff !default;

// Extension
$extension-background:			#ffffff !default;
$extension-text-color:			#666666 !default;

// Bottom
$bottom-background:				#f9b234 !default;
$bottom-text-color:				#ffffff !default;

// Footer
$footer-background:				#111111 !default;
$footer-background-image:		false !default;
$footer-text-color:				#ffffff !default;

// Copyright
$copyright-background:			rgba(0,0,0, 0.0) !default;
$copyright-text-color:			#acacac !default;

// Off Canvas
$offcanvas-background:			#121212 !default;
$offcanvas-text-color:			#ffffff !default;
$offcanvas-toggle-color:		#ffffff !default;

// Block Variations
$box1-background:				$accent-color-1 !default;
$box2-background:				$accent-color-2 !default;
$box3-background:				$black !default;
$box4-background:				darken($base-background, 5%) !default;
$box-white-background: 			$white !default;
$box-grey-background: 			$grey !default;
$box-darkgrey-background: 		$darkgrey !default;
$box-pink-background: 			$pink !default;
$box-red-background: 			$red !default;
$box-purple-background: 		$purple !default;
$box-blue-background: 			$blue !default;
$box-orange-background: 		$orange !default;

// System Messsages and Alerts
$warning-color:					#c09853;
$error-color:					#b94a48;
$info-color:					#3a87ad;
$success-color:					#468847;

// Typography
$rule-color:					fadeout($base-border-color, 75%);
$code-text:						#c7254e;
$code-bg:						#f9f2f4;
$pre-text:						#237794;
$pre-bg:						#f6f6f6;

// Borders
$border-color-hover:			$accent-color-1;
$border-color-focus:			$accent-color-1;
$border-color-light:            rgba(0, 0, 0, 0.1);

// Shadows
$base-box-shadow: 				inset 0 1px 3px hsla(0, 0%, 0%, 0.06);
$base-content-shadow:			2px 1px 15px rgba(0, 0, 0, 0.05);

Last Edit: 7 years 8 months ago by danthecardman. Reason: Corrected some grammar issues.
The following users have thanked you: Matt

#1310814

Time to create page: 0.053 seconds