This page contains a collection of all the CSS themes for my game's pages. It gets asked, so I'm sharing them all.
You are free to use these however you will, in as much of a messy state as some of these are...
I will be updating this page regularly whenever I customize a page and feel like it would be of interest.
Here they are...
Misc Tips
* Hack to upload extra images to use in your CSS
Itch.io lets you upload images via the "header" and "background" upload widget. You can use this field to upload images, copy the image URL after uploading, and then delete the image to keep uploading other images. Images stay as long as you keep the URL. The uploaded images (URL) can be used in your CSS styling. Video example...
I use this for all my pages. For example, uploading cursors, foreground images, overlays, extra header graphics to animate...
Images uploaded this way, and used in the CSS this way don't seem to delete so it has been safe to use so far.
* Replacing the "Download Now" button with a graphic...
The following lets you replace the "Download Now" button with a graphic (instead of text)...
Note that you can use the CSS ::before and ::after to insert extra graphical or text elements to any part of the page. I did this to add extra header or footer images for some of my pages. If you use ::before or ::after any further styling can be applied (like position:fixed, etc...).
* Customizing the text in the "Download Now" button...
This lets you change the text in the "Download Now" button to be anything you want...
This is a dark moody theme that evokes mysterious vibe. It features full screen image overlays for scanlines and some subtle moevement to give it a distorted vibe. These overlays are easy to remove by just commenting out that bit in the CSS. There is also a fullscreen animated background.
This theme also features a customized devlog page and comments page.
Unlike all my other themes it is the least eccentric, and preforms perfectly on mobile. It is fairly standard.
@importurl('https://fonts.googleapis.com/css2?family=Lato&display=swap');
/*set the font for the whole page*/body*{
font-family:'Lato', Consolas,"Andale Mono","Lucida Console","Lucida Sans Typewriter", Monaco,"Courier New","monospace";
}
p{
display:block;
}
.header_buy_rowp{
color:white;
display:block;
text-shadow:005px#404040,005px#404040,005px#404040,005px#404040,005px#404040,005px#404040,005px#404040,005px#404040;
}
.headerimg{
box-shadow:10px10px0pxblack;
border:4pxsolid;
width:100vw;
}
.header{
width:100%;
}
/*This inserts the scanlines overlay over the page*/.inner_column::before{
position:fixed;
width:100%;
height:100%;
left:0px;
top:0px;
/*the scanline png*/background-image:url('https://img.itch.zone/aW1nLzEyMTk0NDUwLnBuZw==/original/0SaEfy.png');
background-repeat:repeat;
z-index:100;
content:"";
pointer-events:none;
image-rendering: pixelated;
}
.game_devlog_post_page,.devlog*{
background-color:black;
color:white;
}
.devlog{
box-shadow:10px10px0px#D0D0D0;
border:4pxsolid;
background-color:black;
}
.game_comments_page*{
color:white;
}
/*This inserts a very faint animated gif of an eye as an overlay over the page so that there is subtle movement*/.header::before{
position:fixed;
width:100%;
height:100%;
/*an animated gif of an eye*/background-image:url('https://img.itch.zone/aW1nLzEyMTk0NTg2LmdpZg==/original/aXiw%2BE.gif');
background-size:100%100%;
background-attachment:fixed;
background-size: cover;
z-index:100;
content:"";
pointer-events:none;
opacity:.1;
image-rendering: pixelated;
}
.formatted_description{
color:white;
box-shadow:10px10px0pxblack;
border:4pxsolid;
background-color:rgb(0,0,0,.5);
/*a gradient background that shows faintly in the description boxes*/background-image:url('https://img.itch.zone/aW1nLzEyMTk0Mjc1LnBuZw==/original/r3O%2Fhl.png');
background-size:100%100%;
background-attachment:fixed;
background-size: cover;
padding:10px;
}
.buy_message{
color:white;
}
.more_information_toggle,.buy_row{
padding:10px;
padding-left:30px;
}
.more_information_toggle,.uploads,.game_comments_widget{
box-shadow:10px10px0pxblack;
border:4pxsolid;
background-color:rgb(0,0,0,.5);
/*a gradient background that shows faintly in these boxes*/background-image:url('https://img.itch.zone/aW1nLzEyMTk0Mjc1LnBuZw==/original/r3O%2Fhl.png');
background-size:100%100%;
background-attachment:fixed;
background-size: cover;
}
.community_post_form_widget,.click_input*{
color:white;
}
.buy_lightbox*{
text-shadow:005px#D0D0D0,005px#D0D0D0,005px#D0D0D0,005px#D0D0D0,005px#D0D0D0,005px#D0D0D0,005px#D0D0D0,005px#D0D0D0;
}
.direct_download_btn,.download_links*{
text-shadow:005px#D0D0D0,005px#D0D0D0,005px#D0D0D0,005px#D0D0D0,005px#D0D0D0,005px#D0D0D0,005px#D0D0D0,005px#D0D0D0;
}
.columns{
color:white;
text-shadow:005px#404040,005px#404040,005px#404040,005px#404040,005px#404040,005px#404040,005px#404040,005px#404040;
}
.right_colimg{
box-shadow:10px10px0pxblack;
border:4pxsolid;
background-color: rgba(0,0,0,.7);
}
/*make sure the main background (animated gif in this theme's case) fully covers the back of the page*/.main{
background-size:100%100%;
background-attachment:fixed;
background-size: cover;
}
A very cute theme that features a custom curser that changes when hovering over links and button elements, with an extra header graphic animating back and forth in the background. The page's background is also animated, to simulate water. The text has some cute styling, with fancy borders around elements. Hovering over links and buttons animates them, and so does hovering over most important images.
The "download now" button is customized, and animates.
The comments widget, and comments, are animated, with more custom styling applied to that area.
You can see a functional theme here.
A simple theme with absolutely every element ripped out except for the page's title, and the "download now" button is replaced with an image. There's a simple page "overlay" extra graphic added (confetti) that's over all the other elements. You could replace this with snow or clouds...
You can see a functional theme here.
This is a simple theme with everything stripped out, and the "download now" button replaced with an image. The page description is used more as a small caption that's placed in the bottom right corner. No other elements are visible.
You can see a functional version of the theme here.
A very simple theme that has everything stripped out except for the game's description and the download button.
You need to upload a title and background image.
The text in the "Download Now!" button is customizable! No more boring download buttons!
This theme is not mobile friendly. It was built for a "secret" desktop thing.
Features:
* Customize the text in the "Download Now" button
* Very simple. Everything is stripped out except for the game description.
Requirements:
* Upload a header graphic (title)
* Upload a background graphic (everything else will be set to invisible)
* You cannot have screenshots or any media in the "right column" area, otherwise the theme gets thrown out.
You can see the functional version of the theme here.
This is a fairly versatile theme WITH a customized devlog section.
The comment box is rotating! This makes the comments a fun and popular place to be.
The background image is stretched to fill the entire page body. This is for the "wave" effect.
There's a fancy animated gif frame surrounding the page.
Images shake on rollover (a cute animation).
This is a simple theme.
It strips out all elements from the page EXCEPT for the user description (the description about your game that you input when you're uploading), the title (header), and the download button.
Cursor is a giant mouse.
All elements are animated, including the 'download' pop up.
It features an element that is floating left to right (in this page's case a goldfish, if you download the themes the goldfish is provided in the 'images' folder).
The floating pet is ONE of the screenshots. You can upload only one, and it uses that as an animated element. I advise that you upload only one because that's how this theme is built.
The uploaded background is scaled to full size of the page. If you don't like this theme, but would like to know how to make the background scale the size of the page, you can use that much.
@importurl('https://fonts.googleapis.com/css?family=Gaegu');
body*{
background-size:100%100%;
cursor:url('https://img.itch.zone/aW1nLzI2MTAyMzkucG5n/original/NE6WT6.png'),auto;
}
/*the point is to hide everything on the page, but hiding this might be a bad idea...*/.user_tools*{
visibility:hidden;
}
h2,.header,.page_widget{
font-family:'Gaegu', Verdana, Geneva,sans-serif;
color:white;
font-size:20px;
text-shadow:-1px-1px0#00E0EF,1px-1px0#00E0EF,-1px1px0#14A1AD,1px1px0#14A1AD;
}
/*header is footer :D*/.header{
position:fixed;
bottom:40px;
left:20%;
pointer-events:none;
background:none;
font-family:'Gaegu', Verdana, Geneva,sans-serif;
font-size:20px;
animation: floating 1.5s linear infinite;
}
.user_formatted*{
position:fixed;
margin-left:50%;
margin-right:5%;
font-size:25px;
animation: floating 1s linear infinite;
}
/*turn footer upside down*/.footer*{
font-size:14px;
color:white;
background:none;
transform: rotate(180deg);
}
/*the buy game pop-up window*/.buy_game_lightbox_widget,.lightbox_widget,.buy_lightbox*{
background:#00E0EF;
color:white;
cursor:auto;
animation: floating 10s linear infinite;
}
.download_links:hover{
animation: floating .5s linear infinite;
}
.add_btn*{
background:none;
}
.submit_buttons*{
background:none;
}
.game_info_panel_widget,.more_information_toggle,.uploads{
visibility:hidden;
background:none;
}
.header_buy_row {
visibility:hidden;
background:none;
}
#download{
visibility:hidden;
}
/*only the download now button is visible and it's centered + hovering...*/.buy_row {
position:fixed;
left:50%;
top:50%;
min-width:500px;
background:none;
}
.buy_message{
background:none;
visibility:hidden;
}
.buy_btn {
animation:button_spin 2000ms linear infinite;
background:none;
}
.action_btn*{
font-size:20px;
background:none;
}
/*scrolling fish*/.right_col*{
position:absolute;
right:100%;
width:100%;
top:40%;
}
.screenshot_list*{
animation: swim 10s linear infinite;
}
/* CSS ANIMATIONS *//*animation:spin 4s linear infinite;*/@keyframesbutton_spin {
from{
transform: rotate(0deg) scale(2);
}to {
transform: rotate(360deg) scale(2);
}
}
@keyframesswim {
0% { right:0; }
100% { right:-250%; }
}
@keyframesfloating {
from { transform: translate(0,0px); }
50% { transform: translate(0,10px); }
to { transform: translate(0,-0px); }
}
Electric Zine Maker
This is the old Electric Zine Maker theme. It's no longer in use.
banner text has interesting styling and animation
background is huge and animated to float behind everything
download now moves
cute frame around images
everything on the page is gone except for download now
the description text is used as a header (skull)
banner is footer
the download now page is themed really cute
not ideal, but great for a one-off type page
banner is footer (monkey)
comments are weirdly animated to discourage leaving comments
things move, strange theme, but fun
download now window looks cool
banner is footer (lava)
background is lava
comments are really large (intentional to make commenting hard)
fun font use to make it kind of like a horror movie poster
probably one of my weirdest
comments are a carousel! hop on for the ride! commenters love it!
page is swinging
download now is rotating
has attracted flies
