AbanteCart Community

AbanteCart Development => Customization help => Topic started by: designer82 on April 27, 2014, 05:09:56 AM

Title: how to change color of header bar and social icons
Post by: designer82 on April 27, 2014, 05:09:56 AM
Hello.

I need to know these 3 things:

1) how to change the color of the big blue bar on the top of the page (the one that contains the logo and a menu and search bar).

2) how to change the social icons colors.

3) the option to change the site width (in settings in admin) does not work. I put in 50% and even 40% but the site did not change. Can anyone tell me why or supply another way of changing the site width?
Title: Re: how to change color of header bar and social icons
Post by: gordontaylor on April 27, 2014, 07:10:07 AM
Color and size are in the style.css.

Size is default 1100 px you'll need to change that setting. Look under Header in the .css file for the color change.
Title: Re: how to change color of header bar and social icons
Post by: designer82 on April 27, 2014, 07:12:14 PM
Found the code for the header strip and changed its color. Thanks.

Now I need to know how to change the font color in the header strip bc the strip is now white and the font was white and can't see it. I don't know where the header's font color code is located in the css. It's not in the header section where I changed the header strip's color...

Also, how do you change the social icon colors?

And where exactly in the css is the site width code?
Title: Re: how to change color of header bar and social icons
Post by: gordontaylor on April 27, 2014, 07:57:42 PM
The icons are images, you'll need to replace them with your own if you want to change them.

Find this code, it's line 806 in my editor

.headerdetails #main-nav ul > li.topcart a {

   color: #999999; Change this value to whatever color you want to use.

   font-size: 14px

That should do it.
Title: Re: how to change color of header bar and social icons
Post by: Old Fossil on April 27, 2014, 09:23:13 PM
http://forum.abantecart.com/index.php/topic,2155.0.html

This may help you designer82

 :)
Title: Re: how to change color of header bar and social icons
Post by: designer82 on April 27, 2014, 10:55:43 PM
The icons are images, you'll need to replace them with your own if you want to change them.

Find this code, it's line 806 in my editor

.headerdetails #main-nav ul > li.topcart a {

   color: #999999; Change this value to whatever color you want to use.

   font-size: 14px

That should do it.

Ok, managed to change the font color for the header strip. Thanks. Now all I need to know is how to change the social icons' colors because the icons' image files in their folder are a different color than the ones showing on the site which are gray (if they are even the same files. I don't see any gray ones in my image folders in the store directory). So I have no idea how to change the color of these icons and I need to be able to do this in the event I want to make my site's background a different color, so that the icons don't match that color and become hard to see.
Title: Re: how to change color of header bar and social icons
Post by: gordontaylor on April 27, 2014, 11:02:25 PM
I'll see if I can find them soon. I'll post when I do.
Title: Re: how to change color of header bar and social icons
Post by: Old Fossil on April 27, 2014, 11:07:17 PM
AFAIK

The footer on the html5 theme is a png image.

The actual images form part of the other theme.
Title: Re: how to change color of header bar and social icons
Post by: designer82 on April 28, 2014, 01:08:16 AM
I'll see if I can find them soon. I'll post when I do.

Ok.