Confused about changing code in WordPress PHP and CSS pages

I have redesigned my business site yet again and am working on getting my blog integrated using the new look. I belong to Lynda.com and have watched a great tutorial on Dreamweaver CS5 and WordPress. It is really cool how you can work on the pages in Dreamweaver and see the changes as they happen with the new inspect feature for the CSS. However, the tutorial shows how to change things like the header. My new style really doesn’t have a header so I am confused as to how to integrate the new look. The new site is at www.foxdenwebsolutions.com/foxden2/index.html. You can see the code there. I have a main container and a menu container for the top nav. Then the logo and then the content area and finally the footer. I know that WordPress brings in the header PHP page and the footer PHP page. There is a lot in the style.css page that is very confusing to me. Can anyone possibly help me through this so that I can get the blog to look like the rest of the site? I can post any code that needs to be seen. I am just not sure what to do with the header stuff since it doesn’t exist on the main site. I am so confused!

Thank you again, Ralph. That worked. I believe I have tweaked all the pages to fit my design so now I need to practice some more with coming up with new designs so I can get more comfortable with the files that need to be changed in order to change a design. I have downloaded a couple of different templates that I will tear apart to see how they were done.

The conflict is on line 369 of your style.css

Add this in somewhere to get what you want:

.commentmetadata a {
    color:#000;
}

Sorry I forgot to approve the comment. Now you can see it. The date and time stamp is what is not showing up in black. When you hover over it you can see it. I am not sure where to change the code to get this to show in black type.

I see no comments for that post. And I do use Firebug. It’s important when asking for help to make things as easy as possible for those trying to help out. :wink:

This is on the comment left for Best CSS forum. If you use FF and Firebug you can find it.

Where does that appear on your site? I can’t find it anywhere.

OK, you just need a more specific rule for the comment fields, like so:

#commentform input {
    color: #000;
}

Ok every time I change something it breaks something else…oh the joy of coding and testing! I added a test comment under Best forum site. The input boxes for the name and email address have white text but when I change it, it breaks the white text in the search box at the top of the sidebar. This is really driving me nuts. I am wondering if I need to break up my css code more since there is a lot that is grouped together, such as small, #sidebar ul ul li, #sidebar ul ol li, .nocomments, .postmetadata, blockquote, strike {}.

Try targeting the anchor inside there. That’s ultimately what matters because most likely you have specified a universal anchor color somewhere else in your CSS.

I am sorry…I added a test comment locally and noticed the problem with the text. I will add a test comment to the live version so I can see if it still exists.

Ok got that fixed. Now the only thing I see that I need to fix is the commentmetadata. Here is the HTML code.


<div class="comment-meta commentmetadata"><a href="http://foxdenwebsolutions.com/blog/?p=10&amp;cpage=1#comment-2">
			June 25, 2010 at 10:12 am</a>		</div>

Here is the CSS code -


.commentmetadata {
margin: 0;
display: block;
color: #000;
}
.comment-meta commentmetadata {
color: #000;
}



Nothing I do seems to work to make this black text.

I am experiencing an unrelated problem with my index.html page. I have 4 images that I want to link to my portfolio page. I set it up as <p class =“img”> and in the css put .img {border: none; } but the border is still there. I looked through the posts here and tried a few suggestion but nothing worked. Any other suggestions as to correct this with CSS only? I did use border none in the HTML code but I am using XHTML Strict and it yells at me. :wink: It only shows in IE8 and Firefox.

This is coming along quite nicely but I am stuck again. I have posted a test comment and since the main text is #fff and the comment box has a white background, the text is not showing up. I have looked through everything using Firebug in Firefox but cannot find what I need to tweak to have the date stamp show up as black text. Here is the code that I got off of Firebug that I need to change somehow.


<div class="comment-meta commentmetadata"><a href="http://127.0.0.1/foxdenwebsolutions/foxden/?p=6&amp;cpage=1#comment-2">June 23, 2010 at 2:55 pm</a>&nbsp;&nbsp;<a class="comment-edit-link" href="http://127.0.0.1/foxdenwebsolutions/foxden/wp-admin/comment.php?action=editcomment&amp;c=2" title="Edit comment">(Edit)</a></div>

I got the edit link to black but when I hover it turns white. Need to change that as well. Any suggestions on whether I need to add code or where to change the code. Here is all the CSS used for the blog


/*
Theme Name: Foxden
Theme URI: http://wordpress.org/
Description: A WordPress theme based on the famous <a href="http://binarybonsai.com/kubrick/">Kubrick</a>.
Version: 1.0
Author: Cori Foxworthy
Author URI: http://foxdenwebsolutions.com/
Tags: custom header, fixed width, two columns, widgets

	Foxden v 1.0
	 http://binarybonsai.com/kubrick/

	This theme was designed and built by Cori Foxworthy,
	whose blog you will find at http://foxdenwebsolutions.com/

	The CSS, XHTML and design is released under GPL:
	http://www.opensource.org/licenses/gpl-license.php

*/



* {
	margin: 0;
	padding: 0;
}
body {
	background-color: #6b5845;
}
p {
	font-family: Tahoma, "Trebuchet MS";
	font-size: 16px;
	color: #fff;
	margin-left: 20px;
	margin-right: 10px;
}
h1 {
	font-size: 20px;
	background-image: url(images/logo1.png);
	background-repeat: no-repeat;
	height: 222px;
	width: 179px;
	position: relative;
	left: 20px;
	text-indent: -9999px;
	font-family: Tahoma, "Trebuchet MS";
}
h2 {
	font-size:18px;
	color: #fff;
	font-family: Tahoma, "Trebuchet MS";
	text-align: center;
}
h3 {
	font-size:17px;
	color: #fff;
	font-family: Tahoma, "Trebuchet MS";
	text-align: center;
}
#main_container {
	background-image: url(images/main_bg.jpg);
	background-repeat: repeat-y;
	width: 1024px;
	margin: auto;
}
#blog_container {
	background-image: url(images/blog_bg.jpg);
	background-repeat: repeat-y;
	width: 1024px;
	margin: auto;
}
#menu_container {
	height: 39px;
	margin: auto;
	width: 1024px;
}
/* Sprite Setup */ 

ul#menu {
	list-style: none;
	margin: 0 auto;
	width:1024px;
	height: 39px;
}
ul#menu li a {
	float: left;
	height: 39px;
	text-indent: -9999px;
}
/* *    Normal Links */ 
ul#menu li#menuHome a {
	width: 110px;
	background:url(images/sprite.png) no-repeat 0px 0px;
}
ul#menu li#menuHistory a {
	width: 119px;
	background:url(images/sprite.png) no-repeat -110px 0px;
}
ul#menu li#menuHelp a {
	width: 257px;
	background:url(images/sprite.png) no-repeat -229px 0px;
}
ul#menu li#menuPrice a {
	width: 198px;
	background:url(images/sprite.png) no-repeat -486px 0px;
}
ul#menu li#menuPortfolio a {
	width: 120px;
	background:url(images/sprite.png) no-repeat -684px 0px;
}
ul#menu li#menuContact a {
	width: 120px;
	background:url(images/sprite.png) no-repeat -804px 0px;
}
ul#menu li#menuBlog a {
	width: 100px;
	background:url(images/sprite.png) no-repeat -924px 0px;
}
/* *    Hover Links */ 
ul#menu li#menuHome a:hover {
	background-position: 0 -38px;
}
ul#menu li#menuHistory a:hover {
	background-position: -110px -38px;
}
ul#menu li#menuHelp a:hover {
	background-position: -229px -38px;
}
ul#menu li#menuPrice a:hover {
	background-position: -486px -38px;
}
ul#menu li#menuPortfolio a:hover {
	background-position: -684px -38px;
}
ul#menu li#menuContact a:hover {
	background-position: -804px -38px;
}
ul#menu li#menuBlog a:hover {
	background-position: -924px -38px;
}
/* *    Clicked Links */ 
ul#menu li#menuHome a:active {
	background-position: 0 -76px;
}
ul#menu li#menuHistory a:active {
	background-position: -110px -76px;
}
ul#menu li#menuHelp a:active {
	background-position: -229px -76px;
}
ul#menu li#menuPrice a:active {
	background-position: -486px -76px;
}
ul#menu li#menuPortfolio a:active {
	background-position: -684px -76px;
}
ul#menu li#, menuContact a:active {
 background-position: -804px -76px;
}
ul#menu li#menuBlog a:active {
	background-position: -924px -76px;
}
/**  End Sprite Menu*/


#header_container {
	margin: auto;
}
#content_top {
	background-image:url(images/content_top.png);
	width: 870px;
	height: 75px;
	margin-left: 75px;
	margin-top: -90px;
}
#content_mdl {
	background-image:url(images/content_mdl.png);
	width: 870px;
	margin-left: 75px;
	overflow: hidden;
}
#content {
	float: left;
	margin-left: 75px;
	width: 450px;
}
#page_content {
	float: left;
	margin-left: 75px;
	width: 700px;
}
#content_btm {
	background-image:url(images/content_btm.png);
	width: 870px;
	height: 25px;
	margin-left: 75px;
	margin-bottom: 75px;
}
.form {
	text-align: center;
	font-family: Tahoma, "Trebuchet MS";
	font-size: 20px;
	color: #FFF;
	text-decoration: none;
}
input {
	background-color:#fff;
	border:1px #fff solid;
	font-family: Tahoma, "Trebuchet MS";
	font-size: 17px;
	color: #fff;
}
#footer_container {
	clear: both;
	background:url(images/footer_bg.jpg) repeat-x;
	height: 100px;
	margin: auto;
}
#footer {
	clear: both;
	height: 222px;
	width: 1024px;
	margin: auto;
	background-image: url(images/footer_bg.jpg);
	background-repeat: repeat-x;
}
#footer_nav {
	float: right;
	padding-right: 30px;
	text-decoration: none;
	margin-top: -30px;
	font-family: Tahoma, "Trebuchet MS";
}
#footer_nav li {
	font-size: 12px;
	display: inline;
}
#footer_nav ul li a {
	color: #fff;
	text-decoration: none;
}
#footer_nav ul li a:hover {
	color: #cd9767;
	text-decoration: none;
}
#footenav ul li a:active {
	color: #cd9767;
	text-decoration: none;
}
#footer p {
	padding: 18px;
	font-family: Tahoma, "Trebuchet MS";
	padding-left: 40px;
	color: #C0BDAC;
	font-size: small;
}
#footer li {
	color: #C0BDAC;
}
/* Begin Typography & Colors */

.widecolumn .entry p {
	font-size: 1.05em;
	font-family: Tahoma, "Trebuchet MS";
}
.narrowcolumn .entry, .widecolumn .entry {
	line-height: 1.4em;
	font-family: Tahoma, "Trebuchet MS";
}
.widecolumn {
	line-height: 1.6em;
	font-family: Tahoma, "Trebuchet MS";
}
.narrowcolumn .postmetadata {
	text-align: center;
	font-family: Tahoma, "Trebuchet MS";
	color: #000;
}
.thread-alt {
	background-color: #f8f8f8;
}
.thread-even {
	background-color: white;
}
.depth-1 {
	border: 1px solid #ddd;
}
.even, .alt {
	border-left: 1px solid #ddd;
}
small {
	font-family: Tahoma, "Trebuchet MS";
	font-size: 0.9em;
	line-height: 1.5em;
}
h2.pagetitle {
	font-size: 1.6em;
	font-family: Tahoma, "Trebuchet MS";
}
#sidebar h2 {
	font-family: Tahoma, "Trebuchet MS";
	font-size: 1.2em;
}
.entry p a:visited {
	color: #b85b5a;
}
.sticky {
	background: #f7f7f7;
	padding: 0 10px 10px;
}
.sticky h2 {
	padding-top: 10px;
}
.commentlist li, #commentform input, #commentform textarea {
	font: 0.9em Tahoma, "Trebuchet MS";
}
.commentlist li ul li {
	font-size: 1em;
	font-family: Tahoma, "Trebuchet MS";
}
.commentlist li {
	font-weight: bold;
	font-family: Tahoma, "Trebuchet MS"
	}
.commentlist li .avatar {
	float: right;
	border: 1px solid #eee;
	padding: 2px;
	background: #fff;
}
.commentlist cite, .commentlist cite a {
	font-weight: bold;
	font-style: normal;
	font-size: 1.1em;
}
.commentlist p {
	font-weight: normal;
	line-height: 1.5em;
	text-transform: none;
	color: #000;
	
}
#commentform p {
	font-family: Tahoma, "Trebuchet MS";
	
}
.commentmetadata {
	font-weight: normal;
	color: #000;
}
#sidebar {
	font-family: Tahoma, "Trebuchet MS";
	float: right;
	margin-right: 10px;
}
small, #sidebar ul ul li, #sidebar ul ol li, .nocomments, .postmetadata, blockquote, strike {
	color: #fff;
	margin-left: 45px;
	font-family: Tahoma, "Trebuchet MS";
}
code {
	font-family: Tahoma, "Trebuchet MS";
}
acronym, abbr, span.caps {
	font-size: 0.9em;
	letter-spacing: .07em;
}
a, h2 a:hover, h3 a:hover {
	color: #FFF;
	text-decoration: none;
}
a:hover {
	color: #000;
	text-decoration: underline;
}
#wp-calendar #prev a, #wp-calendar #next a {
	font-size: 9pt;
}
#wp-calendar a {
	text-decoration: none;
}
#wp-calendar caption {
	font: bold 1.3em Tahoma, "Trebuchet MS";
	text-align: center;
}
#wp-calendar th {
	font-style: normal;
	text-transform: capitalize;
}
/* End Typography & Colors */
/* Begin Structure */

.narrowcolumn {
	float: left;
	padding: 0 0 20px 45px;
	margin: 0px 0 0;
	width: 450px;
}
.widecolumn {
	padding: 10px 0 20px 0;
	margin: 5px 0 0 150px;
	width: 450px;
}
.post {
	margin: 40px 0 40px;
	text-align: justify;
}
.post hr {
	display: block;
}
.widecolumn .post {
	margin: 0;
}
.narrowcolumn .postmetadata {
	padding-top: 5px;
}
.widecolumn .postmetadata {
	margin: 30px 0;
}
.widecolumn .smallattachment {
	text-align: center;
	float: left;
	width: 128px;
	margin: 5px 5px 5px 0px;
}
.widecolumn .attachment {
	text-align: center;
	margin: 5px 0px;
}
.postmetadata {
	clear: both;
}
.clear {
	clear: both;
}
/* End Structure */



/*	Begin Headers */

h2.pagetitle {
	margin-top: 30px;
	text-align: center;
}
#sidebar h2 {
	margin: 0;
	padding: 0;
}
h3 {
	padding: 0;
	margin: 30px 0 0;
}
h3.comments {
	padding: 0;
	margin: 40px auto 20px;
}
/* End Headers */



/* Begin Images */
p img {
	padding: 0;
	max-width: 100&#37;;
	margin-left: 10px;
}
/*	Using 'class="alignright"' on an image will (who would've
	thought?!) align the image to the right. And using 'class="centered',
	will of course center the image. This is much better than using
	align="center", being much more futureproof (and valid) */

img.centered {
	display: block;
	margin-left: auto;
	margin-right: auto;
}
img.alignright {
	padding: 4px;
	margin: 0 0 2px 7px;
	display: inline;
}
img.alignleft {
	padding: 4px;
	margin: 0 7px 2px 0;
	display: inline;
}
.alignright {
	float: right;
}
.alignleft {
	float: left;
}
/* End Images */



/* Begin Lists

	Special stylized non-IE bullets
	Do not work in Internet Explorer, which merely default to normal bullets. */

html>body .entry ul {
	margin-left: 0px;
	padding: 0 0 0 30px;
	list-style: none;
	padding-left: 10px;
	text-indent: -10px;
}
html>body .entry li {
	margin: 7px 0 8px 10px;
}
.entry ul li:before, #sidebar ul ul li:before {
	content: "\\00BB \\0020";
}
.entry ol {
	padding: 0 0 0 35px;
	margin: 0;
}
.entry ol li {
	margin: 0;
	padding: 0;
}
.postmetadata ul, .postmetadata li {
	display: inline;
	list-style-type: none;
	list-style-image: none;
}
#sidebar ul, #sidebar ul ol {
	margin: 0;
	padding: 0;
}
#sidebar ul li {
	list-style-type: none;
	list-style-image: none;
	margin-bottom: 15px;
}
#sidebar ul p, #sidebar ul select {
	margin: 5px 0 8px;
}
#sidebar ul ul, #sidebar ul ol {
	margin: 5px 0 0 10px;
}
#sidebar ul ul ul, #sidebar ul ol {
	margin: 0 0 0 10px;
}
ol li, #sidebar ul ol li {
	list-style: decimal outside;
}
#sidebar ul ul li, #sidebar ul ol li {
	margin: 3px 0 0;
	padding: 0;
}
/* End Entry Lists */



/* Begin Form Elements */
#searchform {
	margin: 10px auto;
	padding: 5px 3px;
	text-align: center;
}
#sidebar #searchform #s {
	width: 108px;
	padding: 2px;
	color: #000;
}
#sidebar #searchsubmit {
	padding: 1px;
	background-color: #000;
}
.entry form { /* This is mainly for password protected posts, makes them look better. */
	text-align:center;
}
select {
	width: 130px;
}
#commentform input {
	width: 170px;
	padding: 2px;
	margin: 5px 5px 1px 0;
}
#commentform {
	margin: 5px 10px 0 0;
}
#commentform textarea {
	width: 100%;
	padding: 2px;
}
#respond:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}
#commentform #submit {
	margin: 0 0 5px auto;
	float: right;
	background-color: #000;
}
/* End Form Elements */



/* Begin Comments*/
.alt {
	margin: 0;
	padding: 10px;
}
.commentlist {
	padding: 0;
	text-align: justify;
}
.commentlist li {
	margin: 15px 0 10px;
	padding: 5px 5px 10px 10px;
	list-style: none;
}
.commentlist li ul li {
	margin-right: -5px;
	margin-left: 10px;
}
.commentlist p {
	margin: 10px 5px 10px 0;
}
.children {
	padding: 0;
}
#commentform p {
	margin: 5px 0;
	
}
.nocomments {
	text-align: center;
	margin: 0;
	padding: 0;
}
[COLOR="red"].commentmetadata {
	margin: 0;
	display: block;
	color: #000;
}
.comment-meta commentmetadata  {
	color: #000;	
}[/COLOR][COLOR="red"].comment-edit-link  {
	color: #000;	
}[/COLOR]
[COLOR="Red"].comment-edit-link a:hover  {
	color: #cd9767;	
}[/COLOR]/* End Comments */



/* Begin Sidebar */
#sidebar {
	padding: 0 10px 10px 0;
	width: 300px;
	float: right;
}
#sidebar form {
	margin: 0;
}
/* End Sidebar */



/* Begin Calendar */
#wp-calendar {
	empty-cells: show;
	margin: 10px auto 0;
	width: 155px;
}
#wp-calendar #next a {
	padding-right: 10px;
	text-align: right;
}
#wp-calendar #prev a {
	padding-left: 10px;
	text-align: left;
}
#wp-calendar a {
	display: block;
}
#wp-calendar caption {
	text-align: center;
	width: 100%;
}
#wp-calendar td {
	padding: 3px 0;
	text-align: center;
}
#wp-calendar td.pad:hover { /* Doesn't work in IE */
	background-color: #fff;
}
/* End Calendar */



/* Begin Various Tags & Classes */
acronym, abbr, span.caps {
	cursor: help;
}
acronym, abbr {
	border-bottom: 1px dashed #999;
}
blockquote {
	margin: 15px 30px 0 10px;
	padding-left: 20px;
	border-left: 5px solid #ddd;
}
blockquote cite {
	margin: 5px 0 0;
	display: block;
}
.center {
	text-align: center;
}
.hidden {
	display: none;
}
.screen-reader-text {
	position: absolute;
	left: -1000em;
}
hr {
	display: none;
}
a img {
	border: none;
}
.navigation {
	display: block;
	text-align: center;
	margin-top: 10px;
	margin-bottom: 60px;
	font-family: Tahoma, "Trebuchet MS";
}
/* End Various Tags & Classes*/



/* Captions */
.aligncenter, div.aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
}
.wp-caption {
	border: 1px solid #ddd;
	text-align: center;
	background-color: #f3f3f3;
	padding-top: 4px;
	margin: 10px;
}
.wp-caption img {
	margin: 0;
	padding: 0;
	border: 0 none;
}
.wp-caption p.wp-caption-text {
	font-size: 11px;
	line-height: 17px;
	padding: 0 4px 5px;
	margin: 0;
}
/* End captions */

The code in red is where I either added code or changed code but it didn’t all work correctly.

Unfortunately my site is down at the moment. I contacted my hosting company to check on this as my other sites with the same company are fine. It should be under the same link. http://foxdenwebsolutions.com/blog.

It’s much easier just to check this online, but I can’t get your page to load. Can you repost the link?

NM about the image link…fixed it! Changed it back to <p> and in the CSS put a img {border: none; }

Is the problem with the white text fixed now? Seems OK to me from a glance, but just checking. :slight_smile:

I have looked through the folder that is setup as my theme and am not sure which pages need to be tweaked to incorporate my theme. I have pulled page.php, single.php, search.php, links.php, comments.php, archives.php, archive.php, and comments-popup.php into Dreamweaver. Are these the pages that I need to change? Are there any more? I also have image.php but not sure what to do with that. I have changed the header.php and footer.php pages and don’t see that I need to do anything with the sidebar.php page for the theme. I believe that page is for adding items to the sidebar through appearance>widgets in the admin panel. Please let me know which pages I need to tweak so that the theme runs through all the pages of the theme.

Ok next dumb question…how do I identify the posts in the CSS and on the PHP page (which PHP page and what code do I change)?