Column aanpassen

SteinCity · December 15, 2012

Goede avond allemaal,

Ik zou graag op mijn site een aanpassing willen doen aan de look van mijn cms column, ik heb al op een aantal plaatsen gezocht, maar ik kom er even niet meer uit staat het in de css?

Het gaat om de columns aan de rechter kant van mijn product pagina's,

onder de noemer nieuws en foto.

http://www.steincity.nl/41-hercules-rmx-dj-console.html

Ik zou graag willen dat het de zelfde layout kreeg als de column fabrikanten

Kay van Aarssen · December 15, 2012

Bij de Li class van je block even de Ul de class="bullet" meegeven en de LI class="item" dan ziet het er het zelfde uit.

en dit even in de CSS toevoegen:

ul.bullet li, .block ul.bullet li, li.bullet {


border-bottom: 1px solid #DEDADE;
border-top: 1px solid #FFFFFF;
padding: 5px 15px;
}

SteinCity · December 17, 2012

Bij de Li class van je block even de Ul de class="bullet" meegeven en de LI class="item" dan ziet het er het zelfde uit.

en dit even in de CSS toevoegen:
ul.bullet li, .block ul.bullet li, li.bullet {


border-bottom: 1px solid #DEDADE;
border-top: 1px solid #FFFFFF;
padding: 5px 15px;
}

Sorry haha, maar dit snap ik niet helemaal, bedankt voor je antwoord. Ik zag dat je deze layout ook gebruikt hebt voor 1 van je site's. Heb je ook een NOOB uitleg?

Bedankt

scorpionsworld · December 17, 2012

Sorry haha, maar dit snap ik niet helemaal, bedankt voor je antwoord. Ik zag dat je deze layout ook gebruikt hebt voor 1 van je site's. Heb je ook een NOOB uitleg?

Bedankt

Dat kan, maar zet dan wel eerst aub even de CCC opties in Performance uit.

SteinCity · December 17, 2012

Done

scorpionsworld · December 17, 2012

Oke. Doe het volgende. Voeg toe aan /themes/leo_bike/css/modules/blockcms/blockcms.css de code

#informations_block_left_3.block li {
   border-bottom: 1px solid #DEDADE;
   border-top: 1px solid #FFFFFF;
   padding: 5px 15px;
}
#informations_block_left_3.block li.first_item {
   border-top: 0 none;
}
#informations_block_left_3.block li.last_item {
   border-bottom: 0 none;
}
#informations_block_left_3.block p {
   display: none;
}
#informations_block_left_4.block li {
   border-bottom: 1px solid #DEDADE;
   border-top: 1px solid #FFFFFF;
   padding: 5px 15px;
}
#informations_block_left_4.block li.first_item {
   border-top: 0 none;
}
#informations_block_left_4.block li.last_item {
   border-bottom: 0 none;
}
#informations_block_left_4.block p {
   display: none;
}

Pas de unorder list van de 2 cms blokjes aan.

<ul class="block_content">

word

<ul class="bullet">

en

<li>

word

<li class={if $smarty.foreach.myLoop.first}first_item{elseif $smarty.foreach.myLoop.last}last_item{else}item{/if}>

(waarbij myLoop de name van de foreach loop is. (Zie {foreach from=$... item=... name=myLoop} code regel boven de <li> regel in de template.

SteinCity · December 18, 2012

Bedank, alleen dat laatste snap ik niet.

Onder welke cms blokjes bedoel je?

SteinCity · December 18, 2012

Ik heb het eerste deel gedaan, het begint er op te lijken!

Nu wil ik graag ook in 1x het varkentje veranderen in het schriftje (zoals te zien links onder bij "laatste nieuws")

Is dat ook mogelijk?

scorpionsworld · December 18, 2012

Bedank, alleen dat laatste snap ik niet.

Onder welke cms blokjes bedoel je?

Laat ik, om dit te kunnen beantwoorden, een paar vraagjes stellen.

1.) Welke versie van PS gebruik je? _Lees_{Forum - Regels & Tips}_eens

2.) Waar heb je de CMS blokjes Nieuws en Foto's gemaakt?

Ik heb het eerste deel gedaan, het begint er op te lijken!

Nu wil ik graag ook in 1x het varkentje veranderen in het schriftje (zoals te zien links onder bij "laatste nieuws")

Is dat ook mogelijk?

Dat is ook mogelijk ja. Kwestie van

#informations_block_left_3.block h4 {


background-position: 5px -45px;
}
#informations_block_left_4.block h4 {


background-position: 5px -45px;
}

toevoegen aan blockcms.css

SteinCity · December 18, 2012

Laat ik, om dit te kunnen beantwoorden, een paar vraagjes stellen.
1.) Welke versie van PS gebruik je? _Lees_{Forum - Regels & Tips}_eens

2.) Waar heb je de CMS blokjes Nieuws en Foto's gemaakt?

1.) Prestashop 1.5.2

2.) Gewoon met de ingebouwde cms van prestashop. Te vinden bij voorkeuren.

Dus als ik het goed begrijp moet blockcms.css er nu zo uitzien?

Er veranderd namelijk nog niets.

#leo-footer .block_various_links {
display: block;
   float: left;
   height: 20px;
   list-style: none outside none;
   overflow: hidden;
   width: 700px;
}
#leo-footer .block_various_links li a { text-decoration: none }
#leo-footer .block_various_links li {
display: inline;
margin: 0 2px;
   padding: 0 4px 0 12px;
}
#leo-footer .block_various_links li.first_item {
background: none;
padding-left: 0
}
/* Block CMS links */
.informations_block_left .block_content { padding-top: 3px }
#informations_block_left_3.block li {
   border-bottom: 1px solid #DEDADE;
   border-top: 1px solid #FFFFFF;
   padding: 5px 15px;
}
    background-position: 5px -45px;
}
#informations_block_left_3.block h3 {

    background-position: 5px -45px;
}
#informations_block_left_3.block li.first_item {
   border-top: 0 none;
}
#informations_block_left_3.block li.last_item {
   border-bottom: 0 none;
}
#informations_block_left_3.block p {
   display: none;
}
#informations_block_left_4.block li {
   border-bottom: 1px solid #DEDADE;
   border-top: 1px solid #FFFFFF;
   padding: 5px 15px;
}
    background-position: 5px -45px;
}
#informations_block_left_4.block h4 {

    background-position: 5px -45px;
}
#informations_block_left_4.block li.first_item {
   border-top: 0 none;
}
#informations_block_left_4.block li.last_item {
   border-bottom: 0 none;
}
#informations_block_left_4.block p {
   display: none;
}
#informations_block_left_3.block h4 {

scorpionsworld · December 18, 2012

1.) Prestashop 1.5.2

2.) Gewoon met de ingebouwde cms van prestashop. Te vinden bij voorkeuren.

Dus als ik het goed begrijp moet blockcms.css er nu zo uitzien?

Er veranderd namelijk nog niets.
[KNIP]

Afgezien van de 2 laatste weggevallen regels, ja.

Dus...staat de template in modules/blockcms/

Open /modules/blockcms/blockcms.tpl en vervang de code met

{*
* 2007-2012 PrestaShop
*
* NOTICE OF LICENSE
*
* This source file is subject to the Academic Free License (AFL 3.0)
* that is bundled with this package in the file LICENSE.txt.
* It is also available through the world-wide-web at this URL:
* http://opensource.org/licenses/afl-3.0.php
* If you did not receive a copy of the license and are unable to
* obtain it through the world-wide-web, please send an email
* to [email protected] so we can send you a copy immediately.
*
* DISCLAIMER
*
* Do not edit or add to this file if you wish to upgrade PrestaShop to newer
* versions in the future. If you wish to customize PrestaShop for your
* needs please refer to http://www.prestashop.com for more information.
*
*  @author PrestaShop SA <[email protected]>
*  @copyright  2007-2012 PrestaShop SA
*  @version  Release: $Revision: 6595 $
*  @license    http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)
*  International Registered Trademark & Property of PrestaShop SA
*}

{if $block == 1}
   <!-- Block CMS module -->
   {foreach from=$cms_titles key=cms_key item=cms_title}
       <div id="informations_block_left_{$cms_key}" class="block informations_block_left">
           <h4><a href="{$cms_title.category_link}">{if !empty($cms_title.name)}{$cms_title.name}{else}{$cms_title.category_name}{/if}</a></h4>
           <ul class="bullet">
               {foreach from=$cms_title.categories item=cms_page}
                   {if isset($cms_page.link)}<li class="bullet"><b style="margin-left:2em;">
                   <a href="{$cms_page.link}" title="{$cms_page.name|escape:html:'UTF-8'}">{$cms_page.name|escape:html:'UTF-8'}</a>
                   </b></li>{/if}
               {/foreach}
               {foreach from=$cms_title.cms item=cms_page name=cmsloop}
                   {if isset($cms_page.link)}<li class={if $smarty.foreach.cmsloop.first}first_item{elseif $smarty.foreach.cmsloop.last}last_item{else}item{/if}><a href="{$cms_page.link}" title="{$cms_page.meta_title|escape:html:'UTF-8'}">{$cms_page.meta_title|escape:html:'UTF-8'}</a></li>{/if}
               {/foreach}
               {if $cms_title.display_store}<li><a href="{$link->getPageLink('stores')}" title="{l s='Our stores' mod='blockcms'}">{l s='Our stores' mod='blockcms'}</a></li>{/if}
           </ul>
       </div>
   {/foreach}
   <!-- /Block CMS module -->
{else}
   <!-- MODULE Block footer -->
   <div class="block_various_links" id="block_various_links_footer">
       <h4>{l s='Information' mod='blockcms'}</h4>
       <ul>
           {if !$PS_CATALOG_MODE}<li class="first_item"><a href="{$link->getPageLink('prices-drop')}" title="{l s='Specials' mod='blockcms'}">{l s='Specials' mod='blockcms'}</a></li>{/if}
           <li class="{if $PS_CATALOG_MODE}first_{/if}item"><a href="{$link->getPageLink('new-products')}" title="{l s='New products' mod='blockcms'}">{l s='New products' mod='blockcms'}</a></li>
           {if !$PS_CATALOG_MODE}<li class="item"><a href="{$link->getPageLink('best-sales')}" title="{l s='Top sellers' mod='blockcms'}">{l s='Top sellers' mod='blockcms'}</a></li>{/if}
           {if $display_stores_footer}<li class="item"><a href="{$link->getPageLink('stores')}" title="{l s='Our stores' mod='blockcms'}">{l s='Our stores' mod='blockcms'}</a></li>{/if}
           <li class="item"><a href="{$link->getPageLink($contact_url, true)}" title="{l s='Contact us' mod='blockcms'}">{l s='Contact us' mod='blockcms'}</a></li>
           {foreach from=$cmslinks item=cmslink}
               {if $cmslink.meta_title != ''}
                   <li class="item"><a href="{$cmslink.link|addslashes}" title="{$cmslink.meta_title|escape:'htmlall':'UTF-8'}">{$cmslink.meta_title|escape:'htmlall':'UTF-8'}</a></li>
               {/if}
           {/foreach}
           <li id="header_link_sitemap"><a href="{$link->getPageLink('sitemap')}" title="{l s='sitemap' mod='blockpermanentlinks'}">{l s='Sitemap' mod='blockpermanentlinks'}</a></li>
           {if $display_poweredby}<li class="last_item">{l s='Powered by' mod='blockcms'} <a href="http://www.prestashop.com">PrestaShop</a>™</li>{/if}
       </ul>
   {$footer_text}
   </div>
   <!-- /MODULE Block footer -->
{/if}

SteinCity · December 18, 2012

Oke gedaan, maar het varkentje blijft haha, ik voel me echt een beetje stupid!

Maar als we toch bezig zijn, kan ik dan ook in 1x de cms pagina's zo aanpassen zodat de text in een wit vlak komt zoals bij de producten? Zie hier: http://www.steincity.nl/41-hercules-rmx-dj-console.html

scorpionsworld · December 19, 2012

Oke gedaan, maar het varkentje blijft haha, ik voel me echt een beetje stupid!

Maar als we toch bezig zijn, kan ik dan ook in 1x de cms pagina's zo aanpassen zodat de text in een wit vlak komt zoals bij de producten? Zie hier: http://www.steincity...dj-console.html

Je hebt de blockcms.tpl vervangen met de door mijn gegeven template code? Heb je ook de cache leeg gemaakt?

De text in een wit(is dus eigenlijk grijs) vlak bereik je door in /themes/leo_bike/css/global css, regel 283 met



.rte, .mceContentBody {
text-align: left;
}

te vervangen voor

.rte, .mceContentBody {
text-align: left;
background: none repeat scroll 0 0 #F3F3F3;
border: 1px solid #DEDADE;
border-radius: 5px 5px 5px 5px;
box-shadow: 0 1px 0 #CCCCCC;
float: left;
overflow: hidden;
padding: 3%;
width: 93.9%;
}

Edited December 19, 2012 by scorpionsworld (see edit history)

SteinCity · December 19, 2012

Je hebt de blockcms.tpl vervangen met de door mijn gegeven template code? Heb je ook de cache leeg gemaakt?

De text in een wit(is dus eigenlijk grijs) vlak bereik je door in /themes/leo_bike/css/global css, regel 283 met
.rte, .mceContentBody {
text-align: left;
}
te vervangen voor
.rte, .mceContentBody {
text-align: left;
background: none repeat scroll 0 0 #F3F3F3;
border: 1px solid #DEDADE;
border-radius: 5px 5px 5px 5px;
box-shadow: 0 1px 0 #CCCCCC;
float: left;
overflow: hidden;
padding: 3%;
width: 93.9%;
}

Oké gedaan, maar geen veranderingen, ik heb de cache nu leeg gemaakt.

scorpionsworld · December 19, 2012

Oké gedaan, maar geen veranderingen, ik heb de cache nu leeg gemaakt.

Welke cache precies?

scorpionsworld · December 19, 2012

Waarmee edit en upload je de css en tpl bestanden eigenlijk?

Ik zie namelijk een missend deel in blockcms.css en geen wijzigingen in global.css en blockcms.tpl

SteinCity · December 19, 2012

Welke cache precies?

Browser Cache & de cache van de website.

Waarmee edit en upload je de css en tpl bestanden eigenlijk?

Ik zie namelijk een missend deel in blockcms.css en geen wijzigingen in global.css en blockcms.tpl

Daar lag het aan! Ik gebruik nu SmartFTP en nu lukt het met aanpassen.

Alles even over nieuw gedaan. Maar nu komen de volgende problemen haha.

Zie hier ik krijg nu langs alle texten een randje

Edited December 19, 2012 by SteinCity (see edit history)

scorpionsworld · December 19, 2012

Fuckdeduck die laatste wijziging heeft natuurlijk effect op een hele rits aan div-jes.

Ik zal 's kijken of ik niet gewoon een aangepaste blockcms module voor je kan maken met de gewenste aanpassingen

SteinCity · December 19, 2012

Haha dat kan natuurlijk ook, alvast bedankt voor al je hulp en inzicht!!

Kijk maar als je tijd hebt!

SteinCity · April 11, 2013

Fuckdeduck die laatste wijziging heeft natuurlijk effect op een hele rits aan div-jes.

Ik zal 's kijken of ik niet gewoon een aangepaste blockcms module voor je kan maken met de gewenste aanpassingen

Heb je nog eens tijd gehad??

Column aanpassen

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in