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(0deg) scale(1.5);
	  } 20% { 
	   transform: rotate(6deg) scale(2); 
	  } 50% {
	   transform: rotate(0deg) scale(1.5);
	  } 80% {
	   transform: rotate(-6deg) scale(2);
	  } 100% {
	   transform: rotate(0deg) 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(0deg); }
	    10% { transform: translate(-1px, -2px) rotate(-1deg); }
	    20% { transform: translate(-3px, 0px) rotate(1deg); }
	    30% { transform: translate(3px, 2px) rotate(0deg); }
	    40% { transform: translate(1px, -1px) rotate(1deg); }
	    50% { transform: translate(-1px, 2px) rotate(-1deg); }
	    60% { transform: translate(-3px, 1px) rotate(0deg); }
	    70% { transform: translate(3px, 1px) rotate(-1deg); }
	    80% { transform: translate(-1px, -1px) rotate(1deg); }
	    90% { transform: translate(1px, 2px) rotate(0deg); }
	    100% { transform: translate(1px, -2px) rotate(-1deg); }
	}
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(270deg);
	  }
	}

	@keyframes an_button { 
	  0% { 
	   transform: rotate(0deg) scale(1.5);
	  } 20% { 
	   transform: rotate(6deg) scale(2); 
	  } 50% {
	   transform: rotate(0deg) scale(1.5);
	  } 80% {
	   transform: rotate(-6deg) scale(2);
	  } 100% {
	   transform: rotate(0deg) 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(0deg);}
	    to {transform:rotate(360deg);}
	}
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(-360deg);
	 } 100% {
	   transform: rotate(360deg);
	  }
	}
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(0deg); }
	    10% { transform: translate(-1px, -2px) rotate(-1deg); }
	    20% { transform: translate(-3px, 0px) rotate(1deg); }
	    30% { transform: translate(3px, 2px) rotate(0deg); }
	    40% { transform: translate(1px, -1px) rotate(1deg); }
	    50% { transform: translate(-1px, 2px) rotate(-1deg); }
	    60% { transform: translate(-3px, 1px) rotate(0deg); }
	    70% { transform: translate(3px, 1px) rotate(-1deg); }
	    80% { transform: translate(-1px, -1px) rotate(1deg); }
	    90% { transform: translate(1px, 2px) rotate(0deg); }
	    100% { transform: translate(1px, -2px) rotate(-1deg); }
	}
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(-360deg); }
	    100% { transform: rotate(360deg); }
	}
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.