Mainfeatures Icons

I've tried modifying the background color in the CSS for the three mainfeatures selectors but it hasn't changed the appearance of them. I downloaded the png also for it and created a new png the same size, but haven't been able to make it appear in the boxes yet. I just uploaded it to the same folder and changed the name to the same as the previous one. Then changed the originals name. What should be changed in order to change the three colors with animation? Is there another way I should go about changing the white images in the boxes? Thanks!!

.gkCrop,
.gkHTML5,
.gkResponsiveDesign {
background: transparent url("../../images/features_icons.png") no-repeat 0 0;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
display: block;
height: 137px;
overflow: hidden;
text-indent: -9999px;
width: 100%;
}
.gkCrop {
-webkit-animation-name: cropanim;
-webkit-animation-duration: 6s;
-webkit-animation-iteration-count: infinite;
-moz-animation-name: cropanim;
-moz-animation-duration: 6s;
-moz-animation-iteration-count: infinite;
animation-name: cropanim;
animation-duration: 6s;
animation-iteration-count: infinite;
background-position: center 0;
background-color: #484848;
}
.gkHTML5 {
-webkit-animation-name: html5anim;
-webkit-animation-duration: 6s;
-webkit-animation-iteration-count: infinite;
-moz-animation-name: html5anim;
-moz-animation-duration: 6s;
-moz-animation-iteration-count: infinite;
animation-name: html5anim;
animation-duration: 6s;
animation-iteration-count: infinite;
background-position: center -137px;
background-color: #000066;
}
.gkResponsiveDesign {
-webkit-animation-name: responsiveanim;
-webkit-animation-duration: 6s;
-webkit-animation-iteration-count: infinite;
-moz-animation-name: responsiveanim;
-moz-animation-duration: 6s;
-moz-animation-iteration-count: infinite;
animation-name: responsiveanim;
animation-duration: 6s;
animation-iteration-count: infinite;
background-position: center -274px;
background-color: #990000;
}

Hi

Please show me what You have in mind exactly on You website as example.

Hey there,

i also would like to know where i can change the color of the mainfeature icons as well as the white icons inside the box. I do not know where to have a look.

Thanks!

Hi

I'll help, of course. But please can You both show me what You have in mind ? If not on a life site than maybe with a screenshot ?

Yes, i also need to change the 3 icons. how can i change this?

The best way to change it is to download the actual png of your server, then erase the 3 images in photoshop and place your images or create some new ones to go in place of the others. You'll run into issues with the responsive design if the size is not close to the originals.

which is the right image file to edit? any ideas?

Hi

It's hard to tell without seeing it, but looking at the code form first post I would say that it's this file:

/images/features_icons.png

How do you change the colors? You can check http://www.thebig305.com and see the template in action. I want to change the main features background colors to a yellow. black and silver, but I dont see where this can be done.. any help?

In addition, how do I add to the mainbody position that can mimic the 3 rectangled featured module. It seems that when you add multiple modules to that position, they stack vertically instead of horizontally

HI

I'm not sure what You mean by main features, because I can see You've changed almost everything, anyway. Please use firebug to on respected element and You will see exackly what css file and line to change.

All positions shows modules vertialy, so I believe the one You are talking about was a module itself showing 3 articles in line as News Show Pro for example.

what about the colors? the changing colors. how do we change it?

what about the colors? the changing colors. how do we change it?

Yes how do we change the colors?

Hi

Colors needs to be changes inside css files. The best way to do it is by using firebug to check what file and line is required to change. If You need to change colors on images than You will find a psd file with template elements in rest_files package of this template.

Hi

Colors needs to be changes inside css files. The best way to do it is by using firebug to check what file and line is required to change. If You need to change colors on images than You will find a psd file with template elements in rest_files package of this template.

The background colors that fade into one another don't seem to be in the css. If you look at the creative demo, the three boxes that alternate color in the "mainbody" module with the icons and labeled HTML5, Responsive design and easy to customize, how do we change which colors alternate?

Hi

This is a CSS code which makes it to fade an other. Please show me this on Your site directly, because demo page is cached already so no file name is readable.

Hello,
i found out how to change the color animation, the file to be modified is in /templates/gk_creative/css/typography/typography.style1.css (your style in use)

and then change the color values from line no 870-968 to suit your needs.