Advanced Customization with Type, Spacing & Images

Edit

Improvements?

Let us know by posting here.

Now that we've enable the customization of the main action color, let's make the rest of our variables customizable. These include

  • The 100 pixels spacing used throughout
  • Body Font and Color
  • Team Background Color and Background Image

Variable Types

These four different areas use four different variable types.

  • 100 pixel spacing = Size
  • Body Font and Color = Type
  • Team Background Color = Color
  • Team Background Image = Image

Add to Styles.xml

So let's add support for these new variable types into our style.xml, and reorganize it a little:

<?xml version="1.0"?>
<styles version="1.0">
    <set name="Full Page">
        <style name="Primary Action Color" variable="primary-action" type="color" />
        <style name="Primary Spacing" variable="primary-spacing" type="size" />
    </set>
    <set name="Body">
        <style name="Body" variable="body" type="type" />
    </set>
    <set name="Team Area">
        <style name="Background Color" variable="team-background" type="color" />
        <style name="Background Image" variable="team-background" type="image" />
    </set>
</styles>

Add New Styles to LESS

Size Style Type

The Size Style Type provides one variable, {$variable}-size. In the XML above, we have style of the type size. We've given this style the variable of "primary-spacing", which means the LESS variable will be named "primary-spacing-size."

First, we'll add this variable to the default.less, , and then let's find all instances of 100 pixels in our LESS file, and swap it with the "@primary-spacing-size" variable.

Important Note: All Concrete5 size style types can take either pixels or em units.

Type Style Type

The Type Style Type provides up to nine variables:

  • {$variable}-type-font-family
  • {$variable}-type-font-weight
  • {$variable}-type-text-decoration
  • {$variable}-type-text-transform
  • {$variable}-type-font-style
  • {$variable}-type-color
  • {$variable}-type-font-size
  • {$variable}-type-letter-spacing
  • {$variable}-type-line-height

In the XML above, our Body style has the style type of Type. Since this style has a variable of "body", that means that the following variables may be used within our LESS files:

  • @body-type-font-family
  • @body-type-font-weight
  • @body-type-text-decoration
  • @body-type-text-transform
  • @body-type-font-style
  • @body-type-color
  • @body-type-font-size
  • @body-type-letter-spacing
  • @body-type-line-height

We can use as many of these variables or as few as we want. Let's find our body style in the .less file. This looks like a good start:

body {
background-color: #ffffff;
font-family:  'Open Sans', Arial, Helvetice Neue, sans-serif;
font-size: 12px;

font-weight: 300; 
font-style: normal; 
-webkit-font-smoothing: antialiased; /* Fix for webkit rendering */
-webkit-text-size-adjust: 100%;

}

h1, h2, h3, h4, h5, h6, span, p { font-family: 'Open Sans', Arial, Helvetice Neue, sans-serif; }

Let's modify some of these properties:

body {
background-color: #ffffff;
font-family:  @body-type-font-family;
font-size: @body-type-font-size;

font-weight: @body-type-font-weight; 
font-style: @body-type-font-style; 
-webkit-font-smoothing: antialiased; /* Fix for webkit rendering */
-webkit-text-size-adjust: 100%;

}

h1, h2, h3, h4, h5, h6, span, p { font-family: @body-type-font-family; }

Also, let's normalize some of the CSS found within this file. Right now, text color is found strewn throughout this style sheet, and we don't have any customizability for it. Let's swap out the CSS "color" property on the following styles in our LESS file

  • .templatemo-slogan
  • .blog_post
  • .footer_bottom_content
  • .templatemo-gallery-category

With @body-type-color, and define our @body-type-color as #333333.

Let's do the same thing for font size, since we have a number of different declarations. We'll swap out the CSS "font-size" property on the following styles in our LESS file

  • .templatemo-service-item p
  • .txt_slogan
  • .blog_text
  • #templatemo-contact
  • .twitter_user
  • .footer_bottom_content

With @body-type-font-size, and define our @body-type-font-size as 14px.

Now that we've got our variables added to our LESS file, let's place the relevant definitions in our defaults.less:

// Body
@body-type-font-family: 'Open Sans';
@body-type-font-size: 14px;
@body-type-font-weight: 300;
@body-type-font-style: normal;
@body-type-color: #333333;

Background Image and Color

We've already done the Color Style Type, but it might be useful to combine another instance of the color style type with the Background Image type. A perfect test for this is the Team area of our theme, which has a background image and a background color.

First, we'll find the Team style section of the LESS file:

.templatemo-team {
    background: url('../images/background.png') ; 
    font-family:  'Open Sans', sans-serif;
    min-height:590px;
    color:#ffffff;
}

Let's add background-color style, for the team-background color type.

.templatemo-team {
    background-color: @team-background-color;
    background: url('../images/background.png') ; 
    font-family:  'Open Sans', sans-serif;
    min-height:590px;
    color:#ffffff;
}

Next, let's swap out the background image:

.templatemo-team {
    background-color: @team-background-color;
    background-image: url(@team-background-image) ;
    font-family:  'Open Sans', sans-serif;
    min-height:590px;
    color:#ffffff;
}

Finally, we'll define these two variables in our defaults.less:

// Team
@team-background-color: #82BBC8;
@team-background-image: '../images/background.png';

That's it! Now you'll be able to swap the background image out, and if you upload a transparent background image, the value of the team background color will be used.

Now we're really starting to get somewhere. We have a nice amount of customizable options and can really make an impact on this theme. Next up: let's make some additional presets for this theme.