0
Сообщений в теме: 9
#1
Отправлено 13 Апрель 2016 - 08:24
Здравствуйте. Хочу сменить стилистику сайта на темную. Соответственно черные шрифты на темном фоне не читаемы.
Вопрос 1 - как сменить цвет шрифта подвала и других частей сайта?
Вопрос 2 - Существует ли возможность сделать часть страницы не под текстом прозрачной - для увеличения объема фона?
Вопрос 3 - В каких еще местах можно менять цвета фона и шрифта больших блоков, для создания общей темной стилистики?
Вопрос 1 - как сменить цвет шрифта подвала и других частей сайта?
Вопрос 2 - Существует ли возможность сделать часть страницы не под текстом прозрачной - для увеличения объема фона?
Вопрос 3 - В каких еще местах можно менять цвета фона и шрифта больших блоков, для создания общей темной стилистики?
#2
Отправлено 13 Апрель 2016 - 10:27
vasilevichiv (13 Апрель 2016 - 08:24) писал:
Здравствуйте. Хочу сменить стилистику сайта на темную. Соответственно черные шрифты на темном фоне не читаемы.
Вопрос 1 - как сменить цвет шрифта подвала и других частей сайта?
Вопрос 2 - Существует ли возможность сделать часть страницы не под текстом прозрачной - для увеличения объема фона?
Вопрос 3 - В каких еще местах можно менять цвета фона и шрифта больших блоков, для создания общей темной стилистики?
Вопрос 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, если Вы имели ввиду другой магазин то пришлите, пожалуйста его номер аккаунта
#3
Отправлено 13 Апрель 2016 - 16:14
Спасибо! Огромный кладезь информации вы мне открыли! 383304 я имел ввиду. Но информация будет очень полезна и для 330505!
#4
Отправлено 13 Апрель 2016 - 17:21
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:
#5
Отправлено 14 Апрель 2016 - 09:22
Благодарю! Буду пробовать!
#7
Отправлено 14 Апрель 2016 - 10:04
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; }
#8
Отправлено 14 Апрель 2016 - 15:40
Практически не вижу разницы. Я имел ввиду фоны под этими блоками.
#9
Отправлено 14 Апрель 2016 - 15:50
vasilevichiv (14 Апрель 2016 - 15:40) писал:
Практически не вижу разницы. Я имел ввиду фоны под этими блоками.
В main.css включите поиск(ctrl + f), далее в первую строку введите код белого цвета #ffffff или #fff, а во вторую тот цвет, на который Вы хотите его заменить и нажимайте ReplaceAll.
#10
Отправлено 14 Апрель 2016 - 16:06
Браво! Могущество ваше не знает границ, магистр!
Количество пользователей, читающих эту тему: 0
0 пользователей, 0 гостей, 0 анонимных