Jump to content
  • разработка интернет магазинов на opencart
  • доработка интернет магазинов на opencart

Как менять растояние между продукими ?


Recommended Posts

чет народ совсем обленился =)

в ..catalogviewthemedefaultstylesheetstylesheet.css:

в .list td добавь свойства:

padding-left: 10px;padding-right: 10px;
только со своими значениями
Link to comment
Share on other sites


Спасибка згделал, но не помогает ! раз сто попропотому чтовал ! гдело в том что у меня между продукими слишком много меси по горизонили,между каждым продуктом, никак не убрать .. :(вот что у меня .list td { text-align: center; vertical-align: top; padding-bottom: 5px; padding-left: 10px;padding-right: 10px;}пропотому чтовал стовить значение 0 ... 1 ..2 все ровно не получаеться

Link to comment
Share on other sites


эмм.. откуда им много меси то?) шаблон у тебя синдартный?как вариант если много меси, то может не расстояние уменьшать, а потому чтольше товаров в ряд сгделать?)в люпотому чтом случае для лучшего понимания ситуации сгделай скриншот, покажи что им у тебя.

Link to comment
Share on other sites


да, шаблон синдартный только этот карпотому чтоновый, черный, я его згделал резиновым посивил #container {

width: 90%;

margin-left: 5%;

margin-right: 5%;

text-align: left;

}

ну и продуким посивил

.list td {

text-align: center;

vertical-align: top;

padding-bottom: 5px;

padding-left: 1px;

padding-right: 1px;

}

проблему все ики решил ...но частично .. гдело было в размере самого продуки, но одно плохо, если открывать в экран по потому чтольше то он в ряд покажет стокоже продуктов сколько покажет на 19 монике .. а если открыть с нет бука ггде ваше моник наверное на 14 .. а вот ка кзгделать что продукты в ряд автоматически сортировались по размеру и разрешению экрана не знаю ..

а продовать буду майки и им нужны потому чтольште фотки.. чтоб сразу этопляло . но и + шас редко кто на слилим разрешений сидит http://farm5.static.flickr.com/4012/4627505628_43fd9df212_b.jpg

ну вобещём спасибка заранее за помошь ! :(

Link to comment
Share on other sites


а ну тогда понятно) я то думал тебе наопотому чторот меси мало между товарами.

тогда гделай ик:

в файле ..catalogviewthemedefaulttemplateproductcategory.tpl найди:

<table class="list">      <?php for ($i = 0; $i < sizeof($products); $i = $i + 4) { ?>      <tr>        <?php for ($j = $i; $j < ($i + 4); $j++) { ?>        <td width="25%"><?php if (isset($products[$j])) { ?>          <a href="<?php echo $products[$j]['href']; ?>"><img src="<?php echo $products[$j]['thumb']; ?>" title="<?php echo $products[$j]['name']; ?>" alt="<?php echo $products[$j]['name']; ?>" /></a>          <a href="<?php echo $products[$j]['href']; ?>"><?php echo $products[$j]['name']; ?></a>          [color= #999; font-size: 11px;]<?php echo $products[$j]['model']; ?>[/color]          <?php if ($display_price) { ?>          <?php if (!$products[$j]['special']) { ?>          [color= #900; font-weight: bold;]<?php echo $products[$j]['price']; ?>[/color]          <?php } else { ?>          [color= #900; font-weight: bold; text-decoration: line-through;]<?php echo $products[$j]['price']; ?>[/color] [color= #F00;]<?php echo $products[$j]['special']; ?>[/color]          <?php } ?>          <?php } ?>          <?php if ($products[$j]['rating']) { ?>          <img src="catalog/view/theme/default/image/stars_<?php echo $products[$j]['rating'] . '.png'; ?>" alt="<?php echo $products[$j]['stars']; ?>" />          <?php } ?>          <?php } ?></td>        <?php } ?>      </tr>      <?php } ?>    </table>

замени на:

<div class="list">      <?php for ($j = 0; $j < sizeof($products); $j++) { ?>        <div style="float: left;"><?php if (isset($products[$j])) { ?>          <a href="<?php echo $products[$j]['href']; ?>"><img src="<?php echo $products[$j]['thumb']; ?>" title="<?php echo $products[$j]['name']; ?>" alt="<?php echo $products[$j]['name']; ?>" /></a>          <a href="<?php echo $products[$j]['href']; ?>"><?php echo $products[$j]['name']; ?></a>          [color= #999; font-size: 11px;]<?php echo $products[$j]['model']; ?>[/color]          <?php if ($display_price) { ?>          <?php if (!$products[$j]['special']) { ?>          [color= #900; font-weight: bold;]<?php echo $products[$j]['price']; ?>[/color]          <?php } else { ?>          [color= #900; font-weight: bold; text-decoration: line-through;]<?php echo $products[$j]['price']; ?>[/color] [color= #F00;]<?php echo $products[$j]['special']; ?>[/color]          <?php } ?>          <?php } ?>          <?php if ($products[$j]['rating']) { ?>          <img src="catalog/view/theme/default/image/stars_<?php echo $products[$j]['rating'] . '.png'; ?>" alt="<?php echo $products[$j]['stars']; ?>" />          <?php } ?>          <?php } ?></div>      <?php } ?>    </div>

в stylesheet.css добавь:

.list div {	text-align: center;	vertical-align: top;	padding-bottom: 5px;	padding-left: 1px; // расстояние теперьь бугдет мнонькое, этими параметрами пригдется расширятьpadding-right: 1px;;}

и впринципе у тебя товары будут размещаться по ширине, хоть 100 штук если монитор икой найгдешь, как место кончается они спрыгивают на другой ряд.

Link to comment
Share on other sites


СпасибкаТебе огромное :( но всеже чтото не полулилось .. врогде все заменил как написал ты .. проверил нифига, если гделаешь мнонкое окно браузера то продукты выходят за рамки в право..

вот ксити и сам код что изменил

/catalog/view/theme/default/template/product/category.tpl

<?php echo $header; ?><?php echo $column_left; ?><?php echo $column_right; ?><div id="content">  <div class="top">    <div class="left"></div>    <div class="right"></div>    <div class="center">      <h1><?php echo $heading_title; ?></h1>    </div>  </div>  <div class="middle">    <?php if ($description) { ?>    <div style="margin-bottom: 15px;"><?php echo $description; ?></div>    <?php } ?>    <?php if ($categories) { ?>    <table class="list">      <?php for ($i = 0; $i < sizeof($categories); $i = $i + 4) { ?>      <tr>        <?php for ($j = $i; $j < ($i + 4); $j++) { ?>        <td width="25%"><?php if (isset($categories[$j])) { ?>          <a href="<?php echo $categories[$j]['href']; ?>"><img src="<?php echo $categories[$j]['thumb']; ?>" title="<?php echo $categories[$j]['name']; ?>" alt="<?php echo $categories[$j]['name']; ?>" style="margin-bottom: 3px;" /></a>          <a href="<?php echo $categories[$j]['href']; ?>"><?php echo $categories[$j]['name']; ?></a>          <?php } ?></td>        <?php } ?>      </tr>      <?php } ?>    </table>    <?php } ?>    <?php if ($products) { ?>    <div class="sort">      <div class="div1">        <select name="sort" onchange="location = this.value">          <?php foreach ($sorts as $sorts) { ?>          <?php if (($sort . '-' . $order) == $sorts['value']) { ?>          <option value="<?php echo $sorts['href']; ?>" selected="selected"><?php echo $sorts['text']; ?></option>          <?php } else { ?>          <option value="<?php echo $sorts['href']; ?>"><?php echo $sorts['text']; ?></option>          <?php } ?>          <?php } ?>        </select>      </div>      <div class="div2"><?php echo $text_sort; ?></div>    </div><div class="list">      <?php for ($j = 0; $j < sizeof($products); $j++) { ?>        <div style="float: left;"><?php if (isset($products[$j])) { ?>          <a href="<?php echo $products[$j]['href']; ?>"><img src="<?php echo $products[$j]['thumb']; ?>" title="<?php echo $products[$j]['name']; ?>" alt="<?php echo $products[$j]['name']; ?>" /></a>          <a href="<?php echo $products[$j]['href']; ?>"><?php echo $products[$j]['name']; ?></a>          [color= #999; font-size: 11px;]<?php echo $products[$j]['model']; ?>[/color]          <?php if ($display_price) { ?>          <?php if (!$products[$j]['special']) { ?>          [color= #900; font-weight: bold;]<?php echo $products[$j]['price']; ?>[/color]          <?php } else { ?>          [color= #900; font-weight: bold; text-decoration: line-through;]<?php echo $products[$j]['price']; ?>[/color] [color= #F00;]<?php echo $products[$j]['special']; ?>[/color]          <?php } ?>          <?php } ?>          <?php if ($products[$j]['rating']) { ?>          <img src="catalog/view/theme/default/image/stars_<?php echo $products[$j]['rating'] . '.png'; ?>" alt="<?php echo $products[$j]['stars']; ?>" />          <?php } ?>          <?php } ?></div>      <?php } ?>    </div>  <div class="bottom">    <div class="left"></div>    <div class="right"></div>    <div class="center"></div>  </div></div><?php echo $footer; ?>

Ну и этот

/catalog/view/theme/cc_carbon_tab/stylesheet/stylesheet.css

пропотому чтовал и catalogviewthemedefaulttemplateproductcategory.tpl поменять но ик как я использую этот темплэйт то им нихрена не рилииет ваещё :( но всеж попропотому чтовал :)

html {	overflow: -moz-scrollbars-vertical;	margin: 0;	padding: 0;}* {	font-family: Arial, Helvetica, sans-serif;}body {	margin: 0px;	padding: 0px;	text-align: center;}body, td, th, input, textarea, select, a {	font-size: 12px;}form {	padding: 0;	margin: 0;	display: inline;}input, textarea, select {	margin: 3px 0px;}a, a:visited {	color: #1B57A3;	text-decoration: underline;	cursor: pointer;}a:hover {	text-decoration: none;}a img {	border: none;}p {	margin-top: 0px;}/* layout */ #container {    width: 80%;    margin-left: 10%;   margin-right: 10%;     text-align: left;}#header .div2 {	float: left;	padding-top: 15px;	padding-left: 15px;}#header .div3 {	float: right;	padding-top: 7px;	height: 38px;}#header .div3 a {	margin-left: 15px;	padding: 1px 0px 2px 20px;	background-repeat: no-repeat;	background-position: left center;}#header .div4 {	width: 510px;	clear: right;	float: right;	height: 32px;	padding-right: 14px;}#header .div4 a {	float: left;	margin-right: 2px;	width: 100px;	height: 18px;	padding-top: 9px;	padding-bottom: 9px;	background: url('../image/tab_1.png') no-repeat;	text-align: center;	color: #333333;	text-decoration: none;	font-size: 14px;	font-weight: bold;	position: relative;	z-index: 1;}#header .div4 a.selected {	background: url('../image/tab_2.png') no-repeat;	color: #FFF;	padding-bottom: 10px;	z-index: 3;}#header .div5 {	clear: both;}#header .div5 .left {	background: url('../image/header_1_left.png') no-repeat;	width: 5px;	height: 40px;	float: left;}#header .div5 .right {	background: url('../image/header_1_right.png') no-repeat;	width: 5px;	height: 40px;	float: right;}#header .div5 .center {	background: url('../image/header_1_center.png') repeat-x;	height: 40px;	margin-left: 5px;	margin-right: 5px;}#header .div6 {	clear: both;	margin-bottom: 10px;}#header .div6 .left {	background: url('../image/header_2_left.png') no-repeat;	width: 5px;	height: 32px;	float: left;}#header .div6 .right {	background: url('../image/header_2_right.png') no-repeat;	width: 5px;	height: 32px;	float: right;}#header .div6 .center {	background: url('../image/header_2_center.png') repeat-x;	height: 32px;	margin-left: 5px;	margin-right: 5px;	padding-left: 5px;	padding-right: 5px;}#header .div7 {	float: right;	padding-top: 2px;}#header .div8 {	float: left; margin-top: 6px;}#header .div9 {	float: left;}#header .div10 {	float: left; 	margin-top: 2px;	}#search {	padding-top: 7px;	padding-left: 5px;	color: #FFF;	font-weight: bold;}#search select {	border: 1px solid #0A5391;	padding: 1px;}#search a {	color: #FFF;}#search input {	border: 1px solid #0A5391;	padding: 2px;}#breadcrumb {	float: left;	padding-top: 7px;	padding-bottom: 11px;	height: 13px;	margin-bottom: 10px;	color: #000000;}.switcher {	float: right;		margin-top: 3px;	margin-left: 10px;}.switcher a {	text-decoration: none;	display: block;}.switcher .selected {	background: #FFFFFF url('../image/switcher.png') repeat-x;}.switcher .selected a {	border: 1px solid #CCCCCC;	background: url('../image/arrow_down.png') 116px center no-repeat;	color: #666666;	padding: 2px 5px 2px 5px;	width: 121px;}.switcher .selected a:hover {	background: #F0F0F0 url('../image/arrow_down.png') 116px center no-repeat;}.switcher .option {		position: absolute;	z-index: 3;	border-left: 1px solid #CCCCCC;	border-right: 1px solid #CCCCCC;	border-bottom: 1px solid #CCCCCC;	background-color: #EEEEEE;	display: none;	width: 131px;}.switcher .option a {	color: #000;	padding: 3px 5px 3px 5px;}.switcher .option a:hover {	background: #FFC;}.switcher img {	position: relative;	top: 1px;}#column_left {	float: left;	width: 180px;	margin-right: 10px;	clear: left;}#column_right {	float: right;	width: 180px;	margin-left: 10px;	clear: right;}#content {	margin-left: 190px;	margin-right: 190px;	margin-bottom: 10px;}#content .top .left {	background: url('../image/content_top_left.png') no-repeat;	width: 5px;	height: 32px;	float: left;}#content .top .right {	background: url('../image/content_top_right.png') no-repeat;	width: 5px;	height: 32px;	float: right;}#content .top .center {	background: url('../image/content_top_center.png') repeat-x;	margin-left: 5px;	margin-right: 5px;}#content .top h1 {	padding: 8px 0px 8px 7px;}#content h1, .heading {	color: #FFFFFF;	font-size: 14px;	font-family: Arial, Helvetica, sans-serif;	font-weight: bold;	text-transform: uppercase;	margin: 0px;}.heading {	border-bottom: 1px solid #333333;	padding-bottom: 3px;	margin-bottom: 10px;}#content .middle {	border-left: 1px solid #333333;	border-right: 1px solid #333333;	background: #FFFFFF;	padding: 10px 10px 1px 10px;	min-height: 380px;}#content .bottom .left {	background: url('../image/content_bottom_left.png') no-repeat;	width: 5px;	height: 5px;	float: left;}#content .bottom .right {	background: url('../image/content_bottom_right.png') no-repeat;	width: 5px;	height: 5px;	float: right;}#content .bottom .center {	background: url('../image/content_bottom_center.png') repeat-x;	height: 5px;	margin-left: 5px;	margin-right: 5px;}.box {	margin-bottom: 10px;	background: url('../image/box_top.png') no-repeat;}.box .top {	padding: 8px 0px 8px 7px;	color: #FFFFFF;	font-size: 14px;	font-family: Arial, Helvetica, sans-serif;	font-weight: bold;	text-transform: uppercase;}.box .top img {	float: left;	margin-right: 5px;}.box .middle {	border-left: 1px solid #333333;	border-right: 1px solid #333333;	background: #FFFFFF;	padding: 10px;}.box .bottom {	height: 5px;	background: url('../image/box_bottom.png') no-repeat;}.success {	padding: 5px 0px;	margin-bottom: 10px;	background: #E4F1C9;	border: 1px solid #A5BD71;	font-size: 11px;	font-family: Verdana, Geneva, sans-serif;	text-align: center;}.warning {	padding: 5px 0px;	margin-bottom: 10px;	background: #FFDFE0;	border: 1px solid #FF9999;	font-size: 11px;	font-family: Verdana, Geneva, sans-serif;	text-align: center;}.wait {	padding: 5px 0px;	margin-bottom: 10px;	background: #FBFAEA;	border: 1px solid #EFEBAA;	font-size: 11px;	font-family: Verdana, Geneva, sans-serif;	text-align: center;}.required {	color: #FF0000;	font-weight: bold;}.error {	color: #FF0000;	display: block;}.help {	cursor: pointer;}.tooltip {	border: 1px solid #FDDA5C;	background: #FBFF95;	padding: 5px;	font-size: 11px;	width: 250px;}.clear { /* generic container (i.e. div) for floating buttons */	overflow: hidden;	width: 100%;}.button {	padding-left: 8px;	display: inline-block;	margin-right: 5px;	background: url('../image/button_left.png') top left no-repeat;	text-decoration: none;	color:#FFF;}.button span {	color: #FFF;	display: block;	padding: 4px 12px 5px 5px;	background: url('../image/button_right.png') top right no-repeat;}.buttons {	background: #F8F8F8;	border: 1px solid #DDDDDD;	padding: 5px;	margin-bottom: 10px;}.buttons input {	padding: 0px;	margin: 0px;}.buttons table {	width: 100%;	border-collapse: collapse;}.buttons table td {	vertical-align: middle;}.content {	background: #F7F7F7;	border: 1px solid #DDDDDD;	padding: 10px;	margin-top: 3px;	margin-bottom: 10px;}.list {	margin-bottom: 10px;        width: 100%;	}.list div {   text-align: center;   vertical-align: top;   padding-bottom: 5px;   padding-left: 1px; padding-right: 1px;}.list td {	        text-align: center;	vertical-align: top;	padding-bottom: 5px;	padding-left: 1px;padding-right: 1px;}.sort {	margin-bottom: 10px;	background: #F8F8F8;	height: 30px;	width: 100%;}.sort .div1 {	float: right;	margin-left: 5px;	padding-top: 6px;	padding-right: 9px;}.sort .div2 {	text-align: right;	padding-top: 9px;}.sort select {	font-size: 11px;	margin: 0;	padding: 0;}.pagination {	display: inline-block;	width: 100%;	background: #F8F8F8;	margin-bottom: 10px;}.pagination .links, .pagination .results {	padding: 7px;}.pagination .links {	float: left;}.pagination .links a {	border: 1px solid #CCCCCC;	padding: 4px 7px;	text-decoration: none;	color: #000000;}.pagination .links b {	border: 1px solid #CCCCCC;	padding: 4px 7px;	text-decoration: none;	color: #000000;	background: #FFFFFF;}.pagination .results {	float: right;}.tabs {	width: 100%;	height: 31px;	margin-bottom: 0px;}.tabs a {	float: left;	display: block;	padding: 6px 15px 7px 15px;	margin-right: 2px;	border-top: 1px solid #DDDDDD;	border-bottom: 1px solid #DDDDDD;	border-left: 1px solid #DDDDDD;	border-right: 1px solid #DDDDDD;	background: #FFFFFF url('../image/tab_3.png') repeat-x;	color: #000000;	font-weight: bold;	font-size: 13px;	text-decoration: none;	z-index: 1;	position: relative;	top: 1px;}.tabs a.selected {	background: #FFFFFF url('../image/tab_3.png') repeat-x;	border-bottom: 0px;	padding-bottom: 8px;	z-index: 3;}.tab_page {	border: 1px solid #DDDDDD;	background: #FFFFFF;	padding: 10px;	display: block;	z-index: 2;	margin-bottom: 10px;}#footer {	width: 100%;	clear: both;	padding-top: 5px;	border-top: 1px solid #DDDDDD;}#footer .div1 {	float: left;	text-align: left;}#footer .div2 {	float: right;	text-align: right;}#category ul {	margin-top: 0px;	margin-bottom: 0px;	margin-left: 8px;	padding-left: 12px;	list-style: url('../image/bullet_1.png');}#information ul {	margin-top: 0px;	margin-bottom: 0px;	margin-left: 8px;	padding-left: 12px;	list-style: url('../image/bullet_2.png');}.cart {	border-collapse: collapse;	width: 100%;	border: 1px solid #EEEEEE;	margin-bottom: 10px;}.cart th {	background: #EEEEEE;	padding: 5px;	font-weight: normal;}.cart td {	padding: 5px;}
Link to comment
Share on other sites


Если я правильно понял проблему , то я лично себе менял расстояние между товарами добавлением :

cellspacing="5">

меняешь цифру "5" подстраиваясь под свои нужды

Link to comment
Share on other sites


у него проблема не в том чтобы потому чтольше сгделать расстояние, а наопотому чторот, чтобы сократить, ик что этоллспейсинг тут не вариант)

Link to comment
Share on other sites


А может ну его с этим резиновым шаблоном, :)) думаю только потому чтольше гемороя прибавит и везгде по разному смотретсья бугдет, я тут подумал и решил осиновитсья на разрешиний 1100 по ширине http://www.plexmall.com, все ики я футпотому чтолки продовать буду, а контингент у меня подразумеваетсья что бугдет молодым, зналит у них и моники с высоким разрешением, ик что я думаю можно попасть в точку .. просто если меньше то не хваиет меси для 4 продуктов в ряд т еше и менюшкам по сторонам .. может кто позскажет как можно регулировать когдачество продуктов в ряд, ну чтоб можно было в ручную сивить, 3-4-5 ..

Fix305, Тебе особенное спасибo за терпение выслушать и желание помочь :()

Link to comment
Share on other sites


  • 6 months later...

Подскажите можно ли как то поменять расстояние между продукими в потому чтольшую сторону? Уже замулилась мучаться)))) Заранее благодарю!

Link to comment
Share on other sites


Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.

×
×
  • Create New...

Important Information

On our site, cookies are used and personal data is processed to improve the user interface. To find out what and what personal data we are processing, please go to the link. If you click "I agree," it means that you understand and accept all the conditions specified in this Privacy Notice.