Frumph.NET

NOTE: There is a Forum section for child themes for Easel Which has quite a few different ones in it, they do need updating at this time to the latest Easel version.

General basic child themes for Easel

Base Easel Child Theme
Compiled: 5:52am 09/26/2010

Child Themes for Easel to use with Comic Easel plugin:

Blank 3C child theme for Easel
06-07-2013

** MORE ON THE WAY, w/different layouts that do not normally come with Easel

Installation
Go to your wp-admin (dashboard for WordPress), appearance -> themes section and click the [install themes] tab at the top. Click the ‘upload’ link at that point, search for where you downloaded the .zip file on your computer, select it then upload it. You can then select that child theme in the appearance -> themes section. It will at first not have a picture/screenshot for it, read below on how to add one.

In the Appearance -> Easel Options section on the layout tab, there’s a checkbox to ‘disable default style’, you will want to checkmark that.

Directions on Modifying child themes

Inside the child theme there could be these files, how a child theme works is that when activated it reads the ‘header’ information from inside the style.css to determine what to do with it

style.css
screenshot.png
functions.php
layout-head.php
layout-foot.php
images/

Step #1
FTP In and rename the directory to: easel-your-comics-name example: easel-popcultivation something that is recognizable by you. instead of just easel-blank

Step #2
Open the style.css and find this information at the top of the file and edit some parts.

/*
Theme Name: Easel Blank 3C
Theme URI: https://frumph.net/easel
Template: easel
Description: Blank child theme for the Easel theme
Author: Philip M. Hofer (Frumph)
Author URI: https://frumph.net
Version: 1.0
License: GNU General Public License, v3 (or newer)
License URI: http://www.opensource.org/licenses/gpl-3.0.html
*/

@import url('../easel/style.css');
/* @import url('../easel/style-default.css'); */

Stuff you can modify:

Theme Name: The name of the theme that is displayed in the appearance themes.
Theme URI: A link to where you keep the theme’s information if you were to make it available to download to other people
Description: A description of the child theme what it’s used for
Author: Your name
Author URI: Your websites URL
Version: what version, for your record keeping since your the only one ever updating it

The “default” style that comes with Easel

the line:
@import url(‘../easel/style.css’);

Says to import the style.css from the main easel theme, that style is the basic black on white, the default style, the black mechanical looking look is actually all in the style-default.css file, if you want to ‘override’ the css from that file you would uncomment this /* @import url(‘../easel/style-default.css’); */ by removing the /* and */ from around it.

Step #3
The ability to override files.

Child themes have the ability to ‘override’ not only the style.css CSS elements of your site but also the files. Other then the functions.php in the child theme (which executes before the actual functions.php of the theme) you can place files from the main Easel theme – into the directory of the child theme and WordPress will execute the files in the child theme INSTEAD of the ones that are in the main theme.

For example – the layout-head.php and layout-foot.php files. These two files control the layout HTML of how your sites layout is displayed. If you want to modify it – add a sidebar; change the position of the comic or other things, you would take those two files and put them into your child theme and then you can modify them accordingly.

This method can be done all of the files that are located in the root directory of the Easel theme, the header.php, footer.php or anything of the like. Most often you will need to take the header.php which contains the section of the website to add scripts to it, you would take that header.php from the main theme and drop it into the child theme to modify it as you need.

screenshot.png
This is an image viewed in the appearance -> themes. use 640×480 pixel size screen capture of your site.

Step #4
Create an images/ directory via FTP in the child theme directory; this will allow the style.css of the child theme to have a general folder where you will stick images for your theme’s design into it. Then you can reference in the style.css that images folder. Images are read from CSS files “RELATIVE” to the location of the .css file as default unless specified as a literal location.

Example:

body {
    background: url('images/background.jpg') repeat;
}

Notice in the url(”) section of the CSS above that it takes the location of where the .css file is and then it will move down one directory to the images directory where you placed the image.

This method is HIGHLY recommended instead of using direct http:// literal urls