New Wikidot Rating Module CSS Coding

New Wikidot Rating Module CSS Coding

Wondering how we changed our Wikidot rating module to this one below?…

To start off lets head over to your site manager to get this specific rating module to work properly. Click the "Page Ratings" link on the "Manage Site" side bar like so…

Next, scroll down to the default rating style selection table. Lets just start out with the _default category rating selections, but make sure all the categories that you have rating modules on is the same as the _default category for this to work right…

Make sure the "Type" is selected to "+ only"! As soon as we customize it for the "rate-down" class we will post another tutorial but for now please select "+ only" for this to work right…

Lastly here is the wonderful CSS override so we can get the style of it like this one. You may style your own but this is how we made our CSS code for it. Use this code as a template, also link back to this blog post if you are going to use it.

Here is the code…

/*
- Rating CSS override -- This is to be linked back to this post if used elsewhere 
- Coding by Matt Gentile - Creator of Icondeposit.com
- Thumbs up icon by visual-blast.com
*/
 
.page-rate-widget-box .rateup a {
    position: relative;
    background: transparent url(https://www.icondeposit.com/local--files/dev:wikidot-rating-module-design-pack/thumbs_up_22x22.png) 0 0 no-repeat !important ;
    width: 22px !important;
    height: 22px !important;
    color: transparent !important;
    border: none !important;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow:  none;
    top: -5px !important;
    text-shadow: none !important;
    left: -65px;
}
.page-rate-widget-box .rate-points { 
    position: relative;
    height: auto;
    padding: 5px 10px;
    font: bold 12px Arial, sans-serif;
    border-radius: none !important;
    border: none !important;
    color: #666 !important;
    margin: 0 5px;
    -webkit-box-shadow: none !important;
    background: none !important;
    text-shadow: none !important;
}
.page-rate-widget-box .rateup a:hover {
    background: transparent url(https://www.icondeposit.com/local--files/dev:wikidot-rating-module-design-pack/thumbs_up_22x22.png) 0 0 no-repeat !important;
    color: transparent !important;
    border: none !important;
    box-shadow:  none;
    cursor: pointer;
    content: none !important;
    border-radius: none !important;
}
.page-rate-widget-box .rateup a:active {
    position: relative;
    top: -4px !important;
    margin-left: 6px !important;
    background: transparent url(https://www.icondeposit.com/local--files/dev:wikidot-rating-module-design-pack/thumbs_up_22x22.png) 0 0 no-repeat !important;
    color: none !important;
    border: none !important;
    box-shadow:  none;
}
.page-rate-widget-box {
    position: relative;
    color: none !important;
    padding: 0px 10px;
    font-size: 1.1em;
    border-radius: none !important;
    border: none !important;
    background-color: transparent !important;
    text-shadow: none !important;
    width: 70px !important;
    overflow: hidden !important;
    text-align: right !important;
    border-bottom: 1px solid #cecece !important;
    text-align: center !important;
}
.page-rate-widget-box a {
    padding: 3px 10px;
    background-color: transparent !important;
    text-shadow: none !important;
    color: none;
}
#prw54353.number {
    color: #2191d1 !important;
    display: inline !important;
    font-size: 225%;
}
.page-rate-widget-box .rate-points {
    color: transparent !important;
    display: inline;
    overflow: hidden !important;
    text-align: right;
    left: -53px;
}

06 Mar 2011 05:07

ads via BSA

About Us

Here at the Icon Deposit, we give you the opportunity to post your icons, designs, codes, and screenshots to promote your work and gain new clients. We feature hundreds of free icons, icon sets, UI/UX design, illustrator graphics, vector art, code tutorials for CSS, CSS3, JQuery, photoshop tutorials and tons more. If you would like a custom design or website built, Contact Us.

Popular Posts

Pure CSS3 Forrst Icon

Quick Update

New "Create a New Post" User Interface

Pure CSS3 Flexbox Tutorial

Site Release

Blue Ribbon Website Template