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.

Why Develop a Tracker Web Application?

Ahh, it is so nice to have completed my Masters and be able to focus on some personal projects I have been pondering.  The first was this website and the second is a tracker application.  I have been using an Excel spreadsheet I store on Google Drive for tracking various things, which does work pretty well for just maintaining one long list of, for instance, the novels I have read and the novels I’d like to read.  When it comes to tracking items with more complex items like rounds of golf played and at which course they were played dealing with the relationships becomes a little more cumbersome though I could also implement this in a spreadsheet; however, I thought this would be a great opportunity to learn more about web applications.

The technologies I will be using to develop my web app are C#.NET, Entity Framework, and MVC for the main framework of the application.  I will also be utilizing CSS to style my application forms and views when necessary.  I am going to attempt utilizing a MySQL back-end, since my web host provides more storage for MySQL databases, which requires additional configuration from utilizing MS SQL when using Microsoft technologies.

Security is an important aspect of any application making it necessary to implement a login system for my web app.  The login form will be the first page a user sees when accessing the site.  The web app will test, when access to other pages are attempted, if a valid user is logged in prior to granting access to any other page and redirect to the login page for unauthorized users.

Once the basic create, read, update, and delete (CRUD) functionality is implemented I am going to generate various dashboards for the users to provide statistics and further information at a glance based on database records relevant to the user.  This will include elements like what was the last novel you read (and completion date) and the number of novels you read over a specified time frame.  Related to golfing this would include calculating your overall golf handicap, average score for 9 and 18 whole games, and a further drill down to information per course will also be available.  I’m thinking at least 5 rounds will have to be played for a handicap to be calculated for a given category and averages will always show as only courses you have played will be presented as options.  I may also show the number of different courses you have played and a map of where they are located.  Additional technologies I plan to use in accomplishing these tasks are Google Charts (Google Visualization API) and Google Maps API.

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.