Background 100% width dla headera i footera

[davvarts]

Czy dałoby rade zrobić tak jakby górną i dolną (header / footer) część strony np. w kolorze czarnym na całą długość strony, a reszta strony żeby była w kolorze białym ? Kombinuje z css i jakies divy dorzucam do header.tpl ale nie wychodzi mi tak jak to powinno być... 

Przykładem może być strona egoistin.pl <--- tutaj jest wlasnie tak zrobiony ciekawie background...

Z góry dzięki za pomoc

[vekia]

full width footer + full width header (ale ten header to chyba nie jest to czego do końca oczekujesz)

[davvarts]

No nie do końca choć z footerem coś pokombinuje... ale za to może miałbyś pomysł jak podłożyć tak jakby pod samego slidera tlo, które by się rozciągało na całą stronę ? Sam slider tylko Mam tego slidera w topie (nie w srodkowej kolumnie). To wtedy bym sobie poradził z resztą...

[vekia]

w tym przypadku trzeba by było przebudować nieco header.

chodzi o to, że cały content umieszczony jest w kontenerze o szerokości 980px z marginesem: auto; oznacza to mniejwięcej tyle, że wszystkie elementy wewnątrz ograniczone są (ich maxymalna szerokość) do 980px;

 

<top>

<pierdoły></pierdoły>

<slider></slider>

</top>

<kontener></kontener>

<footer></footer>

 

tak to powinno mniejwięcej wyglądać

[davvarts]

No wlasnie zauwazylem to A nie daloby sie np. calego headera wsadzic w jeszcze jeden kontener z nadanym margin: 0 auto; ?

[davvarts]

w miare sobie poradziłem z górnym backgroundem stosując coś w tym stylu: http://www.prestashop.com/forums/topic/272322-solved-how-to-create-full-width-header-background/

 

Teraz Vekia byłbym bardzoooo wdzięczny gdybyś coś mi pomógł z tym tłem 100% dla sliderka. Mam slider minica. Chciałbym, aby tło po lewej i prawej od tego slidera było inne niz domyslnie ustawione na stronie Mam nadzieje ze w miare dobrze wyjasnilem o co mi chodzi... jakbym mial podac jakis kod to wal smialo Pozdrawiam serdecznie!

Edited November 7, 2013 by davvarts (see edit history)

[davvarts]

Daloby rade cos z tym sliderem wytworzyc ? Mam minic slidera oto jego kod z front.tpl <--- mysle ze gdzies tutaj by mozna dopisac diva na cala szerokosc strony... tylko nie wiem gdzie ;C
 

{if $slides|@count != 0}
    {if $minicSlider.options.front == 1 && $page_name != 'index'}
        <!-- Minic Slider -->
    {else}
        {if $minicSlider.position == 'top'}
        </div>  
            </div>
        {/if}
        <div id="minic_slider" class="theme-default{if $minicSlider.options.thumbnail == 1 and $minicSlider.options.control != 0} controlnav-thumbs{/if}">   
            <div id="slider" class="nivoSlider" style="{if $minicSlider.options.min_width}min-width:{$minicSlider.options.min_width};{/if}{if $minicSlider.options.max_width}max-width:{$minicSlider.options.max_width};{/if}{if $minicSlider.options.max_height}max-height:{$minicSlider.options.max_height};{else}min-height:{$minicSlider.min_height}px;{/if}{if $minicSlider.options.control != 1}margin-bottom:0;{/if}">
                {foreach from=$slides item=image name=singleimage}
                    {if $image.url != ''}<a href="{$image.url}" {if $image.target == 1}target="_blank"{/if}>{/if}
                        <img src="{$minicSlider.path.images}{$image.image}" class="slider_image" 
                            {if $image.alt}alt="{$image.alt}"{/if}
                            {if $image.title != '' or $image.caption != ''}title="#htmlcaption_{$image.id_slide}"{/if} 
                            {if $minicSlider.options.thumbnail == 1}data-thumb="{$minicSlider.path.thumbs}{$image.image}"{/if}/>
                    {if $image.url != ''}</a>{/if}
                {/foreach}
            </div>
            {foreach from=$slides item=caption name=singlecaption}
                {if $caption.title != '' or $caption.caption != ''}
                    <div id="htmlcaption_{$caption.id_slide}" class="nivo-html-caption">
                        <h3>{$caption.title}</h3>
                        <p>{$caption.caption}</p>
                    </div>
                {/if}
            {/foreach}
        </div> 
          
        {if $minicSlider.position == 'top'}
        <div>
            <div>
        {/if}   


        <script type="text/javascript">
        $(window).load(function() {
            $('#slider').nivoSlider({
                effect: '{if $minicSlider.options.current != ''}{$minicSlider.options.current}{else}random{/if}', 
                slices: {if $minicSlider.options.slices != ''}{$minicSlider.options.slices}{else}15{/if}, 
                boxCols: {if $minicSlider.options.slices != ''}{$minicSlider.options.cols}{else}8{/if}, 
                boxRows: {if $minicSlider.options.rows != ''}{$minicSlider.options.rows}{else}4{/if}, 
                animSpeed: {if $minicSlider.options.speed != ''}{$minicSlider.options.speed}{else}500{/if}, 
                pauseTime: {if $minicSlider.options.pause != ''}{$minicSlider.options.pause}{else}3000{/if}, 
                startSlide: {if $minicSlider.options.startSlide != ''}{$minicSlider.options.startSlide}{else}0{/if},
                directionNav: {if $minicSlider.options.buttons == 1}true{else}false{/if}, 
                controlNav: {if $minicSlider.options.control == 1}true{else}false{/if}, 
                controlNavThumbs: {if $minicSlider.options.thumbnail == 1}true{else}false{/if},
                pauseOnHover: {if $minicSlider.options.hover == 1}true{else}false{/if}, 
                manualAdvance: {if $minicSlider.options.manual == 1}true{else}false{/if}, 
                prevText: '{l s='Prev' mod='minicslider'}', 
                nextText: '{l s='Next' mod='minicslider'}', 
                randomStart: {if $minicSlider.options.random == 1}true{else}false{/if},
                {literal}
                afterLoad: function(){
                    $('#slider').css({'min-height' : '1px'});
                }
                {/literal}
            });
        });
        </script>   
    {/if}
{/if}

A potem moznaby temu divowi w css'ie zapodac backgrounda

[vekia]

tutaj kwestia sie komplikuje, bo zmiany o jakich mowa trzeba zrobic w innych plikach, tj. w glownym szkielecie szablonu.

jak Twój header wygląda? trzeba koniecznie pozbyć się ograniczeń z kontenera (980px)

[davvarts]

kod mojego headera wyglada dokladnie tak samo jak w defaultowym szablonie