We’ve just released version 1.0.1 of FavePersonal, which has a few minor updates. There’s one in particular that I think will be particularly useful: we’ve added a link to download a the style.css file you need to create a child theme (with your currently selected colors) from the Theme Settings page in FavePersonal.
While I’m mainly using the “out of the box” features of FavePersonal, I have applied a number of customizations to this site. A child theme is a great way to customize a theme and still be able to upgrade without losing your changes. For the customizations I’ll be sharing about FavePersonal, we need a very simple child theme – just a style.css file and a functions.php file.1
One of the things I’m using my child theme for is to streamline the HTML I deliver for my pages. I haven’t changed the colors for this site in nearly 10 years, so it’s safe to say I’m not planning to tinker with them much going forward. Since I don’t need the flexibility of being able to swap out the colors, I moved the CSS rules for the colors out of the HTML and into my child theme.
The first thing you’ll want to do is download the style.css file from your Theme Settings page. (Don’t have FavePersonal yet? Check out the online demo.) This gives us our colors, so now we just need to remove the CSS from the HTML.
In the functions.php file in your child theme, you’ll want to add the following code to remove the output of the CSS rules from being added to your HTML.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?php | |
| // remove the CSS for Colors from the HTML (if you want to load it via child theme instead) | |
| function favepersonal_remove_inline_color_css() { | |
| remove_action('wp_head', 'cfcp_color_css_min', 8); | |
| } | |
| add_action('wp', 'favepersonal_remove_inline_color_css', 11); |
Now you can activate your child theme and your site should look just the same, but load a touch faster (and give you a nice place to make future customizations).
Another little change I made in my child theme is to add actual underlines (gasp) to links. I don’t think I’ve met a designer in the last five years who still uses underlines in their designs, but I’m 
old school 
, I like underlines on my links. I think it helps them stand out better. However I do agree that underlines clutter up areas where things are expected to be clickable (navigation menus, lists, etc.), so I’m just adding the underlines to links in the content area of the site.
Want to underline the links in your FavePersonal site as well? Grab this CSS snippet and paste it into the style.css for your child theme.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* Do underline links in content areas */ | |
| .entry-content a, | |
| .page-content a, | |
| .social-comment-body a { | |
| text-decoration: underline; | |
| } |
And there you go – a few simple customizations for your FavePersonal child theme.
- FavePersonal customers, see Creating a Child Theme – we’ll be continually expanding the customization section of our documentation. ↩
This post is part of the project: Personal Theme. View the project timeline for more context on this post.