Jump to content

Dwa bloki tła w Prestashop 1.5


hesb
 Share

Recommended Posts

Witam,

szukam rozwiązania dla mojego problemu. Próbuję podzielić tło sklepu na dwie kolumny (lewą i prawą) i każdej nadać inny kolor, żeby uzyskać podobny efekt: http://maiolab.net/wp/wp-content/uploads/2013/06/test-bg-threecolumn.png

Niestety jak dotąd bezskutecznie. Jestem laikiem i zupełnie niedawno zacząłem personalizować wygląd swojego sklepu, korzystając z dostępnych tutoriali. Tutaj kieruję się opisem "opcji 3" tutoriala: http://maiolab.net/prestashop-template-page-background/

Nie wszystko jest dla mnie jasne i pewnie w którymś miejscu popełniam błąd. Nie wiem dokładnie, w których miejscach wklejać podane w treści tutoriala linijki.

Edytuję 3 pliki:

- header.tpl

- footer.tpl

- global.css

 

W header.tpl wpisuję linijki (niebieskie) w miejscu:

 
</head>
    <body {if isset($page_name)}id="{$page_name|escape:'htmlall':'UTF-8'}"{/if} class="{if $hide_left_column}hide-left-column {/if}{if $hide_right_column}hide-right-column {/if}{if $theme_settings.column}{$theme_settings.column}_column{/if}">
        {hook h='freePosition'}                
    {if !$content_only}
    <!-- left column background -->
    <div id="lefty"></div>

        {if isset($restricted_country_mode) && $restricted_country_mode}
        <div id="restricted-country">
            <p>{l s='You cannot place a new order from your country.'} <span class="bold">{$geolocation_country}</span></p>
        </div>

 

w footer.tpl podobnie wpisuję:

 

</div>
        <div class="clear"></div>
        <div id="page_block_bottom"></div>
        </div><!-- #page_block -->
        <!--right column background -->
        <div id="righty"></div>
            <!-- Footer -->

            <div id="footer">
                <div id="footer_content">
                    <div id="footer_content_block">
                        {$HOOK_FOOTER}
                    </div>
                    <div id="footer_twitter">
                        <div class="opacity_bg">
                            {hook h='footer_twitter'}
                        </div>

 

oraz linijki w global.css poniżej "struture":

 

/* ************************************************************************************************
        struture
************************************************************************************************ */
#page {
    width:auto;    
    }
    #header {
        float:none;
        z-index:10;
        }
    #columns {
        width:975px;
        padding:0 15px 0 30px;
        z-index:1;
        }
        #left_column {}
        #center_column {width:720px;}
        #product #center_column {padding-bottom: 40px}
        #right_column {
            padding:110px 0 0;
            }
        .catImage #right_column {
            padding:49px 0 0;
        }
#lefty{
    position: fixed;
    top: 0;
    left: 0;
    width: 30px;
    overflow: hidden;
    height:100%;
    background: #00ff00;
    z-index: -1;
}
#righty{
    position: fixed;
    top: 0;
    right: 0;
    width: 30px;
    overflow: hidden;
    height:100%;
    background: #ff0000;
    z-index: -1;
}

 

Skoro nie działa, robię to źle. W których miejscach to dokładnie wklejać?

Bardzo proszę o pomoc.

Edited by hesb (see edit history)

Share this post


Link to post
Share on other sites

Dziękuję za podpowiedź :)

Wychodzi tak:

zoom.jpg

i rozchodzi się przy widoku pełnej strony:

fullscreen.jpg

 

Jakie parametry wpisać żeby środek grafiki ustawiał się centralnie pod layoutem?

Chodzi o efekt jak w temacie.

Share this post


Link to post
Share on other sites

 Share

×
×
  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More