Chathurga
Active Member
Got a little bored of youtube's default theme so I thought I'd make it more appealing to the eye.
To use this theme install Stylish for Firefox and restart. After that right click the Stylish icon in the bottom right, go to Write New Style -> Blank Style and paste the following CSS into the text box and then click save.
Before:
After:
This is just a quick release so there's still a lot to restyle, feedback is mandatory.
To use this theme install Stylish for Firefox and restart. After that right click the Stylish icon in the bottom right, go to Write New Style -> Blank Style and paste the following CSS into the text box and then click save.
[highlight=css]@-moz-document domain("youtube.com") {
body {
background-color: #dbdecd !important;
}
#baseDiv {
padding-bottom: 0 !important;
}
#footer, #copyright, #watch-longform-buttons, #watch-main-area, #ratingWrapper, #watch-stats-data-wrapper, #watch-url-embed-wrapper, #watch-channel-subscribe, #masthead-nav-main, #watch-category, #masthead-nav-user, #watch-video-tags-div, .watch-comment-action, #masthead-utility-menulink-short + span, .watch-comment-voting, #div_main_comment, #watch-comment-post, #watch-featured-videos-panel + div, .watch-comment-marked-spam {
display: none !important;
}
#watch-video-details-inner-less, #watch-video-details-toggle-less {
display: none !important;
}
#watch-video-details-inner-more, #watch-video-details-toggle-more {
display: block !important;
}
#watch-channel-vids-div, #watch-related-vids-body, #watch-channel-vids-body, #watch-this-vid-info, #watch-featured-vids-body {
border: 0 !important;
-moz-border-radius: 15px !important;
background-color: #444444 !important;
color: #fffef7 !important;
padding: 8px 5px !important;
}
#watch-this-vid-info {
width: 630px !important;
margin-top: 15px !important;
}
#watch-video-response {
-moz-border-radius: 5px !important;
color: #444444 !important;
}
a {
font-weight: bold !important;
color: #eb6f00 !important;
}
.video-username a, #watch-channel-vids-top a, .watch-ppv-label a {
color: #b85700 !important;
}
a:hover {
color: #90c600 !important;
}
.post-date, .video-view-count {
color: #e5e4de !important;
}
.watch-ppv-vid, .watch-comment-head {
background-color: #444444 !important;
}
#watch-ratings-views {
padding: 0 0 4px !important;
}
.watch-comment-entry {
background-color: #fffef7 !important;
-moz-border-radius: 8px !important;
border-top: 0 !important;
font-family: helvetica !important;
}
#watch-comments-options {
background-color: #fffef7 !important;
-moz-border-radius: 8px !important;
border: 0 !important;
}
.watch-comment-head {
background-color: #fffef7 !important;
}
#watch-comments-options-inner {
background: none !important;
}
.watch-comment-body {
color: #444444 !important;
padding-bottom: 5px !important;
}
#watch-comments-options {
color: #444444 !important;
}
.watch-comment-time {
font-size: 80% !important;
opacity: 0.6 !important;
}
#masthead-search {
border: 0 !important;
background: none !important;
}
#masthead-search-term {
width: 435px !important;
border: 0 !important;
height: 16px !important;
-moz-border-radius: 5px !important;
}
.search-term-focus {
margin: 1px 0 !important;
padding: 4px 2px 1px !important;
border: 0 !important;
}
.yt-button.yt-button-primary:not(.yt-menulink-btn) {
border: 0 !important;
background: #444444 !important;
-moz-border-radius: 5px !important;
padding-top: 1px !important;
height: 24px !important;
font-size: 110%;
}
#logo {
background-image: url(http://i48.tinypic.com/kcngx4.png) !important;
background-repeat: no-repeat !important;
}
.yt-uix-expander-head {
-moz-user-select: none !important;
}
#watch-this-vid-info .yt-uix-expander-head {
color: #fffef7 !important;
}
.expander-small {
border-top: 1px dashed #fffef7 !important;
}
}[/highlight]
body {
background-color: #dbdecd !important;
}
#baseDiv {
padding-bottom: 0 !important;
}
#footer, #copyright, #watch-longform-buttons, #watch-main-area, #ratingWrapper, #watch-stats-data-wrapper, #watch-url-embed-wrapper, #watch-channel-subscribe, #masthead-nav-main, #watch-category, #masthead-nav-user, #watch-video-tags-div, .watch-comment-action, #masthead-utility-menulink-short + span, .watch-comment-voting, #div_main_comment, #watch-comment-post, #watch-featured-videos-panel + div, .watch-comment-marked-spam {
display: none !important;
}
#watch-video-details-inner-less, #watch-video-details-toggle-less {
display: none !important;
}
#watch-video-details-inner-more, #watch-video-details-toggle-more {
display: block !important;
}
#watch-channel-vids-div, #watch-related-vids-body, #watch-channel-vids-body, #watch-this-vid-info, #watch-featured-vids-body {
border: 0 !important;
-moz-border-radius: 15px !important;
background-color: #444444 !important;
color: #fffef7 !important;
padding: 8px 5px !important;
}
#watch-this-vid-info {
width: 630px !important;
margin-top: 15px !important;
}
#watch-video-response {
-moz-border-radius: 5px !important;
color: #444444 !important;
}
a {
font-weight: bold !important;
color: #eb6f00 !important;
}
.video-username a, #watch-channel-vids-top a, .watch-ppv-label a {
color: #b85700 !important;
}
a:hover {
color: #90c600 !important;
}
.post-date, .video-view-count {
color: #e5e4de !important;
}
.watch-ppv-vid, .watch-comment-head {
background-color: #444444 !important;
}
#watch-ratings-views {
padding: 0 0 4px !important;
}
.watch-comment-entry {
background-color: #fffef7 !important;
-moz-border-radius: 8px !important;
border-top: 0 !important;
font-family: helvetica !important;
}
#watch-comments-options {
background-color: #fffef7 !important;
-moz-border-radius: 8px !important;
border: 0 !important;
}
.watch-comment-head {
background-color: #fffef7 !important;
}
#watch-comments-options-inner {
background: none !important;
}
.watch-comment-body {
color: #444444 !important;
padding-bottom: 5px !important;
}
#watch-comments-options {
color: #444444 !important;
}
.watch-comment-time {
font-size: 80% !important;
opacity: 0.6 !important;
}
#masthead-search {
border: 0 !important;
background: none !important;
}
#masthead-search-term {
width: 435px !important;
border: 0 !important;
height: 16px !important;
-moz-border-radius: 5px !important;
}
.search-term-focus {
margin: 1px 0 !important;
padding: 4px 2px 1px !important;
border: 0 !important;
}
.yt-button.yt-button-primary:not(.yt-menulink-btn) {
border: 0 !important;
background: #444444 !important;
-moz-border-radius: 5px !important;
padding-top: 1px !important;
height: 24px !important;
font-size: 110%;
}
#logo {
background-image: url(http://i48.tinypic.com/kcngx4.png) !important;
background-repeat: no-repeat !important;
}
.yt-uix-expander-head {
-moz-user-select: none !important;
}
#watch-this-vid-info .yt-uix-expander-head {
color: #fffef7 !important;
}
.expander-small {
border-top: 1px dashed #fffef7 !important;
}
}[/highlight]
Before:
After:
This is just a quick release so there's still a lot to restyle, feedback is mandatory.