4 Weeks – Implementing and Customizing a Child Theme

To begin implementing the child theme I installed the “One-Click Child Theme” plugin and activated it.

Child-Theme-1

I then selected the theme that I wanted to make a child of “Deejay” and selected “Child Theme”.

Child-Theme-2

I then entered the information for my child theme and created it.

Child-Theme-3

After I created the child theme, I activated it.

Child-Theme-4

Now that I have created the child theme. I then added additional CSS through the them customise window.

css1

The first alteration I made was adding a fixed navigation bar. The fixed navigation bar ensures that user can navigate throughout the website quickly and easily no matter where they are on the page. Because the navigation bar is fixed to the view port, the main website title div is not aware of the space it takes up. This caused it to fall behind the navigation bar. To fix this I added a top padding of 50px to the website title classes.

Before:

css6.PNG

After:

css2

I also changed the hover effect color from purple to cyan to give the website a more distinct look and add to the visual metaphor. I did this by filtering the hover effects within chromes inspector and copying them over with a change of border color.

Before:

css7.PNG

After:

css3

I then made my preview text on my blog page easier to read by changing the text color from grey to white. I first had to identify the class that was used through the inspector and then alter that to be white. However, because this was added through a plugin and I wasn’t altering the plugin CSS directly I had to put the “!important” syntax in to ensure the change was made.

Before:

css8.PNG

After:

css4

Lastly I altered the look of my website on smaller devices. I did this by locating the media query that my site users and altering the paragraph and entry-title CSS at that size. I changed the title text to the color of my main website title and also changed the paragraph text to white.

Before:

css9.PNG

After:

css5

Advertisements
4 Weeks – Implementing and Customizing a Child Theme

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s