Discuss Scratch
- Discussion Forums
- » Things I'm Making and Creating
- » Green/Red Themed CSS for Chrome
- OrcaCat
- Scratcher
1000+ posts
Green/Red Themed CSS for Chrome
I didn't really like the blue Scratch theme, so I made this CSS (for Chrome). To use this CSS, on Windows, go to C:\Users\[USERNAME]\AppData\Local\Google\Chrome\User Data\Default\User StyleSheets\Custom.css (OR you could use Stylish)
Open Custom.css and paste this code:
Coming soon: (when I stop procrastinating) Green Scratch Wiki!
Open Custom.css and paste this code:
/* Scratch green CSS */ /* no text shadow (thanks comp500!) */ body { text-shadow:none !important; } /* border fixes (thanks comp500!) */ div#pagewrapper .blockpost .box-head { border-top:none !important; } div#pagewrapper .button { border: 1px solid #eee !important; } div#pagewrapper textarea:focus { box-shadow:none !important; -webkit-box-shadow:none !important; } /* links */ div#pagewrapper a { color: green !important; } div#pagewrapper a:hover, div#pagewrapper a:active, div#pagewrapper a.black:hover, div#pagewrapper a.black:active { color: darkgreen !important; } /* search */ div#pagewrapper #topnav form.search input { border-radius: 5px !important; } /* no favorites, projects etc */ div#pagewrapper .empty-field { background-color: limegreen !important; border: 1px solid green !important; } /* footer */ div#footer { background-color: #32CD32 !important; color: white; opacity: 0.8; } div#footer a { color: white !important; font-weight: bold; } /* top nav */ div#pagewrapper #topnav { background-color: #32CD32 !important; } div#pagewrapper #topnav a{ color: #FFFFFF !important; } div#pagewrapper #topnav ul.site-nav li, div#pagewrapper #topnav ul.site-nav li.last, div#pagewrapper #topnav ul.account-nav>li { border: none !important; } /* hover */ div#pagewrapper #topnav ul.account-nav>li.sign-in:hover, div#pagewrapper #topnav ul.account-nav>li.sign-in.open, div#pagewrapper ul.site-nav li:hover, #topnav ul.account-nav.logged-in li:hover { background: #008000 !important; background-image: -webkit-linear-gradient(#32CD32, #008000, #116411,#32CD32) !important; } div#pagewrapper #topnav ul.account-nav>li.join-scratch:hover { background: #008000 !important; background-image: -webkit-linear-gradient(#32CD32, #008000, #006400,#32CD32) !important; } /* sign in box */ /* arrow */ div#pagewrapper #topnav ul.account-nav .sign-in .popover .arrow:after { border-bottom-color: limegreen !important; } /* box */ div#pagewrapper #topnav ul.account-nav .sign-in .popover { background-color: limegreen !important; border-color: green !important; border-top-left-radius: 10px !important; } div#pagewrapper #topnav ul.account-nav .logged-in-user .dropdown-menu { background-color: green !important; } div#pagewrapper #topnav ul.account-nav ul.user-nav li.logout.divider { border-top: 2px solid limegreen !important; } div#pagewrapper #topnav ul.account-nav .logged-in-user.dropdown.open { background-color: green !important; } /* video */ div#pagewrapper .homepage-banner .video { border: 1px dashed green !important; border-radius: 10px !important; background-color: limegreen !important; } div#pagewrapper li { transition: all .5s !important; } /* box tops */ div#pagewrapper .box { background: #66EE33 !important; border: 0.5px solid green !important; } /* title */ div#pagewrapper .intro .title { color: #55a424 !important; font-weight: bold !important; } /* buttons */ div#pagewrapper .button, div#pagewrapper button { background-image: -webkit-linear-gradient(top, white, limegreen) !important; } /* show more replies */ div#pagewrapper #comments .more-replies .pulldown { color: green !important; } /* message count */ div#pagewrapper #topnav ul.account-nav .messages .notificationsCount { background-color: #77EE22 !important; } /* border of message boxes */ div#pagewrapper input:focus, div#pagewrapper textarea:focus { border-color: rgba(00,168,00,0.8) !important; } div#pagewrapper .controls.tooltip input:focus, div#pagewrapper .control-group.tooltip input:focus, div#pagewrapper .controls.tooltip textarea:focus, div#pagewrapper .control-group.tooltip textarea:focus { box-shadow: #00A800 0 0 0 2px !important; } /* sharing */ div#pagewrapper .project-status-bar { background-color: limegreen !important; color: darkgreen !important; border-color: green !important; } /* draft */ div#pagewrapper .box-head .wip.on { background-color: limegreen !important; color: green !important; border-color: green !important; } div#pagewrapper .box-head .wip { background-color: #84FF53; }
Coming soon: (when I stop procrastinating) Green Scratch Wiki!
Last edited by OrcaCat (Dec. 28, 2013 00:34:24)
- OrcaCat
- Scratcher
1000+ posts
Green/Red Themed CSS for Chrome
This should work (the colors aren't too great)
/* Scratch red CSS */ /* links */ div#pagewrapper a { color: red !important; } div#pagewrapper a:hover, div#pagewrapper a:active, div#pagewrapper a.black:hover, div#pagewrapper a.black:active { color: darkred !important; } /* search */ #topnav form.search input { border-radius: 5px !important; } /* no favorites, projects etc */ .empty-field { background-color: orangered !important; border: 1px solid red !important; } /* footer */ #footer { background-color: #CD3232 !important; color: white; opacity: 0.8; } div#footer a { color: white !important; font-weight: bold; } /* top nav */ div#pagewrapper #topnav { background-color: #CD3232 !important; } div#pagewrapper #topnav a{ color: #FFFFFF !important; } div#pagewrapper #topnav ul.site-nav li, div#pagewrapper #topnav ul.site-nav li.last, div#pagewrapper #topnav ul.account-nav>li { border: none !important; } /* hover */ div#pagewrapper #topnav ul.account-nav>li.sign-in:hover, div#pagewrapper #topnav ul.account-nav>li.sign-in.open, div#pagewrapper ul.site-nav li:hover, #topnav ul.account-nav.logged-in li:hover { background: #800000 !important; background-image: -webkit-linear-gradient(#CD3232, #800000, #641111,#CD3232) !important; } div#pagewrapper #topnav ul.account-nav>li.join-scratch:hover { background: #800000 !important; background-image: -webkit-linear-gradient(#CD3232, #800000, #640000,#CD3232) !important; } /* sign in box */ /* arrow */ div#pagewrapper #topnav ul.account-nav .sign-in .popover .arrow:after { border-bottom-color: orangered !important; } /* box */ div#pagewrapper #topnav ul.account-nav .sign-in .popover { background-color: orangered !important; border-color: red !important; border-top-left-radius: 10px !important; } div#pagewrapper #topnav ul.account-nav .logged-in-user .dropdown-menu { background-color: red !important; } div#pagewrapper #topnav ul.account-nav ul.user-nav li.logout.divider { border-top: 2px solid orangered !important; } div#pagewrapper #topnav ul.account-nav .logged-in-user.dropdown.open { background-color: red !important; } /* video */ div#pagewrapper .homepage-banner .video { border: 1px dashed red !important; border-radius: 10px !important; background-color: orangered !important; } div#pagewrapper li { transition: all .5s !important; } /* box tops */ div#pagewrapper .box { background: #EE6633 !important; border: 0.5px solid red !important; } /* title */ div#pagewrapper .intro .title { color: #a45524 !important; font-weight: bold !important; } /* buttons */ div#pagewrapper .button, div#pagewrapper button { background-image: -webkit-linear-gradient(top, white, orangered) !important; } /* show more replies */ #comments .more-replies .pulldown { color: red !important; }
Last edited by OrcaCat (Nov. 10, 2013 00:45:46)
- PullJosh
- Scratcher
1000+ posts
Green/Red Themed CSS for Chrome
Awesome! I might edit this to my preferences.
- PullJosh
- Scratcher
1000+ posts
Green/Red Themed CSS for Chrome
Okay, I'm 97% done. I need to go to bed soon, but here's what I've got so far (it's basically a toned down version of your lime green):
I need to fix some buttons (some are blue) and the sidebar nav when you are on my stuff and messages.
/* Scratch red CSS */
/* links */
div#pagewrapper a {
color: #99CD4E; !important;
}
div#pagewrapper a:hover, div#pagewrapper a:active, div#pagewrapper a.black:hover, div#pagewrapper a.black:active {
color: #99CD4E !important;
}
/* search */
#topnav form.search input {
border-radius: 15px !important;
}
/* no favorites, projects etc */
.empty-field {
background-color: #99CD4E !important;
border: 1px solid #7EA840 !important;
}
/* footer */
#footer {
background-color: #343434 !important;
color: white;
opacity: 0.8;
}
div#footer a {
color: white !important;
font-weight: bold;
}
/* top nav */
div#pagewrapper #topnav {
background-color: #99CD4E !important;
}
div#pagewrapper #topnav a{
color: #FFFFFF !important;
}
div#pagewrapper #topnav ul.site-nav li, div#pagewrapper #topnav ul.site-nav li.last, div#pagewrapper #topnav ul.account-nav>li {
border: none !important;
}
/* hover */
div#pagewrapper #topnav ul.account-nav>li.sign-in:hover, div#pagewrapper #topnav ul.account-nav>li.sign-in.open, div#pagewrapper ul.site-nav li:hover, #topnav ul.account-nav.logged-in li:hover {
background: #7EA840 !important;
}
div#pagewrapper #topnav ul.account-nav>li.join-scratch:hover {
background: #7EA840 !important;
}
/* sign in box */
/* arrow */
div#pagewrapper #topnav ul.account-nav .sign-in .popover .arrow:after {
border-bottom-color: #7EA840 !important;
}
/* box */
div#pagewrapper #topnav ul.account-nav .sign-in .popover {
background-color: #7EA840 !important;
border-color: #343434 !important;
}
div#pagewrapper #topnav ul.account-nav .logged-in-user .dropdown-menu {
background-color: #7EA840 !important;
}
div#pagewrapper #topnav ul.account-nav ul.user-nav li.logout.divider {
border-top: 2px solid #343434 !important;
}
div#pagewrapper #topnav ul.account-nav .logged-in-user.dropdown.open {
background-color: #7EA840 !important;
}
/* video */
div#pagewrapper .homepage-banner .video {
border-radius: 10px !important;
background-color: #E1E1E1 !important;
}
div#pagewrapper li {
transition: all .5s !important;
}
/* box tops */
div#pagewrapper .box {
background: #99CD4E !important;
border: 0.5px solid #7EA840 !important;
}
/* title */
div#pagewrapper .intro .title {
color: #343434 !important;
font-weight: bold !important;
}
/* show more replies */
#comments .more-replies .pulldown {
color: #99CD4E !important;
}
I need to fix some buttons (some are blue) and the sidebar nav when you are on my stuff and messages.
- OrcaCat
- Scratcher
1000+ posts
Green/Red Themed CSS for Chrome
Okay. Okay, I'm 97% done. I need to go to bed soon, but here's what I've got so far (it's basically a toned down version of your lime green):/* Scratch red CSS */
/* links */
div#pagewrapper a {
color: #99CD4E; !important;
}
div#pagewrapper a:hover, div#pagewrapper a:active, div#pagewrapper a.black:hover, div#pagewrapper a.black:active {
color: #99CD4E !important;
}
/* search */
#topnav form.search input {
border-radius: 15px !important;
}
/* no favorites, projects etc */
.empty-field {
background-color: #99CD4E !important;
border: 1px solid #7EA840 !important;
}
/* footer */
#footer {
background-color: #343434 !important;
color: white;
opacity: 0.8;
}
div#footer a {
color: white !important;
font-weight: bold;
}
/* top nav */
div#pagewrapper #topnav {
background-color: #99CD4E !important;
}
div#pagewrapper #topnav a{
color: #FFFFFF !important;
}
div#pagewrapper #topnav ul.site-nav li, div#pagewrapper #topnav ul.site-nav li.last, div#pagewrapper #topnav ul.account-nav>li {
border: none !important;
}
/* hover */
div#pagewrapper #topnav ul.account-nav>li.sign-in:hover, div#pagewrapper #topnav ul.account-nav>li.sign-in.open, div#pagewrapper ul.site-nav li:hover, #topnav ul.account-nav.logged-in li:hover {
background: #7EA840 !important;
}
div#pagewrapper #topnav ul.account-nav>li.join-scratch:hover {
background: #7EA840 !important;
}
/* sign in box */
/* arrow */
div#pagewrapper #topnav ul.account-nav .sign-in .popover .arrow:after {
border-bottom-color: #7EA840 !important;
}
/* box */
div#pagewrapper #topnav ul.account-nav .sign-in .popover {
background-color: #7EA840 !important;
border-color: #343434 !important;
}
div#pagewrapper #topnav ul.account-nav .logged-in-user .dropdown-menu {
background-color: #7EA840 !important;
}
div#pagewrapper #topnav ul.account-nav ul.user-nav li.logout.divider {
border-top: 2px solid #343434 !important;
}
div#pagewrapper #topnav ul.account-nav .logged-in-user.dropdown.open {
background-color: #7EA840 !important;
}
/* video */
div#pagewrapper .homepage-banner .video {
border-radius: 10px !important;
background-color: #E1E1E1 !important;
}
div#pagewrapper li {
transition: all .5s !important;
}
/* box tops */
div#pagewrapper .box {
background: #99CD4E !important;
border: 0.5px solid #7EA840 !important;
}
/* title */
div#pagewrapper .intro .title {
color: #343434 !important;
font-weight: bold !important;
}
/* show more replies */
#comments .more-replies .pulldown {
color: #99CD4E !important;
}
I need to fix some buttons (some are blue) and the sidebar nav when you are on my stuff and messages.
- comp500
- Scratcher
100+ posts
Green/Red Themed CSS for Chrome
I may be able to convert this to CustomCat JSON
Ubuntu 13.04: Chrome 29.0.1547.76, Flash 11.8 (release 800) Windows 7: Same Both: Dell Inspiron 545: Dual-Core w/3GB RAM… let's stop boasting now…
For more info ask me on my profile page…
AttackScratch.php
- WindowsExplorer
- Scratcher
500+ posts
Green/Red Themed CSS for Chrome
Nice! Interesting technique, works very well!
- PullJosh
- Scratcher
1000+ posts
Green/Red Themed CSS for Chrome
Hey OrcaCat, if I have all links (in #pagewrapper), as being green, and then I put in some code under #SomeIdInsidePageWrapper that said all links should be orange, what would take priority in #someid?
Last edited by PullJosh (Nov. 10, 2013 12:57:52)
- WindowsExplorer
- Scratcher
500+ posts
Green/Red Themed CSS for Chrome
Red and new green ones look great.
- PullJosh
- Scratcher
1000+ posts
Green/Red Themed CSS for Chrome
Okay, here's my (probably) final code for the toned down green:
/* Scratch green CSS */
/* links */
ul#tabs a{
color: #ffffff; !important
}
a.right {
color: #ffffff; !important
}
a.right:hover {
color: #454545; !important
}
div#pagewrapper a:hover, div#pagewrapper a:active, div#pagewrapper a.black:hover, div#pagewrapper a.black:active {
color: #7EA840 !important;
}
.button {
background-image: -webkit-linear-gradient(top,#99CD4E,#7EA840); !important
border-width: 0px; !important
}
.button:hover {
background-image: -webkit-linear-gradient(top,#7EA840,#99CD4E); !important
color: white; !important
}
span#owner {
color:white; !important
}
a#djangobbwrap {
color:white; !important
}
/* search */
#topnav form.search input {
border-radius: 5px !important;
}
/* no favorites, projects etc */
.empty-field {
background-color: #99CD4E !important;
border: 1px solid #7EA840 !important;
}
/* footer */
#footer {
background-color: #343434 !important;
color: white;
opacity: 0.8;
}
div#footer a {
color: white !important;
font-weight: bold;
}
/* top nav */
div#pagewrapper #topnav {
background-color: #99CD4E !important;
}
div#pagewrapper #topnav a{
color: #FFFFFF !important;
}
div#pagewrapper #topnav ul.site-nav li, div#pagewrapper #topnav ul.site-nav li.last, div#pagewrapper #topnav ul.account-nav>li {
border: none !important;
}
/* hover */
div#pagewrapper #topnav ul.account-nav>li.sign-in:hover, div#pagewrapper #topnav ul.account-nav>li.sign-in.open, div#pagewrapper ul.site-nav li:hover, #topnav ul.account-nav.logged-in li:hover {
background: #7EA840 !important;
}
div#pagewrapper #topnav ul.account-nav>li.join-scratch:hover {
background: #7EA840 !important;
}
/* sign in box */
/* arrow */
div#pagewrapper #topnav ul.account-nav .sign-in .popover .arrow:after {
border-bottom-color: #7EA840 !important;
}
/* box */
div#pagewrapper #topnav ul.account-nav .sign-in .popover {
background-color: #7EA840 !important;
border-color: #343434 !important;
}
div#pagewrapper #topnav ul.account-nav .logged-in-user .dropdown-menu {
background-color: #7EA840 !important;
}
div#pagewrapper #topnav ul.account-nav ul.user-nav li.logout.divider {
border-top: 2px solid #343434 !important;
}
div#pagewrapper #topnav ul.account-nav .logged-in-user.dropdown.open {
background-color: #7EA840 !important;
}
/* video */
div#pagewrapper .homepage-banner .video {
border-radius: 10px !important;
background-color: #E1E1E1 !important;
}
div#pagewrapper li {
transition: all .5s !important;
}
/* box tops */
div#pagewrapper .box {
background: #99CD4E !important;
border: 0.5px solid #7EA840 !important;
}
/* title */
div#pagewrapper .intro .title {
color: #343434 !important;
font-weight: bold !important;
}
/* show more replies */
#comments .more-replies .pulldown {
color: #99CD4E !important;
}
- OrcaCat
- Scratcher
1000+ posts
Green/Red Themed CSS for Chrome
I may be able to convert this to CustomCat JSON
Yep. Hey OrcaCat, if I have all links (in #pagewrapper), as being green, and then I put in some code under #SomeIdInsidePageWrapper that said all links should be orange, what would take priority in #someid?
Great! I may be able to convert this to CustomCat JSON
Thanks. Nice! Interesting technique, works very well! Red and new green ones look great.
Last edited by OrcaCat (Nov. 10, 2013 16:32:13)
- OrcaCat
- Scratcher
1000+ posts
Green/Red Themed CSS for Chrome
I like it! Okay, here's my (probably) final code for the toned down green:/* Scratch green CSS */
/* links */
ul#tabs a{
color: #ffffff; !important
}
a.right {
color: #ffffff; !important
}
a.right:hover {
color: #454545; !important
}
div#pagewrapper a:hover, div#pagewrapper a:active, div#pagewrapper a.black:hover, div#pagewrapper a.black:active {
color: #7EA840 !important;
}
.button {
background-image: -webkit-linear-gradient(top,#99CD4E,#7EA840); !important
border-width: 0px; !important
}
.button:hover {
background-image: -webkit-linear-gradient(top,#7EA840,#99CD4E); !important
color: white; !important
}
span#owner {
color:white; !important
}
a#djangobbwrap {
color:white; !important
}
/* search */
#topnav form.search input {
border-radius: 5px !important;
}
/* no favorites, projects etc */
.empty-field {
background-color: #99CD4E !important;
border: 1px solid #7EA840 !important;
}
/* footer */
#footer {
background-color: #343434 !important;
color: white;
opacity: 0.8;
}
div#footer a {
color: white !important;
font-weight: bold;
}
/* top nav */
div#pagewrapper #topnav {
background-color: #99CD4E !important;
}
div#pagewrapper #topnav a{
color: #FFFFFF !important;
}
div#pagewrapper #topnav ul.site-nav li, div#pagewrapper #topnav ul.site-nav li.last, div#pagewrapper #topnav ul.account-nav>li {
border: none !important;
}
/* hover */
div#pagewrapper #topnav ul.account-nav>li.sign-in:hover, div#pagewrapper #topnav ul.account-nav>li.sign-in.open, div#pagewrapper ul.site-nav li:hover, #topnav ul.account-nav.logged-in li:hover {
background: #7EA840 !important;
}
div#pagewrapper #topnav ul.account-nav>li.join-scratch:hover {
background: #7EA840 !important;
}
/* sign in box */
/* arrow */
div#pagewrapper #topnav ul.account-nav .sign-in .popover .arrow:after {
border-bottom-color: #7EA840 !important;
}
/* box */
div#pagewrapper #topnav ul.account-nav .sign-in .popover {
background-color: #7EA840 !important;
border-color: #343434 !important;
}
div#pagewrapper #topnav ul.account-nav .logged-in-user .dropdown-menu {
background-color: #7EA840 !important;
}
div#pagewrapper #topnav ul.account-nav ul.user-nav li.logout.divider {
border-top: 2px solid #343434 !important;
}
div#pagewrapper #topnav ul.account-nav .logged-in-user.dropdown.open {
background-color: #7EA840 !important;
}
/* video */
div#pagewrapper .homepage-banner .video {
border-radius: 10px !important;
background-color: #E1E1E1 !important;
}
div#pagewrapper li {
transition: all .5s !important;
}
/* box tops */
div#pagewrapper .box {
background: #99CD4E !important;
border: 0.5px solid #7EA840 !important;
}
/* title */
div#pagewrapper .intro .title {
color: #343434 !important;
font-weight: bold !important;
}
/* show more replies */
#comments .more-replies .pulldown {
color: #99CD4E !important;
}
- Discussion Forums
- » Things I'm Making and Creating
- » Green/Red Themed CSS for Chrome