Jump to content
maureen1671

Content alignment in More Footer

Recommended Posts

maureen1671    2
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.


http://www.thomashoben.com/

Share this post


Link to post
Share on other sites
Rob    547
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: 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.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
maureen1671    2
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

Share this post


Link to post
Share on other sites
maureen1671    2
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?

Share this post


Link to post
Share on other sites
batman    389
batman

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.


Life is too short to remove USB safely ...

Share this post


Link to post
Share on other sites
maureen1671    2
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?

Share this post


Link to post
Share on other sites
Rob    547
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.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
maureen1671    2
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?

Share this post


Link to post
Share on other sites
James B    436
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

 

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

Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
maureen1671    2
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? 

Share this post


Link to post
Share on other sites
maureen1671    2
maureen1671

I'm not sure what you mean.

Share this post


Link to post
Share on other sites
maureen1671    2
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.

Share this post


Link to post
Share on other sites
Rob    547
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.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
maureen1671    2
maureen1671

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
Rob    547
Rob

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


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
maureen1671    2
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.

Share this post


Link to post
Share on other sites
Rob    547
Rob

Maureen, try this:

 

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

 

 

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


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
maureen1671    2
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? 

Share this post


Link to post
Share on other sites
James B    436
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.

 

 

#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


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
maureen1671    2
maureen1671

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
Rob    547
Rob

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;
}

Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
maureen1671    2
maureen1671

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
Rob    547
Rob

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.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
maureen1671    2
maureen1671

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

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


  • Similar Content

    • JawDesigns
      By JawDesigns
      Hi to all,
      I always have this problem and I'm unhappy with the fix I usually apply for aligning columns at the bottom (see attached).
      For example: I use two text boxes side by side. Both text columns have a background colour. Text column 1 has 200 words and text column 2 has 300 words.
      How do I easily get them to align at the bottom without using a min-height declaration? I want to get text column 1 with 200 words to fit the height of text column 2 if that makes sense?
      Thanks for any help on this!
      Cheers,
      James

    • Jeremiah
      By Jeremiah+
      Does anyone know the custom css to align the menu navigation links to the center? 
    • rallison87
      By rallison87
      Hi guys,
       
      This is probably an easy one - I've spent the past few hrs reading through similar cases and trying CSS modifications, but without any success.
       
      What I'm trying to do is align a simple 3-item fixed navbar (no logo/title) to the center of the page.
       
      Site URL:  http://wp.onlineaperture.com/wp/
       
      Nothing invoking the text-align: center seems to work, and manually padding breaks with responsive dimension changes.
       
      The closest I've come is via Firebug but in my attempts I've lost the CSS modifications that almost had it.
       
      Can anyone help me change my navbar from this:
       

       
       
      To this:
       

       
       
      Any assistance is greatly appreciated- I figured I'd logically be able to crack this out easily, but instead here I am!
       
      Cheers!
    • BentleyD
      By BentleyD+
      I'm working on this page:
       
      http://freshjuiceglobal.com/alliances/?pagename=alliances
       
      For some reason the images are all the sudden not inline with the text and button. Do you know what's going on?
    • Bleuy
      By Bleuy+
      Hi All
       
      Been away for a while, hope you are all good.  I am trying to change the Hoover & Link colours on some of my More Footer Links to just plain black (they are green on the rest of the website) but when I do it changes them globally and I only want the colour changed on the More Footer.  
       
      I have had a look around the forums (nothing here) and I have tried Firebug, but as I said when I change them it does it globally.  Can someone please point me in the right direction please?
       
      Thanks very muchy.
       
      Bleuy  :D
×