Different colors blocks

• #72992

  
  Takoos
  

  On December 9, 2013 at 6:49 pm

  Hi,

  I was wondering if it is possible to assign a different color to each of the boxes. So you end up with four differently colored boxes.

  If not possible in the Lite version is this possible in the Pro version?

  With kind regards,

  Tako

  #72998

  
  Towfiq I.
  

  administrator

  On December 9, 2013 at 7:21 pm

  add this to your asteria option’s “custom css” tab:

  .midrow_block:nth-child(1){background:#EB5E1E;}
  .midrow_block:nth-child(2){background:#7DD66B;}
  .midrow_block:nth-child(3){background:#51B6E8;}
  .midrow_block:nth-child(4){background:#E851A7;}

  #73043

  
  Takoos
  

  On December 9, 2013 at 9:58 pm

  Thank you very much, that really helps me in the right direction.

  The problem I now encounter however is that when I activate (hover over) the blocks the custom css somehow gets deactivated/overruled, so when I move the mouse away the background color returns to the default.

  Also I was wondering if it is possible to customize the color to which the block changes when I hover over it much in the same way as the background color.

  In the end I would like to configure the boxes in such a way that I have four different colors which turn a slightly darker color when I hover over them.

  With kind regards,

  Tako

  #73055

  
  Takoos
  

  On December 9, 2013 at 11:19 pm

  Hi,

  I have tried to solve the first problem described in the previous post by adding “! important” to the code.

  So you get:

  .midrow_block:nth-child(1){background:#EB5E1E ! important;}
  .midrow_block:nth-child(2){background:#7DD66B ! important;}
  .midrow_block:nth-child(3){background:#51B6E8 ! important;}
  .midrow_block:nth-child(4){background:#E851A7 ! important;}

  In a way this does what I want but it also overrules the color change when you hover over the box.
  So it´s not a real solution but with the other effects of the padding top and font change it looks nice.

  If you could provide a solution without overruling the color change that would still be very much appreciated.

  With kind regards,

  Tako

  #73121

  
  Towfiq I.
  

  administrator

  On December 10, 2013 at 6:44 am

  You will have to remove these lines from asteria.js file:

  	//Block Animation
  	if (jQuery(window).width() > 480) {
  	jQuery('.midrow_block').hover(function(){
  	jQuery(this).stop().animate({ "color":sechovertext, "backgroundColor":sechover, "paddingTop":"0px" }, 200);
  	jQuery(this).find('.icon_wrap i').animate({ "color":sechovertext }, 200);
  	jQuery(this).find('.midrow_block:hover .block_img').animate({ "borderColor":sechovertext }, 200);
  	}, function(){
  	jQuery(this).stop().animate({ "color":primarytext, "backgroundColor":"transparent", "paddingTop":"2%" }, 200);	
  	jQuery(this).find('.icon_wrap i').animate({ "color":"rgba(0, 0, 0, 0.15)" }, 200);
  	jQuery(this).find('.midrow_block:hover .block_img').animate({ "borderColor":"rgba(0, 0, 0, 0.15)" }, 200);
  	});
  	}