widgets mit css formatieren

net_rower

Hallo liebes forum...

ich arbeite gerade daran, mein Theme zu gestalten. Leider bekomme ich es nicht hin, die Widgets (wie suche, kategorien) an mein Design anzupassen, also mit hintergrundgrafik und bestimmten Schriftfarben.

Kann mir bitte jemand sagen, wo ich was ändern muss? Bw. muss ich neue PHP scipte verfassen und das auslagern irgendwie?

PS: Das Theme war zunächst nicht Widgetfähig, dies habe ich geändert.

greetz John

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

Largo

Genau das würde mich auch interessieren und bringt meine Sache so ziemlich auf den Punkt.

Tigermaus

Die kann man anpassen in dem man die noetigen Angaben in der style.css hinzufuegt.

Ein Link zu der Seite waere nicht schlecht, damit man mal schauen kann, was ihr da angeben muesst.

Bei mir ist z.B.
.widget_style #categories-1

das Feld fuer die Kategorien.

Largo

Merci

Der Link zu dem Test Blog wäre dieser

Im Moment ist der Theme nicht Widgetfähig, dennoch sollte ich
tatsächlich die Widgets dem natürlichen Stil des Themes anpassen können, würde ich es jederzeit anpassen ;-)

Und das ist meine aktuelle style.css:

Code

/*  
Theme Name: Drunkey Love
Theme URI: http://www.el73.be/drunkey-love/themes/
Description: Drunkey Love theme for Wordpress
Version: 1.6
Author: Kevin Wetzels
Author URI: http://www.el73.be/


The CSS, XHTML and design is released under GPL:
http://www.opensource.org/licenses/gpl-license.php
*/


/**-----------------------------------------------------------------------------
** HTML ELEMENTS
**/ 
html, body {
    padding: 0;
    margin: 0;
    font: 100%/150% "Lucida Grande", "Lucida Sans Unicode", sans-serif;
    font-size: 0.9em;
    background: #fff;
    color: #333;        
}


a {
    color: #069;    
}


a:visited {
    color: #666;
}


a:hover {
    color: #036;
}


html * {
    margin: 0;
}


p, ul {
    margin-top: 15px;
}


ul, ol {
    padding-left: 0;
    margin-left: 30px;
}


h1, h2 {
    margin-top: 15px;
}


h1, h2 {
    font: 1.7em "Apple Garamond", "Times New Roman", "Garamond", serif;
    line-height: 1.7em;
    margin-bottom: 0;
}


h2 a, h1 a {
    text-decoration: none;
    color: #333;
}


h1 a:hover, h2 a:hover {
    color: #036;
}


h1 {
    font-size: 1.9em;
}


h3 {
    margin-top: 1em;
}


h6 {
    font-size: 0.8em;
    font-weight: normal;
    margin: 0;
    color: #666;    
}


abbr, acronym {
    cursor: help;
    border-bottom: 1px dashed #999;    
}


hr {
    display: none;
}


blockquote {
       padding: 3px 0 0 25px;
       margin: 3px 3px 3px 15px;
    background:#fff


}


code {
    font: 110% "Lucida Console", "Courier New", "Courier", monospace;
}


pre {
    overflow: auto;
}


/**-----------------------------------------------------------------------------
** HEADER
**/ 
#header {
    height: 200px;
    background: #333;
    color: #fff;    
}


#header a {
    color: #fff;
}


#header a:hover, #header .current_page_item {
    background: #069;
    color: #fff;
}


#blog-title {
    vertical-align: text-bottom;
    float: left;
    width: 270px;
    height: 200px;
    text-transform: lowercase;
    font: 1.7em "Apple Garamond", "Garamond", serif;
    text-align: right;
    background: #333 url(images/bg-title.jpg) repeat-x;
    color: #fff;    
}


#blog-title a {
    display: block;
    width: 250px;
    height: 50px;
    line-height: 50px;
    padding: 150px 20px 0 0;
}


#pages {
    margin: 0;
    padding: 0;
    list-style-type: none;
    list-style-image: none;
    text-transform: lowercase;
}


#pages li {
    float: left;
    width: 8em;    
}


#pages a {
    display: block;
    height: 50px;
    width: 8em;    
    line-height: 50px;
    padding: 150px 0 0 0;
    text-align: center;
}


#header a {
    text-decoration: none;
}


#header a:hover {
    text-decoration: none;
}


/**-----------------------------------------------------------------------------
** FOOTER
**/ 
#footer {
    clear: both;
    font-size: 0.8em;
    padding: 50px 0;
    text-align: center;
}


#footer .main {
    border-top: 1px solid #ccc;
    color: #666;
}


/**-----------------------------------------------------------------------------
** CONTENT
**/ 
.main, #content {
    width: 840px;
    margin: 0 auto;
}


/**-----------------------------------------------------------------------------
** PRIMARY CONTENT (ENTRIES, COMMENTS, ...)
**/ 
#primary {
    width: 550px;
    padding-right: 30px;
    float: left;
    background: #fff url(images/bar-vertical.jpg) no-repeat right top;    
}


.entry {
    padding-bottom: 10px;
    border-bottom: 1px solid #ccc;
}


#primary ul.archive-nav {
    list-style-image: none;
}


.meta {
    font-size: 0.85em;
    clear: both;
    color: #666;
}


.meta a {
    text-decoration: none;
    color: #666;
}


.meta a:hover {
    color: #036;
}


.meta span {
    padding-left: 14px;
    background: #fff url(images/doc.png) no-repeat left center;
}


.meta span.tags {
    background-image: url(images/folder.png);
}


.meta span.comments {
    background-image: url(images/comment.png);
}


.meta span.author {
    background-image: url(images/author.png);
}


.meta span.trackback {
    background-image: url(images/trackback.png);
}


.meta span.delicious {
    background-image: url(images/delicious.png);
}


#primary .totop img {
    width: 11px;
    height: 11px;
    border: 0;
    margin: 0;
    padding: 0;
    vertical-align: text-bottom;
}


#primary .totop {
    margin-left: 539px;
    clear: both;
}


.gravatar {
    float: right;
    margin: 30px 0 15px 10px;
}


#comments h2 {
    margin-top: 30px;
}


#comments ol {
    padding: 0;
    margin: 0;
    list-style-type: none;
    list-style-image: none;
    font-size: 0.9em;
}


#comments li {
    clear: both;
}


#comments ol div.poster {
    clear: both;
    padding: 0 20px;
    font-size: 0.95em;
    color: #666;
}


#comments .poster a {
    color: #666;
}


#comments .poster a:hover {
    color: #036;
}


#comments ol.no-gravatars div.poster {
    padding: 0 20px 0 40px;
}




#comments ol div.body {
    margin: 0 0 0 0;    
    width: 340px;    
    padding: 20px;
    background: #fff url(images/comment-field.png) no-repeat left top;
}


#comments ol.no-gravatars div.body {
    width: 340px;    
    padding: 20px;
    margin-left: 20px;
}


#comments fieldset {
    margin: 5px 0 0 0;
    padding: 0 80px 0 20px;
    width: 330px;
    border: 1px solid #fff;
}


#comments legend {
    display: none;
}


#comments form ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    list-style-image: none;
}


#comments form li {
    margin: 5px 0;
}


#comments .textfield {
    width: 50%;
}


#comments textarea {
    width: 98%;
}


#comments .number {
    font: 1.5em "Apple Garamond", "Times New Roman", "Garamond", serif;
    font-style: italic;
    color: #ccc;
    text-align: right;
    padding: 0;
    margin: 0;
    width: 3em;
    float: right;
}


#comments .number a {
    color: #ccc;
    text-decoration: none;
}


#comments .number a:hover {
    color: #036;
}


.archive-nav {
    font-size: 0.9em;
    width: 100%;
    margin: 10px 0 0 0;
    padding: 0 0 5px 0;
    list-style-type: none;
    list-style-image: none;
}


.archive-nav li {
    width: 180px;
}


.archive-nav li a {
    display: block;
    width: 164px;
}


.back {
    float: left;
}


.back a {
    padding-left: 16px;    
    background: #fff url(images/back.png) no-repeat left center;
}


.next {
    float: right;
    text-align: right;
}


.next a {
    padding-right: 16px;
    background: #fff url(images/next.png) no-repeat right center;    
}


#primary h1 img, #primary h2 img, #primary h3 img {
padding: 0;
border: none;
}


/**-----------------------------------------------------------------------------
** SECONDARY CONTENT (SIDEBAR STUFF)
**/ 


#secondary {
    padding-left: 10px;
    width: 250px;
    float: right;
    font-size: 0.9em;
}


#secondary h2 {
    margin-bottom: 10px;
}


#searchform fieldset {
    padding: 0;
    margin: 0;
    border: 0px solid #fff;
}


#searchform legend, #searchform label {
    display: none;
}


#blog-description {
    font: 1.6em "Apple Garamond", "Garamond", serif;
    padding: 15px;
    background: #fff url(images/bg-description.jpg) no-repeat;
}


.fold {
    display: none;
}


.foldButton, .unfoldButton {
    display: block;
    position: relative;
    left: 220px;
    margin-top: -1.3em;
    height: 25px;
    width: 25px;
    cursor: pointer;
    background: #fff url(images/fold.png) no-repeat;
}


.unfoldButton {
    background: #fff url(images/unfold.png) no-repeat;    
}


ul.linklist, ul.linklist ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    list-style-image: none;
    border-top: 1px solid #ccc;
}


ul.linklist ul {
    border: none;
}


ul.linklist a, ul.linklist ul a {
    padding: 0.2em 0;
    width: 100%;
    display: block;
    text-decoration: none;
    border-bottom: 1px solid #ccc;
    color: #333;
}


ul.linklist ul a {
    width: 95%;
    padding-left: 5%;
}


ul.linklist a:hover {
    background: #069;
    color: #fff;
}


ul.descriptionlist  {
    margin: 0;
    padding: 0;
    list-style-type: none;
    list-style-image: none;
}


ul.descriptionlist  li {
    margin-bottom: 0.5em;
}


#sidenotes h3 {
    font-size: 1em;
}


#sidenotes p {
    margin-top: 0;
}


ul.cloud {
    padding: 0;
    margin: 0;
    list-style-type: none;
    list-style-image: none;
}


.cloud li {
    display: inline;
    margin-right: 5px;
}


/**-----------------------------------------------------------------------------
** UTILITIES
**/ 
.clear {
    clear: both;
    margin: 0;
    padding: 0;
}


.hide {
    display: none;
}


.center {
    text-align: center;
}


.alignright, .lzimg-right {
    float: right;
}
    
.alignleft, .lzimg-left {
    float: left
}


#primary img, #photos img {
    padding: 4px;
    border: 1px solid #ccc;
}


#primary .totop img {
    border: 0;
}


img.center {
    display: block;
    margin-left: auto;
    margin-right: auto;
}
    
img.alignright, img.lzimg-right {
    padding: 4px;
    margin: 15px 0 15px 15px;
    display: inline;
}


img.alignleft, img.lzimg-left {
    padding: 4px;
    margin: 15px 15px 15px 0;
    display: inline;
}
    
img.noborder {
    border: none;
}


img.simple, #primary img.wp-smiley {
    padding: 0;
    margin: 0;
    border: 0;
}


.flickr {
    color: #06c;
}


.flickr span {
    color: #c00;
}


#primary a.extlink {
    padding-right: 12px;
    background: #fff url(images/external-link.png) no-repeat right center;
}

Alles anzeigen

copernica

1.) Du hast die Möglickheit, in der functions.php das Format für den Titel festzulegen, sowie vor und nach dem eigentlichen Widgets HTML-Tags mit zugewiesenen css-Klassen ind ID's einzufügen. Das sieht dann z.B. so aus:

PHP

<?php
if ( function_exists('register_sidebar') )
    register_sidebar(array(
        'before_widget' => '<div id="%1$s" class="irgendwas %2$s">',
        'after_widget' => '</div></div>',
        'before_title' => '<h2>',
        'after_title' => '</h2><div class="klasse">',
    ));
?>

2.) Nutze den Vorschlag von Tigermaus: Ziehe einfach mal alle Widgets, die zur Verfügung stehen, in die Sidebar. Schaue dir dann den Quelltext der Seite an und dann findest du die Classes und ID's, die Wordpress für die Widgets standardmäßig vorsieht.

3.) Wenn du auch damit nicht weiterkommst, musst du eigene Widgest anbieten. Die werden auch in die functions.php geschrieben und zwar nach folgendem Muster (Beispiel Links):

PHP

<?php function widget_deintheme_links() {
?>
    <!--start links -->
      <div id="links" class="box">
        <h3 class="titel"><?php _e('Links'); ?></h3>
        <div class="irgendwas">
          <ul>
            <?php wp_list_bookmarks(); ?>
          </ul>
        </div>
      </div>
      <!--ende links --><?php
}
if ( function_exists('register_sidebar_widget') )
    register_sidebar_widget(__('Links'), 'widget_deintheme_links');
?>

Alles anzeigen

Largo

Dank Dir

Jetzt werde ich mich damit erstmal gut auseinander setzen müssen.

VG

Tigermaus

Fuege Deiner style.css mal folgendes hinzu:

Code

#categories { background: #e6e6e6;}

Dann sollte der Hintergrund der Kategorie schon andersfarbig sein. Den Farbcode kannst Du nach belieben ersetzten. Auch durch ein Hintergrundsbild;

Code

#categories { background: url(images/xyz.jpg);}

Kommt halt drauf an, was Du machen moechtest, bzw. wie es aussehen soll. ;)

Gruss
Tigermaus

Largo

Merci Copernica

Dennoch hinterlässt das bei mir ein paar Fragen. Das Thema scheint noch etwas über meinem Niveau zu sein, das mir Selfhtml nicht erklären kann, oder ich es dort nicht finde.

1.) Mir st leider nicht klar, wofür das "%1&s" class=irgendwas %2$s">"
steht, bzw, was genau eingesetzt werden sollte.

2.) Ich habe einige experimentelle Einträge in die CSS geschreiben für die Widgets:

PHP

#categories-1 {
    margin: 0;
    padding: 0;
    list-style-type: none;
    list-style-image: none;
    border-top: 1px solid #ccc;
}


#recent-posts {
    padding: 0.2em 0;
    width: 100%;
    display: block;
    text-decoration: none;
    border-bottom: 1px solid #ccc;
    color: #333;
}


#recent-comments


#tag_cloud {
    padding: 0.2em 0;
    width: 100%;
    display: block;
    text-decoration: none;
    border-bottom: 1px solid #ccc;
    color: #333;
}

Alles anzeigen

Mittlerweile verstehe ich viel besser meinen CODE auf dem mein Theme basiert. Somit weiß ich auch, dass dieser Code

PHP

ul.linklist, ul.linklist ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    list-style-image: none;
    border-top: 1px solid #ccc;
}


ul.linklist ul {
    border: none;
}


ul.linklist a, ul.linklist ul a {
    padding: 0.2em 0;
    width: 100%;
    display: block;
    text-decoration: none;
    border-bottom: 1px solid #ccc;
    color: #333;
}


ul.linklist ul a {
    width: 95%;
    padding-left: 5%;
}


ul.linklist a:hover {
    background: #069;
    color: #fff;
}

Alles anzeigen

wichtig für das Design in der Sidebar ist, bzw sie darauf basieren.
Anscheind gehört diese Kette zusammen und setzt das Design zusammen.

Dennoch weiß ich nicht, wie man dem [COLOR=DarkSlateBlue]"[/COLOR][COLOR=DarkSlateBlue]#recent-posts"[/COLOR] vermittelt, dass es das oben genannte Design annnimt. Ich habe schon Diverses versucht, ohne Erfolg.

Jemand eine Idee?

Tigermaus

Wo hast Du denn das [COLOR=DarkSlateBlue]"[/COLOR][COLOR=DarkSlateBlue]#recent-posts"[/COLOR] her bzw. was soll das sein?

Ich finde in Deinem Quelltext und auf Deiner Seite nix.

Gruss
Tigermaus

Largo

guten morgen

also das #recent posts, habe ich aus aus dem quelltext gelesen
es ist ein standard widget und ich wollte es mit etwas css versehen

copernica hatte mir das direkt oder indirekt vorgeschlagen,
da ich nicht wußte, wie ich die widgets per css ansprechen kann

sorry, konnte nicht antworten, da ich nicht wirklich in der nähe eines internetzugangs bin über die feiertage.

lg

Willkommen! Melden Sie sich an oder registrieren Sie sich.

widgets mit css formatieren

Jetzt mitmachen!