Posted 18 January 2013 - 11:33 PM
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.
Posted 19 January 2013 - 01:21 AM
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:
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.
Posted 19 January 2013 - 06:43 AM
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
Posted 19 January 2013 - 07:21 AM
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?
Posted 19 January 2013 - 10:57 AM
Hi, i´m not sure but you can try with
Change red for the rgb color as you like.
Posted 19 January 2013 - 03:22 PM
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?
Posted 21 January 2013 - 11:19 PM
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.
Posted 22 January 2013 - 12:14 AM
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:
Posted 22 January 2013 - 01:57 AM
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
Posted 22 January 2013 - 07:31 AM
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?
Posted 22 January 2013 - 03:26 PM
You may need to add #page at the beginning of the code James provided above.
Posted 22 January 2013 - 08:25 PM
I put this:
Posted 22 January 2013 - 09:37 PM
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.
Posted 22 January 2013 - 09:45 PM
I clicked the "expand source" above in James' reply and cut and pasted it. It did seem rather strange...
Posted 22 January 2013 - 10:29 PM
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.
Posted 22 January 2013 - 11:11 PM
Maureen, try this:
If it doesn't paste as shown, don't save it; erase it.
Posted 23 January 2013 - 12:38 AM
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?
Posted 23 January 2013 - 01:06 AM
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.
The will set the background color for the full width of the section as per this screenshot :
When you click on the expand post tab inside the threads, you should see something resembling the below