Flexx FAQ

From IThemes Codex
Revision as of 09:46, September 15, 2011 by Ronald (Talk | contribs)
Jump to: navigation, search

Check the General FAQ page in case your question does not appear in this section.

Contents

How to create a Child theme for Flexx

In order to preserve your original Flexx theme files (as downloaded), you should use a Child Theme. Using Child themes, you can modify (override) all aspects of an existing iThemes (Parent theme), e.g. the css code in the stylesheet, html or php code in the page templates, functions, without having to modify any of the original core theme template files. This also means that upgrading the parent theme does not overwrite any of your modifications.

For more general information on Child Themes you can read these articles: iThemes and Child Themes – introduction and Child Themes, a quick tutorial.

This article describes how to create a Child theme for Flexx CandyApple theme, but it applies to all Flexx themes.

There is one modification required to the parent theme.

Minimum requirements

Your current Flexx theme should be at least at version 2.6.3 (release date: Oct. 15, 2009)

Modifications in the Parent themes functions.php

Locate the following code in functions.php of the parent theme. Note that currently, this modification will be overwritten when you upgrade the theme.

//A function to include files throughout the theme
//It checks to see if the file exists first, so as to avoid error messages.
function get_template_file($filename) {
    if (file_exists(TEMPLATEPATH."/$filename"))
        include(TEMPLATEPATH."/$filename");
}

and replace that entire block of code with:

//A function to include files throughout the theme
//It checks to see if the file exists first, so as to avoid error messages.
function get_template_file($filename) {
        if (file_exists(get_stylesheet_directory()."/$filename"))
            include(get_stylesheet_directory()."/$filename");
        else if (file_exists(get_template_directory()."/$filename"))
            include(get_template_directory()."/$filename");
}
  

This will make sure that theme functions will try to locate a theme file in the Child theme template first, and if it does not exists, the theme will use the file from the parent theme.

Creating a child theme

A child theme in the most essential form contains only a stylesheet, named style.css. Code in that stylesheet will tell WordPress that this is actually a Child theme, and what its Parent theme is.

To make sure all functions work properly, and all images used for the design of the theme, we will need to duplicate the following files and folders.

  • copy the images subfolder and all it's content to the Child theme folder
  • copy the screenshot.jpg to the Child theme, it will just look better on the WordPress themes panel (optional)
  • create a style.css, and make sure it has the proper information in the header.

Sample stylesheet style.css for a Flexx Child Theme

/*
Theme Name:    Flexx Theme CandyApple - Child Theme
Theme URI:     http://www.ithemes.com
Description:   Child theme for Flexx CandyApple
Author:        iThemes
Author URI:    http://www.ithemes.com
Version:       1.0.0
Template:      FlexxCandyApple

/* Import Parent Stylesheet, do not remove this line,
   make sure you use the ACTUAL parent theme folder name!
-----------------------------------------------------*/
@import url("../FlexxCandyApple/style.css");

/* Make all your modifications and customisations below this line
----------------------------------------------------------------*/

It is assumed that your base Flexx theme is located in a folder named "FlexxCandyApple" (case sensitive).

Download a sample Child theme

You can download a sample basic FlexxCandyApple Child Theme, that includes all the required files.

Using the Child theme

Install the Child theme as you normally would, using the WordPress theme installer, or by unzipping and uploading the Child Theme folder to your wp-content/themes folder. Activate the Child theme just as you would activate any other theme.

How to change the navigation bar colours

The navigation bar in Flexx themes is generally made up from background colours, and background images. All the styling is done using CSS, you will find the relevant section labeled:

/*********************************************
		Horizontal Navigation Styles 
				(with dropdowns)
*********************************************/

Search for all occurrences of "background" and you will find that either a colour is defined,

#pagemenu li a:hover,
#catmenu li a:hover {
	color: #000;
	background: #FFF;
}

color (#000=black) refers to the colour of the text, background (#fff=white) refers to the background colour.

Or a background image and a colour, in which case the images takes preference over the colour:

#pagemenu,
#catmenu {
	width: 100%;
	margin: 0 auto 0; padding: 0;
	background: #058cc4 url(images/menu-bg.gif) repeat-x;
	height: 32px;
	text-transform: uppercase;
	font-size: 11px;
}

The background is generated using the menu-bg.gif background image. If that image doesn't exist, the background colour will be #058cc4.

All background images can be found in the wp-content/themes/{yourflexxtheme}/images/ subdirectory in your theme folder. You will need an image editing program to change these images.

Inspiration from related posts on the support forum

Changing the color of the page and categorie bars

Change Colors of Nav Bar, etc.

How does one change color of the universal black of nav bar & widget headers?

How to change site navigation colours in flex elegant

How to change the widget header colours

The widget headings in Flexx themes are generally made up from background colours in combination with background images. Changing the background colour will not show as long as there still is a background image defined for the widget heading.

.sidebar h4 {
    clear: both;
    background: #013565   url(images/sidebar-h4-bg.gif) top left no-repeat;
    color: #FFF;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0 0 10px 0; padding: 8px 0px 8px 15px;
    line-height: 13px;
}

The background is generated using the sidebar-h4-bg.gif background image. If that image doesn't exist, the background colour will be #013565.

All background images can be found in the wp-content/themes/{yourflexxtheme}/images/ subdirectory in your theme folder. You will need an image editing program to change these images, or you can remove the image from the css code, leaving just the colour.


Back to the main Flexx page

Personal tools
Namespaces
Variants
Actions
iThemes Codex
Codex Navigation
Toolbox