Comic Fury Webcomic Hosting - Help with comments section

You are not logged in. Log in, Register, More info
Forum > Layouts, HTML, CSS & Javascript > Help with comments section
Pages: [1]

"Help with comments section", 18th Feb 2012, 10:42 PM #1
Fastbro♂

User avatar
Posts: 1108
Referrals: 0
Registration date: 14th May 2011
Location: England
The one aspect of my webcomic site I don't like is the comments section. I'm not really sure how to sort out it and make it neater. (eg. borders) Every time I try to alter it in CSS nothing happens. The font doesn't even want to change. Any help is much appreciated.
_______________________
18th Feb 2012, 10:56 PM #2
Magravan♂
Ma-Ma-Magravan!
User avatar
Posts: 4972
Referrals: 26
Registration date: 13th Oct 2009
Location: Canada
Do you have FireFox or Chrome? If you have Firefox, get FireBug, I think it's called... It allows you to right click and get the html / CSS affecting it, which makes it a lot easier to track down problems.
_______________________
image
The last human risks life and brains to save the intelligent zombies responsible for destroying humanity.
<- Avatar: By Kristy of Wake the Sleepers
19th Feb 2012, 12:10 AM #3
Fastbro♂

User avatar
Posts: 1108
Referrals: 0
Registration date: 14th May 2011
Location: England
Thanks, I tried it out. But I'm really a whizz with CSS so it's kinda hard for me. >_<
_______________________
19th Feb 2012, 12:15 AM #4
MatthewJA
Matt Damon
User avatar
Posts: 16818
Referrals: 19
Registration date: 26th Sep 2010
Location: Australia
If it's not changing you're either altering the wrong rules or you're not applying it somehow. What parts do you want to change?
_______________________
imageimageimage
19th Feb 2012, 12:16 AM #5
Fastbro♂

User avatar
Posts: 1108
Referrals: 0
Registration date: 14th May 2011
Location: England
I'd mainly like to change the font and to have borders around comments.
_______________________
19th Feb 2012, 12:17 AM #6
Braign♀

User avatar
Posts: 72
Referrals: 0
Registration date: 14th Jan 2012
Location: Wisconsin, USA
Are you editing inside the .comment { } section of the CSS? If you are, I have no idea why it wouldn't work. What would you like your border to be? eg. border: 2px solid black; worked when I opened your site and tinkered with chrome's version of firebug (though I would give them a margin of 10px or so as well, so the boxes don't touch).

Anyway good luck, your site's looking awesome!
_______________________
image
19th Feb 2012, 12:18 AM #7
Fastbro♂

User avatar
Posts: 1108
Referrals: 0
Registration date: 14th May 2011
Location: England
Braign:Are you editing inside the .comment { } section of the CSS? If you are, I have no idea why it wouldn't work. What would you like your border to be? eg. border: 2px solid black; worked when I opened your site and tinkered with chrome's version of firebug (though I would give them a margin of 10px or so as well, so the boxes don't touch).

Anyway good luck, your site's looking awesome!


I'll give it a go! (Thanks btw)
_______________________
19th Feb 2012, 12:27 AM #8
Fastbro♂

User avatar
Posts: 1108
Referrals: 0
Registration date: 14th May 2011
Location: England
I tried it, but it just does nothing at all. :/
_______________________
19th Feb 2012, 12:27 AM #9
MatthewJA
Matt Damon
User avatar
Posts: 16818
Referrals: 19
Registration date: 26th Sep 2010
Location: Australia
Post your CSS + show me what you've tried to do.
_______________________
imageimageimage
19th Feb 2012, 12:34 AM #10
Fastbro♂

User avatar
Posts: 1108
Referrals: 0
Registration date: 14th May 2011
Location: England
body {
background-image: url("http://fathead.thecomicseries.com/files/untitled-1.png");
background-position: top left;
background-repeat: repeat;
background-attachment: none;
}
a {
 text-decoration:none;
}
a:link {
 color:#9F0000;
}
a:visited {
 color:#940000;
}
a:hover {
 color:#DB0000;
}
input,select {
 color:#000000;
 font-family:"Fathead","Fathead","Fathead","Fathead","Fathead","Fathead",sans-serif;
 margin:3px;
}
select {
 width:350px; /*IE only*/
 max-width:350px; /*for some reason, this doesn't work in IE7*/
}
*>/**/select {
 width:auto !important; /*real browsers*/
}

#sitetitle {
 margin:0px;
 color:#FFFFFF;
 position:absolute;
 bottom: 5px;
 right:5px;
 text-align:right;
 padding-right:8px;
 font-family:"Fathead","Fathead","Fathead","Fathead","Fathead","Fathead",sans-serif;
 letter-spacing:-2px;
}
#navigation {
 background:#FFFFFF url("http://fathead.thecomicseries.com/files/etet.png") top left repeat-x; 
 text-align:center;
 margin:0px;
 padding:0px;
 padding-top:20px;
 padding-bottom:20px;
 font-family:"Fathead","Fathead","Fathead","Fathead","Fathead","Fathead",sans-serif;
}

Pretty all the fonts have been changed to my custom one (as a test) but most of the text doesn't show up in the font.

#navigation li {
 display:inline;
}
#navigation a,#navigation a:link,#navigation a:visited {
 color:#FFFFFF;
 font-weight:bold;
 margin:2px;
 padding:0px;
 padding-top:20px;
 padding-bottom:20px;
 text-decoration:none;
}
#navigation a:hover {
 background-color:rgba(255, 255, 255, 0.15) !important;
 background-color:#FFFFFF;
}
#cf_ads {
 display:table;
 margin:auto;
 text-align:center;
}
#container {
 width:75%;
 min-width:750px;
 margin:auto;
 border:5px solid white;
 background-color:#FFFFFF;
 display:table; /*sorta optional, this makes everything prettier but does not work in IE*/
 overflow:visible !important;
 overflow:hidden; /*this is needed to fix an IE6 bug*/
 text-align:left;
}

#banner {
 text-align:center;
 margin:40px;
}


.reply {
 margin-left:40px;
}

/*st*/
.heading {
 color:#000000;
 margin:2px;
 font-weight:bold;
 font-size:40px;
 font-family:"Fathead","Fathead","Fathead","Fathead","Fathead","Fathead",sans-serif;
 letter-spacing:-1px;
} 
.headingsub {
 font-size:15px;
 letter-spacing:1px;
}
.afterheading {
 margin-left:20px;
 margin-right:20px;
 margin-top:4px;
}
.paddingfix {
 margin:10px;
}
#searchbar {
 text-align:right;
 float:right;
}
.clear {
 clear:both;
}
/*comicpage*/
.authordata a,.authordata a:visited.authordata a:link,.commentcontrol a,.commentcontrol a:visited.commentcontrol a:link {
 color:#333333;
}
.authordata a:hover,.commentcontrol a:hover {
 color:#666666;
}
#comicimagewrap {
 text-align:center;
 margin:15px;

#crright {
 float:right;
}
#votenumber {
 font-size:13px;
}
#crleft {
 float:left;
}
#comicnav {
 margin:20px;
 text-align:center;
}
.comicnavlink {
 margin-left:10px;
 margin-right:10px;
}
.postcommentwrap {
text-align: center;
width: 600px;
margin: 20px;
}

.postcomment {
margin: 0px;
padding: 0px;
list-style-type: none;
}

.postcomment li {
display: inline;
}

.postcomment li a {
color: #ffffff;
background: #000000;
padding: 5px;
width: 100px;}

.postcomment li a:hover {
border: 1px solid #ffffff;
}

#allcommentwraps {
text-align: left;
border:5px solid black;
margin: 10px;
width: 600px;
}

.authorcomments,.extrapage {
background: #000000;
width: 400px;
padding: 20px;
text-align: left;
min-height: 125px;
margin:0 auto;
margin-top: 10px;
margin-bottom:20px;
border: 2px solid black;
font-size: 1.1em;

}

Attempted to put a border here put it hasn't changed anything...

.reply {
 margin-left:120px;
}
/*search*/
#bigsearchbox {
 width:500px;
}
#searchresults {
 list-style:decimal;
}
.searchposttime {
 color:#777777;
 margin-left:2px;
}
/*overview*/
#latestcomic {
 text-align:center;
}
#latestcomiclink {
 border:0px;
}
#latestcomiclink img {
 border:1px solid black;
}
/*blog*/
.blogtitle {
 font-weight:bold;
 font-size:20px;
 color:#333333;
 border-bottom:1px solid #999999;
}
.blogauthor {
 margin:10px;
 margin-top:0px;
 margin-bottom:0px;
 color:#777777;
 border-bottom:1px solid #AAAAAA;
}
.blogcontent {
 margin:16px;
 margin-top:2px;
 font-size:14px;
}
/*archive*/
.chaptertitle {

 font-weight:bold;
 font-size:20px;
 color:#333333;
 border-bottom:1px solid #999999;
}
.chaptertitlesub {

 margin:10px;
 margin-top:0px;
 margin-bottom:0px;
 color:#777777;
 border-bottom:1px solid #AAAAAA;
}
#archive {
 list-style:none;
 padding:0px;
}
.archivecomic {
 margin:10px;
 margin-left:30px;
 list-style:square;
}
/*blog archive*/
#blogarchive {
 float:right;
 width:24%;
 padding:2px;
 margin:0px;
 list-style:none;
}
#blogs {
 float:left;
 width:72%;
}


Thanks.
_______________________
19th Feb 2012, 12:38 AM #11
MatthewJA
Matt Damon
User avatar
Posts: 16818
Referrals: 19
Registration date: 26th Sep 2010
Location: Australia
If you wanted to put a border around your author notes, that's #authornotes not .authorcomments

It also seems you're trying to use @font-face, but you haven't got an @font-face declaration anywhere!

And what on earth is up with this
"Fathead","Fathead","Fathead","Fathead","Fathead","Fathead"

whaaaaat.

Also, instead of putting that EVERYWHERE, why not put it in the body css? That way it's everywhere automatically. Or define a class for that font, and wrap things with a div or span with that class...

(I have to go now so I'll respond more later >_>)
_______________________
imageimageimage
19th Feb 2012, 12:45 AM #12
Fastbro♂

User avatar
Posts: 1108
Referrals: 0
Registration date: 14th May 2011
Location: England
Thanks. I'm just an idiot when it comes to these things so I just try to work it out by myself.
_______________________
19th Feb 2012, 2:29 AM #13
MatthewJA
Matt Damon
User avatar
Posts: 16818
Referrals: 19
Registration date: 26th Sep 2010
Location: Australia
Ummm the CSS on my layout testing site has an example of @font-face that should work for you. :D
_______________________
imageimageimage
19th Feb 2012, 12:07 PM #14
Fastbro♂

User avatar
Posts: 1108
Referrals: 0
Registration date: 14th May 2011
Location: England
Thanks Matt! The comment section is a lot neater now, I'll work on the font next.
_______________________
19th Feb 2012, 9:42 PM #15
Aethix♂

User avatar
Posts: 186
Referrals: 0
Registration date: 20th Apr 2011
Location: United States
It might be that your browser doesn't know your custom font exists.
19th Feb 2012, 9:45 PM #16
MatthewJA
Matt Damon
User avatar
Posts: 16818
Referrals: 19
Registration date: 26th Sep 2010
Location: Australia
It doesn't appear to, as there isn't an @font-face declaration that I can see >_>
_______________________
imageimageimage
20th Feb 2012, 7:41 PM #17
Fastbro♂

User avatar
Posts: 1108
Referrals: 0
Registration date: 14th May 2011
Location: England
Font Face is complete! :D
_______________________
Forum > Layouts, HTML, CSS & Javascript > Help with comments section
Pages: [1]