Rahmen um Sidebar-Elemente ?

Kati36

Hallo, ich benutze das Theme GGSimple White und möchte gern die Sidebarelemente auf grauem Hintergrund haben, kästchenweise. Es soll einfach etwas gegliederter aussehen. Wo muß ich da welche Einstellungen vornehmen, ich tippe fast auf sidebar.php oder style.css ??? Doch leider kenne ich den Befehl nicht.

Kann mir bitte jemand weiterhelfen ? http://www.kickerkati.de/wordpress

wäre der Blog.

Danke Kati.

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

ocean90

Zum einem muss eine Änderung in der functions.php getan werden.

Und zwar musst du festlegen, was vor und nach einem Widget ausgegeben werden soll.

Finde die Zeilen:

PHP

register_sidebar( array(
		'name' => 'Primary Widget Area',
		'id' => 'primary-widget-area',
		'description' => 'The primary widget area',
		'before_widget' => '',
		'after_widget' => '',
		'before_title' => '<h3 class="widget-title">',
		'after_title' => '</h3>',
	) );

Da legst du dann before_widget und after_widget fest. Beipspiel div Container mit der Klasse sidebar-widget-box.

PHP

register_sidebar( array(
		'name' => 'Primary Widget Area',
		'id' => 'primary-widget-area',
		'description' => 'The primary widget area',
		'before_widget' => '<div class="sidebar-widget-box">',
		'after_widget' => '</div>',
		'before_title' => '<h3 class="widget-title">',
		'after_title' => '</h3>',
	) );

Mit Hilfe von CSS und der Klasse sidebar-widget-box kannst du nun deine Anpassungen tätigen.

Kati36

Danke, habs verstanden und versuche es gleich mal.

Liebe Grüße Kati.

Kati36

Nö, funktioniert leider nicht, ich habe die entsprechende STelle in der funktions-Php schnell gefunden, dann in der Style CSS die Klasse angelegt, aber es tut sich nichts, außer dass sich die Farbe des einzelnen Blogposts geändert hat (ich hatte nur die Farbangabe über die Klasse zugeordnet.

LG

ocean90

Der PHP Teil ist jedenfalls richtig.

Wie war deine CSS Änderung genau? Ich wüsste nicht warum die Artikel sich dann ändern sollten, scheint wohl eher ein Fehler in der CSS Syntax dann gewesen zu sein.

Kati36

Was ist denn die CSS Syntax ?

LG Kati.

ocean90

Zitat von Kati36

Was ist denn die CSS Syntax ?

LG Kati.

Dein CSS Code, was hast du eingefügt?

Kati36

Hallo nochmal,

ich habe zuerst eine Klasse definiert, die da heißt .Widget-box und der dann einfach mal mit irgendeine Farbe zugewiesen als Style. Da war bei mir in der Style.css noch gar keine Widget-Box oder Sidebar-widget-box als Klasse angelegt ???

DAnach habe ich Deinen Code in die functions.php an der entsprechenden Stelle eingegeben, und dann hat sich der Hintergrund der Blogposts verändert.

[FONT=Courier New][COLOR=#dd0000]'before_widget' [/COLOR][COLOR=#007700]=> [/COLOR][COLOR=#dd0000]'<div class="[COLOR=#306582]widget[/COLOR]-box">'[/COLOR][/FONT][FONT=Courier New][COLOR=#007700],
[/COLOR][COLOR=#dd0000]'after_widget' [/COLOR][COLOR=#007700]=> [/COLOR][COLOR=#dd0000]'</div>'[/COLOR][COLOR=#007700],[/COLOR][/FONT]

Danach habe ich sämtliche Zeilen wieder entfernt. Nun ist es wieder wie vorher aber ich weiß noch immer nicht, wo mein Fehler liegt.

ocean90

Kannst du bitte nochmal den PHP Teil anlegen, das sollte keine Probleme geben und kann auch ohne Bedenken so bleiben.

Werde mir das dann anschauen und dann mit einem CSS Code melden.

Kati36

Mach ich gleich morgen früh. Danke

Kati36

Style.css nach Änderung - Ich habe bei .sidebar-widget-box nur mal 14 px Schriftgröße zugewiesen. Mehr noch nicht.[/B]

PHP

/*
Theme Name: GGSimpleWhite
Theme URI: http://www.gigacart.com/wordpress-themes/plain/simple-white-theme.html
Description: Minimalistic two-columns, fixed-width, widget-ready, seo optimized white theme for WordPress. You can change header image from Wordpress admin panel. Widgets are available on the sidebar and on the bottom of the site.
Author: GigaCart
Version: 1.0.4
Tags: white, two-columns, fixed-width, custom-header, light, sticky-post, threaded-comments
License: GNU General Public License, v2 (or newer)
License URI: http://www.gnu.org/licenses/old-licenses/gpl-2.0.html
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
 background: : #FFE5E5;
 border: 0;
 margin: 0;
 padding: 0;
 vertical-align: baseline;
}
body {
 margin:10px;
 padding-top:0px;
 background-color:#FFE5E5;
 font-family: "Verdana, Arial, Times New Roman, Times, serif";
 color:#666666;
 font-size:10px;
}
h1 {
  font-size:22px; 
  font-family: "Verdana, Arial, Times New Roman"; 
}
h2 {
  font-size:20px; 
  font-family: "Verdana, Arial, Times New Roman"; 
}
h3 {
  font-size:18px; 
  font-family: "Verdana, Arial, Times New Roman"; 
 
}
h4 {
  font-size:18px; 
  font-family: "Verdana, Arial, Times New Roman"; 
 
}
h5 {
  font-size:16px;
  font-family: "Verdana, Arial, Times New Roman"; 
}
h6 {
  font-size:16px;
  font-style:italic
}
img {
 border:1;
}
a {
 color:#3f3f3f;
 text-decoration:none
}
a:hover {
 color:#f00;
 text-decoration:none
}
h1, h2, h3, h4, h5, h6 {
  font-weight: bold;
 clear: both;
         font-family: "Verdana, Arial, Times New Roman"; 
         color:#333;
         margin:5px 0;
  }
blockquote {
 padding:10px;
 margin:10px 0 0 10px;
 color:#333;
 background:#f2f2f2;
 font-style: normal;
 border-top:1px solid #d6d6d6
}
table {
  border-collapse:collapse;
  border-spacing:0;
  width:100%;
  margin:0 0 15px 0;
}
th, td {
  padding:5px;
  border-bottom:1px solid #d6d6d6;
  font-family: "Verdana, Arial, Times New Roman"; 
  margin:top
}
dt {
  font-weight:bold
}
dd, dl {
  margin-bottom:15px
}
big {
  font-size:130%
}
code {
  font:normal 12px Monaco,Consolas,"Andale Mono","DejaVu Sans Mono",monospace;
}
abbr, acronym {
  border-bottom:1px dotted #f00;
  cursor:help;
}
ins {
  background:#f2f2f2
}
pre {
  background:#f2f2f2;
  margin-bottom:15px;
  padding:5px
}
sub {
  top:0.5ex;
}
sup {
  bottom:1ex;
}
sup, sub {
  font-size:11px;
  height:0;
  line-height:1;
  position:relative;
  vertical-align:baseline;
}
del {
 text-decoration: line-through;
}
ol ol {
  list-style:upper-alpha outside none;
}
ol ol ol {
  list-style:lower-roman outside none;
}
p img {
  max-width:100%;
  padding:0;
}
textarea, input {
  border:1px solid #D6D6D6;
  padding:2px;
  font-family: Verdana, Arial, Georgia, "Bitstream Charter", serif;
  font-size: 12px;
}
input[type="submit"] {
  background:#FF0000;
  border:none;
  color:#FFFFFF !important;
  height:20px;
  padding:0 5px;
}
.cl, .clear {
 line-height: 0;
 height:0;
 clear:both;
}
img.alignleft {
    padding: 4px;
    margin: 0 7px 2px 0;
    display: inline;
    margin:top
}
.alignright {
 float:right;
}
img.alignright {
  display:inline;
  margin:0 0 5px 5px;
}
.aligncenter {
  display:block;
  margin-left:auto;
  margin-right:auto;
}
/* The Wrapper */
.wrapper {
 margin:0 auto;
 width:940px;
 background: url(images/main-bgr.png) repeat-y;
 padding:10px 20px
}
/* The Top */
.topofthetop {
 background: url(images/top-bgr.png) no-repeat bottom center;
 margin: 0 auto;
 width:580px;
 height:17px
}
.blogname {
 width:100%;
}
#site-title a {
 font-size:20px;
 font-weight:normal;
         font-family: Verdana, Arial;
 color:#303030;
 text-decoration: none;
 text-transform:uppercase
}
#site-title a:hover{ 
 color:#f00;
         font-family: Verdana, Arial;
 text-decoration: none;
}
#site-description {
 font-size:12px;
         font-family: Verdana, Arial;
 font-weight:normal;
 color:#303030;
 margin-bottom:5px
}
#header {    
         background: url("http://forum.wordpress-deutschland.org/images/bg.jpg") no-repeat;     
         height: 228px;    
         width: 940px;
}
 
#header-img {
         margin: 10px 0 10px 0;
         float:left
         background: url("http://forum.wordpress-deutschland.org/images/bg.jpg") no-repeat; 
 
}
/* The Content */
.content {
 clear:both;
         margin: 20px 0 0 0;
         font-family: Verdana, Arial, Times New Roman;
}
/* The Posts */
.text {
 width:690px;
 float:left;
 text-align:justify;
         font-family: Verdana, Arial, Times New Roman;
         font-size: 12px;
         line-height: 1.8em;
 
}
.pagetitle {
  background:#f2f2f2;
  padding:5px;
  border:1px solid #d6d6d6;
  font-family: Verdana, Arial;
  font-size:14px
}
.post {
 margin: 10px 0 10px 0;
         border: 1px solid black;
         padding:15px;
}
.sticky .entry-title {
  border-bottom: 2px solid #f00
}
.posttext {
  margin:5px 0;
  font-family: Verdana, Arial;
  color:#000;
  clear:both
}
.posttext p {
  margin:5px 0;
  font-family: Verdana, Arial;
  line-height:1.7em
}
.posttext a {
  text-decoration:underline
}
.posttext ul, .posttext ol {
  margin:20px 0 5px 25px
}
.posttext li {
  line-height:1.8em
}
.posttext .alignleft {
  margin-right:5px
}
.posttext .alignright {
  margin-left:5px
}
.posttext label {
  line-height:30px
}
.posttext .more-link {
  color:#f00
}
.post-edit-link {
  color:#f00
}
.entry-title {
 margin:0;
 border-bottom:1px solid #d6d6d6;
 padding:5px;
 margin:0 0 5px;
 color:#303030;
 font-size:16px;
 width:654px;
 float:left
}
.entry-title a, .entry-title span {
 color:#303030;
 text-decoration:none;
 display:block;
 float:left;
 width:620px
}
.entry-title a:hover {
 color:#ffc0cb;
 text-decoration:none;
}
.page-link {
  margin:10px 0 10px;
  word-spacing:0.2em;
  font-size:16px;
  font-weight:bold
}
.page-link a {
  background:#eee;
  padding:3px 5px;
  text-decoration:none
}
.entry-meta {
  padding: 5px;
  margin-top:5px;
  background:#f2f2f2;
  border:1px solid #d6d6d6;
  width:654px;
  clear:both
}
.entry-meta a {
  color:#666;
  text-decoration:none
}
.entry-meta a:hover {
  color:#f00
}
a.comment-box {
 background:url(images/bubble.gif) no-repeat;
 float:right!important;
 width: 33px!important;
 height: 10px;
 text-align:center;
 line-height:10px;
 color:#fff!important;
 padding-bottom:10px;
 font-size:12px;
 font-weight: bold;
}
.wp-caption {
  border:1px solid #d6d6d6;
  text-align:center;
  padding:5px
} 
.wp-caption-text {
  color:#3F3F3F
}
.size-thumbnail {
  margin:5px
}
#content .gallery {
 margin: 0 auto 18px;
}
.gallery .gallery-item {
 float: left;
 margin-top: 0;
 text-align: center;
 width: 33%;
}
.gallery img {
 border:1px solid #D6D6D6;
}
.gallery .gallery-caption {
 color: #3F3F3F;
 margin: 0 0 5px;
}
.gallery dl {
 margin: 0;
}
.gallery img {
 border:2px solid #D6D6D6;
}
.gallery br+br {
 display: none;
}
.attachment img { 
 display: block;
 margin: 0 auto;
}
/* Sidebars & Widgets */
 
.sidebar {
 float:right;
         font-family: Verdana, Arial;
         color: #3F3F3F;
 width:225px;
 padding-top:0px;
 font-size:14px;
}
.sidebar ul {
         font-family: Verdana, Arial;
         font-size:12px;
 margin:0 0 1em 0;
 padding:0;
 list-style-type:none;
}
.sidebar ul ul {
  margin-left:15px
}
.sidebar ul li {
  line-height:1.3em
  margin:0 0 1em 0;
}
.sidebar ul li ul {
  list-style-type:square
}
.sidebar ul li ul li ul {
  list-style-type:circle
}
.sidebar table {
 width:100%;
 text-align:center;
}
.widget-title {
  text-transform:uppercase;
 margin:10px 0 5px;
          padding:0;
         font-size:12px;
}
.sidebar-widget-box  {
         font-size:14px;
}
 
 
}
#wp-calendar a {
  font-weight:bold;
  background:#d6d6d6;
  padding:0 3px
}
#wp-calendar #prev a, #wp-calendar #next a {
  background:none
}
#searchform .screen-reader-text {
 display:none
}
#searchsubmit {
  width:60px
}
/* Tabellen */
#content tr td {
    color: #888888;
    float:left;
    padding: 5px;
    align:top;
}
/* The Footer */
.footer {
 text-align:center;
 background: url(images/bottom-bgr.png) no-repeat top center;
 margin:0 auto;
 width:940px;
 padding:10px 0;
 font-size:12px
}
.footer a {
  color:#666;
  text-decoration:underline;
  font-size:12px
}
#footer-widget-area {
  border-top:1px solid #dcdcdc;
  margin:10px 10px 0 0;
  width:100%
}
#footer-widget-area ul {
  list-style-type:none;
  margin:0;
  padding:0
}
#footer-widget-area h3 {
 text-transform:uppercase;
}
#footer-widget-area .footer-widget {
  float:left;
  width:220px;
  margin-right:10px;
}
/* The Navigation */
.navigation {
 padding:10px 0;
 float:left;
 width:100%
}
.navigation a {
 font-weight:bold;
 text-decoration:none;
 font-size:14px;
}
.navigation .alignleft{
  width:50%
} 
.navigation .alignright {
  width:50%;
  text-align:right

Alles anzeigen

Kati36

Und nun die funktions.php

PHP

<?php
if ( ! isset( $content_width ) )
 $content_width = 580;
    
add_action( 'after_setup_theme', 'ggsimplewhite_setup' );
if ( ! function_exists( 'ggsimplewhite_setup' ) ):
function ggsimplewhite_setup() {
 define( 'HEADER_IMAGE', '%s/images/banner.jpg' );
 define( 'HEADER_IMAGE_WIDTH', apply_filters( 'header_image_width', 690 ) );
 define( 'HEADER_IMAGE_HEIGHT', apply_filters( 'header_image_height', 228 ) );
 define( 'NO_HEADER_TEXT', true );
 add_custom_image_header( '', 'ggsimplewhite_header_style' );
 add_theme_support( 'automatic-feed-links' );
 register_nav_menus( array(
  'primary' => 'Primary Navigation',
 ) );
}
endif;
// widgets
function ggsimplewhite_widgets_init() {
 register_sidebar( array(
  'name' => 'Primary Widget Area',
  'id' => 'primary-widget-area',
  'description' => 'The primary widget area',
  'before_widget' => '<div class="sidebar-widget-box">',
  'after_widget' => '</div>',
  'before_title' => '<h3 class="widget-title">',
  'after_title' => '</h3>',
 ) );
 register_sidebar( array(
  'name' => '1st Footer Widget Area',
  'id' => 'first-footer-widget-area',
  'description' => 'The first footer widget area',
  'before_widget' => '',
  'after_widget' => '',
  'before_title' => '<h4 class="widget-title">',
  'after_title' => '</h4>',
 ) );
 register_sidebar( array(
  'name' => '2nd Footer Widget Area',
  'id' => 'second-footer-widget-area',
  'description' => 'The second footer widget area',
  'before_widget' => '',
  'after_widget' => '',
  'before_title' => '<h4 class="widget-title">',
  'after_title' => '</h4>',
 ) );
 register_sidebar( array(
  'name' => '3d Footer Widget Area',
  'id' => 'third-footer-widget-area',
  'description' => 'The third footer widget area',
  'before_widget' => '',
  'after_widget' => '',
  'before_title' => '<h4 class="widget-title">',
  'after_title' => '</h4>',
 ) );
 register_sidebar( array(
  'name' => '4th Footer Widget Area',
  'id' => 'fourth-footer-widget-area',
  'description' => 'The fourth footer widget area',
  'before_widget' => '',
  'after_widget' => '',
  'before_title' => '<h4 class="widget-title">',
  'after_title' => '</h4>',
 ) );
}
add_action( 'widgets_init', 'ggsimplewhite_widgets_init' );
// comments
function print_comment($comment, $args, $depth) {
 $GLOBALS['comment'] = $comment; ?>
 <li <?php comment_class(); ?> id="li-comment-<?php comment_ID(); ?>">
  <div class="comment-body" id="comment-<?php comment_ID() ?>">
   <?php echo get_avatar($comment, 70, get_bloginfo('stylesheet_directory') . '/images/avatar.gif'); ?>
   <span class="author">
    <?php comment_author_link() ?>
   </span>
   <p class="comment-meta">
    <?php comment_date() ?> at <?php comment_time() ?>
   </p>
   <div class="comment-content">
    <?php if ($comment->comment_approved == '0') : ?>
           <em>Your comment is awaiting moderation.</em><br />
     <?php endif; ?>       
    <?php comment_text() ?>
    <div class="alignleft"><?php edit_comment_link('(Edit)','  ','') ?></div>    
   </div>
   <div class="reply">
          <?php comment_reply_link(array_merge( $args, array('depth' => $depth, 'max_depth' => $args['max_depth']))) ?>
    </div>
   <div class="clear">&nbsp;</div>
  </div>
 <?php
}
?>

Alles anzeigen

ocean90

Die Schriftgröße dort zu bestimmen ist nutzlos, da sie wieder überschrieben werden.

Code

.sidebar-widget-box {
    font-size: 14px;
    border: 1px solid black;
    margin-bottom: 5px;
    padding: 0 4px;
}

Damit bekommst du einen Rahmen und die Widgets, sieht dann so aus.

Kati36

Danke, hat geklappt.

Jetzt hab ich nur noch das Problem, daß die Beiträge auf dem PC passen und schön neben der Sidebar stehen, doch wenn ich mit Iphone auf den Blog gehe, steht rechts die Sidebar - links davon alles leer und die Blogposts kommen erst unter der Sidebar.

Wo liegt denn hier der Fehler ?

Du hast das doch bestimmt gleich raus ;)

LG Kati.

ocean90

Öffne deine style.css und suche nach #header-img {

Hinter dem float: left mal ein Semikolon (;) setzen.

Kati36

[COLOR=red]Wow, du bist genial.[/COLOR]

Die stundenlange Suche hat nun ein Ende. Hat auch geklappt !!!!!

Vielen Vielen Dank. :razz: LG Kati.

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Rahmen um Sidebar-Elemente ?

Jetzt mitmachen!