Yay! Even More Themes!
Following are some EXCITING and PROFESSIONAL itch.io themes for your game pages. To use these, simply copy and paste the following CSS into your game's page when customizing it.
This is a followup to the PROFESSIONAL profile themes collection.
Note: You must have custom CSS enabled on your pages.
Alert: These are ONLY for individual game pages, not your profile page.
Warning: These are serious themes made by a very serious professional.
You may not laugh at them, you may only use them. If you laugh at them, then you are ABSOLUTELY REQUIRED to take this survey .
Following are the themes, from most popular to least...
Theme name:
HELP ME THE SKELETON TOOK EVERYTHING ON MY PAGE
Video Example:
CSS:
@import url ('https://fonts.googleapis.com/css?family=Gaegu' );
/*
for this to work...
make sure to select "MORE OPTIONS..."
and set the "BG2 ALPHA" to 0.
suggested:
don't have a description text
don't have comments enabled
don't have a banner
*/
body *{
background : url("https://img.itch.zone/aW1nLzEzNDUxMDYuZ2lm/original/cMeE6q.gif") no-repeat center center fixed ;
background -size : cover;
background-color : black;
cursor : url('https://img.itch.zone/aW1nLzEzNDMyOTYuZ2lm/original/qiGtZ%2F.gif') , auto ;
font-family : 'Gaegu' , Verdana, Geneva, sans-serif ;
font-size : 40px ;
color :white;
text-shadow :
-1px -1px 0 #FF3DB7 ,
1px -1px 0 #FF3DB7 ,
-1px 1px 0 #FF3DB7 ,
1px 1px 0 #FF3DB7 ;
}
.right_col *{
visibility : hidden ;
background :none ;
}
.header{
position : fixed ;
bottom : 0px ;
right : 0px ;
pointer -events: none ;
background :none ;
}
.footer *{
font-size : 20px ;
color : white;
background :none ;
}
.buy_game_lightbox_widget, .lightbox_widget, .buy_lightbox *{
background : #FF99CC ;
color : white;
}
.add_btn *{
background : none ;
}
.submit_buttons *{
background : none ;
}
.main h2 , p , img {
background :none ;
}
.game_info_panel_widget, .more_information_toggle, .uploads{
visibility : hidden ;
background :none ;
}
.header_buy_row {
visibility : hidden ;
background :none ;
}
.user_formatted *{
position :fixed ;
top : 0px ;
left : 0px ;
background :none ;
pointer -events: none ;
}
#download{
visibility : hidden ;
}
.buy_row {
position : fixed ;
left : 50 %;
top : 50 %;
min-width : 500px ;
background :none ;
}
.buy_row *{
background :none ;
}
.buy_btn {
animation:button_spin 1.3s ease-out infinite;
background :none ;
}
.buy_message{
background :none ;
visibility : hidden ;
}
.action_btn *{
font-size : 20px ;
background :none ;
}
.user_tools *{
background :none ;
}
/*animation:spin 4s linear infinite;*/
@keyframes button_spin {
0 % {
transform: rotate(0 deg) scale(1 .5 );
} 20 % {
transform: rotate(6 deg) scale(2 );
} 50 % {
transform: rotate(0 deg) scale(1 .5 );
} 80 % {
transform: rotate(-6 deg) scale(2 );
} 100 % {
transform: rotate(0 deg) scale(1 .5 );
}
}
Theme name:
HELP ME, MY "No thanks, just take me to the downloads" OPTION IS AFRAID OF BEING CLICKED ON AND I DON'T KNOW HOW TO TELL IT THAT IT'S OK THAT PEOPLE DON'T PAY
Video Example:
CSS:
.download_links:hover{
animation: an_shake .1s linear infinite;
}
/*shake*/
@keyframes an_shake {
0 % { transform: translate(1px , 1px ) rotate(0 deg); }
10 % { transform: translate(-1px , -2px ) rotate(-1 deg); }
20 % { transform: translate(-3px , 0px ) rotate(1 deg); }
30 % { transform: translate(3px , 2px ) rotate(0 deg); }
40 % { transform: translate(1px , -1px ) rotate(1 deg); }
50 % { transform: translate(-1px , 2px ) rotate(-1 deg); }
60 % { transform: translate(-3px , 1px ) rotate(0 deg); }
70 % { transform: translate(3px , 1px ) rotate(-1 deg); }
80 % { transform: translate(-1px , -1px ) rotate(1 deg); }
90 % { transform: translate(1px , 2px ) rotate(0 deg); }
100 % { transform: translate(1px , -2px ) rotate(-1 deg); }
}
Theme name:
HELP ME MY PAGE HAS COLLAPSED IN ON ITSELF
Video Example:
CSS:
.main *{
animation: an_drop 3s forwards;
}
.buy_btn {
animation:an_button 1.3s ease-out infinite;
}
@keyframes an_drop {
0 %, 20 {
transform:
translate3d(0 , 5px , 0 );
}
40 % {
transform:
translate3d(0 , 20px , 0 );
}
50 %, 60 % {
transform:
translate3d(0 , -120px , 0 )
}
to {
transform:
translate3d(0 , 2000px , 0 );
transform: translate(100px , 200px ) rotateZ(270 deg);
}
}
@keyframes an_button {
0 % {
transform: rotate(0 deg) scale(1 .5 );
} 20 % {
transform: rotate(6 deg) scale(2 );
} 50 % {
transform: rotate(0 deg) scale(1 .5 );
} 80 % {
transform: rotate(-6 deg) scale(2 );
} 100 % {
transform: rotate(0 deg) scale(1 .5 );
}
}
Theme name:
HELP ME MY COMMENTS WIDGET IS ROTATING TOO FAST AND PEOPLE THAT LEAVE COMMENTS CANNOT GET OFF
Video Example:
CSS:
.game_comments_widget{
width : 500px ;
height : 200px ;
animation: an_spin 15s infinite linear;
transform-origin: 50 % 50 %;
}
@keyframes an_spin {
from {transform:rotate(0 deg);}
to {transform:rotate(360 deg);}
}
Theme name:
HELP ME IT'S ALL GOING BY SO FAST
Video Example:
CSS:
.main *{
animation: an_sofast 5s linear infinite;
}
@keyframes an_sofast {
0 %{
transform:
translate3d(0 , -900px , 0 );
} 100 % {
transform:
translate3d(0 , 900px , 0 );
}
}
Theme name:
HELP ME MY ITCH PAGE IS RUNNING CIRCLES AROUND ME
Video Example:
CSS:
.main *{
animation: an_circles 1s linear infinite;
}
@keyframes an_circles {
0 % { left : 0px ;}
50 %{ left : 100 %;}
51 %{ left : -1000px ;}
100 %{ left : 0 ;}
}
Theme name:
HELP ME EVERYTHING IS SPINNING OUT OF CONTROL
Video Example:
CSS:
.main *{
animation: an_outofcontrol 20s linear infinite;
}
@keyframes an_outofcontrol {
0 % {
transform: rotate(-360 deg);
} 100 % {
transform: rotate(360 deg);
}
}
Theme name:
HELP ME ALL THE SCREENSHOTS ON MY ITCH PAGE ARE AFRAID OF BEING CLICKED ON
Video Example:
CSS:
.main img :hover{
animation: an_shake .2s linear infinite;
}
@keyframes an_shake {
0 % { transform: translate(1px , 1px ) rotate(0 deg); }
10 % { transform: translate(-1px , -2px ) rotate(-1 deg); }
20 % { transform: translate(-3px , 0px ) rotate(1 deg); }
30 % { transform: translate(3px , 2px ) rotate(0 deg); }
40 % { transform: translate(1px , -1px ) rotate(1 deg); }
50 % { transform: translate(-1px , 2px ) rotate(-1 deg); }
60 % { transform: translate(-3px , 1px ) rotate(0 deg); }
70 % { transform: translate(3px , 1px ) rotate(-1 deg); }
80 % { transform: translate(-1px , -1px ) rotate(1 deg); }
90 % { transform: translate(1px , 2px ) rotate(0 deg); }
100 % { transform: translate(1px , -2px ) rotate(-1 deg); }
}
Theme name:
HELP ME ALL THE SCREENSHOTS ON MY ITCH PAGE ARE SPINNING OUT OF CONTROL AND I DON'T KNOW WHAT TO DO ANYMORE
Video Example:
CSS:
.main img {
animation: an_rotate 2s linear infinite;
}
@keyframes an_rotate {
0 % { transform: rotate(-360 deg); }
100 % { transform: rotate(360 deg); }
}
Theme name:
HELP ME THE CURSOR IS A SKELETON
Video Example:
CSS:
body *{
cursor : url('https://img.itch.zone/aW1nLzEzNDMyOTYuZ2lm/original/qiGtZ%2F.gif') , auto ;
}
Theme name:
HELP ME THE CURSOR ON MY ITCH PAGE IS TOO BIG
Video Example:
CSS:
*{
cursor : url('https://img.itch.zone/aW1nLzEyNDQxOTgucG5n/original/%2BJCV33.png') , auto ;
}
* a {
cursor : pointer ;
}
Theme name:
HELP ME EVERYTHING IS JUMPING FOR JOY
Video Example:
CSS:
.main *{
animation: an_joyjump .3s infinite;
animation-direction : alternate;
animation-iteration-count: infinite;
}
@keyframes an_joyjump {
from { transform: translate3d(0 , 0 , 0 ); }
to { transform: translate3d(0 , 20px , 0 ); }
}
The end.