Premium WordPress Themes 

If this is your first WordPress theme, this section will walk you through the steps necessary to install DroidPress Pro.

First login to WordPress. Typically located at http://www.yourdomain.com/wp-admin

Once logged in press the “Appearance” tab in the left-hand menu of WP-Admin Dashboard and press “Themes”. Then press the “Install Themes” tab at the top of the page.

Next, press the “Upload” tab and press the “Choose File” button and browse to the location where you downloaded droidpresspro.zip. Once the file has been selected, press the “Install Now” button. Once the theme has been uploaded, and installed, simply activate the theme and you are ready to begin using DroidPress Pro.

Permalink

For complete control over the DroidPress Pro Menu , we highly recommend using the WordPress menu system. By default, any page you make becomes a link in the menu. DroidPress Pro has two custom menu locations, header for the top navigation, and footer for the secondary footer menu.

To begin creating your own custom menu, visit Apperance > Menus while logged into WP-Admin. Assign a name for your menu (navigation for example) and begin adding your menu items by using the options available to you in the left-hand menu. You can either make your own custom links by entering in the URL and the Label (the text that will actually show up in the menu), or by selecting and adding currently existing pages.

You may then drag and drop each item to re-order them, or to create your own custom dropdown menus by dragging pages under a parent page. Once you are done creating your menu, select it from the Header Menu dropdown list and press save menu. Now your new custom menu will appear in your DroidPress Pro Menu.

The DroidPress Pro Menu offers even more new colors to select from, as well as the option for a color picker located under the Design tab in the DroidPress Pro settings.

Permalink

Overview:

DroidPress Pro introduces our new page-level meta options, which can be found directly below the content window when editing any static page. These options give users complete control over the look and feel of their page, including the ability to set the sidebar style, configure a DroidPress Pro Slider, SEO options, and much more. The options are laid out in individual tabs for a much cleaner and more elegant experience. Continue reading below for a detailed look at each of the iFeature Pro Page Options tabs and how to properly utilize them.

Video Walkthroughs

We have also created the following walkthrough videos to help you out! It features a detailed run through of all of the options and how you can use them on your pages (note: these videos are for iFeature Pro 2): 

Page Options:

The first options tab is the Page Options tab, which is used to assign your sidebar style and enable any sections you want to appear on that page. Below you will find an itemized list of each option and what it does.

Select Page Layout - This option allows you to select from four different sidebar configurations: Sidebar Right (default), Two Right Sidebars, Sidebar Left and Right, and No Sidebar (full-width).

Enable Feature Slider - This option enables the iFeature Slider on the page.

Enable Twitter Bar - This option enables the Twitter Bar on the page, which displays the last Tweet for the account associated with it. (note: this option requires the Twitter for WordPress plugin to be installed and activated).

Twitter Handle - This text box is for entering the Twitter account to be used with the Twitter Bar.

Enable Box Section - This option enables the widgetized three-box section on the page.

Hide Page Title - This option hides the page title.

Hide Page Content - This option hides the page content, useful for making a page completely comprised of the various iFeature Pro sections.

Feature Slider Options:

This options tab is for configuring the iFeature Slider if you have enabled it on your page using the Page Options tab, and replaces the iFeature Slider options tab in the iFeature Pro theme options page. These settings offer full control over the look and configuration of the iFeature Slider, including the size, whether or not it generates slides from blog posts or custom slides, animation type, and much more. Below you will find a detailed explanation of each option.

Select Slider Size - This option allows you to select whether you want your slider to be full width or half-width, which automatically sizes the slider to fit within the page content depending on your sidebar configuration.

Select Slider Type - This option is for selecting the source of your feature slides: blog posts or custom slides. For more information about these two kinds of slider configurations, please refer to the "Using the iFeature Slider" documentation page.

Blog Post Category - If you are using "Blog Posts" as your Slider Type, use this drop down menu to select the category you wish the slides to be called from. You can select any of your custom categories, or simply select "All" to call from your latest posts.

Custom Slide Category - If you have selected "Custom Slides" as your Slider Type, you can select the category you want the slides to be called from. "Default" is the default category, which is the category every custom slide is placed under if a custom category is not specified.

Number of Featured Blog Posts - This option only pertains to slides generated from blog posts. Enter the number of slides you want to appear into this text input box and update the page. The default number for blog posts is five.

Slider Height - If you wish to customize your iFeature Slider's height, you may do so with this option. The default height is 330 pixels.

Slider Delay Time - This option controls the time each slide appears before it transitions. It is measured in milliseconds (1000 milliseconds equals 1 second), and the default speed is 3500 ms.

Select Slider Animation Type - This option is for selecting the animation style you want to use for that page. There are currently 15 choices: Random (default), Slice Down, Slice Down-Left, Slice Up, Slice Up-Left, Slice Up-Down, Slice Up-Down Left, Fold, Fade, Slide-In Right, Slide-In Left, Box Random, Box Rain, Box Rain-Grow, Box Rain-Reverse and Box Rain-Grow-Reverse.

 Select Slider Navigation Type - This option is for selecting the navigation type you want to use with the slider. There are three choices: dots (default), thumbnails and none.

Select Slider Caption Style - Use this option to configure the slider caption (title and text) style you wish to use. You have four choices: bottom (default), left, right, and none (disables the caption bar on all slides).

Hide Navigation Arrows - This option will hide the navigation (left and right) arrows from appearing on the slides.

Disable Navigation Auto-Hide - By default the navigation arrows only appear when a user mouses over the slides. Enabling this option will cause the navigation arrows to always appear.

Disable WordThumb Image Resizing - If you are unable to see your images, or would simply like to manage your image sizes manually, check this box to disable the use of WordThumb image resizing.

 SEO Options

The SEO Options tab gives you the ability to add META descriptions for title, description, and keywords to each individual page. This allows search engines to more accurately index your content, which helps improve your search rankings. Below are the explanations for each option in the SEO Options tab.

Title - Use this text input field to enter your META title. Keep it short and relative to your content.

Description - Use this text box to enter your META description here. The description can be longer than the title, but it is still recommended to keep it short and relative to your content.

Keywords - Use this text input field to enter your META keywords, separated by commas. You may enter as many as you like, but it is important that they are relevant to your content.

Permalink

Overview:

DroidPress Pro allows you to create an attractive and professional static homepage if you do not wish to show your blog posts on the homepage. Using the DroidPress Pro Page Meta options, you can enable a variety of sections to display your content to your audience. The documentation below will explain how to utilize the Feature Slider, Twitter Bar, Widgetized Box Section, and various page layouts.

We have also produced a brief tutorial video, which you can view below (note: this video demonstrates iFeature Pro 2):

Using the DroidPress Pro Page Options:

To set up your DroidPress Pro Home Page template, you will be using the new DroidPress Pro Page Options section. These options are found below the post edit window when editing the page (see the above image), and are separated into four tabs: Page Options, Feature Slider Options, and SEO.

The first step in setting up your custom homepage template is enabling the sections you want to appear on your page. Use the options in the Page Options tab to enable the sections you want to appear. If you want to replicate the default DroidPress Pro Homepage, you must enable the Feature Slider, Twitter Bar (requires the Twitter for WordPress plugin), and the Box Section. You also have the option to hide the page title and content.

Continue reading below to learn how to configure all four sections.

Feature Slider Options:

The second option tab allows you to customize your page's DroidPress Pro Slider. You can use these options to select the size of your slider, whether you want it to call from custom posts or blog posts (as well as which post category to call from), and various other options including animation type, navigation and caption style, and so on.

For a detailed explanation about each of these options, please refer to our DroidPress Pro Page Options documentation page. Also, for documentation regarding the slider itself, please refer to our DroidPress Pro Slider documentation page.

Twitter Bar:

If you are using the Twitter Bar, simply add your Twitter handle in the input field on the Page Options tab. Be sure that you have installed the Twitter for WordPress plugin or the Twitter Bar will not function.

Box Section:

Seeing as the Box Section is controlled by Widgets, there are no options for this section in the DroidPress Pro Page Options. For help using widgets in this section, please refer to our Using Widgets documentation page. Also, if you're looking to use different widgets in this section on different pages, you can use the Widget Logic plugin.

Still Stuck?

If you are having any difficulty setting up your DroidPress Pro Homepage, please visit our support page for various ways to get in touch with us.

Permalink

Here we will provide a step-by-step guide for using the DroidPress Pro Slider. The DroidPress Pro Slider is used to display featured site content on your page and is controlled using posts. You have the option to feature blog posts in your iFeature Slider, or to create your own custom slides that you can link to a page on your site or an outside link.

Below we will outline in detail the steps necessary to use featured posts, or to create your own custom slides.

Featured Posts:

To use the DroidPress Pro Slider to feature blog posts, you can either edit an existing post or create a brand new one. Once you have your post content ready, the first step is to make sure that your post is published under the proper category. By default the DroidPress Pro Slider pulls from every category, so if you want to use it in this way you are ready to move on to the next step. If you have assigned a specific category in the DroidPress Pro Slider Settings (for example: featured), then you must place the post in this category. If you need to create this category, press the “add new category” button under the “Categories” menu on the right-hand side of the post edit page, type the name you have specified, and press enter.

Next you must tell the feature slider where to pull the image to be displayed. To do this you will use the iFeature Slider Content box which can be found below the post window (see image below).

To add an image to your featured slide, use the image uploader to browse and select your image. Then simply update (or publish if it is a new post) and you will see a thumbnail of the image you uploaded.

In DroidPress Pro, slider images are automatically resized to fit the size of your slider. The three slider sizes (in pixels) are as follows: 980 by 330 for the full width slider, 640 by 330 for a half-width slider with one sidebar, and 480 by 330 for a half-width slider with two sidebars.

The DroidPress Pro Slider also allows for some custom text to be displayed below the post title. To use this, enter your custom text into the text input field and update or publish your post. This section is optional, so if you do not wish to use custom text simply use this text field blank.

You may also hide the title bar (the black bar that appears at the bottom of the slider) on individual posts by checking off the hide title bar checkbox.

If you are using thumbnails with your slider, you have the option of uploading a custom thumbnail for your slide (thumbnails are generated from the slider image by default).

Slides are ordered chronologically by the post date of the posts. The newest post will display first. Below is an image representing what a post page should look like to utilize all the slider options available. The post title becomes the title of the slide, the uploaded image will display in the slide itself, and the custom text will display below the title if used. If you are using a specific category for your slider, do not forget to place your post under that category.

Custom Feature Slides:

You also have the option to create your own custom slides, which is useful if you do not want to feature blog post content and would like to link to other pages. The process is very similar to using a post category, and uses a custom post type which will only display in the iFeature Slider. In order to enable custom slides, select “Custom Slides” from the dropdown menu of the “Select the Slider Type” option in the iFeature Slider options settings.

Next, navigate to the “Custom Slides” panel in your WP-Admin sidebar, which can be found directly above the iFeature Pro options panel. To make a new custom slide, click the “Add New” link which will take you to the custom slide post page.

Enter your slide title into the post title input field, and use the post content field to enter any custom text you would l

ike to display before the title. Next, enter the link you would like the slide to point to in the “Custom Slide Link” input field.

Use the image uploader to upload your feature slide image. In DroidPress Pro, slider images are automatically resized to fit the size of your slider. The three slider sizes (in pixels) are as follows: 980 by 330 for the full width slider, 640 by 330 for a half-width slider with one sidebar, and 480 by 330 for a half-width slider with two sidebars.

Overview

DroidPress Pro offers a Featured Posts Section at the top of the blog page where users can feature certain blog posts. This section displays five posts at a time, but has the ability to navigate left or right through as many posts as you would like to use.

Creating Featured Posts

To create the content for your Featured Posts Section, click on the Featured Posts link in the sidebar when logged into WP-Admin. This section utilizes custom post types, so click "add new" to begin creating your Featured Posts content.

You will use the meta options field shown above to create your Featured Posts content. Give your Featured Post a title, upload an image, and enter the link to the blog post you are featuring.

If you click the "Featured Posts" link in the sidebar, you will see a list of all the Featured Posts content you have created.

If you would like to re-order this content, we recommend using the Post Types Order plugin.

Permalink

DroidPress Pro offers several Widgetized areas using WordPress’s built-in Widget dashboard. DroidPress Pro offers Sidebar Widgets, Widget boxes, and Footer Widgets.

To make changes to Widgets go to the Appearance tab in WP-Admin, and select “Widgets”.

Grab the widgets you wish to use into the designated area to the right within the Widgets dashboard.

Sidebar Widgets

Sidebar Widgets supports multiple Widgets, simply drag and drop them in the order you would like and they will display on sidebar section of your website (see image to the right).

Widget Boxes

To put a Widget in the left box place the Widget in Box 1 of the Widget dashboard area, to place a Widget in the middle place a widget in Box 2 of the Widget dashboard area, to place a Widget in the right box place the Widget in Box 3 of the Widget dashboard area.

The Widgetized Box Area can be enabled on a per-page basis using the DroidPress Pro Page Meta Options.

Footer Widgets

The Footer also uses Widgets, and supports up to 4 widgets that are displayed horizontally left-to-right. Simply drag and drop them in the order you would like and they will display in Widgetized Footer area of your website (see image above).

Permalink

To customize your install of DroidPress Pro, select DroidPress Pro” under the Appearance tab in the left-hand menu of WP-Admin. Here you will find six different option categories: General, Design, Blog, Social, Footer, Import/Export. Simply select the settings tab you wish to edit.

When you are done editing your options, press the “Save Settings” button. If you ever want to revert back to the default DroidPress Pro settings, press the “Reset” button at the bottom of the page (this will delete all of your settings so make sure you backed up all of your setting information separately).

If you are use to using the previous versions of iFeature Pro, you will notice the setting tabs have changed. We didn't remove any features, we just simply reorganized them to make them easier to use. We also moved many of our settings to the DroidPress Pro Page Meta Options which allows you to control the DroidPress Pro Slider, Twitter bar, SEO options, and other settings on a per-page basis.

Continue reading for a detailed explanation of the settings within each settings category.

Permalink

Typekit Embed Code

If you wish to use Typekit fonts on your site, enter your Typekit embed code here.

Custom Favicon:

Use the image uploader to upload a custom favicon for the header. You can also enter the link to your custom favicon if you've already uploaded it to the Media section of WP-Admin. A favicon is a 16 pixel by 16 pixel image which appears next the URL in most web browsers. If you need help generating a favicon, we recommend a website like http://favicon-generator.org/.

Google Analytics Code:

Use this entry field to enter your Google Analytics Code, which will automatically be inserted into the footer. For more information about Google Analytics, please visit http:// www.google.com/analytics/.

Permalink

Choose A Font

Select the font you would like to use from the drop down menu. The default font is Cantarell, and you have a choice between a number of standard web fonts and Google fonts, or you can enter your own font below (Google Fonts with more than one word format as follows: Maven+Pro)

Custom Menu Color

If you would like to use a custom menu color, use the color picker to choose the color you wish to use.

Choose A Menu Font

This option allows you to select the font you would like to use for the iMenu only. The default font is Cantarell, and you have a choice between a number of standard web fonts and Google fonts, or you can enter your own font below (Google Fonts with more than one word format as follows: Maven+Pro)

Menu Link Color

Use the color picker to select the site menu link color. The default is "FFFFFF" which is the hex code for the color white. To change the link color to black you can use the color picker, or simply enter "000000".

Site Title Color

Use the color picker to select the site title color.

Link Color

Use the color picker to select the site link color.

Post Title Color

Use the color picker to select the post title color.

Custom CSS

Override the default CSS. Please see Using Custom CSS for a further explanation. You may also want to consider using a Child Theme instead.

Permalink

BLOG OPTIONS

Hide the Featured Posts Section

If you do not wish to use the Featured Posts section on your blog page, check this box and save the settings to hide it.

Select the Sidebar Type

Select the sidebar type for your blog page (default is Right).

Post Excerpts

Use the following options to control excerpts.

Check the "Show Excerpts" box to enable excepts.

You can also enter your own Excerpt Link Text, and control the number of except characters using the Excerpt Character Length.

Featured Images

Use the following options to control featured image alignment and size.

You can define a custom featured image size below (default is 100 by 100), and hide various post elements such as Author, Categories, Date, Comments, Sharing, and Tags.

Hide Post Elements

Use the following checkboxes to hide various post elements including Author, Categories, Date, Comments, Share, and Tags.

Show Facebook Like Button

Check the box to show the Facebook Like Button on all blog posts.

Show Google +1 button

Check this box to show the Google +1 Button on all blog posts.

SLIDER OPTIONS

Show the  Slider

If you wish to use the DroidPress Pro Slider on your blog page, check this box and save the settings.

Select the Slider Size

Select the slider size for your blog page (default is Half-Width), you can also use full-width which will display above the blog content and sidebar.

Select the Slider Type

This option allows you to select between blog posts or custom slides. Custom slides enable you to create slides that are not associated with posts or pages. Please see Using the iFeature Slider for more information.

Show Posts From Blog Category

This is where you can assign a specific post category to be used with the feature slider. By default the feature slider pulls from all categories, so if you have a specific category simply select the category you would like to use.

Show Posts From Custom Slide Category

This drop down menu will only function if you are using custom slides, and custom categories. If you are using custom slides, this option allows you to pick what custom slide category you want on your blog page. For all other pages use the Page Meta Options.

Number of Featured Blog Posts

Enter the number of featured posts that you want the feature slider to cycle through. The default is 5.

Slider Height

The default slider height is 330-pixels. If you want to make the slider tall or smaller simply enter the pixel height.

Slider Delay Time (in milliseconds)

Enter the time that you want each slide to appear before it changes to the next one. The time is entered in milliseconds, so if you want a 7 second delay, enter 7000. The default is 3500, which is 3.5 seconds.

Choose the Caption Style

This allows you to move the location of the caption text displayed on the slider. The default is Bottom, but you can also select from Left, Right, and None.

Choose the Slider Animation

Select from a wide variety of slider animation types. The default is random.

Choose the Slider Navigation

This controls the icons or dots below the slider. The default is dots, but you can also select Thumbnails, or None to hide them.

Disable Slider Navigation

Check this box to hide the navigation arrows.

Disable Slider Navigation Auto-Hide

Check this box to keep the navigation arrows active at all times.

Disable WordThumb Image Resizing

If you are unable to see your images, or would simply like to manage your image sizes manually, check this box to disable the use of WordThumb image resizing.

SEO OPTIONS

SEO Home Description

Enter the META description of your homepage here. This helps SEO.

SEO Home Keywords

Enter the META keywords of your homepage here (separated by commas).

Optional SEO Home Title

Enter an alternative title of your homepage here (default is the site tagline).

Permalink

Footer Copyright

Here you can enter your custom footer copyright text. By default it displays your site title, and if you wish to hide this feature enter the word “hide”.

Footer Color

Use the color picker to select a custom footer color (default is 222222).

Hide our link

If you wish to remove the link back to CyberChimps check this box.

Permalink

The Social Settings allow you to easily link to your favorite social media websites including Facebook, Twitter, Google+, LinkedIn, YouTube, Google Maps, Email, and RSS. Simply fill in the appropriate URL for each icon, or check the box to hide them.

Permalink

If you would like to copy your current DroidPress Pro settings to another install (or back up your existing settings, which could be useful if you accidentally reset your options), copy the export code from the “Export iFeature Settings” text window and paste them to a text/office document and save.

To import you settings, copy your saved export code and enter it into the “Import iFeature Settings” text window and then save your theme options.

WARNING: If you do not paste correct export code into the “Import iFeature Settings” text window, the theme will restore to the default settings as a failsafe. Be sure to select the code in its entirety before you Copy and Paste.

Permalink

DroidPress Pro also includes a library of shortcodes which make designing pages and posts even easier. Below you will find demos and example code for each shortcode

Fancy Checklist

[checklist]

• Test
• Test2
• Test3
• Test4
• Test5
• Test6

[/checklist]
Box

[box]testing testing 123 this is a test of my box[/box]  [box]testing testing 123 this is a test of my box[/box]

[button link=""] ... [/button]
[button link='' size="large"] ... [/button]
Two Column

[one_half] Clowns are comic performers stereotypically characterized by the grotesque image of the circus clown's colored wigs, stylistic makeup, outlandish costumes, unusually large footwear, and red nose, which evolved to project their actions to large audiences. Other less grotesque styles have also developed, including theatre, television, and film clowns[/one_half]

[one_half_last] Clowns are comic performers stereotypically characterized by the grotesque image of the circus clown's colored wigs, stylistic makeup, outlandish costumes, unusually large footwear, and red nose, which evolved to project their actions to large audiences. Other less grotesque styles have also developed, including theatre, television, and film clowns[/one_half_last]

Three Column
[one_third] Clowns are comic performers stereotypically characterized by the grotesque image of the circus clown's colored wigs, stylistic makeup, outlandish costumes, unusually large footwear, and red nose, which evolved to project their actions to large audiences. Other less grotesque styles have also developed, including theatre, television, and film clowns. [/one_third]
[one_third] Clowns are comic performers stereotypically characterized by the grotesque image of the circus clown's colored wigs, stylistic makeup, outlandish costumes, unusually large footwear, and red nose, which evolved to project their actions to large audiences. Other less grotesque styles have also developed, including theatre, television, and film clowns. [/one_third]
[one_third_last]Clowns are comic performers stereotypically characterized by the grotesque image of the circus clown's colored wigs, stylistic makeup, outlandish costumes, unusually large footwear, and red nose, which evolved to project their actions to large audiences. Other less grotesque styles have also developed, including theatre, television, and film clowns. [/one_third_last]

Four Column

[one_fourth] Clowns are comic performers stereotypically characterized by the grotesque image of the circus clown's colored wigs, stylistic makeup, outlandish costumes, unusually large footwear, and red nose, which evolved to project their actions to large audiences. Other less grotesque styles have also developed, including theatre, television, and film clowns.[/one_fourth]

[one_fourth] Clowns are comic performers stereotypically characterized by the grotesque image of the circus clown's colored wigs, stylistic makeup, outlandish costumes, unusually large footwear, and red nose, which evolved to project their actions to large audiences. Other less grotesque styles have also developed, including theatre, television, and film clowns.[/one_fourth]

[one_fourth] Clowns are comic performers stereotypically characterized by the grotesque image of the circus clown's colored wigs, stylistic makeup, outlandish costumes, unusually large footwear, and red nose, which evolved to project their actions to large audiences. Other less grotesque styles have also developed, including theatre, television, and film clowns.[/one_fourth]

[one_fourth_last] Clowns are comic performers stereotypically characterized by the grotesque image of the circus clown's colored wigs, stylistic makeup, outlandish costumes, unusually large footwear, and red nose, which evolved to project their actions to large audiences. Other less grotesque styles have also developed, including theatre, television, and film clowns.[/one_fourth_last]

Five Column

[one_fifth] Clowns are comic performers stereotypically characterized by the grotesque image of the circus clown's colored wigs, stylistic makeup, outlandish costumes, unusually large footwear, and red nose, which evolved to project their actions to large audiences. Other less grotesque styles have also developed, including theatre, television, and film clowns. [/one_fifth]
[one_fifth] Clowns are comic performers stereotypically characterized by the grotesque image of the circus clown's colored wigs, stylistic makeup, outlandish costumes, unusually large footwear, and red nose, which evolved to project their actions to large audiences. Other less grotesque styles have also developed, including theatre, television, and film clowns. [/one_fifth]
[one_fifth] Clowns are comic performers stereotypically characterized by the grotesque image of the circus clown's colored wigs, stylistic makeup, outlandish costumes, unusually large footwear, and red nose, which evolved to project their actions to large audiences. Other less grotesque styles have also developed, including theatre, television, and film clowns. [/one_fifth]
[one_fifth] Clowns are comic performers stereotypically characterized by the grotesque image of the circus clown's colored wigs, stylistic makeup, outlandish costumes, unusually large footwear, and red nose, which evolved to project their actions to large audiences. Other less grotesque styles have also developed, including theatre, television, and film clowns.[/one_fifth]
[one_fifth_last] Clowns are comic performers stereotypically characterized by the grotesque image of the circus clown's colored wigs, stylistic makeup, outlandish costumes, unusually large footwear, and red nose, which evolved to project their actions to large audiences. Other less grotesque styles have also developed, including theatre, television, and film clowns. [/one_fifth_last]

Permalink

Using Custom CSS

Custom CSS can be used to further change the visual aspects of DroidPress Pro to your liking. Some knowledge of CSS is useful, but is not required to begin using this option. We highly recommend using one of the following tools to help you determine the necessary CSS selectors to apply your custom changes: Firebug (http://getfirebug.com/) or Inspect Element (available in Google Chrome or Apple’s Safari).

Finding the selector

(note for this example we will be using Inspect Element)

Let’s say that you wish to change the color of the site name. Point your mouse as close to the area that you wish to modify, right-click and press inspect element. This will bring up a new area at the bottom of your browser that looks like the following:

The selector for the contact area appears in the right-hand menu (in this case .sitename). Now that we have our selector, we can use Custom CSS to make  our change. Here is the code we would use to make the sitename text red.

.sitename a {color: red;}

This tells the browser to display the text as red in addition to the default styles for that selector. You will also notice the "a", this indicates that we are changing the color of the sitename link.

This is just one example, but there is really no limit to what you can accomplish with Custom CSS.

For more CSS resources, we recommend the following links:

http://www.w3schools.com/css/

http://htmlhelp.com/reference/css/

http://www.htmldog.com/guides/cssbeginner/

You may also post questions in the DroidPress Pro Customization forum for help in achieving your desired customizations.

http://cyberchimps.com/forum/customization/

Permalink

A child theme is your best option if you are looking to do some serious customizations to DroidPress Pro. A child theme is a companion theme where customizations to the main theme can be made that will not be overwritten when the main theme is updated. This is useful if you are making a substantial amount of changes to the theme's CSS, or if you want to make customizations to the core template files.

Creating and activating a child theme is quite simple, and below you will find several examples along with a download link to an already prepared empty child theme.

Download DroidPress Pro starter child theme.

Creating your own:

All you need is a basic text editor, and you are ready to create your own child theme for DroidPress Pro. The first step is to create a folder to house the contents of your child theme. Using your computer, create a folder (on your Desktop for example) and give it a name relevant to your child theme. For our example, we have created a folder called "DroidPressPro-child-theme"

Once you have created your folder, you need to create a stylesheet for your child theme. Open up your text editor and enter the following text:

/*
Theme Name: DroidPress Pro Child Theme
Theme URI: http://cyberchimps.com/
Description: Child Theme for DroidPress Pro
Author: CyberChimps
Author URI: http://cyberchimps.com
Template: droidpresspro
Version: 0.1
*/

@import url("../droidpresspro/style.css");

The commented portion of the code defines all the various elements of your child theme. Here is a detailed explanation of each element:

Theme Name: This is the name of your child theme. It can be whatever you like, so be creative!

Theme URI: This is the link associated with your child theme. For your purposes, using your domain is probably sufficient but it can be any link you like.

Description: This is your child theme's description, which provides a unique identifying text which is displayed in the WordPress theme manager.

Author: This one's pretty simple, it's you!

Author URI: This is the link associated with the author, again it's probably best to use your domain but again it can be anything you like (a link to a different personal blog for example).

Template: This one is important. This defines which base theme the child theme is associated with, in our case, DroidPressPro. Please copy this section exactly as you see in the example.

Version: Finally, this is the version number of your child theme. When updating your child theme it is best to increase the version number. It is also helpful to keep a change log inside of your child theme to keep track of the changes you have added or removed.

The next part of the code is very important, so please copy and paste this exactly as well. This code calls the DroidPress Pro stylesheet, without this code your child theme will be missing all the elements of DroidPress Pro that you do not customize.

With the above code, you now have a blank child theme that you can begin customizing. For example, adding the following code will change your site's background color to blue:

body {background: blue;}

Any custom styles you add AFTER the @import code will be called ahead of the default DroidPress Pro stylesheet, meaning that your custom code will be dominant.

Customizing Core Template Files:

Another powerful element of child themes is the ability to customize core template files, such as the header.php or index.php file. To customize a core template file, simply copy and paste the contents of that file into a new document, make your customizations, and save it with the same name and extension as the original.

This is the proper way to customize theme template files, because your child theme files will not be overwritten when the base theme is updated.

Installing and Activating:

Child themes are installed and activated like any other WordPress theme. You can either upload the folder to your wp-content/themes folder via FTP, or you can install it as a zip using the WordPress theme manager. In order to make your theme a zip, simply right click (option click on a Mac) and compress the folder to a zip archive.

Once you have your theme installed, simply activate it INSTEAD of DroidPress Pro. This step is very important, otherwise your customizations will not take effect on your site.

Final Thoughts:

There are a few things one should keep in mind regarding child themes. It is important to stay up to date with the base theme's releases, to ensure that your child theme stays up to date. For example, if you create a custom index.php file and the base theme receives a major update to the index.php file, your theme will not receive that update unless you add the new code to your child theme template file. Core template files in the base theme are rarely changed, but if they are those changes are documented in the change log.

This tutorial was designed to get you started with your own child theme, but if you have questions or need help with your own please stop by the DroidPress Pro customization forum (requires Pro forum access) and we would be happy to help you with your child theme.

Tutorial video coming soon.

Permalink