Alle Artikel in so ein Feld?

peterpa

Hallo,

ich war neulich auf einem Blog unterwegs und habe was cooles gesehen.Da ich gerade selber einen Blog mache würde ich dies auch gerne auf meinem Blog haben.Bei dem Blog wo ich gesehen habe, waren alle Beiträge in so einem Fenster:

http://www.picbutler.de/bild/13193/unbenannt3OU8YD.jpg

Jetzt meine Frage...Wie macht man das, dass alle Artikel wo man erstellt in so einem blauen Rahmen sind? Und das der Titel oben in so einem Balken ist?

Den Balken u.s.w. könnte ich machen, aber wie das mit dem Code geht weis ich leider nicht :???: Kann mir da jemand helfen?

Mit freundlichen Grüßen
Max

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

marX

Da genügen ein paar CSS-Grundkenntnisse. Der ganze Artikel in ein <div> einschließen, welches die hellblaue Hintergrundfarbe bekommt (vorzugsweise über eine CSS-Klasse). Die Überschrift wird z.B. in ein <h2> eingeschlossen, welches dann den dunkelblauen Balken als Hintergrundfarbe bzw. -grafik bekommt. Dann werden noch ein paar Abstände angepasst und das war's auch schon.

Hilfe zu CSS gibts hier:
http://www.css4.you.de/

peterpa

Kann das vielleicht jemand machen? Ich weis nicht wirklich, wie ich das angehen soll :neutral:

Grüße

peterpa

Ich habe jetzt den Code für so eine Box:

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Untitled Document</title>
    
    <style type="text/css">
    #Box
    {
        width: 400px; /* Hier änderst du die Breite der Gesammtbox */
        border: 1px solid #333333;
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 12px;
    }
    
    #Box_Title
    {
        display: block;
        width: 99%;
        height: 17px;
        padding-top: 3px;
        background-image: url('data/title.jpg');
        background-repeat: repeat-x;
        border-bottom: 1px solid #333333;
        color: #FFFFFF; /* Hier die Farbe des Titels */
        font-weight: bold;
        padding-left: 1%;
    }
    
    #Box_Content
    {
        display: block;
        width: 100%;
        background-color: #D1EEFE;
        min-height: 100px;
    }
    </style>
</head>
<body>
    <div id="Box">
        <div id="Box_Title">Dein Titel</div>
        <div id="Box_Content">
            
        </div>
    </div>
</body>
</html>

Alles anzeigen

Kann mir jetzt bitte jemand sagen wie ich das ans Wordpress anpasse? Meine Seite ist:

| Fun Videos and many more….

Vielen dank!

marX

Bei dir sieht das so aus:

Code

<div i[COLOR="Magenta"]d="inhalt"[/COLOR]>
  <h2 [COLOR="DarkOrange"]class="beitrags-titel"[/COLOR]>
     <!-- Titel -->
  </h2>
  <div [COLOR="SeaGreen"]class="beitrag"[/COLOR]>
     <!-- Beitrag -->
  </div>
  <div class="feedback">
     <!-- Feeback -->
  </div>
  <div class="center"/>
</div>

Alles anzeigen

Nicht ersichtlich ist hier, ob #inhalt nur einen Artikel enthalten kann, oder auch mehrere. Wenn er nur einen Artikel enthält, dann füge folgendes deiner style.css hinzu:

Code

[COLOR="#ff00ff"]#inhalt[/COLOR]
    {
        width: 400px; /* Hier änderst du die Breite der Gesammtbox */
        border: 1px solid #333333;
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 12px;
    }
    
[COLOR="#ff8c00"].beitrags-titel[/COLOR]
    {
        display: block;
        width: 99%;
        height: 17px;
        padding-top: 3px;
        background-image: url('[COLOR="Red"]data/title.jpg[/COLOR]');
        background-repeat: repeat-x;
        border-bottom: 1px solid #333333;
        color: #FFFFFF; /* Hier die Farbe des Titels */
        font-weight: bold;
        padding-left: 1%;
    }
    
[COLOR="#2e8b57"].beitrag[/COLOR]
    {
        display: block;
        width: 100%;
        background-color: #D1EEFE;
        min-height: 100px;
    }

Alles anzeigen

Eventuell muss aber noch etwas an deinem Theme verändert werden, damit wirklich alles innerhalb der Box steht. Dazu müsstest du aber mal einen Ausschnitt aus deiner index.php posten.

Achja, und die Grafik für den Titelhintergrund (im Code oben rot markiert) hast du natürlich auch? Da muss eventuell noch der Pfad angepasst werden (relativ zur style.css).

peterpa

Also meine Index.php sieht so aus:

PHP

<?php get_header(); ?>


            <div id="inhalt">


             <p>
               <?php if (have_posts()) : while (have_posts()) : the_post(); ?>  
             </p>
             <h2 class="beitrags-titel">
             <a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a>
             </h2>
            
            <div class="beitrag">
                <?php the_content(__('(more...)')); ?>
            </div>


            <div class="feedback">
                <?php wp_link_pages(); ?>
                <div class="beitrags-info2"><?php _e("Genre:"); ?> <?php the_category(',') ?> 
                  <strong>>></strong> 
                <?php comments_popup_link(__('Comments (0)'), __('Comments (1)'), __('Comments (%)')); ?></div>
            </div>


            <?php comments_template(); /*Get wp-comments.php template*/ ?>


            <?php endwhile; else: ?>
            <p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
            <?php endif; ?>


            <?php
            if (function_exists('wp_pagebar')) {
            wp_pagebar(array('before'=>'', 'tooltip_text'=>'Seite', 'next'=>'&raquo;', 'prev'=>'&laquo;'));
            }
            else { ?>
            <div class="center"><?php posts_nav_link('&nbsp;&ndash;&nbsp;', __('&laquo; Previous Page'), __('Next Page &raquo;')); ?></div>
            <?php } ?>


            </div><!-- /inhalt -->
            
            <script type="text/javascript" src="http://www.ipstats.de/hidden/45292.gif"></script>
<noscript><img src="http://www.ipstats.de/nojava/45292.gif"></noscript>


<script src="http://layer-ads.de/la-53442.js" type="text/javascript"></script>


<?php get_sidebar(); ?>


<?php get_footer(); ?>

Alles anzeigen

Meine Website ist:

| Fun Videos and many more….

Was muss ich dann genau machen?

Danke für deine Hilfe...Das freut mich grad voll :-D

marX

PHP

<?php get_header(); ?>


            <div id="inhalt">


             [COLOR="#ff0000"]<p>[/COLOR]
               <?php if (have_posts()) : while (have_posts()) : the_post(); ?>  
             [COLOR="#ff0000"]</p>[/COLOR]

Das <p>-Element hier ist vollkommen falsch, keine Ahnung was der Theme-Autor damit möchte. Wirf das mal raus.

Dann muss tatsächlich noch ein weiterer Container eingefügt werden. Ich geb dem mal die Klasse .beitrags-box:

PHP

[COLOR="#ff0000"] <div class="beitrags-box">[/COLOR]
             <h2 class="beitrags-titel">
             <a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a>
             </h2>
            
            <div class="beitrag">
                <?php the_content(__('(more...)')); ?>
            </div>


            <div class="feedback">
                <?php wp_link_pages(); ?>
                <div class="beitrags-info2"><?php _e("Genre:"); ?> <?php the_category(',') ?> 
                  <strong>>></strong> 
                <?php comments_popup_link(__('Comments (0)'), __('Comments (1)'), __('Comments (%)')); ?></div>
            </div>


            <?php comments_template(); /*Get wp-comments.php template*/ ?>
      [COLOR="#ff0000"]</div><!--/beitragsbox-->[/COLOR]

Alles anzeigen

Hier wird diese Box dann wieder geschlossen. Somit ist der gesamte Blogartikel in eine eigene Boxeingeschlossen. Diese Box können wir nun mit den CSS-Angaben stylen.
Der Rest der index.php bleibt wie er ist.

In meinem CSS-Code von oben änderst du die 1. Zeile von

Code

#inhalt {

in

Code

.beitrags-box {

Bau das mal ein, dann schauen wir wie's aussieht u. wo eventuell noch nachgearbeitet werden muss.

peterpa

Ich bin dir sau dankbar.....Noch zwei Fragen.
Genre: Sonstiges >> Kommentare (0) ist jetzt ja noch nicht mit im blauen Feld...Wie mache ich des noch so, dass es auch einen blauen Hintergrund hat? Und da wo der Titel ist, geht der blaue Streifen paar px zu kurz?

Und kann man die Titel Box auf die gleiche Höhe wie den Luba.in Button bringen?

Liebe Grüße

marX

Zitat von peterpa

Wie mache ich des noch so, dass es auch einen blauen Hintergrund hat?

Schreib mal noch

Code

background-color:#D1EEFE;

zu der Regel für die .beitrags-box dazu.

Zitat

Und da wo der Titel ist, geht der blaue Streifen paar px zu kurz?

Dürfte sich damit auch erledigt haben.

Zitat

Und kann man die Titel Box auf die gleiche Höhe wie den Luba.in Button bringen?

Welche Box? Die in der Sidebar? :confused:

Falls du das meinst, dann kannst du bspw. für #inhalt noch etwas Abstand nach oben definieren. Füge dazu der Regel für #inhalt (style.css, Zeile 206) die Eigenschaft

Code

padding-top:5px;

hinzu.

peterpa

Hallo,

danke du hast mir echt enorm geholfen.Jetzt habe ich nur noch eine Frage, dann lasse ich dich in ruhe :-D

Kann man den Text in der Box,den Titel,Kategorie und das weiterlesen Teil bisschen nach rechts verschieben? Weil aktuell klebt das bissel an der Box?

Liebe Grüße
Max

marX

Dafür gibts die padding-Eigenschaft. Wo das einzubauen ist überlass ich aber mal dir. Dafür gibts nen Link zu einer CSS-Doku. ;-)
padding: Innenabstand: CSS-Referenz auf CSS 4 You - The Finest in Stylesheets

Eventuell musst du die width-Eigenschaften anpassen, oder ganz weglassen, da sonst der Hintergrund aus der Box hinaus ragt. (padding wird zu with hinzugerechnet, also kommst du auf über 100% Breite. display:block erzwingt aber sowieso die Ausnutzung der vollen Breite.)

marX

Für die Sidebar:
#seitenleiste ul (style.css, Zeile 182)
die Hintergrundfarbe hinzufügen:

Code

background-color:#D1EEFE;

Bei #seitenleiste h2 tauschst du das Hintergrundbild aus (Zeile 201) und fügst noch ein

Code

margin-bottom:0;

hinzu.

Eventuell möchtest du noch die jeweiligen Rahmen einfügen. Jeweils noch

Code

border:1px solid #333333;

zu den beiden o.g. Regeln hinzufügen.

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Alle Artikel in so ein Feld?

Jetzt mitmachen!