Making Blog Awesome-ish

Hello there,

Believe it or not. You are in love with the look and design of this website or my blog.

It is not so easy to settle with a particular design when you are about to start a personal blog.

I have made this theme for WordPress basically for my own needs. The base theme is called Tracks.

I have modified and added a lot of codes in order to make it look so awesome.

Noticeable changes that I have made :-

• Add zoom over animation. Desktop & tablets only.
• Add credits to the bottom of the site.
• Change all H1 tags to H2 because H1 was way much larger.
• Edit bottom padding of the featured image.

I will write about each of them below. So let’s start with how I added zoom over animation :-

Very simple it is. If you are familiar with CSS3. We have a property called webkit. In WordPress you have all your css classes defined in a file called STYLE.CSS this file is different for each theme. I added this piece of code to the style.css file.

.zoom .featured-image-link:hover .featured-image, .zoom .featured-image-link:active .featured-image, .zoom .featured-image-link:focus .featured-image {
-webkit-transform: scale(1.5);
-ms-transform: scale(1.5);
transform: scale(1.5);
-moz-transform: scale(1.5) rotate(0.02deg);
}

Well now CSS is a pain as you have to write the code for same animation 3-4 times. For different browsers. As in the above snippet -webkit prefix is for Opera/Older Chrome. -ms prefix is for Internet Explorer and Microsoft Edge. The one without any prefix is for Modern Chrome & Opera. -moz prefix is for Mozilla Firefox.

Now let’s see how i added the credits :-

<div class=”design-credit”>
<p>

&copy;&nbsp;<?php echo date(“Y”)?> &nbsp;Nick. All Rights Reserved.

</p>
<p> Thank you <a href=”http://androidfilehost.com” target=”_blank” title=”For donating me hosting server”>Alex</a> </p>
</div>

I added this above snippet into the footer.php template. &copy is used for © symbol while &nbsp is used for giving a space in php & html.

Now let’s see how i edited the header to be a little smaller as earlier when you opened the content the post tile used to be way much bigger. The general knowledge of WordPress, content code is always there in content.php file. So I opened it and added this :-

<div class=’entry-header’>
<h2 class=’entry-title’><?php the_title(); ?></h2>
</div>

Earlier this H2 was H1. I just edited that.

Now we will see how i decreased the visible size of the featured image. Earlier when you opened the post the image used to take up most of the screen. So i added a CSS class for the featured image like this in the same style.css file :-


.featured-image {
position: relative;
height: 0;
padding-bottom: 35%;
background-position: 50%;
-webkit-background-size: cover cover;
background-size: cover;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transition: -webkit-transform 0.3s ease;
transition: transform 0.3s ease;
}

Here relative position is for maintaining the correct aspect ratio of the image. For responsive web page.

Height = 0 is a mere place holder. That too for keeping correct aspect ratio.

Padding Bottom is the padded/correct aspect ratio in percentage. This is used for the size of the image.

Background position is used to center the image and display only the portion that is important. The full image is:-

But what you see at the top of the post is a resized one, automatically resized one, to be precise.

Background size = 50% is to show full image while maintaining the aspect ratio. Otherwise you will see a cropped image. The one which you see when the image is zoomed in when you hover your cursor.

There are many backend minor optimizations too which include lazy load image, zend optimization and other stuffs.

So this is it.

Regards

Nick