To begin implementing the child theme I installed the “One-Click Child Theme” plugin and activated it.
I then selected the theme that I wanted to make a child of “Deejay” and selected “Child Theme”.
I then entered the information for my child theme and created it.
After I created the child theme, I activated it.
Now that I have created the child theme. I then added additional CSS through the them customise window.
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:
After:
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:
After:
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:
After:
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:
After:
