LAB #3
1. Edit and use an existing theme in the class framework.
As taught in class I've located an add-on to use for making a child theme version of my current template for me to tinker around with & edit.
Here is the new plugin, activated in my plugin manager, the next step is to try it out!

Here is a before & after of my theme folders after creating the new child theme, the plugin has created a new folder replicating the original themes content.
Here I am using Google Chromes developer tool utility to inspect the code behind the theme, using this I can discern which code is affecting which elements even though I am not familiar with the front end languages.
2. Page layout and style with CSS, HTML, JavaScript framework, Bootstrap.
3. Use and edit a code from a library within the framework, adding a responsive slider using JQuery or similar.
Here is a couple pictures I snipped in my process of installing a slider using the Jquery library, this was a rather simple process whilst following a tutorial, it shows up in my side bar as the "slides" tab.

4. Extend your knowledge ‐ read and reflect other approaches.
As taught in class I've located an add-on to use for making a child theme version of my current template for me to tinker around with & edit.
Above I have found an add-on that makes creating a child theme from a chosen template a simple process.
Here is the new plugin, activated in my plugin manager, the next step is to try it out!
After navigating to the theme I want to create a child copy of, I'll be using the current theme for my current web page as this is the most familiar for me to work with.
Here is the first step in the creation process, I can change the name & the description of the child theme before creating it
Here is the theme display after I have created the new child theme.Here is a before & after of my theme folders after creating the new child theme, the plugin has created a new folder replicating the original themes content.
Here is inside the new child themes folder.
Here I am using Google Chromes developer tool utility to inspect the code behind the theme, using this I can discern which code is affecting which elements even though I am not familiar with the front end languages.
2. Page layout and style with CSS, HTML, JavaScript framework, Bootstrap.
Here I am closely inspecting for which code is used to edit the title text's color, this process appeared complex at first with all of the separate levels of inheritance going on but once I had identified which pieces of code match with the corresponding elements on the page it became simple to take out the part I wanted.
Here I have taken the title color portion of the code out using developer tools & placed it into the additional CSS section within my WordPress dashboard, except I have change some keywords to make it blue instead. I found this a neat method for editing the CSS of my child theme with ease.3. Use and edit a code from a library within the framework, adding a responsive slider using JQuery or similar.
Here is a couple pictures I snipped in my process of installing a slider using the Jquery library, this was a rather simple process whilst following a tutorial, it shows up in my side bar as the "slides" tab.
4. Extend your knowledge ‐ read and reflect other approaches.
Your blogs are awsome. Nothing in part 4? Happy to wait for it if you keep the quality up.
ReplyDelete