0
Welcome Guest! Login
0 items Join Now

[HOW TO] Customizing Gantry - Adding Color Choosers

    • Ben Lee's Avatar
    • Ben Lee
    • Elite Rocketeer
    • Posts: 4193
    • Thanks: 42

    [HOW TO] Customizing Gantry - Adding Color Choosers

    Posted 5 years 11 months ago
    • Adding color choosers and 3 module styling elements using Gantry

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


      Our plan is to add 3 types of module styling. These types will be box1, box2, and box3.

      template-options.xml

      Around line #59, just after this line:
          <field name="accentcolor" type="colorchooser" default="#ED6F6D" label="ACCENT_COLOR" description="ACCENT_COLOR_DESC"/>

      We want to add the following code:
      <fields name="box1" type="columns" label="BOX1" description="BOX1_DESC">
          <field name="background" type="colorchooser" default="#333333" position="left" label="BOX_BG_COLOR" description="BOX_BG_COLOR_DESC"/>
          <field name="text" type="colorchooser" default="#ea7130" position="right" label="BOX_TEXT_COLOR" description="BOX_TEXT_COLOR_DESC"/>
      </fields>
      <fields name="box2" type="columns" label="BOX2" description="BOX2_DESC">
          <field name="background" type="colorchooser" default="#666666" position="left" label="BOX_BG_COLOR" description="BOX_BG_COLOR_DESC"/>
          <field name="text" type="colorchooser" default="#ffffff" position="right" label="BOX_TEXT_COLOR" description="BOX_TEXT_COLOR_DESC"/>
      </fields>
      <fields name="box3" type="columns" label="BOX3" description="BOX3_DESC">
          <field name="background" type="colorchooser" default="#999999" position="left" label="BOX_BG_COLOR" description="BOX_BG_COLOR_DESC"/>
          <field name="text" type="colorchooser" default="#333333" position="right" label="BOX_TEXT_COLOR" description="BOX_TEXT_COLOR_DESC"/>
      </fields>

      This does a couple things for us. The "fields" tag categorizes each box in the backend user interface using the type "columns" so we can organize our color choosers. This also gives us a good naming convention because the "fields" tag will add any sub tags "field" below it with a hyphen.

      - Fields name: box1
      - Field name: text
      - style tag=.box1-text

      If we want to create more box styles, we only need to rename the fields tag.

      features/styledeclaration.php

      After this line (around line #34):
                  'accentcolor'         => $gantry->get('accentcolor',   '#ED6F6D')

      We will add a comma at the end and then adding the following lines:
      		'box1-background'    => $gantry->get('box1-background',   '#333333'),
      		'box1-text'    => $gantry->get('box1-text',   '#ea7130'),
      		'box2-background'    => $gantry->get('box2-background',   '#666666'),
      		'box2-text'    => $gantry->get('box2-text',   '#ffffff'),
      		'box3-background'    => $gantry->get('box3-background',   '#999999'),
      		'box3-text'    => $gantry->get('box3-text',   '#333333')

      Each line in this set should have a comma at the end except for the last line. Having these commas mixed up will cause Gantry to not load in the Admin Backend.

      language/en-GB/en-GB.tpl_rt_afterburner2.ini

      We included language tags in our template-options.xml file so we need to include the corresponding text to be used in place of those tags.

      Add these lines at the end of this file:
      BOX1="Box1"
      BOX1_DESC="Box1 color styling"
      BOX2="Box2"
      BOX2_DESC="Box2 color styling"
      BOX3="Box3"
      BOX3_DESC="Box3 color styling"
      
      BOX_BG_COLOR="Background"
      BOX_BG_COLOR_DESC="The background color for this box style"
      BOX_TEXT_COLOR="Text"
      BOX_TEXT_COLOR_DESC="The text color for this box style"

      less/style-custom.less

      This is a file that you will need to create in your "/less" directory with the following lines:
      // Main Section ----------------
      @mainbackground:		#FFFFFF;
      @maintext:              #555555;
      @maintitle:				#333333;
      @mainborder:			#EFEFEF;
      
      // Typography
      h1, h2, h3, h4, h5, h6 {
      	text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
      }
      .button, .readon, .readmore, button.validate, #member-profile a, #member-registration a, .formelm-buttons button {
      	border-radius: 0;
      	box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.03);
      	text-transform: capitalize;
      	font-weight: bold;
      }
      
      // Modules
      .box1, .box2, .box3 {
      	box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
      	border-radius: 0;
      	a {
      		text-decoration: underline;
      		&.readmore, &.readon {
      			text-decoration: none;
      		}
      	}
      }
      #rt-mainbody-surround, #rt-bottom {
      	.box1 {
      		background: @box1-background;
      		color: @box1-text;
      		a {
      			color: lighten(@box1-background, 20%);
      			&:hover {
      				color: lighten(@box1-background, 15%);
      			}
      			&.readon, &.readmore {
      				color: darken(@box1-background, 20%);
      				&:hover {
      					color: lighten(@box1-background, 15%);
      				}
      			}
      		}
      		.title {
      			color: darken(@box1-background, 20%);
      			border-bottom-color: lighten(@box1-background, 10%);
      			text-shadow: 0px 0px 5px lighten(@box1-background, 10%);
      		}
      		.button, .readon, .readmore, button.validate, #member-profile a, #member-registration a, .formelm-buttons button, .btn-primary {
      			background: lighten(@box1-background, 15%);
      			border-color: lighten(@box1-background, 15%);
      			&:hover, &:active {
      				background: darken(@box1-background, 10%);
      			}
      		}
      	}
      	.box2 {
      		background: @box2-background;
      		color: @box2-text;
      		a {
      			color: lighten(@box2-background, 20%);
      			&:hover {
      				color: lighten(@box2-background, 15%);
      			}
      			&.readon, &.readmore {
      				color: darken(@box2-background, 20%);
      				&:hover {
      					color: lighten(@box2-background, 15%);
      				}
      			}
      		}
      		.title {
      			color: darken(@box2-background, 20%);
      			border-bottom-color: lighten(@box2-background, 10%);
      			text-shadow: 0px 0px 5px lighten(@box2-background, 10%);
      		}
      		.button, .readon, .readmore, button.validate, #member-profile a, #member-registration a, .formelm-buttons button, .btn-primary {
      			background: lighten(@box2-background, 15%);
      			border-color: lighten(@box2-background, 15%);
      			&:hover, &:active {
      				background: darken(@box2-background, 10%);
      			}
      		}
      	}
      	.box3 {
      		background: @box3-background;
      		color: @box3-text;
      		a {
      			color: lighten(@box3-background, 20%);
      			&:hover {
      				color: lighten(@box3-background, 15%);
      			}
      			&.readon, &.readmore {
      				color: darken(@box3-background, 20%);
      				&:hover {
      					color: lighten(@box3-background, 15%);
      				}
      			}
      		}
      		.title {
      			color: darken(@box3-background, 20%);
      			border-bottom-color: lighten(@box3-background, 10%);
      			text-shadow: 0px 0px 5px lighten(@box3-background, 10%);
      		}
      		.button, .readon, .readmore, button.validate, #member-profile a, #member-registration a, .formelm-buttons button, .btn-primary {
      			background: lighten(@box3-background, 15%);
      			border-color: lighten(@box3-background, 15%);
      			&:hover, &:active {
      				background: darken(@box3-background, 10%);
      			}
      		}
      	}
      }

      In this styling, we're changing a fair number of items, but it should all make sense if you take a close look. Anything that covers broad items over all box types is at the top, then the individual box styling items, just colors for this example, are included below.

      Afterburner2 only has module styling set for the main-content area, so we're adding these styling options for the bottom position row too.
    • Last Edit: 5 years 11 months ago by Ben Lee.
    • The following users have thanked you: Who?, prim, cdavis411, MrT

    • David Goode's Avatar
    • David Goode
    • Preeminent Rocketeer
    • Posts: 17045
    • Thanks: 886
    • Web Designer and Host

    Re: [HOW TO] Customizing Gantry - Adding Color Choosers

    Posted 5 years 11 months ago
    • Nice post Ben

      (Added reply to remove thread from 'No Replies' list)
    • David

      Forum Guide
      Please search forums before posting. Please include the Joomla version you are using and a link to the problem.

Time to create page: 0.094 seconds