It is currently Fri Nov 21, 2008 2:59 pm


All times are UTC [ DST ]




Reply to topic  [ 2 posts ] 
Author Message
 Post subject: Cool buttons for your site. (CSS)
PostPosted: Thu Aug 14, 2008 4:26 pm 
Aciid Whore
User avatar
Online

Joined: Sun Jan 20, 2008 9:34 pm
Posts: 2703
Location: Devon, UK
Ok, if you have a forum or sumet, add this code to either your stylesheet.css files, or buttons.css, which ever one you have on the style

credits to err, i dunno, but it isn't mine lol

Code:
/* proSilver Button Styles
---------------------------------------- */

/* Rollover buttons
   Based on: http://wellstyled.com/css-nopreload-rollovers.html
----------------------------------------*/
.buttons {
   float: left;
   width: auto;
   height: auto;
}

/* Rollover state */
.buttons div {
   float: left;
   margin: 0 5px 0 0;
   background-position: 0 100%;
}

/* Rolloff state */
.buttons div a {
   display: block;
   width: 100%;
   height: 100%;
   background-position: 0 0;
   position: relative;
   overflow: hidden;
}

/* Hide <a> text and hide off-state image when rolling over (prevents flicker in IE) */
/*.buttons div span      { display: none; }*/
/*.buttons div a:hover   { background-image: none; }*/
.buttons div span         { position: absolute; width: 100%; height: 100%; cursor: pointer;}
.buttons div a:hover span   { background-position: 0 100%; }

/* Big button images */
.reply-icon span   { background: transparent none 0 0 no-repeat; }
.post-icon span      { background: transparent none 0 0 no-repeat; }
.locked-icon span   { background: transparent none 0 0 no-repeat; }
.pmreply-icon span   { background: none 0 0 no-repeat; }
.newpm-icon span    { background: none 0 0 no-repeat; }
.forwardpm-icon span    { background: none 0 0 no-repeat; }

/* Set big button dimensions */
.buttons div.reply-icon      { width: {IMG_BUTTON_TOPIC_REPLY_WIDTH}px; height: {IMG_BUTTON_TOPIC_REPLY_HEIGHT}px; }
.buttons div.post-icon      { width: {IMG_BUTTON_TOPIC_NEW_WIDTH}px; height: {IMG_BUTTON_TOPIC_NEW_HEIGHT}px; }
.buttons div.locked-icon   { width: {IMG_BUTTON_TOPIC_LOCKED_WIDTH}px; height: {IMG_BUTTON_TOPIC_LOCKED_HEIGHT}px; }
.buttons div.pmreply-icon   { width: {IMG_BUTTON_PM_REPLY_WIDTH}px; height: {IMG_BUTTON_PM_REPLY_HEIGHT}px; }
.buttons div.newpm-icon      { width: {IMG_BUTTON_PM_NEW_WIDTH}px; height: {IMG_BUTTON_PM_NEW_HEIGHT}px; }
.buttons div.forwardpm-icon   { width: {IMG_BUTTON_PM_FORWARD_WIDTH}px; height: {IMG_BUTTON_PM_FORWARD_HEIGHT}px; }

/* Sub-header (navigation bar)
--------------------------------------------- */
a.print, a.sendemail, a.fontsize {
   display: block;
   overflow: hidden;
   height: 18px;
   text-indent: -5000px;
   text-align: left;
   background-repeat: no-repeat;
}

a.print {
   background-image: none;
   width: 22px;
}

a.sendemail {
   background-image: none;
   width: 22px;
}

a.fontsize {
   background-image: none;
   background-position: 0 -1px;
   width: 29px;
}

a.fontsize:hover {
   background-position: 0 -20px;
   text-decoration: none;
}

/* Icon images
---------------------------------------- */
.sitehome, .icon-faq, .icon-members, .icon-home, .icon-ucp, .icon-register, .icon-logout,
.icon-bookmark, .icon-bump, .icon-subscribe, .icon-unsubscribe, .icon-pages, .icon-search {
   background-position: 0 50%;
   background-repeat: no-repeat;
   background-image: none;
   padding: 1px 0 0 17px;
}

/* Poster profile icons
----------------------------------------*/
ul.profile-icons {
   padding-top: 10px;
   list-style: none;
}

/* Rollover state */
ul.profile-icons li {
   float: left;
   margin: 0 6px 3px 0;
   background-position: 0 100%;
}

/* Rolloff state */
ul.profile-icons li a {
   display: block;
   width: 100%;
   height: 100%;
   background-position: 0 0;
}

/* Hide <a> text and hide off-state image when rolling over (prevents flicker in IE) */
ul.profile-icons li span { display:none; }
ul.profile-icons li a:hover { background: none; }

/* Positioning of moderator icons */
.postbody ul.profile-icons {
   float: right;
   width: auto;
   padding: 0;
}

.postbody ul.profile-icons li {
   margin: 0 3px;
}

/* Profile & navigation icons */
.email-icon, .email-icon a      { background: none top left no-repeat; }
.aim-icon, .aim-icon a         { background: none top left no-repeat; }
.yahoo-icon, .yahoo-icon a      { background: none top left no-repeat; }
.web-icon, .web-icon a         { background: none top left no-repeat; }
.msnm-icon, .msnm-icon a         { background: none top left no-repeat; }
.icq-icon, .icq-icon a         { background: none top left no-repeat; }
.jabber-icon, .jabber-icon a      { background: none top left no-repeat; }
.pm-icon, .pm-icon a            { background: none top left no-repeat; }
.quote-icon, .quote-icon a      { background: none top left no-repeat; }

/* Moderator icons */
.report-icon, .report-icon a      { background: none top left no-repeat; }
.warn-icon, .warn-icon a         { background: none top left no-repeat; }
.edit-icon, .edit-icon a         { background: none top left no-repeat; }
.delete-icon, .delete-icon a      { background: none top left no-repeat; }
.info-icon, .info-icon a         { background: none top left no-repeat; }

/* Set profile icon dimensions */
ul.profile-icons li.email-icon      { width: {IMG_ICON_CONTACT_EMAIL_WIDTH}px; height: {IMG_ICON_CONTACT_EMAIL_HEIGHT}px; }
ul.profile-icons li.aim-icon   { width: {IMG_ICON_CONTACT_AIM_WIDTH}px; height: {IMG_ICON_CONTACT_AIM_HEIGHT}px; }
ul.profile-icons li.yahoo-icon   { width: {IMG_ICON_CONTACT_YAHOO_WIDTH}px; height: {IMG_ICON_CONTACT_YAHOO_HEIGHT}px; }
ul.profile-icons li.web-icon   { width: {IMG_ICON_CONTACT_WWW_WIDTH}px; height: {IMG_ICON_CONTACT_WWW_HEIGHT}px; }
ul.profile-icons li.msnm-icon   { width: {IMG_ICON_CONTACT_MSNM_WIDTH}px; height: {IMG_ICON_CONTACT_MSNM_HEIGHT}px; }
ul.profile-icons li.icq-icon   { width: {IMG_ICON_CONTACT_ICQ_WIDTH}px; height: {IMG_ICON_CONTACT_ICQ_HEIGHT}px; }
ul.profile-icons li.jabber-icon   { width: {IMG_ICON_CONTACT_JABBER_WIDTH}px; height: {IMG_ICON_CONTACT_JABBER_HEIGHT}px; }
ul.profile-icons li.pm-icon      { width: {IMG_ICON_CONTACT_PM_WIDTH}px; height: {IMG_ICON_CONTACT_PM_HEIGHT}px; }
ul.profile-icons li.quote-icon   { width: {IMG_ICON_POST_QUOTE_WIDTH}px; height: {IMG_ICON_POST_QUOTE_HEIGHT}px; }
ul.profile-icons li.report-icon   { width: {IMG_ICON_POST_REPORT_WIDTH}px; height: {IMG_ICON_POST_REPORT_HEIGHT}px; }
ul.profile-icons li.edit-icon   { width: {IMG_ICON_POST_EDIT_WIDTH}px; height: {IMG_ICON_POST_EDIT_HEIGHT}px; }
ul.profile-icons li.delete-icon   { width: {IMG_ICON_POST_DELETE_WIDTH}px; height: {IMG_ICON_POST_DELETE_HEIGHT}px; }
ul.profile-icons li.info-icon   { width: {IMG_ICON_POST_INFO_WIDTH}px; height: {IMG_ICON_POST_INFO_HEIGHT}px; }
ul.profile-icons li.warn-icon   { width: {IMG_ICON_USER_WARN_WIDTH}px; height: {IMG_ICON_USER_WARN_HEIGHT}px; }

/* Fix profile icon default margins */
ul.profile-icons li.edit-icon   { margin: 0 0 0 3px; }
ul.profile-icons li.quote-icon   { margin: 0 0 0 10px; }
ul.profile-icons li.info-icon, ul.profile-icons li.report-icon   { margin: 0 3px 0 0; }

_________________
Image SUCKS.


 Profile E-mail  
 
 Post subject: Re: Cool buttons for your site. (CSS)
PostPosted: Thu Aug 28, 2008 2:37 pm 
Gold Member
User avatar
Offline

Joined: Sat Oct 20, 2007 5:06 pm
Posts: 731
Location: England
Cheers i will try these out now :goodjob:

_________________
AciidForums.com


Formally known as 'Web-Bug'


Visit my Blog; full of interesting junk! (Updated Daily)



 Profile E-mail  
 
Display posts from previous:  Sort by  
Reply to topic  [ 2 posts ] 

All times are UTC [ DST ]


Who is online

Users browsing this forum: No registered users and 1 guest


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Search for:
Jump to:  
cron
Powered by phpBB3
Aciid Forums © 2008