[solved] New pixellove color variation

[AkeMake]

I'm not owner of this web page, so I can't ask this in gavick's forum. I use Gavick Pixellove template. It includes six different color variations but I want to get a new orange one. I made new color option to the templateDetails.xml file and its localized tag to the corresponding language file. I have style7 folder which includes new orange images and style7.css. Pixellove template just doesn't find my new color. Template Manager founds my new color due to changes in templateDetails.xml but site doesn't know what to do if I choose it. Site doesn't show my new color but the first one, blue.

Does anyone own Pixellove template and could tell me what to do?

[AkeMake]

Damn, I asked too early. I had style7 folder with orange images but not style7.css file and I thought that site doesn't find my orange colors because those orange images were not visible in the site. Now I made style7.css file too and checked site again. Well, it worked.

I still have one problem. Now I can choose my new orange color variation in Template Manager, but can't choose it on the frontend. There is six differend color circles on the bottom of the site and clicking of those circles you can change site's color. I don't know how to get seventh orange circle on the site. Any ideas?

[talks44]

Check the template files, such as index.php and search the source for the 6 circles that reference each colour. Add another and mimic the same settings/info the others have but rather point it to your 7th colour instead.

[AkeMake]

Actually I was already solved my problems. Thanks anyway, talks44.
I just don't understand why I always find answers to my problems right after I have asked those in some forums. Embarrassing. Maybe I could tell how I solved this in case someone is struggling with the same problem.


I use Pixellove template version 2.4 so this instruction is for that version. It's good if you know something about CSS, PHP and XML, but I try to explain such closely that you can do this without knowledge of those. I hope you don't mind my poor english.

1. Open file templates/gk_pixellove/templateDetails.xml. You can find template_color field on line 176. Add a new option to the end of this field:

Code: Select all

<option value="7">TPL_GK_LANG_COLOR_7</option>

2. Next open file language/en-GB/en-GB.tpl_gk_pixellove.ini to nominate this just created option. Line 32 have TPL_GK_LANG_COLOR_6="pink". Write name of your new color under this line:

Code: Select all

TPL_GK_LANG_COLOR_7="your_new_color"

Replace your_new_color with your color. In my case it was "orange".

3. There are six circles on site's footer. You can change site's color by clicking those circles. Now you need to add a new circle to your new color variation. Open image templates/gk_pixellove/images/styleswitcher.png. Add a new circle to the right side of image. Previous image was 8x48 px (48px = 6 colors * 8px) and edited will be 8x56 px (56px = 7 colors * 8px).

4. Now you have to tell the file templates/gk_pixellove/layouts/blocks/footer.php that there is new color available. You should do new color7 link with right gkStyle id-attribute. Largest gkStyle number in the file is eight on line 18 (link named "Light") so the new one have to be nine. Add following new link after color6 link on line 27.

Code: Select all

<a href="#" id="gkStyle9">color7</a>

5. Now you need to tell the css-file about your new color variation. Open file templates/gk_pixellove/css/template.css. Add following css-rule after line 121:

Code: Select all

#gkStyleArea #gkStyle9 { background-position: -48px 0; }

(-48px means that we transfer image 48px when appears last 8px with just added new circle)

6. Open files style6.css and typography.style6.css at templates/gk_pixellove/css. Those files includes lot of pink color #ef6782. Replace all those pink colors with your color's hex code. In addition you need to replace style6 with style7 in every paths. There is color #ff7893 in file style6.css on line 85 which you have to replace with a little lighter color that is your chosen color (compare original pink #ef6782 and a little lighter color #ff7893). Save these two files to the same css-folder as style6.css and typography.style6.css but with new names style7.css and typography.style7.css.

7. Folder templates/gk_pixellove/images/style6 includes images which belong to sixth color variation. Copy style6 with containing images and paste it to the same place with new name style7. Edit colors of this folder's images so that those are suitable with your new color variation.

8. If you followed this instruction closely, you should now have new color variation in your Pixellove template.

I hope this was helpful for somebody.