WordPress loses padding on custom sidebar

2 Views

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.

Read More

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

default GOOD rhs sidebar

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!

BAD custom sidebar

if the classes were there this wouldn’t be a problem!

I think i did the following:

  1. created a custom sidebar
  2. added widgets
  3. 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

widgets on jummah custom sidebar

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

default sidebar on jummah page

this is the JUMMAH sidebar which totally breaks the design

jummah page using jummah custom sidebar

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

Post Views: 2

Related posts

Leave a Reply

1 comment

  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.

    1. 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