Перейти к содержимому


Разметка

Автор Fobas, 27 авг. 2013 15:35

  • Авторизуйтесь для ответа в теме
Сообщений в теме: 17

#1 Fobas

Fobas

    Пользователь

  • Пользователи
  • PipPip
  • 24 сообщений

Отправлено 27 Август 2013 - 15:35

Привет. Пдскажите как сделать разметку в шапке сайта. вот так Снимок.JPG
И еще как сделать 1 заглавную букву в ссылках2.JPG , сделать другой шрифт .1.JPG и войти в лк подвинуть к правому краю.

#2 Fobas

Fobas

    Пользователь

  • Пользователи
  • PipPip
  • 24 сообщений

Отправлено 27 Август 2013 - 16:18

И еще как сделать что бы показывалось сколько товаров к корзине а не на сколько рублей. Ну а если там ничего нету писалось пусто.Снимок.JPG

#3 Taisia

Taisia

    Активный участник

  • Модератоpы
  • 1 289 сообщений

Отправлено 27 Август 2013 - 16:35

Сейчас ваши иконки соц.сетей это часть одной картинки шапки - можно убедиться пройдя по ссылке

что бы делать какие либо действия с ними есть два варианта.
Первый - вы просто продолжаете так же менять вашу шапку в каком-нибудь графическом редакторе (т.е. в фотошопе например делаете вашу разметку для картинок и снова грузите на сайт)
Второй - вы вырезаете отдельно каждую иконку соц.сети и делаете средствами css блок с иконками которому задаете нужный фон и необходимые эффекты.

касательно первой заглавной - у вас сейчас все указанные ссылки написаны строчными буками, уточните вы хотите изменить их написание на прописные буквы и каждому начальному слову оставить заглавную ?

шрифт вы можете менять в файле Main.css (админка магазина, вкладка САйт - Редактор шаблонов- файл main.css)
Найдите код

#mainmenu li a{
font: bold 12px/40px Helvetica, Tahoma, Arial, sans-serif;
color: #FFF;
display: block;
float: left;
.....
......
......

и меняйте в нем параметр
font: bold 12px/40px Helvetica, Tahoma, Arial, sans-serif; где  Helvetica, Tahoma, Arial - это названия шрифтов
подробней об этом параметре можно почитать тут

что бы сдвинуть пункты меню правее добавьте в коней файла main.css код

#top-menu .pad-box {
margin-left: 100px;
}

меняйте значение этого параметра на нужное вам.

#4 Fobas

Fobas

    Пользователь

  • Пользователи
  • PipPip
  • 24 сообщений

Отправлено 27 Август 2013 - 17:25

Просмотр сообщенияTaisia (27 Август 2013 - 16:35) писал:


Сейчас ваши иконки соц.сетей это часть одной картинки шапки - можно убедиться пройдя http://sballs.storel...er_page.png"]по ссылке[/url]

что бы делать какие либо действия с ними есть два варианта.
Первый - вы просто продолжаете так же менять вашу шапку в каком-нибудь графическом редакторе (т.е. в фотошопен апример делаете вашу разметку для картинок и снова грузите на сайт)
Второй - вы вырезаете отдельно каждую иконку соц.сети и делаете средствами css блок с иконками которому задаете нужный фон и необходимые эффекты.

касательно первой заглавной - у вас сейчас все указанные ссылки написаны строчными буками, уточните вы хотите изменить их написание на прописные буквы и каждому начальному слову оставить заглавную ?

шрифт вы можете менять в файле Main.css (админка магазина, вкладка САйт - Редактор шаблонов- файл main.css)
Найдите код 

[/background]
[background=rgba(255,255,255,0)]#mainmenu li a{[/background]
[background=rgba(255,255,255,0)] font: bold 12px/40px Helvetica, Tahoma, Arial, sans-serif;[/background]
[background=rgba(255,255,255,0)] color: #FFF;[/background]
[background=rgba(255,255,255,0)] display: block;[/background]
[background=rgba(255,255,255,0)] float: left;[/background]
[background=rgba(255,255,255,0)].....[/background]
[background=rgba(255,255,255,0)]......[/background]
[background=rgba(255,255,255,0)]......[/background]
[background=rgba(255,255,255,0)]


и меняйте в нем параметр
font: bold 12px/40px Helvetica, Tahoma, Arial, sans-serif; где  Helvetica, Tahoma, Arial - это названия шрифтов
подробней об этом параметре можно почитать http://htmlbook.ru/css/font"]тут [/url]

что бы сдвинуть пункты меню правее добавьте в коней файла main.css код 

[/background]
[background=rgba(255,255,255,0)]#top-menu .pad-box {[/background]
[background=rgba(255,255,255,0)] margin-left: 100px;[/background]
[background=rgba(255,255,255,0)]}[/background]
[background=rgba(255,255,255,0)]


меняйте значение этого параметра на нужное вам.


С последним кодом разобрался.
Далее, разметка я не знал что в фотографе можно делать разметку, если только мы не говорим о двух разных вещах. Я. Имел ввиду разметку и добавление туда ссылки. У меня есть код 
<map name="#headmap">
<area shape="rect" alt="https://twitter.com/SBalls_ru" title="" coords="1357,35,1411,87" href="https://twitter.com/SBalls_ru" target="_blank" />
<area shape="rect" alt="" title="" coords="1301,34,1355,89" href="https://www.facebook.com/pages/Sballsru/550454738343130" target="_blank" />
<area shape="rect" alt="https://www.Sballs.ru" title="" coords="1239,34,1299,89" href="http://www.odnoklassniki.ru/profile/554893614704" target="_blank" />
<area shape="rect" alt="https://www.Sballs.ru" title="" coords="1189,35,1239,86" href="http://sballs.storeland.ru/feedback" target="_blank" />
<area shape="rect" alt="https://www.Sballs.ru" title="" coords="1132,34,1188,89" href="https://www.vk.com/" target="_blank" />
<area shape="rect" alt="Корзина" title="" coords="844,28,913,90" href="http://sballs.storeland.ru/cart" target="" />
<!-- Created by Online Image Map Editor (http://www.maschek.hu/imagemap/index) --></map>

я думал его куда то пристроить. Подойдет ли он или нет?



Kасательно первой заглавной, если они все сейчас строчные то нужно сделать 1 букву прописной.


Шрифт Поменял на aria.


Изображение

#5 Taisia

Taisia

    Активный участник

  • Модератоpы
  • 1 289 сообщений

Отправлено 27 Август 2013 - 17:30

Что бы изменить вывод информации о корзине найдите в вашем файле HTML (вкладка сайт-редактор шаблонов) код 
<!-- Корзина -->
	  <div id="cartInfo">
		<a href="{CART_URL}">в корзине товаров на</a>:
		<span id="cartSum">
		  {% IF cart_count_empty %}
			<span>0</span> {CURRENCY_NAME}
		  {% ELSE %}
			{% FOR cart_sum %}
			  <span class="num">{cart_sum.NOW | money_format}</span><br />
			{% ENDFOR %}
		  {% ENDIF %}
		</span>
	  </div>
	  <!-- end Корзина -->


и замените на код 

   <!-- Корзина -->
	  <div id="cartInfo">
	  <span>Товаров в <a href="{CART_URL}" class="underline"> корзине</a>:</span>
				<span>
				  {% IF cart_count_empty %}
					<span class="red">0</span> шт.
				  {% ELSE %}
					{% FOR cart_count %}
					  {cart_count.COUNT}{cart_count.MEASURE_NAME}{% IFNOT cart_count.last %},{% ENDIF %}
					{% ENDFOR %}
				  {% ENDIF %}
				</span>
			   
	  </div>
	  <!-- end Корзина -->

далее в файле main.css найдите код 

#cartInfo {
  position:absolute;
  font-size: 13px;
  top: 54px;
  left: 380px;
  white-space:nowrap;
  overflow:hidden;
  height:20px;
  width: 340px;
}

и замените на код 

#cartInfo {
  position:absolute;
  font-size: 13px;
  top: 54px;
  left: 445px;
  white-space:nowrap;
  overflow:hidden;
  height:20px;
  width: 240px;
}

там же найдите код 

#cartInfo a {
  color:#000;
  text-transform: uppercase;
  padding:5px 0px 5px 45px;
}

и замените на код 

#cartInfo a {
  color:#000;
  padding:5px 0px 5px 5px;
}

#6 Taisia

Taisia

    Активный участник

  • Модератоpы
  • 1 289 сообщений

Отправлено 27 Август 2013 - 17:39

прошу прощения запутала .. у вас буквы сейчас все прописные
что бы оставить прописной только первую букву найдите в файле main.css код 

#mainmenu li a{
  font: bold 12px/40px  Arial, Tahoma, sans-serif;
  color: #FFF;
  display: block;
  float: left;
  padding-right: 15px;
  padding-left: 15px;
  text-transform: uppercase;
  .......
  ......
  ........

и замените в нем параметр

  text-transform: uppercase;

на  такой 

  text-transform: none;

Тоже самое и для правой колонки найдите код 

.leftmenu li h2 {
  font: bold 17px/20px Helvetica, "Trebuchet MS", Arial, sans-serif;
  color: #069;
  text-transform: uppercase;
}

и редактируйте параметр

  text-transform: uppercase;

#7 Fobas

Fobas

    Пользователь

  • Пользователи
  • PipPip
  • 24 сообщений

Отправлено 27 Август 2013 - 17:41

О'кей. Вроде вышло норм только давайте сделаем, что бы "0" был черным и был 2x чем " шт" вот так например 0.

#8 Fobas

Fobas

    Пользователь

  • Пользователи
  • PipPip
  • 24 сообщений

Отправлено 27 Август 2013 - 17:47

Просмотр сообщенияTaisia (27 Август 2013 - 17:39) писал:

прошу прощения запутала .. у вас буквы сейчас все прописные
что бы оставить прописной только первую букву найдите в файле main.css код

#mainmenu li a{
font: bold 12px/40px Arial, Tahoma, sans-serif;
color: #FFF;
display: block;
float: left;
padding-right: 15px;
padding-left: 15px;
text-transform: uppercase;
.......
......
........

и замените в нем параметр

  text-transform: uppercase;

на  такой

text-transform: none;

Тоже самое и для правой колонки найдите код

.leftmenu li h2 {
font: bold 17px/20px Helvetica, "Trebuchet MS", Arial, sans-serif;
color: #069;
text-transform: uppercase;
}

и редактируйте параметр

  text-transform: uppercase;
Готово, получилось как хотел. спасибо!

#9 Taisia

Taisia

    Активный участник

  • Модератоpы
  • 1 289 сообщений

Отправлено 27 Август 2013 - 17:55

Просмотр сообщенияFobas (27 Август 2013 - 17:41) писал:

О'кей. Вроде вышло норм только давайте сделаем, что бы "0" был черным и был 2x чем " шт" вот так например 0.

Найдите в MAin.css код 

#cartInfo {
  position:absolute;
  font-size: 13px;
  top: 54px;
  left: 445px;
  white-space:nowrap;
  overflow:hidden;
  height:20px;
  width: 240px;
}

и замените на код 

#cartInfo {
  position:absolute;
  font-size: 13px;
  top: 47px;
  left: 445px;
  white-space:nowrap;
  overflow:hidden;
  height: 32px;
  width: 240px;
}

там же найдите код 
.red						{color:red;}

и замените на код 
.red						{color:red; font-size:25px;}

#10 Fobas

Fobas

    Пользователь

  • Пользователи
  • PipPip
  • 24 сообщений

Отправлено 27 Август 2013 - 18:02

А можно сделать 0 , как и весь текст черным?

#11 Taisia

Taisia

    Активный участник

  • Модератоpы
  • 1 289 сообщений

Отправлено 27 Август 2013 - 18:06

Цитата

С последним кодом разобрался.
Далее, разметка я не знал что в фотографе можно делать разметку, если только мы не говорим о двух разных вещах. Я. Имел ввиду разметку и добавление туда ссылки. У меня есть код
<map name="#headmap">
<area shape="rect" alt="https://twitter.com/SBalls_ru" title="" coords="1357,35,1411,87" href="https://twitter.com/SBalls_ru" target="_blank" />
<area shape="rect" alt="" title="" coords="1301,34,1355,89" href="https://www.facebook...50454738343130" target="_blank" />
<area shape="rect" alt="https://www.Sballs.ru" title="" coords="1239,34,1299,89" href="http://www.odnoklass...e/554893614704" target="_blank" />
<area shape="rect" alt="https://www.Sballs.ru" title="" coords="1189,35,1239,86" href="http://sballs.storel...nd.ru/feedback" target="_blank" />
<area shape="rect" alt="https://www.Sballs.ru" title="" coords="1132,34,1188,89" href="https://www.vk.com/" target="_blank" />
<area shape="rect" alt="Корзина" title="" coords="844,28,913,90" href="http://sballs.storeland.ru/cart" target="" />
<!-- Created by Online Image Map Editor (http://www.maschek.hu/imagemap/index) --></map>

я думал его куда то пристроить. Подойдет ли он или нет?

тег Map  задается для изображения которое вставлено через тег <img>
Изображение вашей шапки выводится на сайт как свойство background тега <div>
что бы применить тег map  к изображению вам нужно его вырезать и вставить в на сайт в теги  <img>

Просмотр сообщенияFobas (27 Август 2013 - 18:02) писал:

А можно сделать 0 , как и весь текст черным?

там же в коде 
.red											{color:red; font-size:25px;}

замените параметр color:red;  на color:black;

#12 Fobas

Fobas

    Пользователь

  • Пользователи
  • PipPip
  • 24 сообщений

Отправлено 27 Август 2013 - 18:22

Я не очень понял , что там с  тегами. Мне нужно найти в HTML теги Img  и вконеце вставить мой код?

#13 Taisia

Taisia

    Активный участник

  • Модератоpы
  • 1 289 сообщений

Отправлено 27 Август 2013 - 19:36

сделайте лучше так
в конец файла main.css добавьте код 

#sots {
	position: absolute;
	top: 12px;
	left: 651px;
	width: 300px;
	height: 100px;
}
#vkc {
	width: 57px;
	height: 54px;
	position: absolute;
}
div#vkc:hover {
   
   background-color: rgba(255, 255, 255, 0.3);
  
}
div#fc:hover {
   
   background-color: rgba(255, 255, 255, 0.3);
  
}
div#od:hover {
   
   background-color: rgba(255, 255, 255, 0.3);
  
}
div#gm:hover {
   
   background-color: rgba(255, 255, 255, 0.3);
  
}
div#tw:hover {
   
   background-color: rgba(255, 255, 255, 0.3);
  
}
#svks {
	height: 57px;
	position: absolute;
	top: 22px;
	z-index: 9999;
}
#gms {
	height: 57px;
	position: absolute;
	top: 16px;
}
#gm {
	width: 51px;
	height: 54px;
	left: 57px;
	position: absolute;
	top: 6px;
}
#odc {
	height: 57px;
	position: absolute;
	top: 16px;
	left: 51px;
}
#od {
	width: 61px;
	height: 54px;
	left: 57px;
	position: absolute;
	top: 6px;
}
#fcc {
	height: 57px;
	position: absolute;
	top: 16px;
	left: 51px;
}
#fc {
	width: 55px;
	height: 54px;
	left: 118px;
	position: absolute;
	top: 6px;
}
#twc {
	height: 57px;
	position: absolute;
	top: 16px;
	left: 51px;
}
#tw {
	width: 55px;
	height: 54px;
	left: 174px;
	position: absolute;
	top: 6px;
}


в коде файла html найдите 

</div>
		  <!-- end Корзина -->

и после него вставьте код 

<div id="sots"><a id="svks" href="https://www.vk.com/" target="_blank"><div id="vkc">&nbsp;</div></a><a id="gms" href="http://sballs.storeland.ru/feedback" target="_blank"><div id="gm">&nbsp;</div></a><a id="odc" href="http://www.odnoklassniki.ru/profile/554893614704" target="_blank"><div id="od">&nbsp;</div></a><a id="fcc" href="https://www.facebook.com/pages/Sballsru/550454738343130" target="_blank"><div id="fc">&nbsp;</div></a><a id="twc" href="https://www.facebook.com/pages/Sballsru/550454738343130" target="_blank"><div id="tw">&nbsp;</div></a></div>

#14 Fobas

Fobas

    Пользователь

  • Пользователи
  • PipPip
  • 24 сообщений

Отправлено 27 Август 2013 - 20:08

Хорошо, можно еще корзину сделать кликабельной и без подцветки, при наведении?

#15 Taisia

Taisia

    Активный участник

  • Модератоpы
  • 1 289 сообщений

Отправлено 27 Август 2013 - 21:07

для корзины найдите в файле html код 
<div id="cartInfo">

ПЕРЕД ним вставьте код 

<a id="kor" href="http://sballs.storeland.ru/cart" class="underline">&nbsp;</a>

далее в файле main.css в конец вставьте код 

#kor {
	position: absolute;
	width: 60px;
	height: 50px;
	top: 35px;
	left: 370px;
	z-index: 9999;
}

#16 Fobas

Fobas

    Пользователь

  • Пользователи
  • PipPip
  • 24 сообщений

Отправлено 27 Август 2013 - 21:19

При наведении на корзину появляется вот такая штукаСнимок.JPG
либо это тот фон в уменьшенном размере либо баг. Можно ли его убрать тоже?

#17 support 2.0

support 2.0

    Активный участник

  • Модераторы
  • 4 950 сообщений

Отправлено 27 Август 2013 - 21:26

Просмотр сообщенияFobas (27 Август 2013 - 21:19) писал:

При наведении на корзину появляется вот такая штукаПрикрепленный файл Снимок.JPG
либо это тот фон в уменьшенном размере либо баг. Можно ли его убрать тоже?
Добавьте в main.css блок
#kor:hover {	text-decoration: none; }

#18 Fobas

Fobas

    Пользователь

  • Пользователи
  • PipPip
  • 24 сообщений

Отправлено 27 Август 2013 - 22:13

Получилось, спасибо!
Обратно в Общие вопросы


Количество пользователей, читающих эту тему: 0

0 пользователей, 0 гостей, 0 анонимных

  1. Форум владельцев интернет-магазинов
  2. → Повышение продаж, продвижение
  3. → Общие вопросы
  4. Privacy Policy