hesb Posted February 28, 2014 Share Posted February 28, 2014 (edited) 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 February 28, 2014 by hesb (see edit history) Link to comment Share on other sites More sharing options...
vekia Posted February 28, 2014 Share Posted February 28, 2014 ja bym utworzył plik graficzny o rozmiarze np. 4000 szerokość 1 wysokość - i dodał go jako background dla body z powtarzaniem w osi Y Link to comment Share on other sites More sharing options...
hesb Posted February 28, 2014 Author Share Posted February 28, 2014 Dziękuję za podpowiedź Wychodzi tak: i rozchodzi się przy widoku pełnej strony: Jakie parametry wpisać żeby środek grafiki ustawiał się centralnie pod layoutem? Chodzi o efekt jak w temacie. Link to comment Share on other sites More sharing options...
vekia Posted February 28, 2014 Share Posted February 28, 2014 background: url('/tutajurl') repeat-y center; Link to comment Share on other sites More sharing options...
hesb Posted March 1, 2014 Author Share Posted March 1, 2014 Rozwiązane, dziękuję za pomoc. Link to comment Share on other sites More sharing options...
Recommended Posts