Avatar
Bonnie
Člen
Avatar
Bonnie:

Ahoj, potřebovala bych poradit, nikde v žádných fórech jsem odpověď nenašla. Mám pocit, že jsem zkusila všechno ale jsem si téměř jistá, že problém je v nějaké blbosti, kterou úspěšně přehlížím. Úpravuju téma Twenty twelve a potřebovala jsem ve footeru vlastní widgety, což jsem pomocí nalezeného návodu udělala, po úpravě footer.php vypadá takhle:

</div><!-- #main .wrapper -->

</div><!-- #page -->

<footer id="colophon" role="contentinfo">
  <?php
      /* footer sidebar */
      if ( ! is_404() ) : ?>

        <div id="footer-widgets" class="widget-area three">

          <?php if ( is_active_sidebar( 'sidebar-4' ) ) : ?>
            <?php dynamic_sidebar( 'sidebar-4' ); ?>
          <?php endif; ?>

          <?php if ( is_active_sidebar( 'sidebar-5' ) ) : ?>
            <?php dynamic_sidebar( 'sidebar-5' ); ?>
          <?php endif; ?>

          <?php if ( is_active_sidebar( 'sidebar-6' ) ) : ?>
            <?php dynamic_sidebar( 'sidebar-6' ); ?>
          <?php endif; ?>

          <?php if ( is_active_sidebar( 'sidebar-7' ) ) : ?>
            <?php dynamic_sidebar( 'sidebar-7' ); ?>
          <?php endif; ?>

        </div>


    <?php endif; ?>
                <div class="site-info">
                        <?php do_action( 'twentytwelve_credits' ); ?>
                        <a href="www.facebook.com/b-shoot-photography">2014 web vytvořila Bonnie</a>
                </div><!-- .site-info -->
        </footer><!-- #colophon -->

<?php wp_footer(); ?>

Přičemž do css jsem přidala toto (pro widgety):

/* ===[ Footer Widget Areas ]=== */


.site-info { clear: both; }
#footer-widgets {
    width: 1000px;
    border-top: none;
    background: white;
    height: 210px;
    margin: 0 auto;
    }
}
    #footer-widgets .widget li { list-style-type: none; }
.template-front-page #footer-widgets { padding-top: 0; }
@media screen and (min-width: 600px) {
    #footer-widgets.three .widget {
        display: inline-block;
        width: 235px;
        padding:0 5px 0 5px;
        clear: none;
        margin: 0 auto;


    }
        #footer-widgets.three .widget + .widget + .widget { margin-right: 5px; }
}
/* for IE8 and IE7 */
.ie #footer-widgets.three .widget {

    display: inline-block;
    padding:0 10px 0 10px;
    width: 235px;
    clear: none;
}
.ie #footer-widgets.three .widget + .widget + .widget { margin-right: 5px; }
/* Hide footer widgets Homepage Template*/
.template-front-page #footer-widgets { display: none; }

a css footeru vypadá takto:

/* Footer */
footer[role="contentinfo"] {
background-color: black;
  height: 240px;
        clear: both;
        font-size: 10px;
        line-height: 2;
        max-width: 100%;
        margin-top: 0px;
        padding: 10px 0;
}
footer[role="contentinfo"] a {
        color: #C0C0C0;
  text-decoration: none;
}
footer[role="contentinfo"] a:hover {
        color:rgba(237,237,237,0.5);
}

Celý problém mám od chvíle, kdy jsem footer roztáhla na celou šířku stránky, ale obsah potřebuju 1000px jako tělo a hlavičku. Footer na celou šířku mám přesně jak potřebuji ale jeho obsah ať dělám co dělám je pořád v pravo, i při použití margin: 0 auto; snad všude kde bych řekla, že někam patří, při smazání float: left; i jsem se snažila obalit celý obsah do divu a ten zarovnat na střed, ale bez reakcí. Někde je chyba která mě nechce pustit dál a já jí nemohu najít :( Všem budu strašně moc vděčná za pomoc.

www.oli.mablog.eu

Editováno 30.1.2014 14:11
 
Odpovědět 30.1.2014 14:10
Avatar
Bonnie
Člen
Avatar
Bonnie:

Nakonec jsem problém vyřešila dříve než mi někdo odpověděl, kdyby náhodou to někdo hledal, tak zde je řešení. Protože jsem nevěděla, v které částí kódu je chyba, vytvořila jsem si nové child téma pro twenty twelve a měnila pouze zápatí a footer, přičemž jsem zjistila, že i v původním kódu je chyba pouze v oblasti footeru. A jediná drobnost byla že jsem ten <div> který měl obalit obsah aby se zařadil doprostřed stránky jsem umisťovala blbě, tedy až za <div id="footer-widgets" class="widget-area three"> a ne za "colophon".

CSS: pro obal a nastavení widgetů

.wrap {width: 1000px;
      margin: 0 auto;}


/* ===[ Footer Widget Areas ]=== */
.site-info { clear: both; }
#footer-widgets {
    width: 100%;
    border-top: none;
}
    #footer-widgets .widget li { list-style-type: none; }
.template-front-page #footer-widgets { padding-top: 0; }
@media screen and (min-width: 600px) {
    #footer-widgets.three .widget {
        float: left;
        margin-right: 3.7%;
        width: 30.85%;
        clear: none;
    }
        #footer-widgets.three .widget + .widget + .widget { margin-right: 0; }
}
/* for IE8 and IE7 */
.ie #footer-widgets.three .widget {
    float: left;
    margin-right: 3.7%;
    width: 29.85%;
    clear: none;
}
.ie #footer-widgets.three .widget + .widget + .widget { margin-right: 0; }
/* Hide footer widgets Homepage Template*/
.template-front-page #footer-widgets { display: none; }

CSS footer (kde jsem změnila max-width z 960px na 100%):

footer[role="contentinfo"] {
  background-color: black;
        border-top: 1px solid #ededed;
        clear: both;
        font-size: 12px;
        font-size: 0.857142857rem;
        line-height: 2;
        max-width: 100%;
        margin-top: 24px;
        margin-top: 1.714285714rem;
        margin-left: auto;
        margin-right: auto;
        padding: 24px 0;
        padding: 1.714285714rem 0;
}

a footer.php, kde jsem konec divu "page" dala hned za "main. wrapper" a umístila widgety a obal widgetů:

        </div><!-- #main .wrapper -->
  </div><!-- #page -->
        <footer id="colophon" role="contentinfo">
     <div class="wrap">
                 <?php
      /* footer sidebar */
      if ( ! is_404() ) : ?>
        <div id="footer-widgets" class="widget-area three">
          <?php if ( is_active_sidebar( 'sidebar-4' ) ) : ?>
            <?php dynamic_sidebar( 'sidebar-4' ); ?>
          <?php endif; ?>

          <?php if ( is_active_sidebar( 'sidebar-5' ) ) : ?>
            <?php dynamic_sidebar( 'sidebar-5' ); ?>
          <?php endif; ?>

          <?php if ( is_active_sidebar( 'sidebar-6' ) ) : ?>
            <?php dynamic_sidebar( 'sidebar-6' ); ?>
          <?php endif; ?>
          <?php if ( is_active_sidebar( 'sidebar-7' ) ) : ?>
            <?php dynamic_sidebar( 'sidebar-7' ); ?>
          <?php endif; ?>
        </div><!-- #footer-widgets -->
    <?php endif; ?>

    <div class="site-info">
    Bonnie 2014
                        </div><!-- .site-info --> </div>
        </footer><!-- #colophon -->


<?php wp_footer(); ?>
</body>
</html>

Kdyby chtěl někdo použít ty widgety tak zde je část functions.php, který jsem si nepatrně poupravila na 4 sloupce místo 3 (proto jsou i v css použity názvy jako "three widget"):

// Register footer widgets
register_sidebar( array(
  'name' => __( 'Footer Widget One', 'tto' ),
  'id' => 'sidebar-4',
  'description' => __( 'Found at the bottom of every page (except 404s, optional homepage and full width) as the footer. Left Side.', 'tto' ),
  'before_widget' => '<aside id="%1$s" class="widget %2$s">',
  'after_widget' => '</aside>',
  'before_title' => '<h3 class="widget-title">',
  'after_title' => '</h3>',
) );

register_sidebar( array(
  'name' => __( 'Footer Widget Two', 'tto' ),
  'id' => 'sidebar-5',
  'description' => __( 'Found at the bottom of every page (except 404s, optional homepage and full width) as the footer. Center.', 'tto' ),
  'before_widget' => '<aside id="%1$s" class="widget %2$s">',
  'after_widget' => '</aside>',
  'before_title' => '<h3 class="widget-title">',
  'after_title' => '</h3>',
) );

register_sidebar( array(
  'name' => __( 'Footer Widget Three', 'tto' ),
  'id' => 'sidebar-6',
  'description' => __( 'Found at the bottom of every page (except 404s, optional homepage and full width) as the footer. Right Side.', 'tto' ),
  'before_widget' => '<aside id="%1$s" class="widget %2$s">',
  'after_widget' => '</aside>',
  'before_title' => '<h3 class="widget-title">',
  'after_title' => '</h3>',
) );

register_sidebar( array(
  'name' => __( 'Footer Widget Four', 'tto' ),
  'id' => 'sidebar-7',
  'description' => __( 'Found at the bottom of every page (except 404s, optional homepage and full width) as the footer. Right Side.', 'tto' ),
  'before_widget' => '<aside id="%1$s" class="widget %2$s">',
  'after_widget' => '</aside>',
  'before_title' => '<h3 class="widget-title">',
  'after_title' => '</h3>',
) );

Nevím jak moc jsem to napsala pochopitelně nebo ne, ale třeba to pomůže někomu dalšímu. Nevím jak to chodí, ale asi prosím o uzamčení.

 
Nahoru Odpovědět 30.1.2014 16:13
Avatar
Odpovídá na Bonnie
Michal Žůrek (misaz):

nikdo ti neodpověděl, protože se v tom nikdo nechtěl hrabat a navíc wordpress nemáme moc v lásce.

Nahoru Odpovědět  +2 30.1.2014 16:35
Nesnáším {}, proto se jim vyhýbám.
Avatar
Bonnie
Člen
Avatar
Odpovídá na Michal Žůrek (misaz)
Bonnie:

Ok nevadí, zkusila jsem to na více fórech, a hlavně už je to vyřešené.

 
Nahoru Odpovědět 30.1.2014 20:54
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 4 zpráv z 4.