Tag Archives: WordPress Theme

Transition to Quark Theme

I have been working with the Revera theme for about 4 months now I have discovered that the theme does not work for me as well as I would have liked.  This is mostly due to the main page slider and needing a reasonably sized images, where ideally they are all the same to prevent annoying page movements, and since I’m not running a photo based blog the theme does not make sense for me.

I have been casually looking around for a replacement theme that contained a clean look, is responsive, and customizable.  I came across Quark and like how the theme is built upon HTML5 and CSS3 and according to some of the reviews the code isn’t bloated and the theme is easy to customize, which I am going to venture into over the next week.

I have already started some basic, but key, code level modifications by adding a modification of the default full page template to include one that does not allow for comments as I do not want to allow users to comment on pages.   The one thing this theme doesn’t have that I need is a portfolio section, which leads me into the key elements I need to complete to get this theme working for me:

  • Portfolio template to allow for a section to showcase my applications
  • Full page template without comments (done)
  • Front page and footer widget areas the theme allows you to set
  • Front page display in general
  • Logo for my website
    • Main logo with website name and potentially caption
    • Favicon

I think this theme has the potential to work nicely for me so long as a theme update does not break my code level customizations which at this point appears to be the addition of two new page templates.  I am going to do further reading on the theme to learn more about what Quark has to offer.  The theme does not allow you to bookmark posts based on the short links (with the ?p=#) so I may need to find a way to add that too, but just encase I made the modification now to change the permalink structure for blog posts to /blog/%postname%/, which unfortunately will break any current links that are not short links.

Slider Customization

Slider Flex Caption CSS

Since not all my posts will contain a feature image I had to find a work around that would allow the text content to show properly in the slider.  In order to do this I added a very tiny white square as my featured image.  When it first displayed the caption for the post was at the bottom and ran out of the visual area (couldn’t even see ‘Read More’ button).  In order to accommodate this I modified the CSS for the slider so that the caption starts at 20% from the top instead of its default of 40%; in hopes this will also work for future blog posts without a featured image.

I had to change a block of CSS which starts at line 235 in theme.css from:

.flex-caption{
	width: 800px;
	position: absolute;
	top:40%;
	left: 50%;
	margin-left: -400px;
	text-align: center;
	z-index: 120;
	color: #fff;	
}

To the following:

.flex-caption{
	width: 800px;
	position: absolute;
	top:20%;
	left: 50%;
	margin-left: -400px;
	text-align: center;
	z-index: 120;
	color: #fff;
}

It is worth noting that a caveat I have discovered is that this is insufficient for smaller screen sizes so I may have to become more ‘clever’ in my featured images; like I did for this post, when I can.

Theme Customization

Original Look

Overview
Ever since I decided to start up my own website (again) with the intent of having it for a long time I knew there were two key things I needed to do, besides the content itself. The first was to come up with my domain name and the second was to find a WordPress theme that I liked. I wanted the theme to contain some key features I was looking for as well to have a style that I liked. I spent time over the past month or so looking at themes and testing some I thought I might like before finally settling on Revera as a solid start to what I was looking for.

Foundation
Revera is a free premium WordPress theme that contains many features that I was looking for. This includes being a responsive WordPress theme utilizing the Bootstrap 3 framework, custom menu, portfolio page template, and blog (which might not be so much a feature as ‘just is’). One feature it has that I am still uncertain as to how much I am going to like is featured images for your posts. I do like how they display prominently on the homepage to advertise new blog posts and display for portfolio elements; however, since I am not using it for photography there may be cases when an image in my post does not make sense, or that it should not be featured. I intend to utilize the portfolio section to showcase applications once a stable release is completed.

Customization
Since I discovered a theme that had a solid foundation for me to build off I progressed into performing some customizations to brand the theme for me and gain some additional functionality.

The first customization I performed was to ‘mini-brand’ my site by changing the colors to what I wanted, which was a darker shade of green as it is my favorite color. In order to do this I modified theme.css by changing the appropriate hex codes to the appropriate hex code for the shade of green I required.  Below the left hand side represents the hex code for the default color and the right hand side represents my color choice.  I also modified the color for the arrows on the homepage to match by modifying bg_direction_nav.png using MS Paint.

ed564b -> 339614
f96b61 -> 5eb42d
f4473a -> 308715
-> ff0000 (inColor)

Above, inColor, is a special addition I made as I wanted to use links on the homepage feature section which has a background color the same as the default link color.  In order to obtain this I added a child class for links called inColor:

a.inColor {
	color: #ff0000;
 
}
a.inColor:visited {
	color: #ff0000;
}
a.inColor:hover,
a.inColor:focus,
a.inColor:active {
	color:#000;
	text-decoration: none;
}

I am not sure if I am going to stick with the red link color or not as  I plan to get some opinions on the look of red on green.  I at least have the CSS styles in place for if I want to change that color or have a different color for visited links.

Lastly I needed to add templates for full width pages, one with and one without a comment section.  In both cases I also did not want the page title to duplicate. I accomplished this by modifying the page template, page.php, and creating two new template files full-page-no-comments.php and full-page-with-comments.php.  The key here was stripping out the sections I did not need and in order to remove the title I had to modify the get_template_part function call to point to my new content template, which I called content-pageNoTitle.php.  The naming is important as you can see the parallel between the parameters passed and the file name (left and right side of the hyphen).  The function call becomes:

<?php get_template_part( 'content', 'pageNoTitle' ); ?>

You also need to add comments within php tags at the top in order for the file to be recognized as a template file when you upload it to the appropriate theme directory as follows:

<?php
/*
Template Name: Full Page No Comments
*/
?>

Lastly I modified the contents of content-page.php by stripping out the header section and saving as content-pageNoTitle.php, accessed by the aforementioned function call, so it becomes:

<?php
/**
 * The template used for displaying page content in page.php with no title.
 *
 * @package web2feel
 */
?>
 
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
	<div class="entry-content">
		<?php the_content(); ?>
		<?php
			wp_link_pages( array(
				'before' => '<div class="page-links">' . __( 'Pages:', 'web2feel' ),
				'after'  => '</div>',
			) );
		?>
	</div><!-- .entry-content -->
	<?php edit_post_link( __( 'Edit', 'web2feel' ), '<footer class="entry-meta"><span class="edit-link">', '</span></footer>' ); ?>
</article><!-- #post-## -->

That’s it! Besides some basic text changes for various displays (i.e. blog section) that is all the code modifications and additions I made, to date, in order to get the theme to what I have envisioned for my virtual home.