Frage zur Sidebar (widgets)

Kunger

Hallo,
ich habe mir ein theme genommen und wollte dies ein wenig verändern, nun jedoch stehe ich vor einem Problem.

Ich möchte für jedes widget, sprich Tags, comments eine neue Tabelle.
So dass nicht alles aneinander ist, sondern ich jeder einen eigenen Header verpassen kann zwischen denen Platz ist.

Ich habe euch hier mal zwei Bilder hochgeladen, wodurch ihr hoffe ich erkennen könnt was ich meine.

So zB ist es jetzt:
http://img227.imageshack.us/img227/6232/eins.jpg

Und so soll es sein:
http://img686.imageshack.us/img686/70/zweid.jpg

Mein Problem:
Ich weis absolut nicht wo und wie ich anfangen soll...
Schließlich müssen sich die Tabellen nach jedem Widget schließen wenn ich es richtig verstehe.

Kann mir wer von euch helfen? :???:

Edit:
Ich vermute ich muss hier irgendwo etwas ändern

PHP

<div id="sidebar">
    
    <ul>
        <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?>
        
        <li>
            <h2><?php _e('Recent Posts', 'pyrmont_v2'); ?></h2>
            <ul class="latest_post">
                <?php wp_get_archives('type=postbypost&limit=8'); ?>
            </ul>
        </li>
        
        <li>
            <h2><?php _e('Recent Comments', 'pyrmont_v2'); ?></h2>
            <ul class="recentcomment">
                <?php rc(); ?>
            </ul>
        </li>
        
        <li>
            <h2><?php _e('Meta', 'pyrmont_v2'); ?></h2>
            <ul>
                <?php wp_register(); ?>
                <li><?php wp_loginout(); ?></li>
            </ul>
        </li>
        
        <?php endif; ?>
    </ul><!-- end ul -->
</div><!-- end sidebar -->

Alles anzeigen

Allerdings muss ich gestehen bin ich dabei etwas überfordert mit li und ul :(

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

Maiskolben

Hallo!

Hier mal ein Vorschlag:

CSS (style.css):

PHP

div.sidebar ul li {
 position: relative;
 margin-bottom: 10px;
}

Damit sagst Du, dass die HTML-Elemente <li></li> innerhalb von div class="sidebar"></div> am unteren Rand 10pixel nach unten Abstand bis zum nächsten Objekt (das nächste <li></li>) haben sollen. Aber Du sagtest, Du wolltest noch eigene Header für die jeweiligen Bereiche machen?

Mhh.. Hier mal: angenommen die Grafik, die Du einbinden willst, ist 20pixel hoch und beliebig lang...

PHP

<div id="sidebar">
    
    <ul>
        <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?>
        
        <li class="news">
            <h2><?php _e('Recent Posts', 'pyrmont_v2'); ?></h2>
            <ul class="latest_post">
                <?php wp_get_archives('type=postbypost&limit=8'); ?>
            </ul>
        </li>
        
        <li class="comments">
            <h2><?php _e('Recent Comments', 'pyrmont_v2'); ?></h2>
            <ul class="recentcomment">
                <?php rc(); ?>
            </ul>
        </li>
        
        <li class="registration">
            <h2><?php _e('Meta', 'pyrmont_v2'); ?></h2>
            <ul>
                <?php wp_register(); ?>
                <li><?php wp_loginout(); ?></li>
            </ul>
        </li>
        
        <?php endif; ?>
    </ul><!-- end ul -->
</div><!-- end sidebar -->

Alles anzeigen

Dazu dann in der CSS-Datei (style.css):

PHP

div.sidebar ul li {
 position: relative;
 margin-bottom: 10px;
 display: block;
 padding-top: 20px;


} li.news {
 background: url('PFADZUMHINTERGRUNDBILD') no-repeat;


} li.comments {
 background: url('PFADZUMHINTERGRUNDBILD') no-repeat;


} li.registration {
  background: url('PFADZUMHINTERGRUNDBILD') no-repeat;


}

Alles anzeigen

Hie sagst Du noch, dass jedes <li>-Element nach oben hin 20pixel Innenabstand haben sollen (das ist der Bereich, an dem das Hintergrund eingefügt wird). Nur wie bindest Du jetzt die Bilder ein? Du kannst Dir innnerhalb Deines Theme Ordners einen Ordner anlegen der layout heisst (oder vllt. gibt es schon einen?) und darin alle Bilder die mit dem Layout Deines Themes zusammenhängen abspeichern/hochladen. Ein beispielpfad wäre dann: url('layout/sidebarnewshintergrund.jpg')...

Ich hoffe, das hilft Dir. Guck Dir am besten nochmal CSS und HTML an, ist echt einfach zu lernen.

Maiskolben

Kunger

Vielen dank!
es sieht mir eigentlich sehr verständlich aus, nur leider hat es garnichts bewirkt.
Ich teste auch gerade rum, irgendwie wills nicht :roll:

Kunger

Hallo,
ich wieder.

Ich habe mir css nun den Tag über angeschaut, bin auch ein wenig schlauer geworden. Ich weiß nun, was li und lu bedeuten.
Jedoch bin ich zurzeit erlich gesagt etwas überfordert, ich bekomme die Tabellen unten praktisch nicht nach jedem widget geschlossen.

In deinem Code waren ein paar Tippfehler drin, jedoch werden die Kategorie Bilder nicht angezeigt, ich weiß leider nicht wo das Problem liegt.
Gibt es vielleicht den einen oder anderen Hardcore Programmierer der sich das mal anschauen könnte?

Das wäre sehr sehr nett!

Damit ihr einen besseren Überblick habt, poste ich euch hier meine Sidebar.php sowie den teil in der .css dazu.

Sidebar.php

PHP

<div id="sidebar">
    
    <ul>
        <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?>
        
        <li>
            <h2><?php _e('Recent Posts', 'pyrmont_v2'); ?></h2>
            <ul class="latest_post">
                <?php wp_get_archives('type=postbypost&limit=8'); ?>
            </ul>
        </li>
        
        <li>
            <h2><?php _e('Recent Comments', 'pyrmont_v2'); ?></h2>
            <ul class="recentcomment">
                <?php rc(); ?>
            </ul>
        </li>
        
        <li>
            <h2><?php _e('Meta', 'pyrmont_v2'); ?></h2>
            <ul>
                <?php wp_register(); ?>
                <li><?php wp_loginout(); ?></li>
            </ul>
        </li>
        
        <?php endif; ?>
    </ul><!-- end ul -->
</div><!-- end sidebar -->

Alles anzeigen

style.css (Sidebar teil)

Code

div#sidebar_font{
    width: 278px;
    height: 35px;
    float: left;
    margin-top: -58px;
    margin-bottom: 20px;
    padding-left: 10px;
    border: 0px solid #1f2223;
    font-size: 12px;
    color: #ffffff;
    
    }






div#sidebar{
    width: 274px;
    float: left;
    display: inline;/* fix double margin */
    margin-top: -39px;
    margin-bottom: 30px;
    overflow: hidden;
    color: #aaa;
    font-size: 10px;
    background-color: #131313;
    border: 1px solid #1f2223;
    border-top:0px;
    }
    div#sidebar ul{
        background-color: #1a1a1a;
        }
        div#sidebar ul li h2{
            
            background-position: left-bottom;
            font-size: 14px;
            line-height: 26px;
            color: #ccc;
            padding: 0px 0px 0px 5px;
            font-weight: normal;
            margin: 0px 0px;
            }
        div#sidebar ul li ul{
            list-style-type: none;
            color: #eee;
            line-height: 20px;
            }
            div#sidebar ul li ul li{
                padding-top: 0px;
                padding-bottom: 0px;
                padding-left: 10px;
                padding-right: 2px;
                
                border: 0px solid #1f2223;
                background-position: center bottom;
                
                }
            div#sidebar ul li ul li:hover{
                background-color: #1a1a1a;
                }
            div#sidebar ul li ul li a{
                background: none;
                display: inline;
                color: #ccc;
                line-height: 26px;
                text-decoration: none;
                }


            div#sidebar ul li ul li a:hover{
                color: #0074e0;
                }






/* END div#sidebar */

Alles anzeigen

modify teil style.css

Code

/* modify div#sidebar for default widget */


div#sidebar ul li ul li.rc a{
    display: inline;
}


div#sidebar ul li.widget_archive,
div#sidebar ul li.widget_categories, 
div#sidebar ul li.widget_search, 
div#sidebar ul li.widget_tag_cloud div, 
div#sidebar ul li.widget_text{/* sidebar_list_bg fix */
    background: url(images/sidebar_list_bg.gif) no-repeat left bottom;
}


div#sidebar ul li.widget_archive select, 
div#sidebar ul li.widget_categories select{/* dropdown view */
    margin: 15px 26px;
}








/* multi-level category */
div#sidebar ul li ul li ul li,
div#sidebar ul li ul li ul.children li{
    background: none;
}


div#sidebar ul li ul li ul li:hover,
div#sidebar ul li ul li ul.children li:hover{
    background: none;
}


/* widget rss */
.widget_rss a{
    color: #ccc;
}


/* widget search */
li.widget_search #search{/* 090627fix */
    padding: 10px 30px;
}


li.widget_search form#searchform{
    width: 200px;
    height: 25px;
    border: none;
    background-color: #fff;
    position: relative;
    }
    li.widget_search form#searchform .searchinput{
        position: absolute;
        top: 5px;
        left: 8px;
        color: #666;
        font-size: 13px;
        width: 165px;
        border: 0;
        }
    li.widget_search form#searchform .button{
        position: absolute;
        top: 0px;
        left: 175px;
        background: url(images/mag.gif) no-repeat;
        height: 25px;
        width: 25px;
        border: 0;
        cursor: pointer;
        }


/* tag cloud */
div#sidebar ul li.widget_tag_cloud div{
    padding: 10px 16px;
}


div#sidebar ul li.widget_tag_cloud div a{
    color: #ccc;
}


div#sidebar ul li.widget_tag_cloud div a:hover{
    color: #0074e0;
}


/* textwidget */
.textwidget{
    padding: 0px 0px;
    line-height: 10px;
}


.textwidget p{
    margin-bottom: 5px;
    line-height: 16px;
}


.textwidget a, .textwidget p a{
    color: #c80000;
    text-decoration: none;
}


.textwidget a:hover, .textwidget p a:hover{
    text-decoration: underline;
}


/* END modify div#sidebar */

Alles anzeigen

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Frage zur Sidebar (widgets)

Jetzt mitmachen!