Blog

Available LESS variables in the theme

|

In the theme folder you can find the LESS variables in the following files:

  • /assets/less/variables.less (Twitter Bootstrap variables)
  • /assets/less/{theme-name}-variables.less (where {theme-name} is the current theme name like schema-corporate)

You can edit these files directly or (which is better if you want to get automatic updates): you can edit the variables directly on the themes options page. Just activate custom colours and scroll down to the “LESS Variable Changer”.

Here is a short excerpt of the variables.less:

// Grays
// -------------------------
@black:                 #000;
@grayDarker:            #222;
@grayDark:              #333;
@gray:                  #555;
@grayLight:             #999;
@grayLighter:           #eee;
@white:                 #fff;

// Accent colors
// -------------------------
@blue:                  #049cdb;
@blueDark:              #0064cd;
@green:                 #46a546;
@red:                   #9d261d;
@yellow:                #ffc40d;
@orange:                #f89406;
@pink:                  #c3325f;
@purple:                #7a43b6;

// Scaffolding
// -------------------------
@bodyBackground:        @white;
@textColor:             @grayDark;

// Links
// -------------------------
@linkColor:             #08c;
@linkColorHover:        darken(@linkColor, 15%);

// Typography
// -------------------------
@sansFontFamily:        "Helvetica Neue", Helvetica, Arial, sans-serif;
@serifFontFamily:       Georgia, "Times New Roman", Times, serif;
@monoFontFamily:        Monaco, Menlo, Consolas, "Courier New", monospace;

@baseFontSize:          14px;
@baseFontFamily:        @sansFontFamily;
@baseLineHeight:        20px;
@altFontFamily:         @serifFontFamily;

@headingsFontFamily:    inherit; // empty to use BS default, @baseFontFamily
@headingsFontWeight:    bold;    // instead of browser default, bold
@headingsColor:         inherit; // empty to use BS default, @textColor

// Component sizing
// -------------------------
// Based on 14px font-size and 20px line-height

@fontSizeLarge:         @baseFontSize * 1.25; // ~18px
@fontSizeSmall:         @baseFontSize * 0.85; // ~12px
@fontSizeMini:          @baseFontSize * 0.75; // ~11px

@paddingLarge:          11px 19px; // 44px
@paddingSmall:          2px 10px;  // 26px
@paddingMini:           0 6px;   // 22px

@baseBorderRadius:      4px;
@borderRadiusLarge:     6px;
@borderRadiusSmall:     3px;

// Tables
// -------------------------
@tableBackground:                   transparent; // overall background-color
@tableBackgroundAccent:             #f9f9f9; // for striping
@tableBackgroundHover:              #f5f5f5; // for hover
@tableBorder:                       #ddd; // table and cell border

// Buttons
// -------------------------
@btnBackground:                     @white;
@btnBackgroundHighlight:            darken(@white, 10%);
@btnBorder:                         #bbb;

@btnPrimaryBackground:              @linkColor;
@btnPrimaryBackgroundHighlight:     spin(@btnPrimaryBackground, 20%);

@btnInfoBackground:                 #5bc0de;
@btnInfoBackgroundHighlight:        #2f96b4;

@btnSuccessBackground:              #62c462;
@btnSuccessBackgroundHighlight:     #51a351;

@btnWarningBackground:              lighten(@orange, 15%);
@btnWarningBackgroundHighlight:     @orange;

@btnDangerBackground:               #ee5f5b;
@btnDangerBackgroundHighlight:      #bd362f;

@btnInverseBackground:              #444;
@btnInverseBackgroundHighlight:     @grayDarker;

// Forms
// -------------------------
@inputBackground:               @white;
@inputBorder:                   #ccc;
@inputBorderRadius:             @baseBorderRadius;
@inputDisabledBackground:       @grayLighter;
@formActionsBackground:         #f5f5f5;
@inputHeight:                   @baseLineHeight + 10px; // base line-height + 8px vertical padding + 2px top/bottom border

// Dropdowns
// -------------------------
@dropdownBackground:            @white;
@dropdownBorder:                rgba(0,0,0,.2);
@dropdownDividerTop:            #e5e5e5;
@dropdownDividerBottom:         @white;

@dropdownLinkColor:             @grayDark;
@dropdownLinkColorHover:        @white;
@dropdownLinkColorActive:       @white;

@dropdownLinkBackgroundActive:  @linkColor;
@dropdownLinkBackgroundHover:   @dropdownLinkBackgroundActive;

// (and a lot more)

Here is the content of the schema-corporate-variables.less (Version 1.4):

@fontSizeXL: @baseFontSize * 2; // ~24px
@fontSizeXXL: @baseFontSize * 2.75; // ~40px

// The standard border colors
@border-color: #d4d4d4;
@border-width: 1px;
@border-style: solid;
@border: @border-width @border-style @border-color;
@border-radius: 5px;

// the header (with title, subtitle, logo, etc.)
@header-background-color: #fcfcfc;
@header-border: @border;

@header-title-font-family: @headingsFontFamily;
@header-title-font-size: @fontSizeXXL;
@header-title-font-color: #515151;

@header-subtitle-font-family: @headingsFontFamily;
@header-subtitle-font-color: #777777;
@header-subtitle-font-size: @baseFontSize;

// the background color of some rows
@frontpage-row-background-color: #f3f3f3;

// The twiter widget
@widget-twitter-background: #ffffff;
@widget-twitter-border: @border;

// Gradients
@gradient-start-color: #ffffff;
@gradient-end-color: #efefef;

// Box shadows
@box-shadow-outer: 0 1px 3px -1px rgba(0, 0, 0, 0.15);

@layout-box-shadow-outer: 0 2px 3px 1px rgba(0, 0, 0, 0.15);

// The footer sections
@footer-1-font-size: @baseFontSize;
@footer-1-font-color: @textColor;
@footer-1-link-color: @textColor;
@footer-1-link-color-hover: @textColor;
@footer-1-background: url( %("%s/assets/img/textile-light.jpg", @theme-uri) );

@footer-2-font-size: @fontSizeMini;
@footer-2-font-color: fade( @textColor, 50% );
@footer-2-link-color: @footer-2-font-color;
@footer-2-link-color-hover: @footer-2-font-color;
@footer-2-background: none;

// Headerbar colors
@headerbar-font-size: @fontSizeSmall;
@headerbar-font-color: #ffffff;
@headerbar-link-color: @headerbar-font-color;
@headerbar-link-color-hover: @headerbar-link-color;
@headerbar-background: url( %("%s/assets/img/textile-black.jpg", @theme-uri) );

// Sidebars
@sidebar-background-color: #F4F4F4;

// Content background colors
@content_background_color: #ffffff;

// Header navigation link colors
@header-nav-link-color: #0088CC;

Allow tracking or not? This is, what we will track

|

Is tracking activated as a standard?

No. It’s not. You decide if you want to help us or not.

What information do you track?

As as Standard we track the following information, if you have allowed it.

  • The home URL of your blog.
  • Your current WordPress Version.
  • Your Purchase Code (if any).
  • The name of the plugin which want to track the information (if any).
  • The name of the theme which want to track the information (if any).

Some plugins track some extra information:

  • Purple Heart Rating Plugin
    • The time when the settings have been activated.
    • The time when the plugin has been deactivated.

Where to find your Envato purchase Code

|

You need the Envato purchase code in one of the following cases:

  • You want to get automatic updates for your item.
  • You want to get support for an item.

Please follow the steps below:

  1. Go to one of the Envato Stores (maybe CodeCanyon or ThemeForest)
  2. Click on the “Sign in” button on the top right:
CodeCanyon Login Button on the top right
CodeCanyon Login Button on the top right
  1. Type in your username and password and click “Sign in
  1. After you’ve been successfully logged in, move your mouse over your username on the top right:
CodeCanyon User Menu
CodeCanyon User Menu
  1. Search for the product you’ve bought and click little arrow on the “Download”-Button, then link the link “Licence Certificate”:
  1. A new window will open which shows you the certificate. Search for the “Item Purchase Code”:
CodeCanyon License Example
CodeCanyon License Example
  1. This is it! :-)

Google Tools now showing Strucured Data on my WordPress Theme

|

This was awesome: I recently logged in to Google Webmaster Tools and I was amazed that Google now have recognised the structured data that I’ve included in the Schema Corporate WordPress Theme.

Update May 22. 2013:

Google shows structured data on Webmaster Tools
Google shows structured data on Webmaster Tools

Update Mar. 11. 2013:

Now Google shows even more rich snippets in the webmaster tools:

Google Webmaster Tools Schema.org Structured Data
Google Webmaster Tools Schema.org Structured Data

Earlier Images:

Watch this image to see what I’m talking about:

Google Webmaster Tools is showing Structured Data on wp-buddy.com

What you can see is that Google now knows what is a Sidebar, what is a Blog page, what is an article and so on. I really think that this is the future of SEO!

What is WordPress’ first action hook?

|

Sometimes it’s good to hook into WordPress as early as possible. For this I took a look inside WordPress and searched for the first action hook that gets triggered.

Where to find your purchase code

|

In order to get automatic updates for your theme or plugin, you need to enter your purchase code so that we can verify your purchase before delivering new files to your server.

Envato Purchase Code

If you have bought one of our items via one of the Envato stores (ThemeForest, Codecanyon, etc.) then please follow these steps: Where to find the Envato purchase code.

Clickbank Purchase Code

If you have bought one of our items via Clickbank then please follow these steps: Where to find the Clickbank order number.

WP-Buddy Purchase Code

If you have bought one of our items directly from this website please follow these steps: Where to find the WP-Buddy purchase code.

Where to find the ClickBank order number

|

You need the ClickBank order number in one of the following cases:

  • You bought an item but couldn’t see a download button.
  • You want to get automatic updates for your item.
  • You want to get support for an item.
  • You need a receipt for your purchase (click How to get a PDF receipt from ClickBank for more information on this)

There are more possibilities to find your ClickBank order number:

1. You’ve printed the “Payment approved” webpage.

Then it will look like this:

Where to find the clickbank order number

 

Since Oct. 2013 the above window looks like this:

Where to find the clickbank order number
Where to find the clickbank order number

 

2. You’ve got the confirmation E-Mail

In this case it will look like this:

Where to find the ClickBank order number in the email.
Where to find the ClickBank order number in the email.

 

Since Oct. 2013 the E-Mail looks like this:

Clickbank Receipt E-Mail
Clickbank Receipt E-Mail

 

Available icons

|

We always support the latest version of FontAwesome. Please go to your themes documentation page to check out what version is currently built in.

[box type=”info”]Note: To use an icon you only need the name of the icon. For example if you want to use the “icon-exclamation-sign” icon you only need to copy and paste exclamation-sign (without the icon- at the beginning). Browse icons. [/box]

Font Awesome Icon Examples

Example: How to use an icon for a button

  1. Go to the website of FontAwesome.
  2. Search for any icon you want. For example: the icon-medkit ([icon icon=”medkit”])
  3. For a button you can use the following shortcode, included the icon:
[[button icon="medkit"]This is a button with medkit icon.[/button]]