FEB 08 2014

COLOR-OXID, a colorful, no white background free OXID eshop template

Web Design

If you are tired of all the white background web shops and you have a hard time finding any free themes for Oxid E-Sales here you are at the right place. On the Oxid Exchange there are almost no free templates, if any at all. And the paid themes are the same as the original Azure but with a different color combination. Yet it’s the same damn thing on a white background. What if you don’t want to follow the crowd like sheep and you don’t want white background? What if your products would look better in a full color environment. Well no more worries. We’ve created COLOR-OXID. And now it’s yours for free. We are not crazy though, (for that money) this is still the old Azure theme but with more freedom for colors and a lot of simplifications as well as SEO improvements. Say goodby to white background, round corners, gradients and shadows, and say hello to the super easy to customize COLOR-OXID. See it here in action: COLOR-OXID

Color-Oxid, a colorful no-white background theme for Oxid E-Sales

Install the free COLOR-OXID theme

Step 1 – Download the package (Oxid 4.7, tested it on 4.7.7) here. Download for 4.8 here. I’ve tested it on 4.8.3.

Step 2 – Unzip it and upload the template files and folders (except the one called  database.sql!) via FTP following the folder structure. It’s pretty straight forward but if you need help let me know.

Step 3 – Go to your admin panel and go service -> tools. Here you can either upload the database file and update or copy and past the content of it to the sql field and press Start Update, it’s the same. Press “Update DB Views Now” when you’re done.

Step 4 – While you are in the admin panel go to Extensions -> Themes, choose Color-Oxid and press activate. Done with the installation, if something would not act or look as expected, open the tmp folder in site’s root and delete everything from it except the .htaccess file. Then refresh the site.

Customizing COLOR-OXID

I was trying to extract all the color values from the various css files and I’ve put them all inside the color-oxid.css file for the easiest possible customization. I also tried to minimize the number of colors used because “simplicity put into practice” is our motto. Anyway you have 12 colors altogether including the orange of the RSS icon and ff0000 red for warnings and errors. It seems like it’s less colors right? Anyway, Firebug and find and replace is your best friend now. Find the color value you looking for with Firebug, open the color-oxid.css file in your html editor and find / replace all with your desired color. If need some amazing color harmonies use colorschemedesigner.com. Most of the layout values are in the oxid.css file.

Some more changes to original Azure theme:

Icons

We’ve got rid of the Jquery icons and used FontAwsome instead so you can change the icon colors just like if it was a font.

SEO

To have an H1 title on the start page in application/views/color-oxid/tpl/page/shop/start.tpl added a line that displays your front page title that you set in the administration panel under Master Settings -> Core Settings -> SEO.

<h1 class="frontpage">[{oxifcontent ident="oxstdfooter" object="oCont"}][{$oCont->oxcontents__oxcontent->value}][{/oxifcontent}]</h1>h

Delete it if you don’t want this, though I don’t know why would you want to.
We also made the category titles and product titles H1.

License

COLOR-OXID is GPL, FREE, do whatever you want with it. If you find it useful or make a lot of money with it buy me a beer. Just paypal the money for it to the email address in the footer below.

Credit

We’ve left a link with our WebDesignM logo in the bottom right next to the oxid logo. If you wish you can delete this in the footer.tpl file. You can of course choose to leave it there to show your appreciation. And also please don’t forget, you can hire us for oxid work or any other of your web design needs. If there’s anything you don’t like about Color-Oxid please don’t slag it anywhere else. Comment here and let’s settle it like men 🙂

There are 3 comments

  • avatar
    Norbert Miskei on said:

    I’ve left my Statcounter tracking code in application/views/color-oxid/tpl/layout/base.tpl . Please delete it after you downloaded the package or replace it with your own code. Thanks.

  • avatar
    Norbert Miskei on said:

    If the Top of the Shop widget title would not display properly on newer Oxid versions add the following line to one of the language files. Either in the lang.php in applications/views/color-oxid/en or de or whatever language you have problem with or in the main language file in application/translation/YOURLANGUAGE/lang.php.

    'BOX_TOPOFTHESHOP_HEADER' => 'Top of the Shop',

    Don’t forget to empty the tmp directory when you’re done, except from the .htaccess file of course and refresh.

  • Leave a Reply