Discuss Scratch

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:
/* 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

To do:
  • Glowing borders of input boxes-Done!
  • Change message color-Done!
  • Sharing box thingy-Done!
  • WIP box-Done!

Last edited by OrcaCat (Nov. 11, 2013 16:13:15)



bob6
Scratcher
100+ posts

Green/Red Themed CSS for Chrome

Nice work!
Unfortunately, I think the blue color is cool, so I won't be changing it anytime soon.
Maybe I'll edit your code and change it to red.

bob6 games: dedicated to bring the best games to your screen!
Check out my new game:
A very hard puzzle game that'll be guaranteed to twist your brain!
OrcaCat
Scratcher
1000+ posts

Green/Red Themed CSS for Chrome

bob6 wrote:

Nice work!
Unfortunately, I think the blue color is cool, so I won't be changing it anytime soon.
Maybe I'll edit your code and change it to red.
I could do that.


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.
OrcaCat
Scratcher
1000+ posts

Green/Red Themed CSS for Chrome

PullJosh wrote:

Awesome! I might edit this to my preferences.
Great! Please post it, so that others can use it! I'll be sure to give you credit


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):
/* 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

PullJosh wrote:

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.
Okay.


OrcaCat
Scratcher
1000+ posts

Green/Red Themed CSS for Chrome

I added some new features to the original post.


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

comp500 wrote:

I may be able to convert this to CustomCat JSON

PullJosh wrote:

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?
Yep.

comp500 wrote:

I may be able to convert this to CustomCat JSON
Great!

WindowsExplorer wrote:

Nice! Interesting technique, works very well! Red and new green ones look great.
Thanks.

Last edited by OrcaCat (Nov. 10, 2013 16:32:13)



OrcaCat
Scratcher
1000+ posts

Green/Red Themed CSS for Chrome

PullJosh wrote:

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;
}
I like it!


PullJosh
Scratcher
1000+ posts

Green/Red Themed CSS for Chrome

epicepicman
Scratcher
500+ posts

Green/Red Themed CSS for Chrome

Will this work if I put it into Stylish? I'm too lazy to open all those folders.



CN12
Scratcher
1000+ posts

Green/Red Themed CSS for Chrome

I love it!

But it also slightly changed something on another website…

You and 11 others like this post. Unlike?
———————————————-

Album 2 coming soon eventually!

Powered by DjangoBB