Different colors blocks

[Takoos]

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

[Towfiq I.]

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;}

[Takoos]

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

[Takoos]

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

[Towfiq I.]

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);
	});
	}