Beiträge von pixselig

pixselig

habe es gerade gesehen (schaue live mit ;) )
habe aber noch nicht herausgefunden welches element daran die schuld trägt - moment...

pixselig

so und noch eine kleine änderung:

style.css zeile 84

Code

#primary {
    [COLOR="#FF0000"]float: left;[/COLOR]
    margin: 0 -26.4% 0 0;
    width: 100%;
}

die rote zeile entfernen

pixselig

leider hat sich auch bei meinen verlinkungen ein kleiner fehler eingeschlichen -> ändere bitte das ende deiner style.css von

Code

#header_background {
    padding: 62px 60px 0 95px;
    background-image: url(../images/header_background.jpg);
}


#footer_background {
    padding: 0 60px 50px 95px;
    background-image: url(../images/footer_background.jpg);
}


#main_background {
    padding: 0 60px 0 95px;
    background-image: url(../images/main_background.jpg);
    background-repeat: repeat-y;
}

Alles anzeigen

in

Code

#header_background {
    padding: 62px 60px 0 95px;
    background-image: url(images/header_background.jpg);
}


#footer_background {
    padding: 0 60px 50px 95px;
    background-image: url(images/footer_background.jpg);
}


#main_background {
    padding: 0 60px 0 95px;
    background-image: url(images/main_background.jpg);
    background-repeat: repeat-y;
}

Alles anzeigen

pixselig

im footer sollte es so aussehen:

PHP

<?php
/**
 * The template for displaying the footer.
 *
 * Contains the closing of the id=main div and all content after
 *
 * @package WordPress
 * @subpackage Twenty_Eleven
 * @since Twenty Eleven 1.0
 */
?>


	</div><!-- #main -->
    [COLOR="#FF0000"]</div><!-- #main_background -->[/COLOR]
    [COLOR="#FF0000"]<div id="footer_background">[/COLOR]


	<footer id="colophon" role="contentinfo">


			<?php
				/* A sidebar in the footer? Yep. You can can customize
				 * your footer with three columns of widgets.
				 */
				if ( ! is_404() )
					get_sidebar( 'footer' );
			?>


			<div id="site-generator">
				<?php do_action( 'twentyeleven_credits' ); ?>
				<a href="<?php echo esc_url( __( 'http://wordpress.org/', 'twentyeleven' ) ); ?>" title="<?php esc_attr_e( 'Semantic Personal Publishing Platform', 'twentyeleven' ); ?>" rel="generator"><?php printf( __( 'Proudly powered by %s', 'twentyeleven' ), 'WordPress' ); ?></a>
			</div>
	</footer><!-- #colophon -->
    [COLOR="#FF0000"]</div><!-- #footer_background -->[/COLOR]
</div><!-- #page -->


<?php wp_footer(); ?>


</body>
</html>

Alles anzeigen

pixselig

du baust die divs falsch ein.

so sollte die header.php nach allen änderungen aussehen:
(die ergänzungen/änderungen habe ich rot markiert)

PHP

<?php
/**
 * The Header for our theme.
 *
 * Displays all of the <head> section and everything up till <div id="main">
 *
 * @package WordPress
 * @subpackage Twenty_Eleven
 * @since Twenty Eleven 1.0
 */
?><!DOCTYPE html>
<!--[if IE 6]>
<html id="ie6" <?php language_attributes(); ?>>
<![endif]-->
<!--[if IE 7]>
<html id="ie7" <?php language_attributes(); ?>>
<![endif]-->
<!--[if IE 8]>
<html id="ie8" <?php language_attributes(); ?>>
<![endif]-->
<!--[if !(IE 6) | !(IE 7) | !(IE 8)  ]><!-->
<html <?php language_attributes(); ?>>
<!--<![endif]-->
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<meta name="viewport" content="width=device-width" />
<title><?php
	/*
	 * Print the <title> tag based on what is being viewed.
	 */
	global $page, $paged;


	wp_title( '|', true, 'right' );


	// Add the blog name.
	bloginfo( 'name' );


	// Add the blog description for the home/front page.
	$site_description = get_bloginfo( 'description', 'display' );
	if ( $site_description && ( is_home() || is_front_page() ) )
		echo " | $site_description";


	// Add a page number if necessary:
	if ( $paged >= 2 || $page >= 2 )
		echo ' | ' . sprintf( __( 'Page %s', 'twentyeleven' ), max( $paged, $page ) );


	?></title>
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<!--[if lt IE 9]>
<script src="<?php echo get_template_directory_uri(); ?>/js/html5.js" type="text/javascript"></script>
<![endif]-->
<?php
	/* We add some JavaScript to pages with the comment form
	 * to support sites with threaded comments (when in use).
	 */
	if ( is_singular() && get_option( 'thread_comments' ) )
		wp_enqueue_script( 'comment-reply' );


	/* Always have wp_head() just before the closing </head>
	 * tag of your theme, or you will break many plugins, which
	 * generally use this hook to add elements to <head> such
	 * as styles, scripts, and meta tags.
	 */
	wp_head();
?>
</head>


<body <?php body_class(); ?>>
<div id="page" class="hfeed">
    [COLOR="#FF0000"]<div id="header_background">[/COLOR]
	<header id="branding" role="banner">
			<hgroup>
				<h1 id="site-title"><span><a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></span></h1>
				<h2 id="site-description"><?php bloginfo( 'description' ); ?></h2>
			</hgroup>


			<?php
				// Check to see if the header image has been removed
				$header_image = get_header_image();
				if ( $header_image ) :
					// Compatibility with versions of WordPress prior to 3.4.
					if ( function_exists( 'get_custom_header' ) ) {
						// We need to figure out what the minimum width should be for our featured image.
						// This result would be the suggested width if the theme were to implement flexible widths.
						$header_image_width = get_theme_support( 'custom-header', 'width' );
					} else {
						$header_image_width = HEADER_IMAGE_WIDTH;
					}
					?>
			<a href="<?php echo esc_url( home_url( '/' ) ); ?>">
				<?php
					// The header image
					// Check if this is a post or page, if it has a thumbnail, and if it's a big one
					if ( is_singular() && has_post_thumbnail( $post->ID ) &&
							( /* $src, $width, $height */ $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), array( $header_image_width, $header_image_width ) ) ) &&
							$image[1] >= $header_image_width ) :
						// Houston, we have a new header image!
						echo get_the_post_thumbnail( $post->ID, 'post-thumbnail' );
					else :
						// Compatibility with versions of WordPress prior to 3.4.
						if ( function_exists( 'get_custom_header' ) ) {
							$header_image_width  = get_custom_header()->width;
							$header_image_height = get_custom_header()->height;
						} else {
							$header_image_width  = HEADER_IMAGE_WIDTH;
							$header_image_height = HEADER_IMAGE_HEIGHT;
						}
						?>
					<img src="<?php header_image(); ?>" width="<?php echo $header_image_width; ?>" height="<?php echo $header_image_height; ?>" alt="" />
				<?php endif; // end check for featured image or standard header ?>
			</a>
			<?php endif; // end check for removed header image ?>


			<?php
				// Has the text been hidden?
				if ( 'blank' == get_header_textcolor() ) :
			?>
				<div class="only-search<?php if ( $header_image ) : ?> with-image<?php endif; ?>">
				<?php get_search_form(); ?>
				</div>
			<?php
				else :
			?>
				<?php get_search_form(); ?>
			<?php endif; ?>


			<nav id="access" role="navigation">
				<h3 class="assistive-text"><?php _e( 'Main menu', 'twentyeleven' ); ?></h3>
				<?php /* Allow screen readers / text browsers to skip the navigation menu and get right to the good stuff. */ ?>
				<div class="skip-link"><a class="assistive-text" href="#content" title="<?php esc_attr_e( 'Skip to primary content', 'twentyeleven' ); ?>"><?php _e( 'Skip to primary content', 'twentyeleven' ); ?></a></div>
				<div class="skip-link"><a class="assistive-text" href="#secondary" title="<?php esc_attr_e( 'Skip to secondary content', 'twentyeleven' ); ?>"><?php _e( 'Skip to secondary content', 'twentyeleven' ); ?></a></div>
				<?php /* Our navigation menu. If one isn't filled out, wp_nav_menu falls back to wp_page_menu. The menu assigned to the primary location is the one used. If one isn't assigned, the menu with the lowest ID is used. */ ?>
				<?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
			</nav><!-- #access -->
	</header><!-- #branding -->
   [COLOR="#FF0000"] </div> <!-- #header_background -->[/COLOR]




    [COLOR="#FF0000"]<div id="main_background">[/COLOR]
	<div id="main">

Alles anzeigen

pixselig

so einfach wäre es gewesen:

habe nun body_class eingebaut -> damit bekommen "keine suchtreffer" und "404" eigene klassen, "search-no-results" und "error404". und mithilfe dieser klassen lässt sich dann auf selbigen seiten das submenu einfach ausblenden.

ist nicht wirklich elegant -> aber mir genügt das im moment ;)

pixselig

sodala

1. Schritt:

style.css zeile 194

Code

.one-column #page {
    max-width: 690px;
}

ändern in

Code

.one-column #page {
    width: 1260px;
}

zur sicherheit auch noch -> style.css zeile 74

Code

#page {
    margin: 2em auto;
    max-width: 1000px;
}

ändern in

Code

#page {
    margin: 2em auto;
    width: 1260px;
}

2. Schritt:

öffne deine header.php und umschliesse hier das header-tag mit einem weiteren div -> diesem gebe zBsp die id "header_background"
-> das schliessen des divs am ende des header's nicht vergessen!

3. Schritt:

füge an das ende deiner style.css folgende zeilen

Code

#header_background {
    padding: 62px 60px 0 95px;
    background-image: url(../images/header_background.jpg);
}

4. Schritt:

-schneide vom logo.jpg die obersten 190px ab
-speichere sie unter dem namen "header_background.jpg" (ohne "" ;) )
-und lade sie in den ordner images deines themes hoch

5. Schritt:

öffne die footer.php und umschliesse hier das footer-tag mit einem weiteren div -> diesem gebe die id "footer_background"
-> auch hier das schliessen des divs am ende des footers nicht vergessen!

6. Schritt:

füge an das ende deiner style.css folgende zeilen

Code

#footer_background {
    padding: 0 60px 50px 95px;
    background-image: url(../images/footer_background.jpg);
}

7. Schritt:

-schneide vom logo.jpg die untersten 110px ab
-speichere sie unter dem namen "footer_background.jpg"
-und lade sie in den ordner images deines themes hoch

8. Schritt:

style.css zeile 2138

Code

#colophon {
    clear: both;
}

ändern in

Code

#colophon {
    clear: both;
    height: 60px;
}

wichtig: sollte dein footer höher werden (oder auch niedriger) so passe die mase aus Schritt 7 und 8 einfach dementsprechend an.

9. Schritt:

öffne wieder deine header.php und öffne dort, direkt nach dem header aber noch vor dem div"main", ein neues div mit der id "main_background"

10. Schritt:

öffne wieder deine footer.php und schliesse dort, direk nach "</div>" aber noch vor dem footer, wieder das oben geöffnete div.

11. Schritt:

füge an das ende deiner style.css folgende zeilen

Code

#main_background {
    padding: 0 60px 0 95px;
    background-image: url(../images/main_background.jpg);
    background-repeat: repeat-y;
}

12. Schritt:

-schneide vom (verbleibenden! ohne oberteil) logo.jpg die oberste 1px hohe reihe ab (über die gesamte breite)
-speichere sie unter dem namen "main_background.jpg"
-und lade sie in den ordner images deines themes hoch

so, fertig - ich hoffe ich habe nichts vergessen!

lg, pixselig

ps: die masse kannst du natürlich nach belieben anpassen

pixselig

hallo der_pe

nimm doch bitte mal das jetzige (obere) hintergrundbild heraus. das ist nämlich fehlerhaft implementiert -> es wird in ein div integriert welches sich zwischen head- und bodybereich befindet - also falsch platziert ist.

das das design etwas unter einer fixen breite leiden kann stimmt schon - wenn das allerdings die vorgaben sind, ja dann...
das es sich aber sicher negativ auf die mobile ansicht der webseite auswirkt ist leider klar - es sei denn du optimierst dannach auch die mobile ansicht.

so, der rest folgt bald...

pixselig

hatte es mir gerade angeschaut und ja, deine vermutung ist richtig (liegt wieder am dokumentenfluss und wurde von mir wieder übersehen.

schön, dass du es so hinbekommen hast!

alternativ könntest du die drei linken widgets in ein eigenes div packen. und das nunmehrig dritte (rechte) wieder als viertes aufrufen.

lg, pixselig

pixselig

unter einstllungen > lesen kannst du eine belibige statische seite als homepage auswählen.

lg, pixselig

pixselig

ich denke ich weiss woran das liegt:

im dokumentenfluss wird der reihe nach die widgets 1,2,3 und dann vier aufgerufen -> allerdings willst du das 4te widget an dritter stelle haben (rechts neben 1 und 2). aber wie schon gesagt wird das widget nummer 4 auch als 4tes aufgerufen und nicht als drittes. um es einfach zu halten habe ich in der vorigen antwort mit dem obigen code das 4te widget einfach relativ zu seiner eigentlichen position platziert (in diesem fall nach oben verschoben). nun ist es aber so, das hatte ich nicht bedacht, dass die eigentliche position (vom dokumentenfluss her) frei gehalten wird und das nachfolgende div erst danach dargestellt wird.

lösung: das 4te widget als drittes aufrufen und dieses nur nach rechts float-en. die css attribute "position" und "top" können dann auch rausfliegen.

lg, pixselig

ps: (an alle experten ;) und weil ich im forum schonmal darauf aufmerksam gemacht wurde) float und position: relative zusammen funktioniert wunderbar und bringt auch gewisse vorteile mit sich (es muss kein right: XXpx; verwendet werden und dadurch sind variable (responsive) websiten einfacher umzusetzen).

pixselig

also alte und nichtmehr supportete themes zu verwenden ist immer etwas heikel. aber poste doch mal einen link zu deinem blog damit maqn sich das mal ansehen kann.

pixselig

das headerbild scheint defekt zu sein:
http://www.starnberger-mamas.de/wp-content/the…ama/img/red.png

eventuell hilft ein neuerliches hochladen...

lg, pixselig

pixselig

Zitat von Domino5702

Overflow ist aber nicht CSS3, das gab es vorher schon ... auch nicht zum Klugsch***rn ;)

das stimmt natürlich: http://www.w3schools.com/cssref/pr_pos_overflow.asp
allerdings meinte ich overflow-y: http://www.w3schools.com/cssref/css3_pr_overflow-y.asp

sorry - nichts für ungut Domino5702 ;)

pixselig

AW: Twentyeleven: Einbindung Hintergrundbild - bitte um Hilfe

Und dieser Rahmen soll rund um die gesamte Website gehen?

Wieviel px breite hat er denn?

Die erste Variante wäre so wie du oben beschrieben hast -> bei entsprechender Ausrichtung sollte das funktionieren (stichwort : padding erhöhen damit das Hintergrundbild richtig sichtbar wird). Zusätzlich würde ich den mittleren teil nicht in den body einbauen sondern in das div "main". (Geht prinzipiell auch mit dem body, dann dürfen der header und footer allerdings auch keine vertikale margin besitzen. Auch bei grossen viewports und kurzem content können so "fehler " auftreten -> body ragt dann über den footer hinaus.)

Eine weitere Möglichkeit wäre es, den Rahmen mittels CSS einzubauen. Mittels border-(radius). Allerdings ist das Resultat der rahmenabrundung bei dickeren Rahmen nicht ganz ident mit deiner Vorlage. Dies ließe sich aber mittels zwei ineinander verschachtelten divs beheben. Meiner Meinung nach ist diese Lösung die sauberere -> allerdings habe ich auch einen Fabel dafür möglichst wenig Grafiken zu verwenden.

Wenn du zweiter Variante verwenden willst, dann schreibe mir bitte welch breite, welche Farbe und welchen Radius die Kanten bzw. der Rahmen hat/haben. Dann schaue ich mir das morgen am PC an und poste dir die codes.

LG, pixselig

PS: die drei Punkte gehören auch dazu?
Diese würde ich allerdings wirklich als Grafik einbinden. Wobei, mhmm... auch diese liessen sich via CSS erzeugen. Aber das wäre dann wahrscheinlich schon etwas übertrieben.

pixselig

ginge auch per

Code

body {overflow-y: scroll;}

allerdings ist das css3 und damit hat der <=ie8 eventuell probleme.

wollte das nicht zum klugsch*** schreiben sondern weil ich das immer so gemacht habe allerdings scheint mir die bgeissler variante universeller -> habe ich allerdings noch nie gesehen und ist mir selber auch noch nicht eingefallen -> daher: danke ;)

pixselig

füge folgenden code deiner style.css bei

Code

#fourth {
    float: right;
    position: relative;
    top: -145px;
}

lg, pixselig

pixselig

poste doch bitte mal ein bild mit dem gewünschten layout damit man sich vorstellen kann wie es aussehen soll.

lg, pixselig

pixselig

AW: Automatisches Berichte Management mit Sortierung nach Saison

Zitat von full-mann

Ok, vielen Dank für den Hinweis. Habe bis jetzt noch nie mit den Kategorien gearbeitet. Bringt Wordpress von sich aus eine Möglichkeit mit sich alle Posts einer Kategorie aufzulisten, oder muss ich das über Plugins machen?

Ist wp-standard. Die einzelnen posts der jeweiligen Kategorie werden, chronologisch angeordnet, angezeigt.

pixselig

ich würde ganz einfach für jede saison eine eigene kategorie anlegen. diese kategorien kannst du dann ja verlinken wie es dir passt.

lg, pixselig

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Beiträge von pixselig

Twentyeleven: Einbindung Hintergrundbild - bitte um Hilfe

Twentyeleven: Einbindung Hintergrundbild - bitte um Hilfe

Twentyeleven: Einbindung Hintergrundbild - bitte um Hilfe

Twentyeleven: Einbindung Hintergrundbild - bitte um Hilfe

Twentyeleven: Einbindung Hintergrundbild - bitte um Hilfe

wp_list_page von children => bei manchen Seiten werden ALLE seiten gelistet

Twentyeleven: Einbindung Hintergrundbild - bitte um Hilfe

Twentyeleven: Einbindung Hintergrundbild - bitte um Hilfe

Anordnung eines 4. Widget im Footer

Post nur auf einer seite

Anordnung eines 4. Widget im Footer

Probleme mit Children and Toys-Design; Abstand zum Footer und Suchenfeld

Headerbild bei safari angezeigt aber nicht firefox & chrome

Verschobene Seite

Twentyeleven: Einbindung Hintergrundbild - bitte um Hilfe

Verschobene Seite

Anordnung eines 4. Widget im Footer

Twentyeleven: Einbindung Hintergrundbild - bitte um Hilfe

Automatisches Berichte Management mit Sortierung nach Saison

Automatisches Berichte Management mit Sortierung nach Saison