28 replies to this topic

[maureen1671]

I have 3 buttons, one in each column of the More Footer Section on the home page.  Could you please tell me how to anchor or force the middle and right buttons to the bottom of their More Footer columns so they will be in a horizontal line with the button in the first More Footer Left column?  Better yet align all three to the bottom of the footer because depending on the amount of text in each column, it could change on which column is the longest.  

 

I would also like to narrow the column text widths (add more space between the columns).  I can't seem to get that to happen either.  Any help would be appreciated.

Please Login or Register to see this Hidden Content

[Rob]

Hi Maureen,

 

I've tried the standard CSS solution, vertical-align: bottom; or vertical-align: baseline; but can't seem to find the right element to apply it to, since you're using widgets in the morefoot (the standard method).

 

The CSS can be found here:

Please Login or Register to see this Hidden Content

 

However, I believe there's a different solution.  Perhaps a bit more cumbersome, but equally effective and beneficial.

 

If you create a new row of boxes that corresponds in order to the one above it, then you can place the button shortcode and link in that second row. No matter how tall or short the first row of boxes may be or any one box within it, the next row will always be the same height and position.

 

So, first, create a box in the same box-set for "Recent Blog Posts".  Copy the button code from the original box to that one, but don't add a title to the new box. Just the code and save. Remove the code from the original box.

 

Repeat this next for "Readiness to Change" and save the new and old boxes.

 

Once more, do it for "Founder-Greg Hoffman".

 

Now adjust the PageLines Meta Settings for your static page to allow two rows. This will display the second row below the first.

 

Let us know if this works for you.

[maureen1671]

Funny,  I was doing this but in revise.  I made boxes for the "founder text, readiness to change text, and when I got to the "blog posts"s, I couldn't figure out how to get it in the box since it came from the widget section.  I figured there should be a simple solution to just align bottom... couldn't figure that out either.  I never thought to reverse it and put the the buttons in the boxes and move the boxes below .

 

Ill try ti now.  Thank you

[maureen1671]

This worked but the background is the same color as the body content. I would like it to be the same color as the more footer background. How do I fix that?

[batman]

Hi, i´m not sure but you can try with

Please Login or Register to see this Hidden Content

Change red for the rgb color as you like.

[maureen1671]

Thank you for trying, but it did not work.  

 

I have the buttons in boxes placed in the more foot area...shouldn't it automatically be the same background color as the more footer not the body content above?

[Rob]

The boxes may have a background color set.  That would overlay the morefoot color rather than blending into it.

 

Batman was correct in that you can use CSS to resolve this.  If you want to make the boxes transparent, again, CSS will do the trick.  The reason why they're not the same color is that the boxes probably fall under the .content-pad which has a different background color or #fbox.

 

Using Firebug should find the correct element to change in CSS.

[maureen1671]

Well,  I can't find it.  I do not see a way to set background color of the boxes via the pageline admin and this is what I have in my CSS file:

 

 

#content .content-pad {

    border-left: 1px solid #ebebeb;

    border-right: 1px solid #ebebeb;

  -moz-box-shadow:    inset 0 0 5px #000000;

   -webkit-box-shadow: inset 0 0 5px #000000;

   box-shadow:         inset 0 0 5px #000000;

}

#morefoot .content-pad {

    border-left: 1px solid #ebebeb;

    border-right: 1px solid #ebebeb;

  -moz-box-shadow:    inset 0 0 5px #000000;

   -webkit-box-shadow: inset 0 0 5px #000000;

   box-shadow:         inset 0 0 5px #000000;

}

#footer .content-pad {

    border-left: 1px solid #ebebeb;

    border-right: 1px solid #ebebeb;

  -moz-box-shadow:    inset 0 0 5px #000000;

   -webkit-box-shadow: inset 0 0 5px #000000;

   box-shadow:         inset 0 0 5px #000000;

}

 

When I look ate the page and add the dark blue background to the more foot, it only goes down to the border that is set.  I have placed the boxes in the morefoot but it sure doesn't seem like they are in there because otherwise, why wouldn't the morefoot border go all the way around them?

 

What am I missing?

[James B]

Hi Maureen 

 

The css #morefoot .content-pad is only applying the border/color to the content-pad area, the boxes are below this area and have their own content-pad inside of the section. To add the background to this section as well you'll need to add

 

Please Login or Register to see this Hidden Content

[maureen1671]

I really appreciate your help.  I pasted that in my custom css file and it actually turned the Footer background white not the boxes located in the Morefoot below the Morefoot content-pad.  Sure seemed like allot of code for a small problem.  Any other ideas? 

[catrina]

You may need to add #page at the beginning of the code James provided above.

[maureen1671]

I'm not sure what you mean.

[maureen1671]

I put this:

 

 

#Home <a class="_hootified" a="" href="#" #boxes"="" onclick="javascript:var e = document.createEvent("CustomEvent"); e.initCustomEvent("hootletEvent", true, true, {type: "hash", value: "#boxes"});  document.body.dispatchEvent(e); return false;">#boxes</a> .clone_2 .content-pad {background: <a class="_hootified" a="" href="#" #ffffff"="" onclick="javascript:var e = document.createEvent("CustomEvent"); e.initCustomEvent("hootletEvent", true, true, {type: "hash", value: "#ffffff"});  document.body.dispatchEvent(e); return false;">#ffffff</a>;}

 

and it did make the three buttons in the morefoot have the same background color as the content but it makes all the css below it void.  I basically loose all the changes I made to the homepage.

 

Why would that be?  the css is still there, just below the above code.  If I move that piece of code to the bottom of the css then I get an error.

[Rob]

Maureen,

 

I'm unclear where you found such code as you have above, but that's definitely not CSS and will absolutely corrupt the styling of your site. It mixes HTML, CSS and inline styling all of which are not suitable to functional CSS.  I'd ask you to remove that code so we can properly see what's happening and provide you with some answers that will help.

[maureen1671]

I clicked the "expand source" above in James' reply and cut and pasted it.  It did seem rather strange...

[Rob]

Are you sure you didn't view source of James' code? 

[maureen1671]

I really don't know.  When you guys post I get a "+expand source" and that is it.  There is only a link to click on.

[Rob]

Maureen, try this:

 

#boxes .clone_2 .content-pad {background: #ffffff;}

 

 

If it doesn't paste as shown, don't save it; erase it.

[maureen1671]

Thanks so much for your help... I pasted as shown and nothing changed.  I did change the page background to a light pink in the Color Control and it also changed that stripe behind the 3 buttons.  The morefoot and footer are the correct dark blue but I still cannot get the .content-pad of the 3 buttons to change colors.

 

Any other suggestions? 

[James B]

Hi Maureen

 

The three buttons are inside the boxes section, so in order to color the entire section the same as the dark blue you'll need to assign the color to the following code, click below to expand the code.

 

 

Please Login or Register to see this Hidden Content

The will set the background color for the full width of the section as per this screenshot :

Please Login or Register to see this Hidden Content

 

When you click on the expand post tab inside the threads, you should see something resembling the below

 

Please Login or Register to see this Hidden Content