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


Изменение Стилистики

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

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

#1 blackdron

blackdron

    Продвинутый пользователь

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

Отправлено 15 Август 2014 - 16:31

Добрый вечер, помогите, пожалуйста, сделать кое-какие изменения на сайте:
  • Добавить желтый фон для блока (картинку прилагаю). Нужно чтобы цвет я мог изменять сам, чтобы Вас не беспокоить. Также у логотипа "Едоша Казань" сделать белую окантовку пару пикселей.

  • Опустить слайдер и добавить текст (картинку прилагаю), в тексте будут ссылки. Нужно чтобы я мог редактировать текст, тип и цвет шрифта и ссылки (чтобы лишний раз Вас не тревожить)
  • Из Подвала убрать блок новостей и поставить его под блоком Каталога (Картинку прилагаю). Блок новостей сделать по ширине также, как и блок каталога.
  • Сделать такой же тип слайдера, как у сайта http://www.utkonos.ru. Т.е снизу слайдера, миниатюры картинок.
Скрытый текст


#2 Danil

Danil

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

  • Пользователи
  • PipPipPipPip
  • 4 645 сообщений

Отправлено 15 Август 2014 - 17:51

Просмотр сообщенияblackdron (15 Август 2014 - 16:31) писал:

Добрый вечер, помогите, пожалуйста, сделать кое-какие изменения на сайте:
  • Добавить желтый фон для блока (картинку прилагаю). Нужно чтобы цвет я мог изменять сам, чтобы Вас не беспокоить. Также у логотипа "Едоша Казань" сделать белую окантовку пару пикселей.

  • Опустить слайдер и добавить текст (картинку прилагаю), в тексте будут ссылки. Нужно чтобы я мог редактировать текст, тип и цвет шрифта и ссылки (чтобы лишний раз Вас не тревожить)
  • Из Подвала убрать блок новостей и поставить его под блоком Каталога (Картинку прилагаю). Блок новостей сделать по ширине также, как и блок каталога.
  • Сделать такой же тип слайдера, как у сайта http://www.utkonos.ru. Т.е снизу слайдера, миниатюры картинок.

Здравствуйте.

1) Добавьте в main.css код
div#header .inner {
background: #FF0;
}
2) Зайдите в раздел Сайт->Страницы и создайте новую страницу, далее нажмите источник и копируйте текст на 771 строку. Если Вам нужно будет изменить или удалить выполняйте те же инструкции.
3) Ваш шаблон адаптивный и если переместить блок, то полное его отображение будет только при разрешении не ниже 767, далее его нужно будет скрыть. Если зайти с мобильного телефона то будет только заголовок блока новостей и при клике будет переход в раздел новости.  
4) Вам нужно выбрать подходящий Вам слайдер с  инструкцией и кодом и мы поможем Вам его установить. Вот несколько ссылок с различными слайдерами http://bayguzin.ru/m.../slajderyi.html и http://yeap.narod.ru/js/022.html

#3 blackdron

blackdron

    Продвинутый пользователь

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

Отправлено 15 Август 2014 - 18:20

Просмотр сообщенияDanil (15 Август 2014 - 17:51) писал:

1) Добавьте в main.css код
[CODE]
div#header .inner {
background: #FF0;

А как сделать так, чтобы желтый фон был на всю ширину страницы?

#4 Danil

Danil

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

  • Пользователи
  • PipPipPipPip
  • 4 645 сообщений

Отправлено 15 Август 2014 - 20:00

Просмотр сообщенияblackdron (15 Август 2014 - 18:20) писал:

А как сделать так, чтобы желтый фон был на всю ширину страницы?

Найдите в html этот код
<div class="inner">
		 <div id="logo"><a href="http://{NET_DOMAIN}/"><img src="{ASSETS_IMAGES_PATH}edoshakazan-logo.png" title="" alt=""></a></div>

		 <!-- Корзина -->
		 <div id="cart">
		 <div class="heading">
			 <h4>Корзина покупок</h4>
			 <a href="{CART_URL}" title="Перейти в корзину"><span class="cart_circle"></span><span id="cart-total">Покупок
			 {% IF cart_count_empty %}
			 <span class="red">0</span>
			 {% ELSE %}
				 {CART_COUNT_TOTAL}
			 {% ENDIF %}
				 - на сумму
			
			 {% IF cart_count_empty %}
				 <span>0</span> {CURRENCY_NAME}
			 {% ELSE %}
				 {% FOR cart_sum %}
				 {cart_sum.NOW | money_format}<br />
				 {% ENDFOR %}
			 {% ENDIF %}</span>
			 </a>
		 </div>
		 <div class="content">
			 <div class="empty">Ваша корзина покупок пуста!</div>
		 </div>
		 <div class="clear"></div>
		 </div>
		 <!-- end Корзина -->
		
		 <div class="clear"></div>
		
	 </div>
И замените на
<div class="header-bottom">
		 <div class="inner">
		 <div id="logo"><a href="http://{NET_DOMAIN}/"><img src="{ASSETS_IMAGES_PATH}edoshakazan-logo.png" title="" alt=""></a></div>

		 <!-- Корзина -->
		 <div id="cart">
		 <div class="heading">
			 <h4>Корзина покупок</h4>
			 <a href="{CART_URL}" title="Перейти в корзину"><span class="cart_circle"></span><span id="cart-total">Покупок
			 {% IF cart_count_empty %}
			 <span class="red">0</span>
			 {% ELSE %}
				 {CART_COUNT_TOTAL}
			 {% ENDIF %}
				 - на сумму
			
			 {% IF cart_count_empty %}
				 <span>0</span> {CURRENCY_NAME}
			 {% ELSE %}
				 {% FOR cart_sum %}
				 {cart_sum.NOW | money_format}<br />
				 {% ENDFOR %}
			 {% ENDIF %}</span>
			 </a>
		 </div>
		 <div class="content">
			 <div class="empty">Ваша корзина покупок пуста!</div>
		 </div>
		 <div class="clear"></div>
		 </div>
		 <!-- end Корзина -->
		
		 <div class="clear"></div>
		
		 </div>
	 </div>

Зайдите в main.css и добавьте
.header_bottom {
width: 100%;
background: #FF0;
margin: 0 auto;
}

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

div#header .inner {
background: #FF0;
}

И замените на

div#header .header-bottom .inner {
background: #FF0;
}


#5 blackdron

blackdron

    Продвинутый пользователь

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

Отправлено 15 Август 2014 - 22:12

Сделал все изменения в коде, но все равно не по всей ширине страницы, только от начала логотипа и до корзины, а надо от левой части экрана до правой.

#6 Danil

Danil

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

  • Пользователи
  • PipPipPipPip
  • 4 645 сообщений

Отправлено 15 Август 2014 - 22:22

Просмотр сообщенияblackdron (15 Август 2014 - 22:12) писал:

Сделал все изменения в коде, но все равно не по всей ширине страницы, только от начала логотипа и до корзины, а надо от левой части экрана до правой.

Не вижу кода в файле стилей
.header_bottom {
width: 100%;
background: #FF0;
margin: 0 auto;
}
Добавьте пожалуйста.

#7 blackdron

blackdron

    Продвинутый пользователь

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

Отправлено 15 Август 2014 - 23:00

Просмотр сообщенияDanil (15 Август 2014 - 22:22) писал:

Не вижу кода в файле стилей
.header_bottom {
width: 100%;
background: #FF0;
margin: 0 auto;
}
Добавьте пожалуйста.

Прилагаю скрин main.css. Код там есть
Скрытый текст


#8 Сake

Сake

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

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

Отправлено 16 Август 2014 - 03:53

Класс не применяется, так как в названии задан другой разделитель. Замените ваш класс

.header_bottom {
width: 100%;
background: #FF0;
margin: 0 auto;
}

на

.header-bottom {
width: 100%;
background: #FF0;
margin: 0 auto;
}


#9 blackdron

blackdron

    Продвинутый пользователь

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

Отправлено 18 Август 2014 - 09:17

Просмотр сообщенияСake (16 Август 2014 - 03:53) писал:

Класс не применяется, так как в названии задан другой разделитель. Замените ваш класс
все отлично, а как сделать так, чтобы у логотипа "Едоша Казань" была белая окантовка пару пикселей.
И еще куда-то пропал слайдер

#10 Alekseys

Alekseys

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

  • Пользователи
  • PipPipPipPip
  • 2 355 сообщений

Отправлено 18 Август 2014 - 09:26

Просмотр сообщенияblackdron (18 Август 2014 - 09:17) писал:

все отлично, а как сделать так, чтобы у логотипа "Едоша Казань" была белая окантовка пару пикселей.
И еще куда-то пропал слайдер
Здравствуйте. В main.css замените
#header #logo {
float: left;
clear: both;
margin: 12px 12px 12px 0;
}
на
#header #logo {
float: left;
clear: both;
margin: 12px 12px 12px 0;
border-style: solid;
padding: 2px;
border-width: 2px;
border-color: black;
}
меняя параметр border-color: black; можете заменить цвет.

#11 blackdron

blackdron

    Продвинутый пользователь

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

Отправлено 18 Август 2014 - 09:38

Просмотр сообщенияAlekseys (18 Август 2014 - 09:26) писал:

Здравствуйте. В main.css замените
Нашел другой способ, просто изменил сам логотип, а именно в фотошопе добавил эффект и все. Остался только открытый вопрос, куда пропал слайдер, в коде он есть

#12 AnnaM

AnnaM

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

  • Пользователи
  • PipPipPipPip
  • 1 040 сообщений

Отправлено 18 Август 2014 - 09:47

Просмотр сообщенияblackdron (18 Август 2014 - 09:38) писал:

Нашел другой способ, просто изменил сам логотип, а именно в фотошопе добавил эффект и все. Остался только открытый вопрос, куда пропал слайдер, в коде он есть
в файле main.css найдите код
#header .flexslider li img.slide_img {
display: none !important;
}
и замените на этот
#header .flexslider li img.slide_img {
display: block !important;
}


#13 blackdron

blackdron

    Продвинутый пользователь

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

Отправлено 18 Август 2014 - 12:55

Просмотр сообщенияDanil (15 Август 2014 - 17:51) писал:

Здравствуйте.
3) Ваш шаблон адаптивный и если переместить блок, то полное его отображение будет только при разрешении не ниже 767, далее его нужно будет скрыть. Если зайти с мобильного телефона то будет только заголовок блока новостей и при клике будет переход в раздел новости.  

В принципе если только заголовок будет на мониторах с маленьким разрешением и на моб. телефонах, то это подходит, пришлите, пожалуйста, инструкцию как это сделать

#14 Alekseys

Alekseys

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

  • Пользователи
  • PipPipPipPip
  • 2 355 сообщений

Отправлено 18 Август 2014 - 14:28

Просмотр сообщенияblackdron (18 Август 2014 - 12:55) писал:

В принципе если только заголовок будет на мониторах с маленьким разрешением и на моб. телефонах, то это подходит, пришлите, пожалуйста, инструкцию как это сделать
Здравствуйте. В разделе Сайт -> Редактор шаблонов -> HTML найдите блок
<!-- Если есть список новости магазина и если в тарифном плане подключен модуль новостей -->
	 {% IFNOT news_list_shop_empty && TARIFF_FEATURE_NEWS %}
		 <div class="one_fourth column">
		 <a href="{NEWS_SHOP_URL}"><h4>Новости</h4></a>
		 <ul class="footer_links">
			 {% FOR news_list_shop %}
			 <li><a href="{news_list_shop.URL}" title="Перейти к странице &laquo;{news_list_shop.TITLE}&raquo;" {% IF news_list_shop.ID = NEWS_ID %}class="selected"{%ENDIF%}>{news_list_shop.TITLE}</a></li>
			 {% ENDFOR %}
		 </ul>
		 </div>
	 {% ENDIF %}
	 <!-- /Если есть список новости магазина и если в тарифном плане подключен модуль новостей -->
и переместите его, поставив его после строки
<!-- /Каталог товаров -->
и замените
<div class="one_fourth column">
		 <a href="{NEWS_SHOP_URL}"><h4>Новости</h4></a>
на
<div class="one_fourth column" id="News"[size=4]>[/size]
[size=4] [/size][size=4]<a href="{NEWS_SHOP_URL}"><h4>Новости</h4></a>[/size][size=4] [/size]
после чего в main.css добавьте
#News {
width: 190px;
background-color: #ffffff;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
border-bottom: 4px solid #e1e1e1;
box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.1);
border: solid 1px #e1e1e1\0/;
padding: 11px;
}
после строк:
@media screen and (max-width: 785px) {
@media only screen and (max-width: 625px) {
@media only screen and (min-width: 557px) and (max-width: 898px) {
@media only screen and (min-width: 480px) and (max-width: 556px) {
@media only screen and (min-width: 480px) and (max-width: 767px) {
@media only screen and (max-width: 480px) {
добавьте
#News {display:none;}


#15 blackdron

blackdron

    Продвинутый пользователь

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

Отправлено 18 Август 2014 - 14:45

Просмотр сообщенияAlekseys (18 Август 2014 - 14:28) писал:

Здравствуйте. В разделе Сайт -> Редактор шаблонов -> HTML найдите блок
Получилось вот так, выглядит не корректно
Снимок2.jpg

#16 AnnaM

AnnaM

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

  • Пользователи
  • PipPipPipPip
  • 1 040 сообщений

Отправлено 18 Август 2014 - 14:50

Просмотр сообщенияblackdron (18 Август 2014 - 14:45) писал:

Получилось вот так, выглядит не корректно
Прикрепленный файл Снимок2.jpg
<div class="one_fourth column" id="News"[size=4]>[/size]
[size=4] [/size][size=4]<a href="{NEWS_SHOP_URL}"><h4>Новости</h4></a>[/size][size=4] [/size]
замените на
<div class="one_fourth column" id="News"[size=4]>
<a href="{NEWS_SHOP_URL}"><h4>Новости</h4></a>


#17 blackdron

blackdron

    Продвинутый пользователь

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

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

Просмотр сообщенияDanil (15 Август 2014 - 17:51) писал:

4) Вам нужно выбрать подходящий Вам слайдер с  инструкцией и кодом и мы поможем Вам его установить. Вот несколько ссылок с различными слайдерами http://bayguzin.ru/m.../slajderyi.html и http://yeap.narod.ru/js/022.html
Выбрал слайдер http://css-tricks.co...content-slider/ .
Есть только пару вопросов по этому слайдеру:
- можно ли делать ссылки на изображение слайдера?
- можно ли изменять размер слайдера?

#18 AnnaM

AnnaM

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

  • Пользователи
  • PipPipPipPip
  • 1 040 сообщений

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

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

Выбрал слайдер http://css-tricks.co...content-slider/ .
Есть только пару вопросов по этому слайдеру:
- можно ли делать ссылки на изображение слайдера?
- можно ли изменять размер слайдера?
-размеры изменять можно;
-вам нужны ссылки на изображения из слайдера или на сам слайдер?

#19 blackdron

blackdron

    Продвинутый пользователь

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

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

Просмотр сообщенияAnnaM (18 Август 2014 - 16:38) писал:

-размеры изменять можно;
-вам нужны ссылки на изображения из слайдера или на сам слайдер?
Ссылки на изображения и на сам слайдер не нужно.
В самом слайдере есть изображения, при нажатие этого изображения можно сделать ссылки?
ИМХО скорей всего можно, я на всякий случай спрашиваю

#20 AnnaM

AnnaM

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

  • Пользователи
  • PipPipPipPip
  • 1 040 сообщений

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

Просмотр сообщенияblackdron (18 Август 2014 - 16:41) писал:

Ссылки на изображения и на сам слайдер не нужно.
В самом слайдере есть изображения, при нажатие этого изображения можно сделать ссылки?
ИМХО скорей всего можно, я на всякий случай спрашиваю
Конечно,как и из обычного изображения.





Темы с аналогичным тегами новости, логотип, стиль, шапка

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

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