alawtonwordpress

OK, I figured this one out on my own. For all you WP newbies (like me) the solution was a breakthrough for debugging the rest of my wordpress site.

The short answer: because I’m using the BuddyPress plugin, the bp.css took over the styling of the Log In button.

The long answer: I strongly recommend that all you WP newbies (like me) start using the Chrome browser and right-click on any element that isn’t looking or working the way that you want and select the “Inspect element” option.

This will cause the Chrome browser to display an “Inspect element” window pane below the web page that you’re looking at, that shows the html code generated by WP on the left side, and the calls to the css on the right side.

You can inspect (by hovering and clicking with your cursor) any part of the html code displayed on the left side of this window and then discover AND manipulate the css code in the right side. As you hover and select html code, the appropriate section of the web page being displayed above will be highlighted in color and also display a descriptive html tag.

In the right side of this Inspection pane, each major section of the css will include a link (in the upper right corner) to the EXACT url of the specific css file being called.

Using this “Inspect element” tool made it possible for me to discover that the BuddyPress css (bp.css) was styling the Log In button, instead of the Theme My Login css. I was able to change the color of the background and the styling of the text so that it was now perfectly visible.

I can’t overstate what a breakthrough using the “Inspect element” tool was for me. I hope this post was helpful to you.

Cheers,

Andrew