×

Notice

The forum is in read only mode.
Welcome, Guest
Username: Password: Remember me
  • Page:
  • 1

TOPIC: CSS for comments link and title?

CSS for comments link and title? 15 years 8 months ago #3204

  • emeyer
  • emeyer's Avatar Topic Author
  • Offline
  • Junior Boarder
  • Junior Boarder
  • Posts: 25
  • Thank you received: 0
I'm really impressed with this component. I am justl figuring out some of the CSS.

I tried changing the CSS for the font of the comment title, but nothing happens. Is there a way to change the font of a comment's title?

When just the 'intro' text is displayed, then the link to 'Write comment (n comments)' is not clickable at the beginning of the link. Is this just me, or is this observed before?'

CSS for comments link and title? 15 years 8 months ago #3207

  • Daniel Dimitrov
  • Daniel Dimitrov's Avatar
  • Online
  • Administrator
  • Administrator
  • Posts: 9618
  • Karma: 155
  • Thank you received: 1081
may I see your website?

CSS for comments link and title? 15 years 8 months ago #3209

  • emeyer
  • emeyer's Avatar Topic Author
  • Offline
  • Junior Boarder
  • Junior Boarder
  • Posts: 25
  • Thank you received: 0
It's http://heavensonearth.com

I was able to swap to the comment and readmore link ok, but hovering over the beginning of the 'write comment' link shows an edit cursor, instead of a finger to click the link. I tested in several browsers.

If you look at this page:

heavensonearth.com/Reaktor-Ensembles/Hegel.html

the title field 'comments from NI library' is very small. I tried adding #comment .posttitle {} to the CSS file, but it didn't change the element.

CSS for comments link and title? 15 years 8 months ago #3211

  • Daniel Dimitrov
  • Daniel Dimitrov's Avatar
  • Online
  • Administrator
  • Administrator
  • Posts: 9618
  • Karma: 155
  • Thank you received: 1081
About the first problem - to me it is a hand, and not an edit cursor.

about the second one - could you provide me with a screenshot and mark the thing that is not ok. With my screen resolution(1920x1440) everything seems fine.

CSS for comments link and title? 15 years 8 months ago #3212

  • emeyer
  • emeyer's Avatar Topic Author
  • Offline
  • Junior Boarder
  • Junior Boarder
  • Posts: 25
  • Thank you received: 0
Regarding the title, it is not that it is illegible. The title is smaller than the body text. Broswers are not going to read the title if it is smaller than the body text. I want to make the cmment's title larger, that's all.

If you hover over the LEFT SIDE of the 'write commdent link, that is,. the BEGINNING of the 'write comment' link, that is, the part over the word 'write,' then it is not clickable.

CSS for comments link and title? 15 years 8 months ago #3216

  • Daniel Dimitrov
  • Daniel Dimitrov's Avatar
  • Online
  • Administrator
  • Administrator
  • Posts: 9618
  • Karma: 155
  • Thank you received: 1081
Hey there! I'm really sorry, but I really don't understand what should be bigger. (I don't understand the browser explanation too). Please make a screenshot and mark the thing that has to be changed.

It doesn't matter if I go on the left side or on the right side - everything is fine. What browser are you using?

CSS for comments link and title? 15 years 8 months ago #3218

  • emeyer
  • emeyer's Avatar Topic Author
  • Offline
  • Junior Boarder
  • Junior Boarder
  • Posts: 25
  • Thank you received: 0
Hello, I'm sorry too. As another programmer I sympathise how fustrating user problems can be, often it is user error, and sometimes very simple problems take very much unanticipated work to fix, which holds up other projects and so can be sad to disover.

So far I tested the "write comments" link on the home page with IE7, Safari 3.2.1, Firefox 3.0.7, Konqueror 4.2.1, Opera 9.6.4, Avant 11.7, and Google Chrome 1.0.154. Of these, Chrome somewhat rendered the entire width of the link clickable, but not in all areas over the text. On all others, the cursor is the wrong type over the word "write", that is, the word "write" in the link is not clickable. On some of them, on the left end of the link it is a hand cursor, but not a pointing finger cursor which on my Windows configuration indicates a clickable link.

Really I would prefer to make the anchor for "write text" a block element containing the 'write comment' text with the width of the text column, so the whole column width would enable clicking to activate the link; and even perhaps a background graphic that would change on hover (like the extended menu implementation on the page's left).

On the second question, here is a screenshot of the text I wish to increase the size. it is the text in this instance "comments from NI library." I'd like to align the other heading cell content nicely, but make the title stand out a little more. Looking in the code it has a .posttitle class, but adding a declaration to the css file for the class did not change the appearance on the page. There is some very clever coding for Ajax in your implementation, so it's not clear to me exactly where to attach a property change for this.

CSS for comments link and title? 15 years 8 months ago #3219

  • emeyer
  • emeyer's Avatar Topic Author
  • Offline
  • Junior Boarder
  • Junior Boarder
  • Posts: 25
  • Thank you received: 0
More information: this is a 1.0 Joomla implementation. I haven't looked into the even handler code, but one thing that occured to me is that the area which is unclickable may be reserved for the optional 'read more' graphic. So, the element swap in the handler code may be picking the wrong container? Just a thought.

CSS for comments link and title? 15 years 8 months ago #3227

  • Daniel Dimitrov
  • Daniel Dimitrov's Avatar
  • Online
  • Administrator
  • Administrator
  • Posts: 9618
  • Karma: 155
  • Thank you received: 1081
Open the css.css (Linie 88) file and find this
#comment span.posttitle {
border-bottom:2px none;
border-top:2px none;
font-weight:bold;
}
in this code you can add font-size:14px; to make it bigger or change the color as you wish.

Your write comment button absolutely fine for me. (firefox 3.0.7 - it is a normal hand).
But what I see is that your template file is missing the standard .readon class. You can add it and do whatever you want with it - display:block or....

CSS for comments link and title? 15 years 8 months ago #3235

  • emeyer
  • emeyer's Avatar Topic Author
  • Offline
  • Junior Boarder
  • Junior Boarder
  • Posts: 25
  • Thank you received: 0
Thanks, I will look into .readon, maybe that is the problem.

I tried changing the .posttitle a number of times just as you suggest, but there was no change in the appearance. I was able to change other things ok. I don't understand it. Here is the current template file.
#comment img{border:0px;display:inline}
#comment .item{padding:5px}
#comment .hide {color:#AAAAAA}
#comment #CommentMenu{margin-top: 10px;margin-bottom: 5px}
#comment #CommentMenu .label{padding-left:5px;color:white}
#comment #CommentMenu .buttons{background:none}
#comment #CommentMenu .button{background:none;padding-left:2px;padding-right:2px}
#comment #CommentMenu .button a{padding-left:5px;padding-right:5px}
#comment #CommentMenu .button a:hover{color:blue}
#comment .sectiontableheader{height:15px;line-height:15px;color:white;padding:2px}
#comment .sectiontableentry1,.sectiontableentry2{background:none;margin:0;padding:0}
#comment .postcontainer{margin-bottom:5px}
#comment .post{border-left: 1px #677791 solid;border-right: 1px #677791 solid;border-bottom: 1px #677791 solid}
#comment .postheader {color: white;
background: url(../images/head.png);
	padding: 2px}
#comment .postheader td{color:white;height:15px;line-height: 15px}
#comment .postusername{background-image: url(../images/user.png);background-repeat: no-repeat;background-position: 2px -2px;padding-left: 21px}
#comment .postusername a{color: white}
#comment .postusername a:hover{text-decoration: underline}
#comment span.posttitle{font-weight:bold;border-bottom:2px none;border-top:2px none;font-size:14px}
#comment a.postwebsite:link, #comment a.postwebsite:visited, #comment a.postwebsite:hover {
//	background: url(../images/html.png) no-repeat;background-position: 2px -2px;
	padding-left: 16px;font-weight: normal;white-space: nowrap}
#comment .postnotify1 {
	background-image: url(../images/mailgreen.jpg);
	background-repeat: no-repeat;padding-left: 16px}
#comment .postnotify0{
	background-image: url(../images/mailred.jpg);
background-repeat: no-repeat;padding-left: 16px}
#comment .postusertype {text-transform: capitalize}
#comment .avatarcontainer {
	background-image: url(../images/dotv.gif);
	background-repeat: repeat-y;
	background-position: right top;}
#comment .avatar{border: 1px silver solid;margin-right:1px}
#comment .administrator {font-weight:bold;color:white}
#comment .postbody td{color:yellow;
	padding:8px;text-align:justify;vertical-align:top}
#comment .sectiontableentry1 .postbody {}
#comment .sectiontableentry2 .postbody {}
#comment .createdate {
display: inline; /* AGE */
	color:white}
#comment .postfooter{padding-top:2px;padding-bottom:2px;padding-left:5px;padding-right:5px}
#comment .form{width: 100%;border: 1px #677791 solid;padding: 1px;}
#comment #CommentFormTitle{color:white}
#comment .postbody table{border:0;padding:2px}
#comment .quote{text-align:center;margin-bottom:8px;margin-left:8px;margin-right:8px}
#comment .genmed{color: #505367;text-align:left;padding-left:8px;padding-bottom:1px}
#comment .quotebody{color: #505367;border:1px #CCCCCC solid;background:white;text-align:justify;padding:8px}
#comment .code .genmed{padding-left:29px}
#comment .emoticoncontainer{padding:5px}
#comment .emoticonseparator{padding:3px}
#comment .emoticon{}
#comment .onlyregistered{padding:5px;text-align:center;font-size:1.1em;color:red;font-weight:bold;border-top:1px black solid;
	border-bottom:1px black solid;
background:white}
#comment a.voting_yes:link, #comment a.voting_yes:visited{color:#3C922F;font-weight:normal;
	background: url(../images/voting_yes.png) #EEF9EB no-repeat;
	border: 1px outset #3C922F;padding:2px 4px 2px 20px;white-space:nowrap;float:left;line-height:10px;text-decoration:none}
#comment a.voting_yes:hover{color:#3C922F;font-weight:normal;
	background: url(../images/voting_yes.png) #FFFFFF no-repeat;
	border: 1px outset #3C922F;padding:2px 4px 2px 20px;white-space:nowrap;float:left;line-height:10px;text-decoration:none}
#comment a.voting_no:link, #comment a.voting_no:visited{color:#AE3738;font-weight:normal;
background: url(../images/voting_no.png) #F9EBEB no-repeat;
	border: 1px outset #AE3738;	padding:2px 4px 2px 20px;white-space:nowrap;float:left;line-height:10px;text-decoration: none}
#comment a.voting_no:hover {color:#AE3738;font-weight:normal;
	background: url(../images/voting_no.png) #FFFFFF no-repeat;
	border: 1px outset #AE3738;	padding:2px 4px 2px 20px;white-space:nowrap;float:left;line-height:10px;text-decoration:none}
#comment .captchacontainer{float:left;padding:5px}
#comment .captchainput{float:left;margin-top:1px}
#comment #captcha{	border:1px solid silver;float:left;margin-left:5px}
#comment #busy{padding-left:5px}
#comment #SearchResults a:link, #comment #SearchResults a:visited{color: #505367}
#comment #SearchResults a:hover
{color:black}
#comment #SearchResults span {background:#ffc;font-weight:bold;border:1px solid gray}
.comment_preview_container {border:1px #677791 solid;margin:8px}
.comment_preview{padding:4px;text-align:left;border:1px #CCCCCC solid;font-size:0.9em;cursor:hand}
.comment_preview:hover {}
.comment_preview div{padding-left:4px;padding-right:4px;padding-top:1px;padding-bottom:1px}
.comment_preview div:hover{}
#comment .button {}
#comment .buttonBB,#comment .select{vertical-align:top;display:inline;border:0;margin:2;padding:0}
#comment .select{width:82px}
#comment #poweredby {display:none}
#comment span.posttitle{font size:15px;font-weight:bold;border-top:2px;border-bottom:2px}
.write_comment{margin-top:12px}

CSS for comments link and title? 15 years 8 months ago #3237

  • emeyer
  • emeyer's Avatar Topic Author
  • Offline
  • Junior Boarder
  • Junior Boarder
  • Posts: 25
  • Thank you received: 0
..and I have good news. By adding 'span' before the class, the title format did change eventually.

The comment's dedicated CSS file is also cached differently than the template page cache. It takes a content expiry to show up. I can imagine that has taken a few others offguard and must be a source of continual tripe. Thanks for the patience.

CSS for comments link and title? 15 years 8 months ago #3238

  • Daniel Dimitrov
  • Daniel Dimitrov's Avatar
  • Online
  • Administrator
  • Administrator
  • Posts: 9618
  • Karma: 155
  • Thank you received: 1081
Glad it is working now :)
Have fun and stay tuned for 4.0 beta 1 :)

CSS for comments link and title? 15 years 7 months ago #3280

  • emeyer
  • emeyer's Avatar Topic Author
  • Offline
  • Junior Boarder
  • Junior Boarder
  • Posts: 25
  • Thank you received: 0
ok, I started checking into the readmore link skew. According to Safari debug console this invokes error routines which accounts for the problem:

<div class="readon"><a href....</a></div>

because the anchor element is not inside a block text element. I fixed this by changing the HTML template which nicely shows up in the comments admin component to be

<div class="readon"><p><a href....</a></p></div>

and now the link can now be selected correctly.

Ive only noticed one other formatting oddity, and that is in the is the default template editing table, the bbcode row ("boardcode" in this forum) shows up correctly in Mozilla based browsers but not in IE7. IN IE7 the the "bold" button gets pushed up and out of alignment with the rest of the row for some reason. I'm still trying to work out cross-browser uniformity for a correction.
  • Page:
  • 1
Time to create page: 0.139 seconds