Format Widget Abover Footer

[cturk]

I have searched all of the topics and don't quite see one that answers all of my questions.

I want to format the widget above footer so that it is outside the main wrapper, its background is as wide as your browser window, but the contents are aligned with the main wrapper (the same as the footer is formatted). I'd also like it to be directly above the footer with no padding. Though I would still like to have padding between the main wrapper and the widget above footer.

I've figured out how to adjust the background color, I just can't figure out the rest.

http://intohealing.com

Thanks.

[kassandra]

I wish I had an answer to your question - I came here to search for the answer, too, and instead found your (too recent) post!

This is what I've figured out so far:

Code: Select all

#horizontal-outer-widgets-2 {
    overflow: visible;
    width: 2000px;
    margin-left:auto;
    margin-right:auto;


The overflow: visible tells it to show anything that spills outside, so if you make it some crazy width, it'll show. The margin auto is my attempt to center it (which improves things somewhat). Unfortunately, this code affects the content as well as the background color, and also the overflow is all to the right - basically no good. I've also tried playing with the 'display' and 'position' properties - to no avail.

I figure the "proper" way to do this would be to edit the php file that calls the widget (sidebar-above-footer.php? - widget-areas.php?), and move the widget outside the wrapper div... or something like that - I'm not at all familiar with php. And I don't want to edit the php and have to make a child theme for just this one thing, so I'm hoping someone can come up with a css solution (please)!

Or maybe we can figure it out by putting our heads together...

[kassandra]

Oh I found a previous post on this subject. Looks like editing the php is required.

viewtopic.php?f=4&t=4941

Apparently footer.php is the file that calls the widget. However, the post does not make it at all clear what you are supposed to change in the php...

So, any help on this topic is still appreciated.

[drake]

ALL code from footer.php need to be changed with ALL code from the other topic. If you use a child theme and copy the new, edited, footer.php in child theme folder the change will be preserved at further upgrades (in theme folder let the original file as a backup in case that something goes wrong with your edits).

[kassandra]

Ahh I see!! Thank you Drake.

I've also come up with a ridiculously complicated CSS-only solution - which is probably considered cheating and may cause a bunch of unforseen problems - but I've tested it on five browsers and it *seems* to work.

First:

Code: Select all

#horizontal-outer-widgets-2 {
    background-color: #000000;
    overflow: visible;
    width: 10000px;
    margin-left: -4540px;
}


Theoretically, the width is not infinite, so if someone had a large enough monitor they'd be able to see where the color fill ends. However, by setting it to 10000 px you're pretty much assured no one will ever get to see that (even zooming out all the way).

The problem is that as I said above, instead of being centered, the color fill starts from the wrapper border on the left, then continues to the right (and at 10000px the content gets lost somewhere off the page). But, by setting a negative left margin (IN MY CASE -4540px) I pulled it back and centered the content.

The second problem was that the individual widgets within the horizontal widget container became very wide and spaced out. The solution:

Code: Select all

#horizontal-outer-widgets-2 .suf-widget {
    width: 240px;
    margin-right: -22px;
}

#horizontal-outer-widgets-2 .suf-widget targets JUST the individual widgets within the "container". I specified the width of each widget (in my case 240px) and added a negative right margin to pull them in a bit tighter together.

It takes some playing between the -4540px, the 240px and the -22px to find a combination that lines the widgets up correctly with your page (they're all interrelated, so when you change one value everything moves), but it's possible.

If this is a stupid solution, could someone tell me (and I'll take the plunge and make a child theme instead)? Thanks.

-----
update: OK well one problem is that this creates a horizontal scroll bar at the bottom of your page - and lets you scroll right for quite a ways... not the neatest of solutions.
UPDATE #2 Well, the footer.php solution doesn't work either... continuing this here: viewtopic.php?f=4&t=9213

[kassandra]

Well, I've given up trying to solve this... but as a matter of interest to future readers (who want the big fat footer look):

The revised footer.php (found here viewtopic.php?f=4&t=4941) threw off the sidebars on my site. And looking at the revised footer.php solution, I think I can see why (though my knowledge of php is nill:

In the solution, the hook the hook 'suffusion_before_end_container();' is being moved from inside the container div, to outside it.

Now, according to the note in the php file, that hook "creates the bottom widget area, [but ALSO] the right sidebars, etc.".

So it strikes me as logical that it would move not only the widget above footer outside the main container, but also the sidebars (see here for a screenshot viewtopic.php?f=4&t=9213)

So maybe it would work on a no sidebars template?

The only hook I found that refers specifically to the widget above footer is:
suffusion_can_display_widget_area_above_footer

But where this should go and in which php file... I have no idea. Good luck!

[drake]

Ok, try to replace the content of footer.php with this code:

Code: Select all

<?php
/**
 * Footer template, invoked when get_footer() is called
 *
 * @package Suffusion
 * @subpackage Templates
 */

global $suffusion_unified_options;
foreach ($suffusion_unified_options as $id => $value) {
   $$id = $value;
}

// Invoke hook - this creates the bottom widget area, the right sidebars etc.
suffusion_before_end_container();
?>
   </div><!-- /container -->

<?php
if ($suf_footer_layout_style == 'in-align') {
   suffusion_page_footer();
}
?>
</div><!--/wrapper -->
<?php
suffusion_after_end_container();
if ($suf_footer_layout_style != 'in-align') {
   suffusion_page_footer();
}
suffusion_document_footer();
wp_footer(); ?>

</body>
</html>

You can see a working example at http://www.malcons.ro (first page is with No Sidebars, the rest of them with 1 Right Sidebar). Let me know when you are convinced to change back that site.

[sayontan]

There is always JavaScript. Remember that JQuery is insanely powerful, and though this is a hacky sort of solution, you could easily get it to work. All you need to do is this:

1. Go to Back-end -> Custom Includes
2. Put this under Custom JavaScript in Footer
   

   Code: Select all

   $j = jQuery.noConflict();
$j(document).ready(function() {
    $j('#horizontal-outer-widgets-2').insertAfter('#wrapper');
});


[drake]

Probably I will learn someday Javascript too on this forum... Until now I learn a lot of CSS, I opened my eyes to PHP... but Javascript is just too much for me at this moment...

[sayontan]

Probably I will learn someday Javascript too on this forum... Until now I learn a lot of CSS, I opened my eyes to PHP... but Javascript is just too much for me at this moment...

I definitely am not a JS expert, but I have found that a little bit of lateral thinking using JS gives miraculous solutions. The JS I use is very simple, but very effective. E.g. Suffusion is, if I am not mistaken, the only theme that can handle dynamic tabbed sidebars. There are plugins that offer "tabbed widgets", which effectively give you limited range, like categories, pages, comments etc. The moment you try to add a third party widget to a plugin offering a tabbed widget, you are hosed. But using the JQuery-based approach in the link, I can add almost any widget I want to a sidebar ... and make the sidebar tabbed.

There are a lot of other things I have used JQuery for. Typically if there is a native PHP-based way to solve a problem I use it, but if there is no PHP solution, I try to handle things using JS. E.g. the mega menus use some JQuery tricks, the custom layouts use width balancing tricks based on JQuery etc.