Jump to content


Photo
- - - - -

2 Questions - changes to more foot colour scheme & removing white spaces

more foot removing white spaces customization

Best Answer James B , 06 March 2013 - 11:10 PM

Hi there,

 

Your screenshot is showing the correct area, .content which translates to the same code Danny pasted above. You'd put the section morefoot first in the css, followed by the content area inside the morefoot.

 

 
.section-morefoot .content {background:#649719;}
 

If that's not taking it could be that you need to place an override in front, like #page or #site to make this more specific. Please see the section on overrides in this page (half way down) - http://support.pagel...ion/custom-css/

Go to the full post


  • Please log in to reply
8 replies to this topic

#1 bleuy

bleuy

    Advanced Member

  • Members

  • 93 posts
  • LocationHampshire
  • Framework Version:Developer
  • Country: Country Flag

Posted 05 March 2013 - 09:48 PM

Hi Newby here!   :geek:

 

I have just down loaded your Theme and have been happy plugging away at it, but I think I now need some CSS changes (please note I am not an expert at this by a long shot!)

 

1. I want to change the content area of the MoreFoot Area to #649719 with the text being white.  I only want the green area to go across the morefooter element and not the whole page. 

 

I have installed a child theme and your customization plugin, looked around with Firebug (as your manuals suggest) but can't actually see where the colour needs to be changed!

 

2. I have a lot of white spaces around boxes and content boxes which I need to remove.  Again I have looked around with firebug and can see it relates to the <div class="hentry cb-standard">

 

 

.hentry {
    clearboth;
    margin0 0 1.8em; (this needs to be changed to 0 0 -2.2em)
 

 

.hentry {
    clearboth;
    margin0 0 -2.2em;

 

But again have no clue what I should be doing in the custom CSS - Sorry if I'm being a bit thick.  All help greatly appreciated.

 

Thanks very muchy

 

Attached is what I am trying to achieve - this is where I have got to! 

 

Please Login or Register to see this Hidden Content

 



#2 James B

James B

    Advocate

  • Members

  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 05 March 2013 - 10:32 PM

Hi there

 

If you've not see this page in the docs yet

Please Login or Register to see this Hidden Content

take a look as it will show you the process of finding the correct elements inside in firebug and editing them.

 

When you inspect the element in the morefooter section, scroll up and down through the html list in the bottom left window in the browser and you'll see a blue frame highlight which area this if affecting in the site preview above. When you get the blue hover around the correct area in the morefoot, click on that div in the html and then you'll be able to adjust the color for that section in the css on the right. (see screenshot below)

 

To remove the white areas around each section, use the same method as above but when you see a thick dark blue border that means there's padding applied to that area. When the dark blue covers the white areas, you'll know you've reach the right area to remove the padding in the css.

 

Please Login or Register to see this Hidden Content



#3 bleuy

bleuy

    Advanced Member

  • Members

  • 93 posts
  • LocationHampshire
  • Framework Version:Developer
  • Country: Country Flag

Posted 06 March 2013 - 11:40 AM

James

 

Thanks for the response. :) 

 

I understand the Firebug element and how to locate the relevant points within the CSS and have now managed to resolve the 'White Space' issue, however I can't seem to locate where I need to change the colour in the morefooter!

 

I attach the relevant HTML & related CSS.

 

Clare

Attached Files



#4 Danny

Danny

    Is Awesome!

  • Moderators
  • 17966 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 06 March 2013 - 12:24 PM

You can find this with Firebug or your browsers built-in tools, depending on how you wish to have it styled, you would most likely need to use either:

 

.section-morefoot .texture { }

or

.section-morefoot .content {}



#5 bleuy

bleuy

    Advanced Member

  • Members

  • 93 posts
  • LocationHampshire
  • Framework Version:Developer
  • Country: Country Flag

Posted 06 March 2013 - 05:33 PM

OK, I've looked at everything you said and have literally spent all day playing with this and still can't see how to change the colour in the morefoot. Area (when I do change colours it changes it across the whole website)

 

I've managed to make all the other changes I needed to via the CSS, but I can't see/seem to change it correctly - frustrated isn't the word!  :phew:

 

I can isolate the area in question in Firebug (see attached) but then I am at a complete loss.  It shouldn't be this difficult to change this area to #649719 colour!

 

 

Help! (In a Penelope Pit Stop kind of voice!)

Attached Files



#6 James B

James B

    Advocate

  • Members

  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 06 March 2013 - 11:10 PM   Best Answer

Hi there,

 

Your screenshot is showing the correct area, .content which translates to the same code Danny pasted above. You'd put the section morefoot first in the css, followed by the content area inside the morefoot.

 

Please Login or Register to see this Hidden Content

If that's not taking it could be that you need to place an override in front, like #page or #site to make this more specific. Please see the section on overrides in this page (half way down) -

Please Login or Register to see this Hidden Content



#7 bleuy

bleuy

    Advanced Member

  • Members

  • 93 posts
  • LocationHampshire
  • Framework Version:Developer
  • Country: Country Flag

Posted 07 March 2013 - 05:32 PM

Danny & James

 

Thanks again for your response.  This is one learning curve! lol

 

That code only changes the Font Colour in the .morefoot not the content area! :startle: I would have thought it was a background-colour, however when I change that, it does it across the whole website background........

 

Answers on a postcode......



#8 James B

James B

    Advocate

  • Members

  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 08 March 2013 - 02:01 AM

Hi again,

 

If you could put the code into the site for us and then let us have the url so we can see what's happening for you.



#9 bleuy

bleuy

    Advanced Member

  • Members

  • 93 posts
  • LocationHampshire
  • Framework Version:Developer
  • Country: Country Flag

Posted 09 March 2013 - 03:30 PM

I was clearly having a bit of a mental day yesterday!!!

 

This now appears to be working fine  :D

 

Thanks VERY MUCHY for your assistance







Also tagged with one or more of these keywords: more foot, removing white spaces, customization