Custom themes for Refuge (or any site) using Stylish browser addon

View previous topic View next topic Go down

What do you think of this idea?

100% 100% 
[ 2 ]
0% 0% 
[ 0 ]
0% 0% 
[ 0 ]
0% 0% 
[ 0 ]
0% 0% 
[ 0 ]
 
Total Votes : 2

Custom themes for Refuge (or any site) using Stylish browser addon

Post by Jaysp656 on Mon Apr 01, 2013 11:37 am

This is just an idea that I hope someone will jump on. I found that through Firefox and Chrome addons like Stylish and Greasemonkey there is a way to have a custom theme of any website. Granted these themes are only visible to each individual user. (My theme wouldn't be seen by you who may have your own theme).

I use Stylish for changing my Facebook and Youtube and was thinking a more personalized theme would be cool for Refuge.

Stylish for Firefox

Stylish for Chrome


Here is one script site for Stylish http://userstyles.org/

Examples:
Facebook - http://userstyles.org/styles/browse/facebook

Youtube - http://userstyles.org/styles/browse/youtube

Google - http://userstyles.org/styles/browse/google



And last here is the help page for how to use and create themes
http://userstyles.org/help

I'm hoping that someone can make a general template that can be used for individual themes for this site specifically.

Currently the only styles for Refuge are the one(s) I've made (work in progress)

Prototype: Refuge Black and Purple version 1 - An experimental style that makes the background color black and most text a dark purple. (really easy to change color so if you want something specific just change it your self or post here with the desired colors {preferably in hex code})


Hopefully last updated version


Justdubs Refuge Full Transparency and JD Background - http://userstyles.org/styles/85591/justdubs-refuge-full-transparency-and-jd-backgroun?r=1365297007
This is a style that has the old JD background and transparent menus and stuff.


Last edited by Jaysp656 on Sun Apr 07, 2013 10:41 am; edited 5 times in total

_________________


Custom Themes For Win7 & 8
MAL
Anime Music:

Current Anime Library - (includes Vocaloid under Hatsune Miku Folder)

Vocaloid Library

avatar
Jaysp656
Vasto Lorde

Male Posts : 301
Join date : 2013-01-21
Age : 25
Location : Around Chattanooga, TN
The League of Legends Club

Back to top Go down

Re: Custom themes for Refuge (or any site) using Stylish browser addon

Post by Jaysp656 on Mon Apr 01, 2013 5:13 pm

Here is an example code that gets rid of the pink on April 1st

code:



body {
background-color: black !important;
}
#bar {
color: red !important;
}
a {
text-decoration: none !important;
}
BODY { font-family: "Times New Roman", serif !important;
}
<BODY STYLE="font-family: 'Times New Roman', fantasy">

P { font-size: 12pt; !important}
BLOCKQUOTE { font-size: larger !important}
EM { font-size: 150% !important}
EM { font-size: 1.5em !important}


H1 { background-color: #000 !important}

P {
color: black;
background: black;
border: double;
}

H1 { border-bottom: solid #4F2F4F
}
H1 { border-bottom: thick solid }

H1 { border-top: solid #4F2F4F
}
H1 { border-top: thick solid }

H1 { border-right: solid #4F2F4F
}
H1 { border-right: thick solid }

H1 { border-left: solid #4F2F4F
}
H1 { border-left: thick solid }


/*H2 */
H2 { border-bottom: solid #330000
}
H2 { border-bottom: thick solid }

H2 { border-top: solid #330000
}
H2 { border-top: solid }

H2 { border-right: solid #330000
}
H2 { border-right: thick solid }

H2 { border-left: solid #330000
}
H2 { border-left: thick solid }

H2(
P { border: solid black }

P {
border-top: solid black;
border-right: solid black;
border-bottom: solid black;
border-left: solid black;
}

h2
{
background-color:#000000;
font-family: "Times New Roman", serif !important;


border-top: solid black;
border-right: solid black;
border-bottom: solid black;
border-left: solid black;
}




div
{
background-color:#000000;
font-family: "Times New Roman", serif !important;
border-top: solid black;
border-right: solid black;
border-bottom: solid black;
border-left: solid black;
}

li
{
background-color:#000000;
font-family: "Times New Roman", serif !important;
border-top: solid black;
border-right: solid black;
border-bottom: solid black;
border-left: solid black;
}


a
{
background-color:#000000;
font-family: "Times New Roman", serif !important;

border-top: solid black;
border-right: solid black;
border-bottom: solid black;
border-left: solid black;
}



h4
{
background-color:#000000;
font-family: "Times New Roman", serif !important;

border-top: solid black;
border-right: solid black;
border-bottom: solid black;
border-left: solid black;
}

head
{
background-color:#000000;
font-family: "Times New Roman", serif !important;

border-top: solid black;
border-right: solid black;
border-bottom: solid black;
border-left: solid black;
}

head
{
background-color:#000000;
font-family: "Times New Roman", serif !important;
border-top: solid black;
border-right: solid black;
border-bottom: solid black;
border-left: solid black;
}

meta
{
background-color:#000000;
font-family: "Times New Roman", serif !important;

border-top: solid black;
border-right: solid black;
border-bottom: solid black;
border-left: solid black;
}

link
{
background-color:#000000;
font-family: "Times New Roman", serif !important;

border-top: solid black;
border-right: solid black;
border-bottom: solid black;
border-left: solid black;
}

style
{
background-color:#000000;
font-family: "Times New Roman", serif !important;

border-top: solid black;
border-right: solid black;
border-bottom: solid black;
border-left: solid black;
}

ul
{
background-color:#000000;
font-family: "Times New Roman", serif !important;

border-top: solid black;
border-right: solid black;
border-bottom: solid black;
border-left: solid black;
}

dl
{
background-color:#000000;
font-family: "Times New Roman", serif !important;

border-top: thick solid darkblue;
border-right: solid black;
border-bottom: solid black;
border-left: solid black;
}


Copy/Paste into a new style, then set it so all URLs starting with http://justdubsrefuge.omgforum.net/

and that is all! Though it is still experimental...lol

_________________


Custom Themes For Win7 & 8
MAL
Anime Music:

Current Anime Library - (includes Vocaloid under Hatsune Miku Folder)

Vocaloid Library

avatar
Jaysp656
Vasto Lorde

Male Posts : 301
Join date : 2013-01-21
Age : 25
Location : Around Chattanooga, TN
The League of Legends Club

Back to top Go down

Re: Custom themes for Refuge (or any site) using Stylish browser addon

Post by Sporadic on Mon Apr 01, 2013 5:43 pm

Party pooper. It s gonna be changed back tomorrow anyway.

_________________
avatar
Sporadic
Content Director
Content Director

Male Posts : 1174
Join date : 2013-01-17
Age : 29
Location : Fiore
The Anime Cafe The New Release Club Film Club

Back to top Go down

Re: Custom themes for Refuge (or any site) using Stylish browser addon

Post by Jaysp656 on Mon Apr 01, 2013 6:57 pm

But I'm not doing this for a temporary one day use. My idea is to make custom forum themes that do not remove any functionality. And these scripts could allow users to determine what they want the forum to look like.



Here is an update to my experimenting
Spoiler:



body {
background-color: black !important;
}
#bar {
color: red !important;
}
a {
text-decoration: none !important;
}
BODY { font-family: "Times New Roman", serif !important;
}
<BODY STYLE="font-family: 'Times New Roman', fantasy">

P { font-size: 12pt; !important}
BLOCKQUOTE { font-size: larger !important}
EM { font-size: 150% !important}
EM { font-size: 1.5em !important}


H1 { background-color: #000 !important}

P {
color: black;
background: black;
border: double;
}

H1 { border-bottom: solid #4F2F4F
}
H1 { border-bottom: thick solid }

H1 { border-top: solid #4F2F4F
}
H1 { border-top: thick solid }

H1 { border-right: solid #4F2F4F
}
H1 { border-right: thick solid }

H1 { border-left: solid #4F2F4F
}
H1 { border-left: thick solid }


/*H2 */
H2 { border-bottom: solid #330000
}
H2 { border-bottom: thick solid }

H2 { border-top: solid #330000
}
H2 { border-top: solid }

H2 { border-right: solid #330000
}
H2 { border-right: thick solid }

H2 { border-left: solid #330000
}
H2 { border-left: thick solid }

H2(
P { border: solid black }

P {
border-top: solid black;
border-right: solid black;
border-bottom: solid black;
border-left: solid black;
}

h2
{
background-color:#000000;
font-family: "Times New Roman", serif !important;


border-top: solid black;
border-right: solid black;
border-bottom: solid black;
border-left: solid black;
}




div
{
background-color:#000000;
font-family: "Times New Roman", serif !important;
border-top: solid black;
border-right: solid black;
border-bottom: solid black;
border-left: solid black;
}

li
{
background-color:#000000;
font-family: "Times New Roman", serif !important;
border-top: solid black;
border-right: solid black;
border-bottom: solid black;
border-left: solid black;
}


a
{
background-color:#000000;
font-family: "Times New Roman", serif !important;

border-top: solid black;
border-right: solid black;
border-bottom: solid black;
border-left: solid black;
}



h4
{
background-color:#000000;
font-family: "Times New Roman", serif !important;

border-top: solid black;
border-right: solid black;
border-bottom: solid black;
border-left: solid black;
}

head
{
background-color:#000000;
font-family: "Times New Roman", serif !important;

border-top: solid black;
border-right: solid black;
border-bottom: solid black;
border-left: solid black;
}

head
{
background-color:#000000;
font-family: "Times New Roman", serif !important;
border-top: solid black;
border-right: solid black;
border-bottom: solid black;
border-left: solid black;
}

meta
{
background-color:#000000;
font-family: "Times New Roman", serif !important;

border-top: solid black;
border-right: solid black;
border-bottom: solid black;
border-left: solid black;
}

link
{
background-color:#000000;
font-family: "Times New Roman", serif !important;

border-top: solid black;
border-right: solid black;
border-bottom: solid black;
border-left: solid black;
}

style
{
background-color:#000000;
font-family: "Times New Roman", serif !important;

border-top: solid black;
border-right: solid black;
border-bottom: solid black;
border-left: solid black;
}

ul
{
background-color:#000000;
font-family: "Times New Roman", serif !important;

border-top: thin solid grey;
border-right: thin solid grey;
//border-bottom: solid grey;
border-left: thin solid grey;
}

dl
{
background-color:#000000;
font-family: "Times New Roman", serif !important;

border-top: solid grey;
border-right: solid black;
border-bottom: solid black;
border-left: solid black;
}

span
{
background-color:#000000;
font-family: "Times New Roman", serif !important;

border-top: thick solid grey;
border-right: thick solid black;
border-bottom: thick solid grey;
border-left: thick solid black;
}

dd
{
// background-color:#000000;
font-family: "Times New Roman", serif !important;
}


br
{
background-color:#000000;
font-family: "Times New Roman", serif !important;

}

strong
{
background-color:#000000;
font-family: "Times New Roman", serif !important;

}


_________________


Custom Themes For Win7 & 8
MAL
Anime Music:

Current Anime Library - (includes Vocaloid under Hatsune Miku Folder)

Vocaloid Library

avatar
Jaysp656
Vasto Lorde

Male Posts : 301
Join date : 2013-01-21
Age : 25
Location : Around Chattanooga, TN
The League of Legends Club

Back to top Go down

Re: Custom themes for Refuge (or any site) using Stylish browser addon

Post by Jaysp656 on Tue Apr 02, 2013 12:19 am

Got another update that fixes the mouse hover problems.

code:



body {
background-color: black !important;
}
#bar {
color: red !important;
}
a {
text-decoration: none !important;
}
BODY { font-family: "Times New Roman", serif !important;
}
<BODY STYLE="font-family: 'Times New Roman', fantasy">

P { font-size: 12pt; !important}
BLOCKQUOTE { font-size: larger !important}
EM { font-size: 150% !important}
EM { font-size: 1.5em !important}


H1 { background-color: #000 !important}

P {
color: black;
background: black;
border: double;
}

H1 { border-bottom: solid #4F2F4F
}
H1 { border-bottom: thick solid }

H1 { border-top: solid #4F2F4F
}
H1 { border-top: thick solid }

H1 { border-right: solid #4F2F4F
}
H1 { border-right: thick solid }

H1 { border-left: solid #4F2F4F
}
H1 { border-left: thick solid }


/*H2 */
H2 { border-bottom: solid #330000
}
H2 { border-bottom: thick solid }

H2 { border-top: solid #330000
}
H2 { border-top: solid }

H2 { border-right: solid #330000
}
H2 { border-right: thick solid }

H2 { border-left: solid #330000
}
H2 { border-left: thick solid }

H2(
P { border: solid black }

P {
border-top: solid black;
border-right: solid black;
border-bottom: solid black;
border-left: solid black;
}

h2
{
background-color:#000000;
font-family: "Times New Roman", serif !important;


border-top: solid black;
border-right: solid black;
border-bottom: solid black;
border-left: solid black;
}




div
{
background-color:#000000;
font-family: "Times New Roman", serif !important;
border-top: solid black;
border-right: solid black;
border-bottom: solid black;
border-left: solid black;
}

li
{
background-color:#000000;
font-family: "Times New Roman", serif !important;
border-top: solid black;
border-right: solid black;
border-bottom: solid black;
border-left: solid black;
}


a
{
background-color:#000000;
font-family: "Times New Roman", serif !important;

border-top: solid black;
border-right: solid black;
border-bottom: solid black;
border-left: solid black;
}



h4
{
background-color:#000000;
font-family: "Times New Roman", serif !important;

border-top: solid black;
border-right: solid black;
border-bottom: solid black;
border-left: solid black;
}

head
{
background-color:#000000;
font-family: "Times New Roman", serif !important;

border-top: solid black;
border-right: solid black;
border-bottom: solid black;
border-left: solid black;
}

head
{
background-color:#000000;
font-family: "Times New Roman", serif !important;
border-top: solid black;
border-right: solid black;
border-bottom: solid black;
border-left: solid black;
}

meta
{
background-color:#000000;
font-family: "Times New Roman", serif !important;

border-top: solid black;
border-right: solid black;
border-bottom: solid black;
border-left: solid black;
}

link
{
background-color:#000000;
font-family: "Times New Roman", serif !important;

border-top: solid black;
border-right: solid black;
border-bottom: solid black;
border-left: solid black;
}

style
{
background-color:#000000;
font-family: "Times New Roman", serif !important;

border-top: solid black;
border-right: solid black;
border-bottom: solid black;
border-left: solid black;
}

ul
{
background-color:#000000;
font-family: "Times New Roman", serif !important;

border-top: thin solid grey;
border-right: thin solid grey;
//border-bottom: solid grey;
border-left: thin solid grey;
}

dl
{
background-color:#000000;
font-family: "Times New Roman", serif !important;

border-top: solid grey;
border-right: solid black;
border-bottom: solid black;
border-left: solid black;
}

span
{
background-color:#000000;
font-family: "Times New Roman", serif !important;

border-top: thick solid grey;
border-right: thick solid black;
border-bottom: thick solid grey;
border-left: thick solid black;
}

dd
{
// background-color:#000000;
font-family: "Times New Roman", serif !important;
}


br
{
background-color:#000000;
font-family: "Times New Roman", serif !important;

}

strong
{
background-color:#000000;
font-family: "Times New Roman", serif !important;

}

span
{
background-color:#000000;
font-family: "Times New Roman", serif !important;

border-top: thick solid grey;
border-right: thick solid black;
border-bottom: thick solid grey;
border-left: thick solid black;
}

input
{
// color:#330000;
font-family: "Times New Roman", serif !important;


border-top: thick double grey;
border-right: thick double grey;
border-bottom: thick double grey;
border-left: thick double grey;
}

embed
{
//background-color:#000000;
font-family: "Times New Roman", serif !important;

/*
border-top: thick double grey;
border-right: thick double grey;
border-bottom: thick double grey;
border-left: thick double grey; */
}

img
{
//background-color:#000000;
font-family: "Times New Roman", serif !important;

/*
border-top: thick double grey;
border-right: thick double grey;
border-bottom: thick double grey;
border-left: thick double grey; */
}

textarea
{
// background-color:#000000;
font-family: "Times New Roman", serif !important;



}


li.row:hover
{
background-color:#300425;
}





Edit:

Before
http://illiweb.com/fa/pbucket.gif


Partial style conversion
http://illiweb.com/fa/pbucket.gif


Slightly Better style conversion
http://illiweb.com/fa/pbucket.gif

(images of the forum chat)





Edit again>>>>>>>>



Example of what I've done

_________________


Custom Themes For Win7 & 8
MAL
Anime Music:

Current Anime Library - (includes Vocaloid under Hatsune Miku Folder)

Vocaloid Library

avatar
Jaysp656
Vasto Lorde

Male Posts : 301
Join date : 2013-01-21
Age : 25
Location : Around Chattanooga, TN
The League of Legends Club

Back to top Go down

Re: Custom themes for Refuge (or any site) using Stylish browser addon

Post by Ginger7327 on Sat Apr 06, 2013 11:52 pm

Looks great. So far, I see no problems with it. The biggest thing I noticed is that no colors are clashing, everything is still easy to read.

_________________
avatar
Ginger7327
Bronze Saint

Male Posts : 132
Join date : 2013-02-07
Age : 23
The Anime Cafe The League of Legends Club

Back to top Go down

Re: Custom themes for Refuge (or any site) using Stylish browser addon

Post by Sponsored content


Sponsored content


Back to top Go down

View previous topic View next topic Back to top

- Similar topics

 
Permissions in this forum:
You cannot reply to topics in this forum