change header and footer background colour

Hi there. 4 brief questions - Hope you can help please!

1. In the Squirrel theme, how can I change the background colour of the header and footer please? (independently if possible - so it's possible to have a different background colour on the header and on the footer - which is independent of the overall background image)
   
2. How can I change the link colours for the various states? (rollover etc)
   
3. How can I change the main body text and header fonts - specifically, is it possible to use Google fonts and could you give an example of implementing this please for a H1 style and also a different one for the body fonts
   
4. How can I change the H1, H2, H3 colour please?

Many thanks in advance for your help
EJ

 

Hello,

1.For your first issue

Paste this code in Custom CSS
Appearance > Theme Option > Styling Option > Custom CSS

Code:

.header {
background: red;
}
.footer{
background:red;
}

Inplace of "red" put your color code.

2.For your second issue

Paste this code in Custom CSS
Appearance > Theme Option > Styling Option > Custom CSS

Code:

a{
color:red;
}
a:hover{
color:blue;
}

3.For your third issue

Firstly, go to js > custom.js present in your theme directory and remove the code given below

Code:

//cufone
Cufon.replace({
    hover: true
})('#colRight h2')('.reply',{
    hover:true
})('h1')('h2')('h3')('h4')('h5')('h6'); 

Now,

Paste this code in Custom CSS
Appearance > Theme Option > Styling Option > Custom CSS

Code:

h1, h2, h3, h4, h5, h6{
font-family:symbol!important;
}
 
p{
font-family:symbol!important;
}

Inplace of "symbol" put your font type.

And for Google font

Follow the link given below

http://www.inkthemes.com/community/threads/problem-with-google-fonts.7237/#post-27444

I hope it will help's you.

4. For your fourth issue

Paste this code in Custom CSS
Appearance > Theme Option > Styling Option > Custom CSS

Code:

h1, h2, h3{
color:red!important;
}

 

Hi Gourav

Thank you for the prompt response - that's great.

Just in relation to item 1 - the header background colour. This works but shows in a narrow band and the outer margin remains white, which doesn't look good. So, is it possible to colour the margin to match please.

I tried
.logo {
background: #fae000;
}

and also
.header .logo {
background: #fae000;
}

but neither worked

Thank you

EJ

 

Hello,

Could you please share us your website link.