Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
Hi Oorhai,
When themes are updated, which they should be, all of the files within the theme are overwritten with new files.
This means any modification made to those files will be overwritten.
To avoid this, you can work in a Child Theme environment.
I’ve downloaded the Green Stimulus theme and I’ve hacked header.php file to remove all trace of the twitter piece which takes up half the page below the slider
You can still do this, but make sure you take a copy of the header.php
file and paste it in your Child Theme directory. Then you can modify that header.php
file (within your Child Theme).
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
Now I want to increase the width of the introductory text so its the full width of the slider image
Try adding this CSS;
#slideshow .slide-caption {
width: 100%;
}
Thread Starter
oorhai
(@oorhai)
Thanks for the advice on the Child Theme. I’ll read up about that. For now I’ve simply cut the original code and saved it on my laptop for reference. And I do have the original theme as well which I can upload again if I make a complete mess of it!
I’m not trying to increase the size of the slider images. The piece below the slider has an area for Introductory Text which takes up only half the page width. The other half had space for a twitter feed which I have cut off. The page however still reserves that space for the twitter feed. I’m just not sure how to increase the size of the Introductory Text Box so it takes up this (now) empty space as well.
I’m happy to pop the code over to you if there is a convenient way to do that. Thanks for holding my hand as I walk through this.
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
I’m just not sure how to increase the size of the Introductory Text Box so it takes up this (now) empty space as well.
I’m using the Green Stimulus demo website for reference and that code I recommend on the post prior to this expanded the slider’s intro text to full width.
If you’re having issues with that code, may you post a link to your website?
Thread Starter
oorhai
(@oorhai)
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
Try this CSS;
#intro-text {
width: 100%;
}
Maybe remove that right border too?
#intro-text {
width: 100%;
border-right: 0;
}
Thread Starter
oorhai
(@oorhai)
There’s style.css and custom.css
custom.css has the #intro-text code. I made first one and then the second change you suggested and it made no change to the website. What am I missing?
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
Add it in the style.css file of your Child Theme.
Thread Starter
oorhai
(@oorhai)
Thanks. That worked! I’ll have to start reading up about html coding and style sheets. Any recommendations?
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
W3Schools is a handy resource because it has a try it section which lets you try out exampled CSS code.
I use Google Chrome’s built-in developer tool for debugging or trying out CSS. You can add/modify/remove CSS on the webpage temporarily to just try things out.
Thread Starter
oorhai
(@oorhai)
Could I have gotten rid of the twitter feed section on the style sheet without having to hack header.php?
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
You could have displayed it none with CSS, but modifying files is fine as long as it’s done within a Child Theme environment.
Thread Starter
oorhai
(@oorhai)
what would that code be? Maybe more elegant that what I’ve done and easier to keep track of.
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
Thread Starter
oorhai
(@oorhai)
I am trying to follow your advice and create a child theme to make all of the changes discussed above. I used the one-click child theme plugin and created Son of Green Stimulus. The webpage looks nothing like the original. Why?