Post 10 | Child theme & Implementing page style with CSS | Project 3
Child theme & Implementing page style with CSS
In this blog, I detail how I made a child theme and used googles inspect element feature to edit and retrieve code to change my themes layout to better suit the website beyond the frameworks regular requirements.
The above three images show me folder layout after setting it up to incorporate a child theme, picture 1 is of the contents inside style.css, settings my the folder wpChildTheme up like this allows it to inherit all the attributed from the selected theme, in this case "vantage".
Here is the newly created child theme on the theme selection page.
Above I have opened the new child theme in googles inspect element view to ideally find some code to configure the header in a more favourable position for the banner picture I have been provided with.
Circled in red is some code I found that affects the padding around the heading area of the page.
Next, I implemented this and played around with the values and found it to increase the size of the banner to be more ideal.
Here I have added the websites content to see if this works in the way I and hoped. Increasing the padding along the top portion of the screen has indeed created more space to show the rest of the banner image, although not completely ideal this is still better than before.
My next desire was to get the sites Logo to position better for mobiles considering once the site was switched to a mobile mode it squashed the logo over the header banners text, my other approach to this was going to be eliminating the banner image from mobile view entirely.
Still unsure of what path I will take I have tried making the logo fit better first which appeared to not be an easy task with the given constraints.
Shown in red is the code I added to my additional CSS in order to get it to change to align to the left while the pixel width is under 680px, this helped move the logo away from the banner text while viewed on mobile devices.
Shown above in red is the code I next edited to further help the banner have more volume to it, showing off more of the banner pictures content.
Using this custom css feature I can help myself work around this themes constraints before jumping the gun and hunting for a new one entirely.
In this blog, I detail how I made a child theme and used googles inspect element feature to edit and retrieve code to change my themes layout to better suit the website beyond the frameworks regular requirements.
The above three images show me folder layout after setting it up to incorporate a child theme, picture 1 is of the contents inside style.css, settings my the folder wpChildTheme up like this allows it to inherit all the attributed from the selected theme, in this case "vantage".
Here is the newly created child theme on the theme selection page.
Above I have opened the new child theme in googles inspect element view to ideally find some code to configure the header in a more favourable position for the banner picture I have been provided with.
Circled in red is some code I found that affects the padding around the heading area of the page.
Next, I implemented this and played around with the values and found it to increase the size of the banner to be more ideal.
Here I have added the websites content to see if this works in the way I and hoped. Increasing the padding along the top portion of the screen has indeed created more space to show the rest of the banner image, although not completely ideal this is still better than before.
Still unsure of what path I will take I have tried making the logo fit better first which appeared to not be an easy task with the given constraints.
Shown in red is the code I added to my additional CSS in order to get it to change to align to the left while the pixel width is under 680px, this helped move the logo away from the banner text while viewed on mobile devices.
Shown above in red is the code I next edited to further help the banner have more volume to it, showing off more of the banner pictures content.
Using this custom css feature I can help myself work around this themes constraints before jumping the gun and hunting for a new one entirely.
Comments
Post a Comment