Current mood:	blah
Entry tags:	!!nicktess, resources: tutorials

Tutorial - Change the comment buttons for fs
I made a little tutorial to change the comment buttons for Flexible Squares. I posted it at my old layout community and just forgot that it exist. A dear member remember me and so I decided to repost the tutorial here.


These buttons are one of the ugly pieces form the LJ standard settings… so I've started to change it for my own layout.



This is a little guide that might help you to customize it. :)

Here the possible result:




The condition is that you use customized comment pages for your journal. Please, attention that it works only with Mozilla, Opera and the IE 7. Sorry for all IE 6 users.



1. You have to create or search for some buttons you can use.

2. Copy the code at the end of your own css code, paste the urls of the buttons and replace the dimensions.


No matter what you do, do NOT delete out any of the !important declarations if you're editing those parts. It won't work otherwise.


/*edit Comment*/
.commentbox img[src="http://l-stat.livejournal.com/img/btn_edit.gif"] {
width:0;
height: 0;
background-repeat: no-repeat;
background-image: url(YOUR EDIT COMMENT BUTTON);
padding: 16px 16px 0 0 !important;
}

/*delete Comment*/
.commentbox img[src="http://l-stat.livejournal.com/img/btn_del.gif"] {
width:0;
height: 0;
background-repeat: no-repeat;
background-image: url(YOUR DELETE COMMET BUTTON);
padding: 16px 16px 0 0 !important;
}

/*Screen Comment*/
.commentbox img[src="http://l-stat.livejournal.com/img/btn_scr.gif"] {
width:0;
height: 0;
background-repeat: no-repeat;
background-image: url(YOUR SCREEN COMMENT BUTTON);
padding: 16px 16px 0 0 !important;
}

.commentbox img[src="http://l-stat.livejournal.com/img/btn_unscr.gif"] {
width:0;
height: 0;
background-repeat: no-repeat;
background-image: url(YOUR UNSREEN COMMENT BUTTON);
padding: 16px 16px 0 0 !important;
}

/*Freeze Comment*/
.commentbox img[src="http://l-stat.livejournal.com/img/btn_freeze.gif"] {
width:0;
height: 0;
background-repeat: no-repeat;
background-image: url(YOUR FREEZE COMMENT BUTTON);
padding: 16px 16px 0 0 !important;
}

.commentbox img[src="http://l-stat.livejournal.com/img/btn_unfreeze.gif"] {
width:0;
height: 0;
background-repeat: no-repeat;
background-image: url(YOUR UNFREZZE COMMENT BUTTON);
padding: 16px 16px 0 0 !important;
}

/*Track Comment*/
.commentbox img[src="http://l-stat.livejournal.com/img/btn_track.gif"] {
width:0;
height: 0;
background-repeat: no-repeat;
background-image: url(YOUR TRACK COMMENT BUTTON);
padding: 16px 16px 0 0 !important;
}

.commentbox img[src="http://l-stat.livejournal.com/img/btn_tracking.gif"] {
width:0;
height: 0;
background-repeat: no-repeat;
background-image: url(YOUR UNTRACK COMMENT BUTTON);
padding: 16px 16px 0 0 !important;
}

background-image: url(); -> this one should be clear, that's your image, e.g. http://www.pictures.com/mybutton.gif

padding: 16px 16px 0 0 !important; -> the first number here is the height of your button and the second is the width


And to make it easier, the hole code once again to copy and paste:
/*edit Comment*/ .commentbox img[src="http://l-stat.livejournal.com/img/btn_edit.gif"] { width:0; height: 0; background-repeat: no-repeat; background-image: url(<b>YOUR EDIT COMMENT BUTTON</b>); padding: 16px 16px 0 0 !important; } /*delete Comment*/ .commentbox img[src="http://l-stat.livejournal.com/img/btn_del.gif"] { width:0; height: 0; background-repeat: no-repeat; background-image: url(<b>YOUR DELETE COMMET BUTTON</b>); padding: 16px 16px 0 0 !important; } /*Screen Comment*/ .commentbox img[src="http://l-stat.livejournal.com/img/btn_scr.gif"] { width:0; height: 0; background-repeat: no-repeat; background-image: url(<b>YOUR SCREEN COMMENT BUTTON</b>); padding: 16px 16px 0 0 !important; } .commentbox img[src="http://l-stat.livejournal.com/img/btn_unscr.gif"] { width:0; height: 0; background-repeat: no-repeat; background-image: url(<b>YOUR UNSREEN COMMENT BUTTON</b>); padding: 16px 16px 0 0 !important; } /*Freeze Comment*/ .commentbox img[src="http://l-stat.livejournal.com/img/btn_freeze.gif"] { width:0; height: 0; background-repeat: no-repeat; background-image: url(<b>YOUR FREEZE COMMENT BUTTON</b>); padding: 16px 16px 0 0 !important; } .commentbox img[src="http://l-stat.livejournal.com/img/btn_unfreeze.gif"] { width:0; height: 0; background-repeat: no-repeat; background-image: url(<b>YOUR UNFREZZE COMMENT BUTTON</b>); padding: 16px 16px 0 0 !important; } /*Track Comment*/ .commentbox img[src="http://l-stat.livejournal.com/img/btn_track.gif"] { width:0; height: 0; background-repeat: no-repeat; background-image: url(<b>YOUR TRACK COMMENT BUTTON</b>); padding: 16px 16px 0 0 !important; } .commentbox img[src="http://l-stat.livejournal.com/img/btn_tracking.gif"] { width:0; height: 0; background-repeat: no-repeat; background-image: url(<b>YOUR UNTRACK COMMENT BUTTON</b>); padding: 16px 16px 0 0 !important;


EDIT
LJ change the url of all the pics.

BEFORE:
http://p-stat.livejournal.com/img/
NOW:
http://l-stat.livejournal.com/img/

So I replaced the css code to that effect.