RocketTheme - TOPIC: [HOW TO] Customizing Gantry

Welcome Guest! Login

0 items Join Now

Ben Lee
Elite Rocketeer
Posts: 4193
Thanks: 42

[HOW TO] Customizing Gantry - Adding Color Choosers

Posted 10 years 9 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: 10 years 9 months ago by Ben Lee.
The following users have thanked you: Who?, prim, cdavis411, MrT

#1114050

- David Goode
- Preeminent Rocketeer
- Posts: 17058
- Thanks: 890
- Web Designer and Host
Re: [HOW TO] Customizing Gantry - Adding Color Choosers

Posted 10 years 9 months ago
- Nice post Ben
  
  (Added reply to remove thread from 'No Replies' list)
- 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
#1114417

Time to create page: 0.066 seconds

[HOW TO] Customizing Gantry - Adding Color Choosers

[HOW TO] Customizing Gantry - Adding Color Choosers

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