Beiträge von VHS

VHS

Hey,

ich arbeite immer noch an der Gestaltung einer Seite auf WP-Basis und komme gut voran - bis jetzt!

Mein Problem ist folgendes: ich möchte die Bereiche dreier Widgets die auf der Startseite erscheinen zu Links machen. Jedes Textwidget soll dabei auf eine andere Seite verweisen. Fläche heißt, die ganze in der CSS-Datei ausgewiesene Fläche soll ein einziger großer Link sein, unabhängig von Hintergrundbild, Überschrift oder Text.

Via HTML kann ich natürlich keine Links setzen, weil im Quelltext nur die Widget-Area ausgewiesen wird und die Widgets erst dann eingefügt werden. die IDs hab ich natürlich.

Ich hatte schon überlegt ein Widget selbst zu bauen, aber ich verstehe nichts von PHP und dafür allein ist das etwas zuviel Mühe.

Ich habe etwas gesucht und auch gefunden (http://themeid.com/help/discussio…ea-as-a-link/p1), bloß leider nicht zum Laufen bringen können.

Achso, weil ich das Superfish Dropdown Menü benutze ist eine Javascript- bzw. JQuery-Version vorhanden (jquery-1.9.0.min.js), falls das was nützen könnte.

Danke für die Hilfe im voraus
VideoHomeSystem

VHS

Shiiit. Warum einfach, wenns auch kompliziert geht :), dachte da wäre was beim Import der Datenbank schiefgegangen. Hoffe, jetzt funzts: http://www.whackslack.com/_hfi.

Problem siehe oben.

VHS

Zitat von AmyClaire

Hast du dein grad Design zerschossen?
Sieht bei mir aus , als würde da keine style.css greifen..

So, jetzt müsste es wieder funktionieren: http://www.whackslack.com/_hfi.

VHS

He,

ich bin langsam am verzweifeln. Ich sitze an der Seite für eine Selbsthilfegruppe. Ihr findet die Seite unter http://www.whackslack.com/_hfi.

Der Header spinnt und ich finde einfach nicht heraus, woran es liegt. Die Seite ist folgendermaßen aufgebaut: es gibt eine Startseite, "Splash", auf der ist anstelle des Loops nur ein Zitat eingebaut. Dann gibt es alle anderen Seiten, die im Hauptfeld links den Loop, rechts die Sidebar haben.

BEIDE Templates, die Startseite und die Indexseite (alle anderen Seiten), beziehen sich auf dieselbe CSS-File und darin dieselben Angaben für den Header.

Aber das Ergebnis könnt ihr selbst sehen: Das Suchfeld, neben der Navi, hat jeweils verschiedene Größen, obwohl es sich, wie gesagt, immer auf dieselbe CSS-Klasse bezieht. Wenn man die Seite mit dem IE8 ansteuert, dann ist das Dropdownmenü auf der Startseite nicht nebeneinander, sondern untereinander angeordnet, auf einer beliebigen anderen Seite funktioniert es dann aber.

Ich kann mir nur vorstellen, dass irgendein Tag irgendwo irgendwie interferiert, finde aber nichts. Any help?!

Im folgenden die entsprechenden Codes:

SPLASH

HTML

<?php
/*
template name: splash
*/
?>


<html>


<?php get_header(); ?>


<body>


<div id="wrapper">
 
<div id="header">


<h1 class="titel"><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h1> <h3 class="untertitel"><?php bloginfo('description'); ?></h3>


<div id="navi-bg">


<div id="navi">


<ul class="sf-menu">


    <?php wp_list_categories('title_li=&hide_empty=0&exclude=1,13,32'); ?>


</ul>


</div> <!-- navi ende -->


<div class="suche"><?php include (TEMPLATEPATH . '/searchform.php'); ?></div>


</div> <!-- navi-bg ende -->


</div> <!-- header ende -->








<div id="splash-main">


<hr>


<div id="zitat">Willkommen<br>
auf der Website der<br>
Selbsthilfegruppe heredit&auml;re Fructoseintoleranz!</div>


<hr>


<!-- BOTTOM BAR -->


<div id="bottom-bar-wrapper">


<div id="bottom-bar">


<?php if (function_exists('dynamic_sidebar') && dynamic_sidebar('bottom-bar')) : else : ?>


<div class="pre-widget">
<p><strong>Widgetized Area</strong></p>
<p>This panel is active and ready for you to add some widgets via the WP Admin</p>
</div>


<?php endif; ?>


</div> <!-- bottom-bar ende -->


</div> <!-- bottom-bar-wrapper ende -->


<br style="clear: both;" />


</div> <!-- main-splash ende -->




 
<?php get_footer(); ?>


</div><!-- wrapper ende -->
 
</body>


</html>

Alles anzeigen

INDEX

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//DE" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de">


<?php 
/*
template name: hfi
*/
?>


<html>


<?php get_header(); ?>


<body>


<div id="wrapper">
 
<div id="header">


<h1 class="titel"><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h1> <h3 class="untertitel"><?php bloginfo('description'); ?></h3>


<div id="navi-bg">


<div id="navi">


<ul class="sf-menu">


    <?php wp_list_categories('title_li=&hide_empty=0&exclude=1,13,32'); ?>


</ul>


</div> <!-- navi ende -->


<div class="suche"><?php include (TEMPLATEPATH . '/searchform.php'); ?></div>


</div> <!-- navi-bg ende -->


</div> <!-- header ende -->






<div id="main">


<!-- LOOP -->


<div id="loop">


<?php if (have_posts()) : while (have_posts()) : the_post(); ?>


<div class="post">


<h2><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2>


<hr>


   <div class="entry">
      <?php the_content(); ?>
   </div>


<small>Von <?php the_author_posts_link() ?> in <?php the_category(', '); ?>, bisher <?php comments_number( '0 Kommentare', '1 Kommentar', '% Kommentare' ); ?></small>


</div> <!-- POST ENDE -->


<?php endwhile; endif; ?>


</div> <!-- LOOP ENDE -->


<!-- LOOP ENDE -->


<?php get_sidebar(); ?>


<br style="clear: both;" />


</div> <!-- main ende -->
 
<?php get_footer(); ?>
 
</div><!-- wrapper ende -->
 
</body>


</html>

Alles anzeigen

CSS

HTML

/*
Theme Name: HFI
*/


/*INDEX & PAGES*/


body {
margin:0px;
font-family: 'Open Sans';
color: #0A246A;
background-image:url(img/bg-1024.jpg); background-repeat:repeat;
}


#wrapper {
width: 960px;
height: auto;
background: #fff;
border: 1px solid #c8c8c8;
box-shadow: 0px 10px 10px #c8c8c8;
margin: 0 auto;
}


#header {
width: 960px;
height: auto;
border-bottom:1px solid #c8c8c8;
}


.titel {
margin:0px;
padding-top:40px;
padding-left:40px;
padding-bottom:10px;
font-size: 22pt;
text-shadow: 2px 2px 1px #c8c8c8;
}


.untertitel {
margin:0px;
padding-left:40px;
padding-bottom:40px;
font-size: 12pt;
text-shadow: 2px 2px 1px #c8c8c8;
background-image:url(img/essen.jpg); background-repeat:no-repeat;
}


a, a:link, a:visited, a:active {
color: #0A246A;
text-decoration:none;
}


a:hover {
text-decoration:underline;
}


a name {
color: #0A246A;
text-decoration:none;
}


/* HEADER */


/* NAVI */


#navi-bg {
position: relative; top: -2px;
width: 960px;
height: 56px;
}


#navi {
float:left;
position: relative; left: 40px;
}


/* SUCHE */


.suche {


padding: auto 40px;
}


.suche input#s {
height: 20px;
width: 140px;
font-size: 12px;
color: #000;
background-color: #fff;


-moz-box-shadow:inset 2px 2px 2px #ccc;
box-shadow:inset 2px 2px 2px #ccc;
border: 1px solid #c8c8c8;
background: url(img/pikto-lupe.jpg) center right 10px;
background-repeat: no-repeat;
}


.suche input#searchsubmit {
display: none;
}






/* MAIN */


#main {
width: 960px;
height: auto;
background-image:url(img/bg-960.jpg); background-repeat: y-repeat;
}


#main td {
margin:0px;
padding:10px;
vertical-align: baseline;
background-color: #d9d9d9;
}


#main li {
padding-bottom:0.5em;
}


#main img {
float:left;
padding: 0px 10px 10px 0px;
}


#main blockquote {
font-style: italic;
}


/* LOOP */


#loop {
width: 640px;
padding:40px;
padding-top:0px;
float:left;
}


.post {
padding-top: 20px;
padding-bottom: 20px;
}


.post h2 {
margin:0px;
}


.post hr {
width: auto;
height: 1px;
border:none;
border-top: 1px dotted #c8c8c8;
background-color: #FFFFFF;
}


.entry {
font-size: 12pt;
line-height: 1.5em;
}


.entry a {
color: blue;
text-decoration:underline;
}






/* SIDEBAR */


#sidebar {
width: 180px;
height: auto;
float:right;
padding-left:20px;
padding-right: 40px;
font-size: 10pt;
}


/* SIDEBAR-LINES */


#sidebar hr {
width: 180px;
height: 1px;
border:none;
border-top: 1px dotted #c8c8c8;
}


/* SIDEBAR WIDGET-AREA */


#sidebar .widget{
width: 180px;
margin-top: 20px;
margin-bottom:20px;
}


#sidebar .widget h2 {
margin: 0px 0px 4px 50px;
text-transform: uppercase;
text-shadow: 2px 2px 1px #c8c8c8;
}


#sidebar .textwidget {
margin-left:50px;
}


#text-11 {
background-image:url(img/pikto-book.jpg); background-repeat: no-repeat;
}


#text-12 {
background-image:url(img/pikto-letter.jpg); background-repeat: no-repeat;
}


#text-13 {
background-image:url(img/pikto-people.jpg); background-repeat: no-repeat;
}






/* FOOTER + WIDGETAREA*/


#footer {
clear:both;
width: 960px;
background:#c8c8c8;
}


#footer-inner {
padding-left: 20px;
padding-right: 20px;
}


#footer .widget{
float: left;
width: 190px;
margin-left:20px;
margin-right:20px;
margin-top: 40px;
margin-bottom:40px;
}


#footer .widget h2 {
text-shadow: 1px 1px 1px #9b9b9b;
}


#footer .textwidget {
}


#footer .menu-no-kids-container ul {
list-style-type: none;
margin: 0px;
padding: 0px;
border-top: 1px solid ;
}


#footer .menu-no-kids-container li {
list-style-type: none;
margin: 0;
padding-top: 4px;
padding-bottom: 4px;
border-bottom: 1px solid;
}






/* WIDGETS*/


.widget {
font-size: 8pt;
}


.widget h2 {
font-size: 10pt;
}


.textwidget {
}






/* SPLASH */


#splash-main {
width: 960px; 
height: auto;
}


/*SPLASH-LINE*/


#splash-main hr {
width: 880px;
height: 1px;
border:none;
border-top: 1px dotted #c8c8c8;
}


/*SPLASH-ZITAT*/


#zitat {
clear:both;
width: 960px;
padding-top: 40px;
padding-bottom: 40px;
font-size: 20pt;
font-weight: bold;
font-style: italic;
text-align: center;
text-shadow: 2px 2px 1px #c8c8c8;
color: #0A246A;
}


/*SPLASH-BOTTOM-BAR + WIDGETAREA*/


#bottom-bar-wrapper {
clear:both;
width: 960px;
}


#bottom-bar {
position: relative;
left:24px;
}


#bottom-bar .widget {
float: left;
width: 266px;
margin-left:20px;
margin-right:20px;
margin-top: 40px;
margin-bottom:40px;
}


#bottom-bar .widget h2 {
margin: 0px 0px 6px 50px;
font-size: 12pt;
text-transform: uppercase;
text-shadow: 2px 2px 1px #c8c8c8;
}


#bottom-bar .textwidget {
margin-left:50px;
}


#text-5 {
background-image:url(img/pikto-book.jpg); background-repeat: no-repeat;
}


#text-6 {
background-image:url(img/pikto-letter.jpg); background-repeat: no-repeat;
}


#text-4 {
background-image:url(img/pikto-people.jpg); background-repeat: no-repeat;
}


/* SEARCH */


#search-main {
background-image:url(img/bg-960.jpg);
}

Alles anzeigen

VHS

he,

ich baue eine Website auf WP-Basis mehr oder weniger von Grund auf, d.h. ich gestalte auch alle Templates usw. Bisher hat eigentlich alles gut geklappt, aber jetzt zerbreche ich mir seit einer Zeit schon den Kopf und komme nicht weiter.

Das Template ist Widget-ready. Die Widget selbst, also etwa ein Textwidget, sind im Grunde kaum gestaltet und greifen auf einige Standart-Einstellungen zurück, so wie eine unformatierte Website.

Es hakt an zwei Stellen. Einmal will ich NUR den Text in einem Widget einrücken, nicht aber das eingefügte Bild. Margin und padding zeigen gar keine Wirkung, rücken auch nicht alles ein.
Und das anderemal will IN in einem Textwidget die AufzählungsPUNKTE aus einer Liste entfernen. Aber auch das klappt nicht.

Zur Anschauung: http://www.abload.de/img/untitled-1copynzu5m.jpg

In meiner CSS-File lassen sich folgende Auszeichnungen finden (und ich habe gefühlt schon alle möglichen Kombinationen von IDs und Klassen und Tags ausprobiert):

In General:

Code

.widget {
font-size: 8pt;
}


.widget h2 {
font-size: 10pt;
}

Dann für die sog. "bottom-bar", also die Widget-Area mit den drei Widgets inkl. Piktogramm:

Code

#bottom-bar .widget {
float: left;
width: 266px;
padding-left: 40px;
}


.bottom-bar-hd {
font-weight: bold;
font-size: 14pt;
text-transform: uppercase;
text-shadow: 1px 1px 0px #c8c8c8;
}


/*
#bottom-bar #text-4, #text-5, #text-6 {
}
*/


/* padding: 0 0 0 40; */

Alles anzeigen

Was die Widgets mit den Piktogrammen angeht, so füge ich die Grafiken im Backend via HTML ein, die feine englische ist das sicher nicht. Im Grunde will ich einfach nur, was sich auch auf der Startseite von wpde.org finden lässt, und dachte, widgets seien die eleganteste und am Ende benutzerfreundlichste Lösung.

Dann für den Footer, wo ich die Bullets wegkriegen will:

Code

#footer {
clear: both; 
height: 500px;
background: #000000;
width: 960px;
padding-top: 40px;
padding-bottom: 40px;
overflow: auto;
font-family:'Arial', sans-serif;
}


#footer .widget{
float: left;
width: 190px;
color: #fff;
padding-left: 40px;
}


/*
#footer #text-8, #text-9, #text-10, #nav_menu-2 {
}
*/


/*
ul#footer, li#footer {
list-style: none;
}
*/

Alles anzeigen

any help :(?

VHS

Mh, Ergebnis siehe http://whackslack.wh.funpic.de/wordpress/. Bei "float:right;" dieses Ergebnis, bei "float:left;" haut er sie mir an die rechte Seite. Eigentlich müsste doch der header-Befehl ziehen:

Code

#header {width: 640px; height: auto; text-align: center; border: 5px solid #ccc;}

also der Text zentral ausgerichtet. Jetzt sind Links natürlich kein Text?! Aber "#header a / nav li / nav li a {text-align: center;}" funzt auch nicht. Äh, was tun...?

VHS

Hey,

ich versuche derzeit einige Links, die via CSS mit einem Hover-Effekt unterlegt sind, ganz einfach auf eine horizontale Linie zu kriegen, aber es will nicht klappen.

Online gibt es die Seite hier: http://whackslack.wh.funpic.de/wordpress/ (s. Navi.)

Der entsprechende Teil im Header sieht einfach so aus:

Code

<a href="x" class="nav-work" ></a>...
<a href="x" class="nav-about"></a>
<a href="x" class="nav-contact"></a>

Der entsprechende Teil in der externen CSS-File so:

Code

.nav-work {width: 102px; height: 50px; display: block; margin: 0 auto; background-image: url(images/nav-work.jpg);}
.nav-work:hover {background-position: 0 -50px;}


.nav-about {width: 110px; height: 50px; display: block; margin: 0 auto; background-image: url(images/nav-about.jpg);} 
.nav-about:hover {background-position: 0 -50px;}


.nav-contact {width: 148px; height: 50px; display: block; margin: 0 auto; background-image: url(images/nav-contact.jpg);}
.nav-contact:hover {background-position: 0 -50px;}

Grundsätzlich verstehe ich schon nicht, weshalb die Links nicht EINFACH SO in Reihe angezeigt werden, Platz genug wäre ja da. "Float:left;" hilft auch nicht.

Ich hatte das ganze auch schon als Liste probiert - mit demselben Ergebnis. Außerdem schien mir der "display:inline;"-DIV-Tag der Liste mit dem "display:block;"-CLASS-Tag der Bilder zu kollidieren?!

Help!

VHS

Mh, da tut sich gar nichts. Ich meine, man müsste den Rahmen des wrappers ohnehin sehen, ist halt als ob der wrapper einfach gar nicht da wäre. Aber was hab ich falsch gemacht?!

VHS

Hi,

ich versuche mich derzeit darin, ein eigenes WP-Template auf die Beine zu stellen, noch bin ich ganz am Anfang (nach wordpress.lernenhoch2.de).

Und schon stellt sich ein, mit Sicherheit ganz einfaches, Problem ein, dass ich nicht gelöst bekomme. Ich möchte nämlich, ganz einfach, den Wrapper, also den alles umfassenden Container zentrieren, aber es will nicht klappen.

Die Website sieht derzeit so aus (XAMPP auf dem Heimrechner):
http://www.abload.de/img/untitled-1copyvvl0r.jpg

style.css

Code

body {background: #FF0000; border: 10px solid;}
  
#wrapper {width: 660px; background: #228B22; border: 5px solid; text-align: center; align: center;}
#header {width: 640px; height: 400px; border: 1px solid;}


#main {width: 400px;}
#sidebar {float: left;}


#footer {height: 100px;}


#navmenu ul {list-style-type: none; list-style-image: none; }
#navmenu li {display: inline; }
#navmenu ul li a {text-decoration:none;  margin: 4px; padding: 5px 20px 5px 20px; color: blue; background: pink;}

Alles anzeigen

Wie man sehen kann, werden Rahmen (border) als auch Hintergrundfarbe (background) des wrappers nicht wiedergegeben, ganz zu schweigen von der Zentrierung...

index.php

PHP

<?php get_header(); ?>


<div id="main">


<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<h2><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2>


<div id="meta">
erstellt am: <?php the_date('d.m.Y'); ?> |
Kategorie(n): <?php the_category(', '); ?></p>
</div>


<div class="entry">
<?php the_content(); ?>
</div>
<?php endwhile; ?>
<?php endif; ?>


</div>


<div id="sidebar"><?php get_sidebar(); ?></div>


<?php get_footer(); ?>

Alles anzeigen

header.php

PHP

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//DE" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de">


<head profile="http://gmpg.org/xfn/11">


<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('utf-8'); ?>" />


<title><?php wp_title(); ?> - <?php bloginfo('name'); ?></title>


<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen"/>
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />


<?php wp_head(); ?>


</head>


<body>


<div id="wrapper">


<div id="header">
<h1><a href="<?php bloginfo('url'); ?>"><img src="/wordpress/wp-content/themes/test-two/images/logo.jpg"></a></h1>




<div id="navmenu">
<ul>
    <li><a href="<?php echo get_settings('home'); ?>">HOME</a></li>
    <li><a href="wordpress/recipes/"><img src="/wordpress/wp-content/themes/test-two/images/nav-work.jpg"></a></li>
    <li><a href="wordpress/travel/">TRAVEL</a></li>
    <li><a href="http://www.wordpress.org">WORDPRESS</a></li>
    <li><form method="get" id="searchform" action="<?php echo $_SERVER['PHP_SELF']; ?>"><input type="text" value="<?php echo wp_specialchars($s, 1); ?>" name="s" id="s" /><input type="submit" id="search_submit" value="Suchen" /></form></li></ul></div>


</div>

Alles anzeigen

footer.php

Code

<div id="footer"></div>


</div>


</body>


</html>

Weitere Probleme sind: wieso wird das Suchfeld nich inline wiedergegeben? Und wie ließe sich via CSS ein hover-Effekt bzgl. der Navi-Grafiken machen?

ANY HELP?

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Beiträge von VHS

Wie ganze Widgetfläche klickbar machen?

Probleme mit dem Header

Probleme mit dem Header

Probleme mit dem Header

Probleme bei der Gestaltung von Widgets via CSS

Hover-Effekt und horizontale Ausrichtung (CSS)

Hover-Effekt und horizontale Ausrichtung (CSS)

Wrapper zentrieren funktioniert nicht (eigenes Template, CSS)

Wrapper zentrieren funktioniert nicht (eigenes Template, CSS)