How to change footer color and other stuff in Abundance « Support Forum | Kriesi.at

Support Forum » Abundance

How to change footer color and other stuff in Abundance

4 posts from 3 voices

Started 1 year ago by danielsami
Latest reply from Chris Beard
This topic is not a support question

Tags:

danielsami
Member

Hello!

First, let me say I am so pleased to be working on a website with Abundance, the most powerful theme by Kriesi so far, full of options to customize it. I'm using it to build a church website, without the ecommerce plugin, and it works great.

My client asked me to customize some features and I would like some advise and/or confirmation when messing with the css.

1- How can I change the footer color to make it different from the header color? The theme options allow one color change that applies to both the header and the footer.

2-I noticed that the "drop caps" background color also changes when I change the header/footer color. Can I set the drop caps color separately? I tried in custom.css the following:

.dropcap2 {
background-color:#c00;
}

So far it worked, please confirm if what I did it's correct.

3- How can I manage the color of the copyright section at the bottom of the footer? It has a different color that changes when changing the footer/header color, probably a different opacity setting?

I've tried the following using custom.css, please confirm it's correct:

#socket.container_wrap {
background:#c00;
}

Finally, I need to change the background and hover color of the MegaMenu. Also, the width of the frame around the submenus.

I'm working in the translation into Spanish of the .po file, will post it for download as soon as I have it ready so anyone can benefit of it.

Thanks in advance for any help,

Daniel

Posted 1 year ago #

Dude
Dude

Hey,
1) You can change the footer color with following code:

#top #footer, #top #footer span, #top #footer div, #top #footer p, #top #footer a {
    background-color: #2C3547 !important;
}

You can change the color value of course :)

2) Correct :)

3) I'd use:

#socket {
    background-color: #1B2436 !important;
}

You can use the opacity code like:

#socket {
    background-color: #1B2436 !important;
   -moz-opacity:0.5; //set a value between 0 and 1
    opacity: 0.5;  //set a value between 0 and 1
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; //set a value between 0 and 100
     filter: alpha(opacity=50);	 //set a value between 0 and 100
}

Posted 1 year ago #

danielsami
Member

Thank you Dude, you went even beyond my questions, that's quality support!

I already implemented the changes, everything work well.

Cheers,

Daniel

Posted 1 year ago #
Chris Beard

Glad that Dude could help :)!

Posted 1 year ago #