Custom themes for Refuge (or any site) using Stylish browser addon
3 posters
Page 1 of 1
What do you think of this idea?
Custom themes for Refuge (or any site) using Stylish browser addon
by Jaysp656 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.
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
Jaysp656- Vasto Lorde
-
Posts : 301
Join date : 2013-01-21
Age : 31
Location : Around Chattanooga, TN
Re: Custom themes for Refuge (or any site) using Stylish browser addon
by Jaysp656 Mon Apr 01, 2013 5:13 pm
Here is an example code that gets rid of the pink on April 1st
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
- 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
Jaysp656- Vasto Lorde
- Posts : 301
Join date : 2013-01-21
Age : 31
Location : Around Chattanooga, TN
Re: Custom themes for Refuge (or any site) using Stylish browser addon
by Sporadic Mon Apr 01, 2013 5:43 pm
Party pooper. It s gonna be changed back tomorrow anyway.
Sporadic- Content Director
- Posts : 1174
Join date : 2013-01-17
Age : 35
Location : Fiore
Re: Custom themes for Refuge (or any site) using Stylish browser addon
by Jaysp656 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
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;
}
Jaysp656- Vasto Lorde
- Posts : 301
Join date : 2013-01-21
Age : 31
Location : Around Chattanooga, TN
Re: Custom themes for Refuge (or any site) using Stylish browser addon
by Jaysp656 Tue Apr 02, 2013 12:19 am
Got another update that fixes the mouse hover problems.
Edit:
Before
https://2img.net/h/i1300.photobucket.com/albums/ag99/Jaysp656/Screenshot21_zps920b8bf1.png
Partial style conversion
https://2img.net/h/i1300.photobucket.com/albums/ag99/Jaysp656/Screenshot19_zpsb67e74c8.png
Slightly Better style conversion
https://2img.net/h/i1300.photobucket.com/albums/ag99/Jaysp656/Screenshot20_zps34f80ef2.png
(images of the forum chat)
Edit again>>>>>>>>
Example of what I've done
- 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
https://2img.net/h/i1300.photobucket.com/albums/ag99/Jaysp656/Screenshot21_zps920b8bf1.png
Partial style conversion
https://2img.net/h/i1300.photobucket.com/albums/ag99/Jaysp656/Screenshot19_zpsb67e74c8.png
Slightly Better style conversion
https://2img.net/h/i1300.photobucket.com/albums/ag99/Jaysp656/Screenshot20_zps34f80ef2.png
(images of the forum chat)
Edit again>>>>>>>>
Example of what I've done
Jaysp656- Vasto Lorde
- Posts : 301
Join date : 2013-01-21
Age : 31
Location : Around Chattanooga, TN
Re: Custom themes for Refuge (or any site) using Stylish browser addon
by Ginger7327 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.
Ginger7327- Bronze Saint
- Posts : 132
Join date : 2013-02-07
Age : 30
Sponsored content
Similar topics» Unofficial JustDubs Refuge Concept Site
» Weekly Avi Themes
» What I think Kami's Sister will look like in the new site!
» Akira on the JD site
» New Site for JD community
» Weekly Avi Themes
» What I think Kami's Sister will look like in the new site!
» Akira on the JD site
» New Site for JD community
Page 1 of 1
Permissions in this forum:
You cannot reply to topics in this forum|
|
|