AbanteCart Community

Shopping Cart Operations => Tips and Tricks => Topic started by: Gordon Taylor on April 19, 2015, 10:45:58 PM

Title: Give Your Header Some Flare!
Post by: Gordon Taylor on April 19, 2015, 10:45:58 PM

There is a simple line of code you can add to your style sheet to give a nice shadow to your header and it'll seem like it's 3D.

Check it out here https://naturalhandcraftedsoaps.com/secure/

If you'd like to add it, it's as simple as falling off a log.

Follow this path storefront>view>default>stylesheet>style.css

Add this line of code to line 261 in the header section. (You'll need an editor like notepad++) It's in the first group of code after the hack for the header /*----------Header----------*/

   

Code: [Select]

box-shadow: 0px 10px 5px #888888;
Here is an image to help.

Enter a carriage return at the end of line 260

Code: [Select]

background-color: orchid; then enter the box shadow code on the new line created, line 261.

Save and upload and viola, you have a new looking header!

Title: Re: Give Your Header Some Flare!
Post by: viper357 on May 25, 2015, 10:22:55 AM

Simple but nice and makes a big difference, thank you. :)

Title: Re: Give Your Header Some Flare!
Post by: itgeeks on September 08, 2015, 07:07:13 PM

woow, thanks  :)

Title: Re: Give Your Header Some Flare!
Post by: itgeeks on September 08, 2015, 07:18:18 PM

hi, how do you center your page, i´m trying but i can´t find the code