Микс-Товары: Оформление блока «Где Купить»

06 Июл 2011 в 04:41

Рекламные материалы в Микс-Товарах имеют неоспоримые преимущества – гибкие и практически безграничные возможности по их визуальному оформлению. Я уже рассказывал о том, как можно довольно просто оформить с помощью CSS блоки контекстного товара, а сегодня расскажу, как можно по своему оформить блок «Где Купить».

Если в случае с контекстным товаром была возможность самому регулировать местоположение тех или иных частей рекламного блока, то с блоком «Где Купить» такой возможности не будет, поэтому всё оформление сводится к знанию CSS.

По умолчанию в рекламном блоке используются стандартные стили, которые каждый желающий может увидеть, пройдя по этой ссылке, а сегодня я приведу маленький примерчик того как можно, прописав свои стили в CSS, изменить внешний вид блока «Где купить».

К примеру, для того что бы сделать вот такое оформление блока:

нем всего навсего нужно сделать вот такой вот простенький CSS:

div#mixgk{
	border-radius:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	overflow:hidden;
	width:630px;
}
div#mixgk div.mm-header{
	font-family:Arial, Helvetica, sans-serif;
	background:url(mm-bg.jpg) repeat-x;
	padding:7px 10px 6px 10px;
	margin:0px 0px 1px 0px;
} 
div#mixgk span.mm-header-text{
	padding:0px;
	background:none;
	font-size:13px;
	font-weight:normal;
	color:#fff;
}  
div#mixgk span.mm-header-text span{
	display:block;
	background:none;
	font-size:17px;
	font-weight:bold;
	color:#fff;
}                                                                                
div#mixgk div.mm-goods{
	border:none !important;
	padding:0px 0px 0px 0px;
	margin:0px;
	font-family:Arial, Helvetica, sans-serif;
	font-size:13px;
}
div#mixgk div.mm-good{
	height:49px;
	width:728px;
	position:relative;
	margin:0px 0px 1px 0px;
	background:#eee;
} 
div#mixgk div.mm-good-header{
	background:none;
	padding:0px;	
}
div#mixgk div.mm-good-header a{
	color:#518413;
	text-decoration:none;
	display:block;
	height:16px;
	width:470px;
	overflow:hidden;
	font-weight:bold;
	position:absolute;
	top:7px;
	left:10px;
	z-index:2;
}
div#mixgk div.mm-good-header a:hover{
	text-decoration:underline;
}
div#mixgk span.mm-good-price{
	display:block;
	position:absolute;
	top:10px;
	right:10px;
	font-size:15px;
	margin:0px;
	padding:5px 7px 4px 6px;
	border-radius:3px;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	border:#ddd solid 1px;
	background:#fff;
	color:#666;
} 
div#mixgk div.mm-good-desc{
	position:relative;
	width:620px;
	height:22px;
	padding:27px 0px 0px 10px;
	font-size:12px;
	color:#666;
	z-index:1;
} 
div#mixgk div.mm-paginator{
	padding:8px 5px 9px 10px;
	border:none;
	background:#f5f5f5;
	font-family:Arial, Helvetica, sans-serif;
	font-size:13px;
	margin:0px 0px 0px 0px;
	color:#666;
}
div#mixgk div.mm-paginator a{
	color:#518413;
}
div#mixgk div.mm-pages{
	display:block;
}

Хочу обратить Ваше внимание на id «mixgk» и открыть маленький серкет. По умолчанию система выдаёт нам код, в котором ничего менять нельзя, но если очень захотеть, то немного можно:

<!-- разместите на месте показа блока -->
<div id="mixgk_XXXXXXXXXX"></div>
 
<!-- разместите в самом конце страницы, перед тегом </body> -->
<script>
document.write('<scr ' + 'ipt language="javascript" type="text/javascript" src="http://1111111111.gk.mixmarket.biz/1111111111/?type=vert&pagesize=5&brand=&model=&cat_id=&div=mixgk_XXXXXXXXXX&r=' + escape(document.referrer) + '&rnd=' + Math.round(Math.random() * 100000) + '" charset="windows-1251">< ' + '/scr' + 'ipt>');
</scr></script>

Единственное, что можно в этом коде поменять это id, который по умолчанию выглядит так «mixgk_XXXXXXXXXX» и указывается в двух местах, в коде вызова JavaScript`а и непосредственно в id блока, где он должен отображаться. Так вот вместо этого громоздкого «mixgk_XXXXXXXXXX» я оставил лишь «mixgk». Все классы в CSS я наследовал от «mixgk», что бы точно перебить все стандартные стили, которые в любом случае подгружаются по умолчанию.

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

Если у вас возникнут какие-либо вопросы по поводу оформления блоков, то смело задавайте их в комментариях.

Александр Кузнецов
Специалист по работе с ключевыми партнерами Партнерской сети Миксмаркет
Комментарии: 2
  1. wmk:

    Хороший такой css получился. Особенно про «простенький» понравилось :)

Оставить комментарий