How to Fix the Pixel Theme

HOW TO SET THE URL ICON

  • Upload <your-image> to wp-content/themes/pixel/images/
  • Add the following SINGLE line to wp-content/themes/pixel/header.php:
    • <link rel=”Shortcut Icon” href=”<?php bloginfo(‘template_url’); ?>
    • /images/<your-image>” type=”image/x-icon” />
  • Reload your blog page and behold the new URL icon! Thing of beauty.

HOW TO SET AND LINK THE BLOG TITLE ICON

  • Find the logo div in wp-content/themes/pixel/header.php.
  • Add the line:
    • <a href=”http://<your-domain>/<your-blog>/”><img src=”http://<your-domain>/<your-blog>/wp-content/themes/pixel/images/<your-image>” alt=”” height=”47px” width=”32px” align=”left” style=”padding-right:10px;” /></a>

HOW TO STYLE THE BLOG TITLE FONT

  • Find the logo div in wp-content/themes/pixel/header.php.
  • Edit the line containing bloginfo(‘name’).
  • To the link section containing href, append the following element and adjust the parameters to fit your heading and its adjacent elements:
    • style=”font-family: monotype corsiva; font-size: 160%”><?php bloginfo(‘name’); ?>
    • e.g. <h1><a href=”<home-page><see-above>></a></h1>
  • and for the bloginfo(‘description’) element:
    • <span><h2><div style=”padding-left:14px;”><?php bloginfo(‘description’); ?></div></h2></span>
  • Reload your blog page and behold the new title font! Thing of beauty.

HOW TO DISPLAY YOUR PROFILE PICTURE

  • None of the surgical techniques I’ve used on other themes worked on the Pixel theme.
  • Simply insert and format your profile picture into your About page or post (or whatever you entitle it) in the conventional manner using the associated Edit link.
  • Before previewing the result or sending it as an update, edit the href element to point to your chosen link destination for the image.
  • Preview and Update the page or post.

HOW TO FIX THE PROFILE-PIC PLUGIN

  • To get the Profile Pic plugin to attach your gravatar to your posts in the Pixel theme, uncomment the apply_filters call in /wp-content/plugins/profile-pic/profile-pic.php.
  • This method of activating the Profile Pic plugin produces a PHP error message near the bottom of the page first presented to users after login.
  • To clear this PHP error message, comment out the following code further down in profile-pic.php:
  • // echo “<pre>datafields:” . print_r($profilepic_datafields, true) . “\r\r stored options:” . print_r($profilepic_displayoptions, true) . “</pre>”;
    // prep checkbox display
    // foreach ($datafields as $fieldname => $fieldid) {
    //      if ($profilepic_displayoptions[$fieldid] == 1) { $checked = ” CHECKED “; } else { $checked = ”; }
    //      $checkbox_string .= “<label><input type=’checkbox’ name=’profilepic_displayoptions[]’ value='”.$fieldid.”‘”.$checked.”/> “.$fieldname.”  </label><br />”;
    // }
  • Upload the modified PHP file to your site.

HOW TO CONTROL THE SIDEBAR CONTENT

  • Download and edit:
    • <your-site>/<your-blog>/wp-content/themes/pixel/sidebar.php
  • Comment out or otherwise edit the various elements to taste.
  • Re-upload the file to its rightful place in your blog code.

HOW TO CONTROL YOUR FONT SIZES
(without hacking your theme)

  • Select the Customize toolbar button or got to Site Admin > Appearance > Customize > Additional CSS.
  • Start off the text entry field with a hard html base font size specification, e.g.
html {
    font-size: 10px;
}
  • Frisk your style.css file under wp-content/themes/pixel for the CSS elements it actually uses.
  • Search on font-size and go through this file systematically.
  • Wherever you find a CSS definition containing a font-size specification, copy and append the first and last lines of the definition to the contents of the Additional CSS text entry field.
  • Between the brackets of the new CSS style definition, add font-size: X.Yrem; with a best first guess as to the right font size (X.Y) for that CSS element and watch for changes in the previewer panel.
  • This has the effect of overriding (rather than hacking) the default font definitions in style.css. While style.css may be updated in a future release of your theme (thus overwriting any changes), the overrides you specify under Additional CSS will survive new releases because they are saved in your content database.  This means that the work you put in now will carry forward, though you can always come back and make adjustments as needed.
  • By using rems as the unit, you’re defining the remaining font sizes as offsets from the hard base font size you specified above in your initial html definition.
  • If nothing changes on any of your site pages when you adjust the font size in a particular CSS style definition, consider omitting that entry from your Additional CSS list for now.  The definition may not (yet) be used on your site, and you don’t want to guess wrong now on the font size only to introduce unintended consequences when at some point in the future you do start using it without immediately knowing it.
  • Iteratively adjust your base and relative font sizes while previewing the result in the Additional CSS previewer panel until you home in on the best combination of font size overrides for your site.
Dave
http://WayOfAges.org

You must be logged in to post a comment