Archived

This topic is now archived and is closed to further replies.

  • 0

Content alignment in More Footer


Question

Posted · Report post

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.


http://www.thomashoben.com/

Share this post


Link to post
Share on other sites

28 answers to this question

Posted · Report post

Glad it worked Maureen :)

1 person likes this

Share this post


Link to post
Share on other sites

Posted · Report post

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.

Share this post


Link to post
Share on other sites

Posted · Report post

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

Share this post


Link to post
Share on other sites

Posted · Report post

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: http://www.w3schools.com/cssref/pr_pos_vertical-align.asp

 

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.

Share this post


Link to post
Share on other sites

Posted · Report post

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

Share this post


Link to post
Share on other sites

Posted · Report post

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.

Share this post


Link to post
Share on other sites

Posted · Report post

Maureen, try this:

 

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

 

 

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

Share this post


Link to post
Share on other sites

Posted · Report post

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? 

Share this post


Link to post
Share on other sites

Posted · Report post

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.

 

 

#boxes .clone_2 {background:#4D4D80;}

The will set the background color for the full width of the section as per this screenshot : http://screencast.com/t/VcfcH40L

 

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

 

http://screencast.com/t/ovvDZ8mSSRr

Share this post


Link to post
Share on other sites

Posted · Report post

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.

Share this post


Link to post
Share on other sites

Posted · Report post

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

Share this post


Link to post
Share on other sites

Posted · Report post

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?

Share this post


Link to post
Share on other sites

Posted · Report post

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

#boxes .container clone_2 section-boxes fix  {background: red;}

Change red for the rgb color as you like.

Share this post


Link to post
Share on other sites

Posted · Report post

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?

Share this post


Link to post
Share on other sites

Posted · Report post

Hello,

 

When I click expand that is not what I see.  I attached a screen shot of what I see.  Either way, I have typed in #boxes .clone_2 .content-pad {background: #ffffff;}  and nothing changes.  

 

I took everything out of my Custom Code section (thinking I had put something in there that was causing a problem) but this:

 

 

body{}
#boxes .clone_2 .content-pad {background: #ffffff;}
 
and still no change of color in the boxes section - just the pink content background color.  Is it possible to line up the 3 buttons in that position any other way and have the background the same color as the footer and morefoot?  I have spent days on this.  Pagelines is becoming very unproductive for me.  I am getting very discouraged.  I left the site stripped of all css except above so you can take a look.  Thanks so much for your help. 

Share this post


Link to post
Share on other sites

Posted · Report post

Hi Maureen,

 

It might help to take a tall cold glass of water and a breather.  Sometimes when these things get daunting, I've found that the best cure.

 

Okay, stepping back from the edge of the cliff, I'm unsure what happened here, but evidently the lower set of boxes where you want the background color set is actually a very easy thing, but for some reason, instead of the boxes being created as I had suggested, they seem to be cloned. This is why it's problematic.  When something's cloned and you want to apply CSS to it, that CSS will affect both the parent element as well as the clone.

 

So, I've isolated the boxes down to the lowest level I can get without getting down to the buttons themselves.

 

Here's the code:

 
#boxes .content-pad {
    background-color: red;
    padding-bottom: 5px;
}

 

You can change "red" to any color you desire.

 

If this does not work, I'd strongly recommend hiring a professional developer from our team of Pros at http://www.pagelines.com/pros.

 

That said, the color of the footer also has to be set by CSS.

 

Here's an example:

 

#footer {
    background-color: #C00000;
    clear: both;
    color: rgba(255, 255, 255, 0.6);
    position: relative;
    text-align: left;
}

Share this post


Link to post
Share on other sites

Posted · Report post

Well... if that is the problem I can solve that.  I didn't realize cloning was a problem... I moved the first "origional" box button (consultation) into a Content Box so I would not have to Clone the Box section.  Now I only have one set of Boxes on that page in the Morefoot and the code changed the background of the boxes but not the full width.

 

Almost there ;-)  What do I do to make it full width.  I really do appreciate your help.  You guys are awesome!  I was hoping to figure out how to work on Page lines myself rather than hire a Pro...seems like hat would defeat the purpose of buying/using it.  I am however getting the hang of it thanks to you guys!

Share this post


Link to post
Share on other sites

Posted · Report post

Maureen,

 

It's the issue of full width that seems to be getting you in trouble.

 

Placing the boxes inside a content box means that the elements are overridden so you can't easily apply CSS to a section.  Had you simply followed my original suggestion of adding the second row of boxes in the same box set, there would have been no problem here.  It's when anyone changes the instructions we happily provide that they seem to get into the most difficulty and make it more difficult for us to resolve.

 

I think the option to make the color full width really doesn't exist given the layout and construction of the site.  The available options are rather limited.  This is why my colleagues and I recommend a Pro.

Share this post


Link to post
Share on other sites

Posted · Report post

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?

Share this post


Link to post
Share on other sites

Posted · Report post

The boxes are not inside a content box.  You misunderstood.  And I did not intentionally not follow your instructions, I simply could not see how to make 2 sets of boxes without cloning.

 

So if I understand you correctly, there is absolutely no way to undo what has been done other than pay  one of your professionals to produce the site?

Share this post


Link to post
Share on other sites

Posted · Report post

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

 

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

Share this post


Link to post
Share on other sites

Posted · Report post

I see the confusion.  I just went back and reread your directions.  You thought I had the first set in boxes.  I did not, I had the first three in the morefoot sidebar left, middle and right widget.  I had a box up in the content area and I cloned that.  

 

I will go back and try pulling out of the morefoot sidebar and making boxes.  I will set it up to display 2 rows of 6 like you suggested.

Share this post


Link to post
Share on other sites

Posted · Report post

Hi Maureen

 

To make the color go full width you need to apply the css with the .content-pad, that is the part which restricts the color and keeps it within the content area

 

#boxes  {background:#4D4D80;}
1 person likes this

Share this post


Link to post
Share on other sites

Posted · Report post

Thank you!  worked perfect.

Share this post


Link to post
Share on other sites

Posted · Report post

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? 

Share this post


Link to post
Share on other sites