• 0

Design in footer

Question

Posted · Report post

I want to style the footer in such a way on http://www.hansonexperience.com so that it looks like the banner on top so with black background.

How can I do this?

Share this post


Link to post
Share on other sites

10 answers to this question

  • 0

Posted · Report post

Hi hansonexperience - Matt is correct, that's definitely one way to do it. The other way is to override the default footer CSS by adding the following custom code:

 

footer {background-color: #000000; color: #FFFFFF;}

 

You'll also probably want to make your footer links white as well so add:

 

footer a {color: #FFFFFF;}

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

you just want the footer to be black?

 

You can add the following to css
 

.my-black-area {
  background-color: #000000;
  color: white;
}
 
and apply my-black-area (without the dot) to the class area of the edit footer section

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

MattKeyes thx will try this. I did not know it was that easy :-)

Share this post


Link to post
Share on other sites
  • 0

Posted (edited) · Report post

Jake ah great! I was just wondering how to do that :-)

Now I just have to style the code for the thumbs as they have an ugly white line around them. It is from the recent post extended widget. And it has its own css style like below. Where do I have to enter the black? 

 

 

.rpwe-block ul{
}
 
.rpwe-block li{
}
 
.rpwe-block a{
}
 
.rpwe-block h3{
}
 
.rpwe-thumb{
}
 
.rpwe-summary{
}
 
.rpwe-time{
}
 
.rpwe-alignleft{
}
 
.rpwe-alignright{
}
 
.rpwe-alignnone{
}
 
.rpwe-clearfix:before,
.rpwe-clearfix:after{
content: "";
display: table;
}
 
.rpwe-clearfix:after{
clear:both;
}
 
.rpwe-clearfix{
zoom: 1;
}
 
And how can I enter the hover effect to grey in both the left and right column and middle columns? And enter a titles?
Edited by hansonexperience

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi hansonexperience - The white line you're seeing is the border around the recent post images so you'll probably just want to remove it completely. Try the following custom CSS:

 

.rpwe-thumb {border: none !important;}

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Jake Hi not that code for the line did not work out.

.rpwe-thumb.wp-post-image {

  border: none !important;
}
 
did the trick. Feels like doing magic :-) Great to do css styling
1 person likes this

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Sorry about that hansonexperience but you're a CSS ninja now and I'm glad to see you've got it working!

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Jake :-) Not quite ready. Also have to remove the border in the column to the right of this post images. The image comes from an uploaded image. Also in rpwe-thumb Any idea?

 

ANd how to change hove effect?

Share this post


Link to post
Share on other sites
  • 0

Posted (edited) · Report post

Jake :-) Not quite ready. Also have to remove the border in the column to the right of this post images. The image comes from an uploaded image. Also in rpwe-thumb Any idea?

 

ANd how to change hove effect?

messing around with chrome web developer, I disabled the .rpwe_thumb attributes at line 943, then enable the the .rpwe_thumb attributes at line 879, minus the border and that removed the border from the "Some Pages" column

 

.rpwe-thumb {
  1. border1px solid #EEE!important;
  2. box-shadownone!important;
  3. margin2px 10px 2px 0;
  4. padding3px!important;

I think your running into a css specificity problem

Edited by MattKeyes

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

MattKeyes I am not quite sure what you mean? Above code does not work with me.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now