Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

WordPress How to Make a Website with WordPress Customizing WordPress Themes How to Make Child Themes

Andrew Murphy
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Andrew Murphy
Front End Web Development Techdegree Graduate 30,657 Points

Customising 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
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Andrew Murphy
Front End Web Development Techdegree Graduate 30,657 Points

Thank 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
STAFF
Zac Gordon
Treehouse Guest Teacher

Okay, 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
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Andrew Murphy
Front End Web Development Techdegree Graduate 30,657 Points

that 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
Zac Gordon
Treehouse Guest Teacher

Hmm, 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 McCormick
Andrew McCormick
17,729 Points

try

#subscribe-submit > input {
background-color: #F4D30D;
color: #FFFFFF;
}
Andrew Murphy
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Andrew Murphy
Front End Web Development Techdegree Graduate 30,657 Points

Andrew 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
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Andrew Murphy
Front End Web Development Techdegree Graduate 30,657 Points

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.

Zac Gordon
STAFF
Zac Gordon
Treehouse Guest Teacher

When 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?

Zac Gordon
STAFF
Zac Gordon
Treehouse Guest Teacher

Yes, that way. Or actually click over to view the source code in it's own tab. (cmd + opt + u for mac)

Andrew Murphy
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Andrew Murphy
Front End Web Development Techdegree Graduate 30,657 Points

I'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
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Andrew Murphy
Front End Web Development Techdegree Graduate 30,657 Points

This 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
STAFF
Zac Gordon
Treehouse Guest Teacher

So, 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
STAFF
Zac Gordon
Treehouse Guest Teacher

Side 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
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Andrew Murphy
Front End Web Development Techdegree Graduate 30,657 Points

I'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.