CSS:
http://www.mfr.f2s.com/graphicalcss/
The html thing – edit wp-comment.php if you have full comments, or wp-comments-popup.php and just delete that line from the code 🙂
I did check out the tutorial which seems pretty straightforward, however it says to open your wp-layout.css file to edit the comment stuff. My file looks like this:
/* Whole page
——————————————– */
/* Image from sxc.hu (http://www.sxc.hu/browse.phtml?f=view&id=73842)
Thanks marcoaor! */
body {
background-image: url(“graphics/kat.jpg”);
background-attachment: fixed;
background-position: bottom left;
background-repeat: no-repeat;
}
#rap {
margin-left: 35%;
margin-right: 60px;
padding: 0.5em;
}
#rap * {
-moz-opacity: .999;
}
#header {
position: absolute;
top: 10px;
left: 5%;
}
#rap {margin-top: 70px;}
/* Content & menu
——————————————– */
#menu {
position: absolute;
top: 80px;
left: 5%;
width: 10em;
border: 1px solid #F0E4E2;
background-color: #C8BEBC;
font-size: 0.85em;
padding: 0.5em;
-moz-opacity: 0.8;
filter: Alpha(opacity=70);
}
#menu ul {
width:100%;
}
#menu ul {
margin-top: 0;
padding-left: 0;
margin-left: 0;
margin-bottom: 1em;
color: #7C5852;
list-style: none;
font-weight: bold;
}
#menu ul ul {
margin-left: 0;
font-weight: normal;
}
#menu table {
display: none;
}
#menu a:link, #menu a:visited {
padding: 1px;
color: black;
border-width: 1px;
border-style: none;
display: block;
width: 100%;
}
#menu a:hover {
background-color: #C8BEBC;
font-weight: bold;
}
#menu form{
margin: 0 0 1em 0;
}
#menu form br {
display:none;
}
input {
width: 6em;
font-family: Verdana, Tahoma, Arial, sans-serif;
}
/* Post
——————————————– */
/* date */
#content h2 {
float: right;
margin: 0;
font-size: 0.85em;
font-weight: normal;
background-color: #FAEEEC;
padding: 0.3em;
margin-left: 0.4em;
border: 1px solid #F0E4E2;
}
.storytitle { margin: 0;}
.post-categories {
display: inline;
margin: 0;
padding: 0;
}
.post-categories li {
display: inline;
margin-left: 0 3px 0 0;
padding: 0;
}
.post .meta {
font-family: Verdana, Tahoma, san-serif;
margin-top: 0;
font-size: 0.75em;
color: #666;
}
.post .meta * {
margin-top: 0;
}
.post .feedback {
margin-bottom: 3em;
padding-bottom: 1px;
}
/* Credit
——————————————– */
p.credit {
margin-left: 35%;
margin-right: 60px;
padding: 0.5em;
font-size: 90%;
}
/* Basic typography
——————————————– */
body {
font-family: “Georgia”, serif;
font-size: 100%;
}
p, td, th, li {
font-size: 1em;
line-height: 1.65em;
}
a:link, a:visited {
text-decoration: none;
color: #7C5852;
border: 1px none white;
}
a:hover {
background-color: #FAEEEC;
}
I deleted the blank lines to make scrolling easier here. There is no line that deals with comments at all. I made it to where the comments have a pop-up box but the image that is anchored on my page is also anchored in the box. I don’t want the image in the pop-up box because it has a black background. Which file am I supposed to edit to change this?
Which file do I edit to add a border around the comments?
In the comments pop-up box it says ‘Comments’ and it also says ‘Mostly Fluff’ from the header. I’d rather not have my header in the comments box.
I am trying to find things on my own but in this case I’m just not having any luck. Being a beginner I’m really needing a bit more guidance.
Thanks for your help.
In most cases, if you “View Source” when a page is displayed, you can see the tags that surround any part of a post / comment / display.
If you then check that tag in the css, you can see it’s properties.
If though, there are no tags, just create them and style to suit.
For instance, a View Source tag is
div id=”cake”
so to write the css, you would start
#cake {
font-size: 10px
}
If the View Source tag was
div class=”cookie”
you would start
.cookie {
font-size: 10px
}
If you try and follow some of the examples in the above tutorial you should get an idea of what you can do.
Your css is also not the default – check the default style for tags in that (Comments are in that one) and also read NM’s tag guide.
For the popup, you will have to override what will otherwise be displayed by default … I think. If I get time, I’ll look into that one 🙂
Okay… I typed the comments info. into the layout-css and was able to do a box with borders around the comments. Very nice. I still cannot figure out how to remove the dratted cat picture from the comments pop-up box, though. I even tried shrinking the picture down and typing in the code for a new picture for comments on the layout-css and that didn’t work.
Also, the comments field in the pop-up box is longer than the box itself. While this isn’t a huge issue it’s weird-looking.
