How do I create game themes using the script?

Be sure to read and follow the guidelines for our forums.

Jul 9, 2022 10:08 am

1. Install the theming script. Here are the instructions.

2. Visit your game details Advanced Rules Definitions and add a new theme name (avoid spaces, leading numbers and punctuation e.g. "loop" is good, "90's" is bad).

3. Edit the Game themes script from the tamper monkey menu.

4. Add your theme's CSS near the bottom of the script. Above the console.log - look at this screenshot for the format.

5. Press Ctrl+S to save your script, then F5 your page to see the changes. Repeat until bored.

6. Rest of the owl?
Great! So how do we know what that CSS should look like?!

Press F12 - this will bring up the browser's dev tools. Select the arrow,

then move around the page until you find something you want to style. Hack at the CSS in the browser.

When you have it closer to the way you like it, copy the result back to your script.

Once you have a theme, live with it for a bit. See how it feels. You're only changing your view at the moment, so don't worry about breaking things.

Once you're happy with it, let me know so we can look at including it for everyone.

Adam

Jul 14, 2022 6:33 pm

How do I create game themes using the script?

A new way of distributing themes to people with the script.

1. Create a post* and place your CSS in spoiler.

2. Save the post and get the post id. You can get this from the end of the post's URL (after the #p). e.g. this post has id: 1222257

3. In your game's theme put the post number (no quotes) as your theme.

4. Maybe edit the spoiler's name and add your theme's id, and add a screenshot.

[ +- ] Creepy cold theme: 1222257

@import url('https://fonts.googleapis.com/css2?family=Jolly+Lodger&display=swap');

.headerbar:after{
bottom: 0;
left: 0;
width: 100%;
height: 4px;
top: auto;
background-color:#91d9de !important;
filter: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"><filter id="gpRandomnessSvg"><feTurbulence x="0" y="0" baseFrequency="0.006" type="fractalNoise" numOctaves="5"></feTurbulence><feDisplacementMap in="SourceGraphic" scale="20" /></filter></svg>#gpRandomnessSvg');
}

.headerbar:before{
display:none;
}

.fancyButton:before,
.fancyButton:after,
.trapezoid.redTrapezoid:before,
.trapezoid.redTrapezoid:after
{
left: 0;
width: 100%;
height: 4px;
}

.fancyButton:before,
.trapezoid.redTrapezoid:before{
top: 0;
}

.fancyButton:after,
.trapezoid.redTrapezoid:after{
bottom: 0;
top:auto;
}

button.fancyButton,
button.fancyButton:active,
button.fancyButton:visited,
a.fancyButton,
a.fancyButton:active,
a.fancyButton:visited,
.trapezoid.redTrapezoid{
margin:0 10px;
font-family:'Jolly Lodger',serif;
font-variant: small-caps;
padding:4px 10px;
background-color: transparent;
color: #a71300;
border-left: solid 1px;
border-right: solid 1px;
}

h1.headerbar, h2.headerbar, h3.headerbar, h4.headerbar{
background-color:transparent;
color:#333;
font-family:'Jolly Lodger',serif;
}

.breadcrumbs,
#breadcrumbs{
font-family: 'Jolly Lodger',serif;
font-size:120%;
}

#page_forum_thread .postHeader {
border-width:3px;
border-radius: 0 0 500% 0/0 0 50% 0;
}

#page_forum_thread .postHeader .subject{
font-family: 'Jolly Lodger',serif;
font-weight:normal;
font-size:130%;
}

#page_forum_thread .postContent {
-webkit-border-radius: 2px;
-moz-border-radius: 2x;
border-radius: 2px;
box-shadow: 0 0 5px rgb(0 0 0 / 20%), 0 0 2rem #D3C3AD inset;
background: #f8f8f8;
border-width:0;
}

#page_forum_thread .postBlock{
position:relative;
}

.postBlock:nth-child(3):after,
.postBlock:nth-child(13):after,
.postBlock:nth-child(19):after{
position:absolute;
content:' ';
right: 0;
left:0;
height:40px;
width:100%;
top:0;
}

.postBlock:nth-child(3):after{
filter: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"><filter id="gpRandomnessSvg"><feTurbulence x="0" y="0" baseFrequency="0.17" type="fractalNoise" numOctaves="5"></feTurbulence><feDisplacementMap in="SourceGraphic" scale="20" /></filter></svg>#gpRandomnessSvg');
background: radial-gradient(circle at top center, #000 0, transparent 40px);
}

.postBlock:nth-child(13):after{
filter: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"><filter id="gpRandomnessSvg"><feTurbulence x="0" y="0" baseFrequency="0.13" type="fractalNoise" numOctaves="5"></feTurbulence><feDisplacementMap in="SourceGraphic" scale="20" /></filter></svg>#gpRandomnessSvg');
background: radial-gradient(circle at top right, #880 0, transparent 50px);
}

.postBlock:nth-child(19):after{
filter: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"><filter id="gpRandomnessSvg"><feTurbulence x="0" y="0" baseFrequency="0.16" type="fractalNoise" numOctaves="5"></feTurbulence><feDisplacementMap in="SourceGraphic" scale="20" /></filter></svg>#gpRandomnessSvg');
background: radial-gradient(circle at top center, #800 0, transparent 80px);
}

.postNames{
font-family: 'Jolly Lodger',serif;
font-size:130%;
}

#page_forum_thread .posterDetails .charName, #page_forum_thread .posterDetails .posterName
{
font-weight:normal;
}

#page_forum_thread .postPoint,
#page_forum_thread .postBlock .postContent:after,
#page_forum_thread .postBlock .postContent:before{
display:none;
}

#charSheetRoller h3.charName{
font-family: 'Jolly Lodger',serif;
font-variant: small-caps;
}

div.headerbar{
background-color:transparent;
color:inherit;
}

body.dark h1.headerbar,body.dark h2.headerbar, body.dark h3.headerbar, body.dark h4.headerbar{
color:#D3C3AD;
}

body.dark #page_forum_thread .postContent {
box-shadow: 0 0 5px rgb(0 0 0 / 20%), 0 0 2rem #51493E inset;
}

body.dark button.fancyButton,
body.dark a.fancyButton,
body.dark a.fancyButton:active,
body.dark a.fancyButton:visited,
body.dark .trapezoid.redTrapezoid{
color: #c54;
}

body.dark button.fancyButton:after,
body.dark button.fancyButton:before{
background-color: #c54;
}

.ra-quill-ink:before {
content: "\eaa9";
}

.ra.forum-root-2:before,
.ra-d6:before {
content: "\eaa2";
}

body .headerbar a, body .headerbar a:active, body .headerbar a:hover, body .headerbar a:visited, body div.headerbar {
color: #ff007f;
}

* The post needs to be in a thread to which the viewer has write access. e.g. for public games, an OOC thread with public access.

Last edited July 14, 2022 7:22 pm

Mark as unread

Index > General > > Questions and Help

How do I create game themes using the script?

You do not have permission to post in this thread.