Сообщений в теме: 9

[vasilevichiv]

Здравствуйте. Хочу сменить стилистику сайта на темную. Соответственно черные шрифты на темном фоне не читаемы.
Вопрос 1 - как сменить цвет шрифта подвала и других частей сайта?
Вопрос 2 - Существует ли возможность сделать часть страницы не под текстом прозрачной - для увеличения объема фона?
Вопрос 3 - В каких еще местах можно менять цвета фона и шрифта больших блоков, для создания общей темной стилистики?

Прикрепленные изображения

• 

[Юля123]

vasilevichiv (13 Апрель 2016 - 08:24) писал:

Здравствуйте. Хочу сменить стилистику сайта на темную. Соответственно черные шрифты на темном фоне не читаемы.
Вопрос 1 - как сменить цвет шрифта подвала и других частей сайта?
Вопрос 2 - Существует ли возможность сделать часть страницы не под текстом прозрачной - для увеличения объема фона?
Вопрос 3 - В каких еще местах можно менять цвета фона и шрифта больших блоков, для создания общей темной стилистики?

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

1) Для почти для каждого блока цвет задается отдельно, поэтому я Вам укажу часть кодов, где нужно поменять цвет шрифта, а дальше с Вашей помощью будем изменять цвет у других блоков, которые я, возможно упущу. Во всех блоках кода нужно будет изменять значение у свойства color.

В main.css найдите код (цвет ссылок меню):

#mainNav table td div a:link,
#mainNav table td div a:visited {display: block;height: 26px;color: #666;padding: 4px 10px 0 10px;background: url("{ASSETS_IMAGES_PATH}nav_item_bg.gif?design=mokko") repeat-x bottom left;}

в этом коде меняйте #666 на нужный код цвета (например №000 - белый).

далее найдите код (цвет текст в шаблоне по умолчанию):

body {
  font-size: 75%; /* convert 16px base font size to 12px */
  line-height: 1.6666em; /* 20px (12 x 1.6666 = 20) */
  font-family: "Lucida Grande", "Trebuchet MS", Verdana, Arial, sans-serif;
  background-color: #FFF;
  color: #666;
}

меняйте  #666 на нужный код цвета.

Далее код (цвет левого бокового меню-каталог):

#subNavigation li a:link,
#subNavigation li a:visited {
  padding-left: 10px;
  color: #666;
  display: block;
}

требуются аналогичные изменения.

Далее код:

a:link, a:visited {
  color: 009744;
  text-decoration: none;
}

У Вас этот код написан с ошибкой, чтобы цвет ссылок по умолчанию был зеленый, нужно его заменить на код:

a:link, a:visited {
  color: #009744;
  text-decoration: none;
}

Далее код:

#footer a {color:#666 !important}

цвет ссылок в футере.

Далее код:

#footer {background: url("{ASSETS_IMAGES_PATH}botfade.jpg?design=mokko") repeat-x 50% 100%;border-top: 1px solid #CCC;clear: both;color: #999;font-family: verdana;height: 139px;margin: 0px;padding: 0px;text-align: center;}

здесь уже нужно менять значение #999. Этот код для информации в футере (копирайт и так далее)

Далее код (блок сравнения товаров в колонке слева):

.contentTbodyCompareEmpty {color:#888;}

так же меняйте цвет текста.

У описаний категорий цвет текста можно поменять в настройках каждой категории. Тоже самое и с описанием товаров.

Далее найдите код (наименование характеристик в карточке товара):

.goodsDataFeatures p span		   {border-bottom:1px solid #FFFFFF;color:#A9A9A9;}

меняйте значение A9A9A9.


3) В main.css найдите код:

#headerWrap {height: 150px;background: url({ASSETS_IMAGES_PATH}header_bg.jpg?design=mokko) repeat-x;}

Если вы хотите фон шапки сделать картинкой, то замените на код:

#headerWrap {height: 150px;background: url(ссылка на картинку) repeat-x;}

"ссылка на картинку " меняйте на соответствующую ссылку. Предварительно картинку нужно добавить в редакторе шаблонов в левом боковом меню с помощью кнопки "Добавить файлы"

Если же вы хотите просто залить каким-либо цветом, тогда замените на код:

#headerWrap {height: 150px;background: #код_цвета;}

#код_цвета - измените соответствующе.

Далее код для общего фона, найдите код:

#contentWrap {clear: both;background: url({ASSETS_IMAGES_PATH}contentWrap_bg.jpg?design=mokko) repeat-x left bottom;}

точно та же, если хотите изменить на картинку, то меняйте на код:

#contentWrap {clear: both;background: url(ссылка на картинку) repeat-x left bottom;}

если цветом залить, то на код:

#contentWrap {clear: both;background: #код_цвета;}

Изменения для аккаунта 330505, если Вы имели ввиду другой магазин то пришлите, пожалуйста его номер аккаунта

[vasilevichiv]

Спасибо! Огромный кладезь информации вы мне открыли! 383304 я имел ввиду. Но информация будет очень полезна и для 330505!

[Юля123]

vasilevichiv (13 Апрель 2016 - 16:14) писал:

Спасибо! Огромный кладезь информации вы мне открыли! 383304 я имел ввиду. Но информация будет очень полезна и для 330505!

1) Цвет шрифта подвала:

Для меню в футере, в main.css найдите код:

#footer a{color: #a39384}

Для названий разделов (Контакты), там же найдите код:

#footer h4 {color: #0f1521;font-size: 21px;margin-top: 0px;margin-bottom: 10px;padding:0 0 8px 0;border-bottom:1px solid #e1e1e1;}

ПО умолчанию у Вас у шрифта стоит серый цвет:

body{font-size:14px;font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; line-height:19px;color:#999999;text-align: left;}

Для названий страниц - код:

#content h2.heading_title {color:#1c0d0a; min-height:29px;}

Больше не нашла текста на темном фоне. Для всего приведенного кода нужно изменять значение у свойства color, как и в предыдущей инструкции.

2) Если я Вас правильно понимаю, то вы можете сделать следующее. В main.css найдите код:

#container {width: 100%;margin-left: auto;margin-right: auto;text-align: left;background:url({ASSETS_IMAGES_PATH}ladder.jpg);}

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

#container {width: 100%;margin-left: auto;margin-right: auto;text-align: left;}

далее код:

body{font-size:14px;font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; line-height:19px;color:#999999;text-align: left;}

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

body{font-size:14px;font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; line-height:19px;color:#999999;text-align: left; background:url({ASSETS_IMAGES_PATH}ladder.jpg);}

затем в конце main.css добавьте код:

   .transparent {
		background-color: rgba(255, 255, 255, 0.1);
   }

и в шаблоне HTML код:

	<div id="container" class="full_width_container">
	  <!-- Сообщение для инвалидов -->

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

	<div id="container" class="full_width_container transparent">
	  <!-- Сообщение для инвалидов -->

Это прозрачная заливка основного фона белым цветом, так же можно сделать что-то вроде тонировки, то есть наложить прозрачный черный цвет, для этого добавьте вместо кода:

   .transparent {
		background-color: rgba(255, 255, 255, 0.1);
   }

код:

   .transparent {
		background-color: rgba(0, 0, 0, 0.1);
   }

интенсивность заливки у обоих случаях можно менять, для этого значение 0.1 меняйте на свое - это должно быть любое дробное число от 0 до 1.


3)  1 блок, в main.css найдите код:

#footer {clear: both;margin-top: 30px;min-height: 100px;padding:0 0 10px 0;border-top:4px solid #1c0d0a;background:url({ASSETS_IMAGES_PATH}ladderdark.jpg);}

тут можно поменять только фон, с чем Вы, как я понимаю, справились сами

2 блок - на сколько я вижу, Вы уже нашли самостоятельно.


3 блок, там же найдите код:

#header {position: relative;z-index: 99;background-color:#ffffff;border-top:3px solid #1d283c;}

изменяйте значение у свойства background-color:

[vasilevichiv]

Благодарю! Буду пробовать!

[vasilevichiv]

Выглядит замечательно! А что, если и здесь сделать инверсию? Поможете?
Полоса меню. Полоса с хлебными крошками и названием страницы. Боковое меню и основная часть страницы (не обязательно, если сложно).

Прикрепленные изображения

• 

[RayLi]

vasilevichiv (14 Апрель 2016 - 09:54) писал:

Выглядит замечательно! А что, если и здесь сделать инверсию? Поможете?
Полоса меню. Полоса с хлебными крошками и названием страницы. Боковое меню и основная часть страницы (не обязательно, если сложно).

Здравствуйте.
Если я вас правильно понял, то попробуйте, пожалуйста, для начала сделать следующее:
В шаблоне main.css найдите данный код:

#column-left .box .box-heading {
	padding: 15px 0;
	border-bottom: 1px solid #e1e1e1;
	font-size: 20px;
	font-weight: normal !important;
	margin: 0 10px;
	color: #666666;
}

И замените его вот этим вот кодом:

#column-left .box .box-heading {
	padding: 15px 0;
	border-bottom: 1px solid #666666;
	font-size: 20px;
	font-weight: normal !important;
	margin: 0 10px;
	color: #666666;
}

Далее в том же шаблоне найдите, пожалуйста, следующий код:

.box-category > ul > li + li {
	border-top: 1px solid #EEEEEE;
}

И замените его вот этим кодом:

.box-category > ul > li + li {
	border-top: 1px solid #666666;
}

После чего в шаблоне man.css найдите данный код:

.breadcrumb a {
	color: #68778a;
	font-size: 13px;
}

И замените его вот этим вот кодом:

.breadcrumb a {
	color: #666666;
	font-size: 13px;
}

[vasilevichiv]

Практически не вижу разницы. Я имел ввиду фоны под этими блоками.

[Danil]

vasilevichiv (14 Апрель 2016 - 15:40) писал:

Практически не вижу разницы. Я имел ввиду фоны под этими блоками.

Здравствуйте.
В main.css включите поиск(ctrl + f), далее в первую строку введите код белого цвета #ffffff или #fff, а во вторую тот цвет, на который Вы хотите его заменить и нажимайте ReplaceAll.

[vasilevichiv]

Браво! Могущество ваше не знает границ, магистр!