Sentiment bar body
Within [[include…]], you may delete or use arguments according to your needs.
[[include :scp-int:ratemod:sentimentbar-arguments lang=en | uper=0.55 | nper=0 | dper=0.45 | width=300px | theme=ytp-like]]
In action:
.rate-box-with-sentiment-bar:hover .sentiment-bar,
.rate-box-with-sentiment-bar:hover .sentiment-bar .neutralbar {
width: 200px !important;
}
.credit-rate-with-sentiment-bar:hover .sentiment-bar,
.credit-rate-with-sentiment-bar:hover .sentiment-bar .neutralbar {
width: 200px !important;
}
.neutralbar {
display: none;
}
.neutralbar.en, .neutralbar.en .neutext, .hasvotes.neutralbar {
display: inline-block;
}
lang: Optional. Description text for when the page has no votes. Defaulted to "en".
uper: Optional. Desired portion of upvotes in terms of decimals or fraction not exceeding 1, default is number of upvotes divided by total number of votes of the current page.
dper: Optional. Desired portion of downvotes in terms of decimals or fraction not exceeding 1, default is number of downvotes divided by total number of votes of the current page.
nper: Optional. Desired portion of novotes in terms of decimals or fraction not exceeding 1, default is 0.
width: Optional. Width of the sentiment bar, default is 200px for en.
theme: Optional. Color theme for the sentiment bar. Default is "greengreyred". Predefined themes are as following:
| Theme name |
Display |
Upvote portion (+) color |
Downvote portion (–) color |
Neutral portion (X) color |
| greengrayred |
.rate-box-with-sentiment-bar:hover .sentiment-bar,
.rate-box-with-sentiment-bar:hover .sentiment-bar .neutralbar {
width: 200px !important;
}
.credit-rate-with-sentiment-bar:hover .sentiment-bar,
.credit-rate-with-sentiment-bar:hover .sentiment-bar .neutralbar {
width: 200px !important;
}
.neutralbar {
display: none;
}
.neutralbar.en, .neutralbar.en .neutext, .hasvotes.neutralbar {
display: inline-block;
}
|
#3ae845 |
#e83a3a |
#a0a0a0 |
| ytp-like |
.rate-box-with-sentiment-bar:hover .sentiment-bar,
.rate-box-with-sentiment-bar:hover .sentiment-bar .neutralbar {
width: 200px !important;
}
.credit-rate-with-sentiment-bar:hover .sentiment-bar,
.credit-rate-with-sentiment-bar:hover .sentiment-bar .neutralbar {
width: 200px !important;
}
.neutralbar {
display: none;
}
.neutralbar.en, .neutralbar.en .neutext, .hasvotes.neutralbar {
display: inline-block;
}
|
#167ac6 |
#ccc |
#ccc |
| purplegrayyellow |
.rate-box-with-sentiment-bar:hover .sentiment-bar,
.rate-box-with-sentiment-bar:hover .sentiment-bar .neutralbar {
width: 200px !important;
}
.credit-rate-with-sentiment-bar:hover .sentiment-bar,
.credit-rate-with-sentiment-bar:hover .sentiment-bar .neutralbar {
width: 200px !important;
}
.neutralbar {
display: none;
}
.neutralbar.en, .neutralbar.en .neutext, .hasvotes.neutralbar {
display: inline-block;
}
|
#8a5cbc |
#fcdc3f |
#ccc |
| pinkgrayblue |
.rate-box-with-sentiment-bar:hover .sentiment-bar,
.rate-box-with-sentiment-bar:hover .sentiment-bar .neutralbar {
width: 200px !important;
}
.credit-rate-with-sentiment-bar:hover .sentiment-bar,
.credit-rate-with-sentiment-bar:hover .sentiment-bar .neutralbar {
width: 200px !important;
}
.neutralbar {
display: none;
}
.neutralbar.en, .neutralbar.en .neutext, .hasvotes.neutralbar {
display: inline-block;
}
|
#ff86ec |
#369ae6 |
#ccc |
| redgrayblack |
.rate-box-with-sentiment-bar:hover .sentiment-bar,
.rate-box-with-sentiment-bar:hover .sentiment-bar .neutralbar {
width: 200px !important;
}
.credit-rate-with-sentiment-bar:hover .sentiment-bar,
.credit-rate-with-sentiment-bar:hover .sentiment-bar .neutralbar {
width: 200px !important;
}
.neutralbar {
display: none;
}
.neutralbar.en, .neutralbar.en .neutext, .hasvotes.neutralbar {
display: inline-block;
}
|
#ff0000 |
#000 |
#ccc |
| bluegrayred |
.rate-box-with-sentiment-bar:hover .sentiment-bar,
.rate-box-with-sentiment-bar:hover .sentiment-bar .neutralbar {
width: 200px !important;
}
.credit-rate-with-sentiment-bar:hover .sentiment-bar,
.credit-rate-with-sentiment-bar:hover .sentiment-bar .neutralbar {
width: 200px !important;
}
.neutralbar {
display: none;
}
.neutralbar.en, .neutralbar.en .neutext, .hasvotes.neutralbar {
display: inline-block;
}
|
#369ae6 |
#ee1111 |
#ccc |
| prusti |
.rate-box-with-sentiment-bar:hover .sentiment-bar,
.rate-box-with-sentiment-bar:hover .sentiment-bar .neutralbar {
width: 200px !important;
}
.credit-rate-with-sentiment-bar:hover .sentiment-bar,
.credit-rate-with-sentiment-bar:hover .sentiment-bar .neutralbar {
width: 200px !important;
}
.neutralbar {
display: none;
}
.neutralbar.en, .neutralbar.en .neutext, .hasvotes.neutralbar {
display: inline-block;
}
|
#003153 |
#dcdbd6 |
#ccc |
User-defined themes can be achieved through the following css code:
[[module css]]
.customthemename .neutralbar {
background-color: #XXXXXX;
color: #XXXXXX;
}
.customthemename .downbar-base {
background-color: #XXXXXX;
}
.customthemename .downbar-text {
color: #XXXXXX;
}
.customthemename .upbar {
background-color: #XXXXXX;
color: #XXXXXX;
}
[[/module]]
Please modify the code above and put it anywhere in your page. Then in your [[include…]] set "theme" to your custom theme name to use.
Rating module with sentiment bar:
Replace [[module rate]] with [[include ratemod:sentimentbar]]. Parameter lang and theme are optional, but lang is defaulted to en.
[[include :scp-int:ratemod:sentimentbar lang=en | theme=ytp-like]]
In action:
.rate-box-with-sentiment-bar:hover .sentiment-bar,
.rate-box-with-sentiment-bar:hover .sentiment-bar .neutralbar {
width: 200px !important;
}
.credit-rate-with-sentiment-bar:hover .sentiment-bar,
.credit-rate-with-sentiment-bar:hover .sentiment-bar .neutralbar {
width: 200px !important;
}
.neutralbar {
display: none;
}
.neutralbar.en, .neutralbar.en .neutext, .hasvotes.neutralbar {
display: inline-block;
}
theme: Same as the description above.
Credit module with sentiment bar:
Replace [[include credit:start]] with [[include ratemod:sentimentbar-credit:start]]. Parameter theme is optional.
[[include :scp-int:ratemod:sentimentbar-credit:start lang=en | theme=ytp-like]]
Information
[[include :scp-int:credit:otherwise]]
More information
[[include :scp-int:credit:end]]
In action:
.rate-box-with-sentiment-bar:hover .sentiment-bar,
.rate-box-with-sentiment-bar:hover .sentiment-bar .neutralbar {
width: 200px !important;
}
.credit-rate-with-sentiment-bar:hover .sentiment-bar,
.credit-rate-with-sentiment-bar:hover .sentiment-bar .neutralbar {
width: 200px !important;
}
.neutralbar {
display: none;
}
.neutralbar.en, .neutralbar.en .neutext, .hasvotes.neutralbar {
display: inline-block;
}
More information
More information
