Problems With Widget Placement in Footer

  • Resolved ishan001

    (@ishan001)


    16 years, 1 month ago

    I was adding a widget ready footer to my Theme. I found several tutorials but none of them worked, so I did a mix of them (I don’t know anything about PHP, CSS etc!)

    Somehow, I made the footer Widget Ready, but the problem is that, when I add more than 1 Widget to any footer column, the Widget overflows (I mean moves to) next column and next column’s content moves to column next to it and so on…. To see example, see my home page, Here The series widget has been added after the Recent Comments widget. But it moves to below column 1 (The one having Meta Content). In Widget page of admin panel, Series widget displays below Recent Comments)

    Here are changes and additions to the Files:

    Added following Code to Sidebar.php

    #subfooter {
width:95%;
overflow: hidden;
margin-left:auto;
margin-right:auto;
height:300px;
background-color:#f3f1e0;
border: 1px solid #D9D6BC;
clear:both;
}  

#subfooter .widget {
width:24%;
float:left;
display:block;
}  

#subfooter .widget .inner {
padding:5px;  

}
#subfooter ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
#subfooter ul li {
  list-style-type: circle;
  margin: 0px 0px 2px 25px;
  padding: 1px 0px 0px 0px;
}
#subfooter ul li a, #sidebar ul li a:visited {
  font-size: 14px;
}
#subfooter

.alignright { float: right; margin-left: 10px; }

.aligncenter { margin-right: auto; margin-left: auto; }

.alignleft { float: left; margin-right: 10px; }

    Added to Functions.php

    if ( function_exists('register_sidebar') )
register_sidebar(array('name'=>'Footer Left','before_widget' => '<div class="widget">','after_widget' => '</div>','before_title' => '<h2>','after_title' => '</h2>',));
 if ( function_exists('register_sidebar') )
register_sidebar(array('name'=>'Footer Center','before_widget' => '<div class="widget">','after_widget' => '</div>','before_title' => '<h2>','after_title' => '</h2>',));
 if ( function_exists('register_sidebar') )
register_sidebar(array('name'=>'Footer Right','before_widget' => '<div class="widget">','after_widget' => '</div>','before_title' => '<h2>','after_title' => '</h2>',));
 if ( function_exists('register_sidebar') )
register_sidebar(array('name'=>'Footer Extreme Right','before_widget' => '<div class="widget">','after_widget' => '</div>','before_title' => '<h2>','after_title' => '</h2>',));

    Added to Footer.php

    <div id="subfooter">  

<?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar('Footer Left') ) : else : ?>

<?php endif; ?>

<?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar('Footer Center') ) : else : ?>

<?php endif; ?>

<?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar('Footer Right') ) : else : ?>

<?php endif; ?>

<?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar('Footer Extreme Right') ) : else : ?>

<?php endif; ?>

    No more changes to any files! I am using Wp Them.es Blue Theme.

    Can you help me with this problem? Better if you spoon-feed me changes/additions, I do not php and css, everything I did with if etc. was from web tutorials and copy pasting from other themes.

Viewing 15 replies - 1 through 15 (of 31 total)
  • Thread Starter ishan001

    (@ishan001)

    No help? ??

    Thread Starter ishan001

    (@ishan001)

    Anyone please!

    giles

    (@giles)

    I see you fixed it … I am having the same issue .. sort of .. how did you fix it ?

    Giles

    Thread Starter ishan001

    (@ishan001)

    Its not fixed yet! When I found no solutions, I just went and deleted extra widgets that caused others to shift. Now, I have only 4 widgets and that does not cause any problem with it!

    LJagermaster

    (@the-living-legend)

    Did you place the code in specific areas of each file? I tried to re-create it on mine (been looking to put widgets in my footer for a while) and everything seemed to be going fine until I tried to add a widget to one of the footer sidebars (the Extreme Right one), and this is what happened:

    https://weareblogging.0fees.net/blogs/waw_blog
    (scroll to the bottom and you’ll notice an obvious error)

    LJagermaster

    (@the-living-legend)

    Ok, I’ve been playing around with it and seemed to have resolved that error (it was showing the additional code within the sidebar.php at the bottom of the sidebar, and the footer had completely disappeared), but something’s still clearly not right as the footer isn’t displaying in full, and neither is the widget I added to it.

    LJagermaster

    (@the-living-legend)

    Bummer! I backed up all three files before editing, after it didn’t work out I restored the backups, and… my blog is still distorted! Who’d have thought that removing the code wouldn’t remove the problem?!

    LJagermaster

    (@the-living-legend)

    It doesn’t see, as if anyone’s checking this topic, but just in case…

    I fixed the bug, but for some reason all plugins are appearing on top of each other (I’ve added 1 to three of the footer sidebars, and they all appear on the left hand side)… Can you run through where you placed the code in each file to see what I’ve did differently?

    Cheers ??

    Thread Starter ishan001

    (@ishan001)

    Sorry for late responce. The mistake was mine. I did not add anything to Sidebar.php but the code was in style.css I played around a bit but only last column displays multiple widgets. Here’s the code:

    #subfooter {
width:950px;
overflow: hidden;
margin-left:auto;
margin-right:auto;
height:auto;
background-color:#f3f1e0;
border: 1px solid #D9D6BC;
clear:both;
}  

#subfooter .widget {
  margin-bottom: 10px;
  padding: 5px;
  float: left;
  width: 225px;
  display: block;
  position: relative;
}  

#subfooter .widget .inner {
  padding: 5px;
}
#subfooter ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
#subfooter ul li {
  list-style-type: circle;
  margin: 0px 0px 2px 25px;
  padding: 1px 0px 0px 0px;
}
#subfooter ul li a {
  font-size: 12px;
}
#subfooter

.alignright { float: right; margin-left: 10px; }

.aligncenter { margin-right: auto; margin-left: auto; }

.alignleft { float: left; margin-right: 10px; }
    LJagermaster

    (@the-living-legend)

    Aha… **suddenly dust starts to clear from eyes**

    Cheers buddy, that seems to have sorted it. Now to figure a way to prevent the overflowing… I suppose the obvious way would be to use your method and add more sidebars to it, but I’m in no way brave (or techie) enough to try it just now…

    Plus I still need to find a way of making the title font in the footer smaller (changing the pre-defined font size in the CSS code, which in my theme is set at 14, doesn’t seem to effect the footer widgets). Have you had any success with this?

    UPDATE: Just tried adding multiple (well two) widgets to a single footer sidebar, and they appear to be simply spread along in a row. So… Rather than trying to fix this, which would no doubt be painful (I’ve got a migraine just thinking about! (~_^) ), why not fill them one at a time. For example, remove your current widgets from all of them, then starting with the “Left” one, add what you want to appear at the very top of the footer, once it fills the row, start on the “Center” one (which would use up the second row), and so on…

    LJagermaster

    (@the-living-legend)

    Hmm… Seems I can’t edit that post again…

    I’m in the process of doing the “one sidebar at a time” thing, so check my blog footer to see my progress…

    https://www.wearewatching.co.nr/blog

    LJagermaster

    (@the-living-legend)

    Ok… to prove experience is key to pretty much everything, I’ve gave my own suggestion a try and I’m now forced to concede that it doesn’t work as I’d hoped. Starting off with the Left footer sidebar, I cautiosly added four widgets (which due to the size of the title text expands the footer wider than the rest of the blog, and removing widget doesn’t restore the width of the footer), they spread across the footer as I’d hoped they would, I then moved onto the Center footer, and alas the first one starts off on the far right of the footer, and subsequent widgets simply pile up below the first one. Same thing happens when I try to place a single widget inside the remaining three footers, so it seems the maximum number possible with this widgetising method is 4, without seriously disfiguring the blogs layout. Huge bummer coz I’m a CSS novice and this is an awesome hack! ??

    Thread Starter ishan001

    (@ishan001)

    Seems like we two CSS novices are messing up here on this issue and experts are not listening. WP experts, where are you?

    LJagermaster

    (@the-living-legend)

    Well I did manage to get one thing right… Using pure common sense I took another look at the CSS code you posted here, and sure enough there was an easy way to resolve the width issue, by changing the width value at the top (well, second line from the top) of the code. It now fits perfectly at the bottom of my blog, but is only wide enough for 3 widgets due to the size of the title text…

    I’ve no intention of giving up on this and I’m sure if anyone who knows how to help saw this thread they would, I guess we just need to be patient (since no one’s actually getting paid to help us (~_^) ).

    Thread Starter ishan001

    (@ishan001)

    Dump the experts. I think I have found the problem. I saw a free theme with widgetized footer and there’s one little thing needed. Let me test it and then I will update!

Viewing 15 replies - 1 through 15 (of 31 total)
  • The topic ‘Problems With Widget Placement in Footer’ is closed to new replies.