I installed firebug and was able to find the code that needs to be changed, but I have no way of saving it without overriding my theme’s stylesheet.
Firebug does not allow you to save changes to any actual files on your web site. Once you know what changes you want to make by experimenting with firebug in your browser, you still have to commit those changes to the actual files on your site by using an ftp client, file manager, or whatever editing method you normally use.
Change the code in your style sheet to reflect the changes you made using firebug. In the case of a child theme, be sure to make the edits in the style sheet for the child theme, not the parent theme. Don’t forget to make backup copies of the files you plan to edit, before you actually change anything.
Yeah, I know. But my theme doesn’t have the FULL stylesheet available for editing in the editor. I couldn’t have even seen the code without using firebug, since the stylesheet is imported using this code:
/* Import Stylesheets
-----------------------------------------------------------*/
@import url("stylesheets/master.css");
/* Required WordPress Classes, don't remove these.
-----------------------------------------------------------*/
.aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
}
.alignleft { float: left; }
.alignright { float: right; }
So I’m wondering how I can completely remove the original stylesheet that I can see via firebug and replace it with the modified version. Do I just copy each line of code, line by line, and place it in this stylesheet.php file? Or is there some other way?
Yeah, I know. But my theme doesn’t have the FULL stylesheet available for editing in the editor.
If you completely remove the parent themes style sheet, not only will the parent theme no longer work, but it makes the child theme not work anymore either. It doesn’t need the full style sheet. The child imports the style sheet from the parent theme. You make the child theme look different by adding your changes to the style sheet in the child theme. Not by altering the parent themes style sheet.
That’s why its a child theme. No modifications to the parent theme are required, and the parent theme can be updated without overwriting your child theme.
Hey Clayton,
My problem was that I didn’t know how to get to my theme’s master stylesheet & I had no idea about child themes. It took me awhile to figure out 😛
I have another question though, if you’re still around: I created a child theme and imported the master stylesheet in it. But there’s code from the imported stylesheet that I want to DELETE. I copy+pasted the part of the master stylesheet that I deleted lines of code from, but it’s not showing up on my webpage (and I already activated the child theme). My current code is this:
/*Override Master Post Header
---------------------------------------*/
.entry h2.title {
font-size: 1.6em;
margin: 0;
padding: 0 0 10px 0;
}
.entry h2 a:link, .entry h2 a:visited {
color: #444;
text-shadow: 0 1px 0 #fff;
}
.entry h2 a:hover { color: #285a86; }
}
a:hover img.index-post-thm { -moz-transform: rotate(-2deg); -
webkit-transform: rotate(-2deg); }
}
I edited that from the master stylesheet that looks like this:
/*Post Header
---------------------------------------*/
.entry h2.title {
font-size: 1.6em;
margin: 0;
padding: 0 0 10px 0;
}
.entry h2 a:link, .entry h2 a:visited {
color: #444;
text-shadow: 0 1px 0 #fff;
}
.entry h2 a:hover { color: #285a86; }
.post .date {
position: absolute;
left: -93px;
width: 73px;
height: 73px;
text-align: center;
background: rgba(0, 0, 0, .15);
}
.post .date div {
font-size: 1.3em;
color: #efefef;
font-weight: bold;
letter-spacing: 2px;
}
.post .date .day {
margin-top: 15px;
font-size: 2.4em;
}
.post .date .month {
text-transform: uppercase;
font-weight: normal;
color: #ccc;
}
a:hover img.index-post-thm { -moz-transform: rotate(-2deg); -webkit-transform: rotate(-2deg); }
The code I deleted from the master stylesheet creates a date section on my category pages. I wasn’t able to figure out how to delete sections form the master stylesheet (in the child theme) without just editing/adding code.
Thanks again for your help.
