Wordpress loses padding on custom sidebar - css

Question

Here's a strange problem!
I'm using a custom sidebar which replicates the normal default sidebar except that it adds a relevant google maps widget for that page showing location of that particular event.
the map widget is not needed on any other page so that's why an almost identical custom menu has been created but with the extra map widget.
on the first image you can see the default sidebar on the right has some additional classes (.widget) and also
all the widgets are contained in divs with ids for each div
so the padding is as correct
on the second image all of the are widgets lacking don't have divs anymore so no place to add a custom classes on custom.css
required padding is missing!
if the classes were there this wouldn't be a problem!
I think i did the following:
created a custom sidebar
added widgets
created a page and replaced default rhs sidebar at time of creation
have I done it wrong?
surely the wordpress core should be adding all classes and divs with their respective id's
=====================================================================
1st edit
I used the custom sidebar and configured widgets.
all elements of the jummah custom sidebar are widgets
here's the html...
<div class="sidebar s2">
<a class="sidebar-toggle" title="Expand Sidebar">
<div class="sidebar-content">
<div class="sidebar-top group">
Jummah, Darutawheed Oxford
<p>
<p>
<p>Barak Allaahu feekum</p>
<form class="searchform themeform" action="http://darutawheed.co.uk/" method="get">
Tags
<div class="tagcloud">
<div id="calendar_wrap">
Archives
<ul>
</div>
and the css that gets generated in Jummah sidebar
.col-3cm .s2 {
float: right;
margin-right: -260px;
position: relative;
right: -100%;
}
.s2 {
width: 260px;
z-index: 1;
}
.sidebar {
padding-bottom: 20px;
position: relative;
z-index: 2;
}
==================================
this is how it should look
html
<div class="sidebar s2">
<a class="sidebar-toggle" title="Expand Sidebar">
<div class="sidebar-content">
<div class="sidebar-top group">
<div id="search-2" class="widget widget_search">
<div id="tag_cloud-3" class="widget widget_tag_cloud">
<div id="calendar-2" class="widget widget_calendar">
<div id="archives-2" class="widget widget_archive">
</div>
css
.sidebar .widget {
padding: 30px 30px 20px;
}
.widget {
color: #777777;
font-size: 15px;
overflow: hidden;
}
================================
I did a little experiment
this pic shows page using the DEFAULT sidebar
this is the JUMMAH sidebar which totally breaks the design
I tried to add a custom sidebar widget class using edit sidebar BEFORE WIDGET
<div class="custom_sidebar_widget">
and AFTER WIDGET
</div>
and the copied the padding style like this in custom.css
.custom_sidebar_widget {
padding: 30px 30px 20px;
}
but that just padded out the widgets correctly but the styling (font colour and calendar style was all messed up)
The theme is not adding the necessary divs and classes widget widget_search, widget widget_tag, widget widget_calendar etc. so this breaking the design!!
I think I've covered everything

Answer 1

It's very difficult to view the images without coding. Anyway! I hope the problem was your coding. As I view your site, I saw the issue between your 2nd image and default code(live site). The thing is.
You didn't use a div for your content with calss .widget
See my example.
<div class="sidebar s2">
<a class="sidebar-toggle" title="Expand Sidebar"><!-- Something here I saw in live site --></a>
<div class="sidebar-content">
<div class="sidebar-top group"><!-- Something here I saw in live site --></div>
<!-- I don't know about codes. After this one use a div with .widget class -->
<div id="myTest" class="widget">
Jummah, Darutawheed Oxford
<p>Contents Here</p>
<p>Another P Tag contents</p>
<p>Then use form</p>
<form action="http://darutawheed.co.uk/" class="searchform themeform" method="get" data-dpmaxz-eid="1">
<div id="mysform">
<input type="text" value="To search type and hit enter" onfocus="if(this.value=='To search type and hit enter')this.value='';" onblur="if(this.value=='')this.value='To search type and hit enter';" name="s" class="search" data-dpmaxz-eid="2">
</div>
</form>
</div><!--end div#myTest-->
</div>
I just use that form static way. You just have to add that class with a div. See div #myTest
Thanks
See Theme Codes 1st Edit.
/* Register sidebars
/* ------------------------------------ */
if ( ! function_exists( 'alx_sidebars' ) ) {
function alx_sidebars() {
register_sidebar(array( 'name' => 'Primary','id' => 'primary','description' => "Normal full width sidebar", 'before_widget' => '<div id="%1$s" class="widget %2$s">','after_widget' => '</div>','before_title' => '<h3>','after_title' => '</h3>'));
register_sidebar(array( 'name' => 'Secondary','id' => 'secondary','description' => "Normal full width sidebar", 'before_widget' => '<div id="%1$s" class="widget %2$s">','after_widget' => '</div>','before_title' => '<h3>','after_title' => '</h3>'));
if ( ot_get_option('footer-widgets') >= '1' ) { register_sidebar(array( 'name' => 'Footer 1','id' => 'footer-1', 'description' => "Widetized footer", 'before_widget' => '<div id="%1$s" class="widget %2$s">','after_widget' => '</div>','before_title' => '<h3>','after_title' => '</h3>')); }
if ( ot_get_option('footer-widgets') >= '2' ) { register_sidebar(array( 'name' => 'Footer 2','id' => 'footer-2', 'description' => "Widetized footer", 'before_widget' => '<div id="%1$s" class="widget %2$s">','after_widget' => '</div>','before_title' => '<h3>','after_title' => '</h3>')); }
if ( ot_get_option('footer-widgets') >= '3' ) { register_sidebar(array( 'name' => 'Footer 3','id' => 'footer-3', 'description' => "Widetized footer", 'before_widget' => '<div id="%1$s" class="widget %2$s">','after_widget' => '</div>','before_title' => '<h3>','after_title' => '</h3>')); }
if ( ot_get_option('footer-widgets') >= '4' ) { register_sidebar(array( 'name' => 'Footer 4','id' => 'footer-4', 'description' => "Widetized footer", 'before_widget' => '<div id="%1$s" class="widget %2$s">','after_widget' => '</div>','before_title' => '<h3>','after_title' => '</h3>')); }
}
}
add_action( 'widgets_init', 'alx_sidebars' );
This is the codes from the alex theme register sidebar? If am I right. Just do follow steps.
01.Just copy this code from original code. Then paste it after it.
register_sidebar(array( 'name' => 'Primary','id' => 'primary','description' => "Normal full width sidebar", 'before_widget' => '<div id="%1$s" class="widget %2$s">','after_widget' => '</div>','before_title' => '<h3>','after_title' => '</h3>'));
02.Rename the name, id and description only. Don't remove class and other stuff. If you want to add new class to your own widget. Just add myClass widget %2$s like this.
03.Then create a page as using copy of sidebar-2.php. name it sidebar-3.php.
Then call to your new sidebar for act. That's it.
If you didn't give any chance to complete that. find me I'm yeshansachithak in all networks.
Thanks