Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Andrew Murphy
Front End Web Development Techdegree Graduate 30,657 PointsCustomising Wordpress themes...styling the submit button
Hi, i'm working through the project of customising a Wordpress blog and have hit an issue. Whilst I have changed some features with the css in a child theme, for the life of me I cannot get styling the Submit button under the "subscribe" widget.
The address is http://cd1.53b.myftpupload.com (the domain is a temporary and the blog has no real content yet...)
Any help would be much appreciated. I would like the submit button to be the same yellow and size as the "read more" link under the posts.
Thanks.
13 Answers
Andrew Murphy
Front End Web Development Techdegree Graduate 30,657 PointsThank you for the help...I've changed themes. It's a shame as it was really nice and I had some cool customisations to make. But if it doesn't work with child themes very well then it's no good.
Thank you for your help though.
Zac Gordon
Treehouse Guest TeacherOkay, now it's showing up :)
I think you just need to add input after the ID selection like this
#subscribe-submit {
background: #f4d30;
}
Andrew Murphy
Front End Web Development Techdegree Graduate 30,657 Pointsthat part is showing up, but the #navigation css isn't showing up in the style.css file when inspecting the site, but it is there in the style.css file.
Zac Gordon
Treehouse Guest TeacherHmm, noticed that you changed it. However, it may have just been some CSS override/cascade issues. That often happens with other themes where you need to use higher levels of specificity in order to override certain changes.
Andrew Murphy
Front End Web Development Techdegree Graduate 30,657 PointsThank you for all the help Zac. I have successfully added a full width footer widget thanks to your videos to display all my treehouse badges!
Zac Gordon
Treehouse Guest TeacherAwesome!
Andrew McCormick
17,730 Pointstry
#subscribe-submit > input {
background-color: #F4D30D;
color: #FFFFFF;
}
Andrew Murphy
Front End Web Development Techdegree Graduate 30,657 PointsAndrew Murphy 1,050 less than a minute ago I seem to have more of a problem than I thought...
I am making the edits in style.css in a child theme. I have updated the file on the server with FTP and refresh the page but it doesn't change anything.
I tried this again with a simple CSS (changing the navigation - #navigation - to a different color and uploaded...again no changes. I think what you say will work, I just can't figure out what I'm doing wrong.
Andrew Murphy
Front End Web Development Techdegree Graduate 30,657 PointsI seem to have more of a problem than I thought...
I am making the edits in style.css in a child theme. I have updated the file on the server with FTP and refresh the page but it doesn't change anything.
I tried this again with a simple CSS (changing the navigation - #navigation - to a different color and uploaded...again no changes. I think what you say will work, I just can't figure out what I'm doing wrong.
Zac Gordon
Treehouse Guest TeacherWhen you look in the source code for the site and find the style.css file, can you see the changes reflected in the actual CSS?
Andrew Murphy
Front End Web Development Techdegree Graduate 30,657 PointsDo mean by doing "inspect element" from the page?
Zac Gordon
Treehouse Guest TeacherYes, that way. Or actually click over to view the source code in it's own tab. (cmd + opt + u for mac)
Andrew Murphy
Front End Web Development Techdegree Graduate 30,657 PointsI'm having real trouble finding out... the site is http://cd1.53b.myftpupload.com
I followed your tutorial (which is awsome by the way) but I just can't get my head around it. On google, people say you need to go into the header.php and move the wp_head above the style reference.
I hope you can help. When I make changes in the edit.css from the dashboard it works.
Andrew Murphy
Front End Web Development Techdegree Graduate 30,657 PointsThis is in the child style.css file
/*
Theme Name: GreenChilli Child
Theme URI: http://http://cd1.53b.myftpupload.com/
Author: MyThemeShop
Author URI: http://cd1.53b.myftpupload.com/
Description: Child theme for the greenchilli theme
Template: greenchilli
Version: 1.0
*/
@import url("../greenchilli/style.css");
#subscibe-submit > input {
background-color: #F4D30D; color: #FFFFFF;
}
#navigation {
background: #FFF;
}
Zac Gordon
Treehouse Guest TeacherSo, when I go to the site and look at the CSS file here, http://cd1.53b.myftpupload.com/wp-content/themes/greenchillichild/style.css, I don't see the custom CSS you've added on the server.
Zac Gordon
Treehouse Guest TeacherSide note: Make sure to add three tildas before and after your code when you paste it in to have the proper code display ;) I edited your post and added it in so you can see for future reference ;)
Andrew Murphy
Front End Web Development Techdegree Graduate 30,657 PointsI'm using sublime text to open up the style.css in the child theme, and then refreshing Filezilla and dragging it over to the greenchillichild folder on the server. I believe I'm doing that right.