Author Topic: how to change color of header bar and social icons  (Read 8426 times)

Offline designer82

  • Newbie
  • *
  • Posts: 4
  • Karma: +0/-0
    • View Profile
how to change color of header bar and social icons
« 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?

gordontaylor

  • Guest
Re: how to change color of header bar and social icons
« Reply #1 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.

Offline designer82

  • Newbie
  • *
  • Posts: 4
  • Karma: +0/-0
    • View Profile
Re: how to change color of header bar and social icons
« Reply #2 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?
« Last Edit: April 27, 2014, 07:41:05 PM by designer82 »

gordontaylor

  • Guest
Re: how to change color of header bar and social icons
« Reply #3 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.
« Last Edit: April 27, 2014, 07:59:55 PM by gordontaylor »

Old Fossil

  • Guest
Re: how to change color of header bar and social icons
« Reply #4 on: April 27, 2014, 09:23:13 PM »

Offline designer82

  • Newbie
  • *
  • Posts: 4
  • Karma: +0/-0
    • View Profile
Re: how to change color of header bar and social icons
« Reply #5 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.
« Last Edit: April 27, 2014, 10:57:25 PM by designer82 »

gordontaylor

  • Guest
Re: how to change color of header bar and social icons
« Reply #6 on: April 27, 2014, 11:02:25 PM »
I'll see if I can find them soon. I'll post when I do.

Old Fossil

  • Guest
Re: how to change color of header bar and social icons
« Reply #7 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.

Offline designer82

  • Newbie
  • *
  • Posts: 4
  • Karma: +0/-0
    • View Profile
Re: how to change color of header bar and social icons
« Reply #8 on: April 28, 2014, 01:08:16 AM »
I'll see if I can find them soon. I'll post when I do.

Ok.

 

Powered by SMFPacks Social Login Mod