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


Поменять Цвет Основного Блока


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

#1 Дамир

Дамир

    Новичок

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

Отправлено 25 Июнь 2017 - 18:23

Здравствуйте, Аккаунт SL-416615, помогите изменить цвет основного блока на белый
Оставив прежним шапку и подвал

#2 Firefly

Firefly

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

  • Модераторы
  • 3 810 сообщений

Отправлено 25 Июнь 2017 - 18:55

Просмотр сообщенияДамир (25 Июнь 2017 - 18:23) писал:

Здравствуйте, Аккаунт SL-416615, помогите изменить цвет основного блока на белый
Оставив прежним шапку и подвал

Здравствуйте.
В шаблоне main.css добавил Вам код:
#content {background: #fff;padding-top:15px;}
.block-menu-content ul li a {color: #000;}
.block-menu-content ul li a:hover {color: #343434;}

Код:
.col-left .block-title span {color: #e4e4e4;position: relative;}

Заменил на:
.col-left .block-title span {color: #343434;position: relative;}

Код:
.col-left .block-title a:before, .col-left .block-title span:before {content: "";width: 200px;left: 100%;position: absolute;display: block;top: 12px;height: 4px;border-top: 1px solid #d7d7d7;border-bottom: 1px solid #d7d7d7;margin-left: 25px;}
.col-left .block-title a:after, .col-left .block-title span:after {content: "\f005";display: inline-block;font-family: FontAwesome;font-style: normal;font-weight: normal;line-height: 1;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;font-size: 10px;position: absolute;left: 100%;top: 9px;width: 20px;margin-left: 5px;color: #cacaca;}

Заменил на:
.col-left .block-title a:before, .col-left .block-title span:before {content: "";width: 200px;left: 100%;position: absolute;display: block;top: 12px;height: 4px;border-top: 1px solid #343434;border-bottom: 1px solid #343434;margin-left: 25px;}
.col-left .block-title a:after, .col-left .block-title span:after {content: "\f005";display: inline-block;font-family: FontAwesome;font-style: normal;font-weight: normal;line-height: 1;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;font-size: 10px;position: absolute;left: 100%;top: 9px;width: 20px;margin-left: 5px;color: #343434;}

Код:
h1, h2, h3, h4, h5, h6 {font-weight: bold;text-rendering: optimizelegibility;font-family: inherit;text-transform: uppercase;line-height: 1.1;margin:0;padding:0;color: #e4e4e4;}

Заменил на:
h1, h2, h3, h4, h5, h6 {font-weight: bold;text-rendering: optimizelegibility;font-family: inherit;text-transform: uppercase;line-height: 1.1;margin:0;padding:0;color: #343434;}

Код:
#breadcrumbs {min-height: 20px;margin: 0 0 20px;border-bottom: 1px solid #3f3f3f;border-top: 1px solid #3f3f3f;background: #343434;padding: 12px 0;}

Заменил на:
#breadcrumbs {min-height: 20px;border-bottom: 1px solid #3f3f3f;border-top: 1px solid #3f3f3f;background: #343434;padding: 12px 0;}

Код:
.categories .item .image {display: table-cell;vertical-align: middle;position: relative;width: 260px;height: 260px;background: #272727;}

Заменил на:
.categories .item .image {display: table-cell;vertical-align: middle;position: relative;width: 260px;height: 260px;}

Добавил код:
#footer-middle .column h5 {color: #fff;}

Код:
.block-menu-content ul li a.active {color: #fff;}

Заменил на:
.block-menu-content ul li a.active {color: #bbb;}

Код:
.view-mode span {color: #fff;}

Заменил на:
.view-mode span {color: #bbb;}

А так же добавил код:
#content a:hover {color: #2a2a2a;}


#3 Дамир

Дамир

    Новичок

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

Отправлено 04 Июль 2017 - 17:23

Здравствуйте, Аккаунт SL-416615.
Помогите сделать следующие изменения
Оставить только первый слайд, а так же по 2 картинкам все остальное.

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

  • 123123.png
  • 3.jpg


#4 Mr.Nito

Mr.Nito

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

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

Отправлено 04 Июль 2017 - 18:16

Просмотр сообщенияДамир (04 Июль 2017 - 17:23) писал:

Здравствуйте, Аккаунт SL-416615.
Помогите сделать следующие изменения
Оставить только первый слайд, а так же по 2 картинкам все остальное.
Изменения по скриншоту произвёл.
В файле main.css
цвет пунктов меню
#header-top .header-col-left ul.links li a{ color: #4caf50;}
цены
/* Иконки валюты */
.price {font-weight: bold;color: #4caf50;white-space: nowrap;}
кнопки купить
.button, .paymentFormSubmitLink, .paymentFormTbodySubmitButton {color:#fff;font-family: PT Sans;position: relative;display: -moz-inline-stack;display: inline-block;padding: 7px 15px;border: 1px solid #505050;background: #4caf50;cursor: pointer;white-space: normal;text-transform: uppercase;text-align: center;-webkit-border-radius: 0;-moz-border-radius: 0;-ms-border-radius: 0;-o-border-radius: 0;border-radius: 0;}
Цвет "товары на главной"
.sns-producttabs .sns-pdt-head .sns-pdt-nav .pdt-nav .item-nav.tab-nav-actived span, .sns-producttabs .sns-pdt-head .sns-pdt-nav .pdt-nav .item-nav span:hover {color: #4caf50;}


#5 Дамир

Дамир

    Новичок

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

Отправлено 11 Июль 2017 - 20:18

Нужные следующие изменения

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

  • 1.png
  • 2.png


#6 Vaccina

Vaccina

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

  • Модераторы
  • 24 353 сообщений

Отправлено 12 Июль 2017 - 05:48

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

Зайдите в раздел Сайт - Редактор шаблонов - main.css - найдите:
body {font-family: PT Sans;font-size: 16px;line-height: 20px;color: #bbb;overflow-x: hidden;position: relative;background-color: #575757;background-image: url("http://design.shop-goods24.ru/bg.png?design=dark");background-attachment: fixed;background-position: center top;margin:0;padding:0;}

замените на:
body {font-family: PT Sans;font-size: 16px;line-height: 20px;color: #bbb;overflow-x: hidden;position: relative;background-color: #575757;background-image: url("http://design.shop-goods24.ru/bg.png?design=dark");background-attachment: fixed;background-position: center top;margin:0;padding:0;}


далее найдите:
a {color: #bbb;text-decoration:none;cursor:pointer;}

замените на:
a {color: #000;text-decoration:none;cursor:pointer;}


#7 Дамир

Дамир

    Новичок

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

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

Здравствуйте,Аккаунт SL-416615. нужны следующие изменения
1) Скрин № 1
2) Скрин № 2 ( что бы данное меню оставалось на экране при прокрутке вниз )
3) Скрин № 3 как увеличить этот блог?

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

  • 123.png
  • 12.png
  • 1234.png


#8 Vaccina

Vaccina

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

  • Модераторы
  • 24 353 сообщений

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

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

1. Зайдите в раздел Сайт - Редактор шаблонов - main.css - найдите:
#custommenu ul.mainnav li.level0 > a {display: block;padding: 5px 12px;position: relative;font-size: 16px;text-transform: uppercase;line-height: 20px;color: #fff;border: 1px solid transparent;margin: 0 0 10px 0;}
#custommenu ul.mainnav li.level0:hover > a, #custommenu ul.mainnav li.level0.active > a {border: 1px solid #929292;border-radius: 25px;}


замените на:
#custommenu ul.mainnav li.level0 > a {display: block;padding: 5px 12px;position: relative;font-size: 16px;text-transform: uppercase;line-height: 20px;color: #502C00;border: 1px solid transparent;margin: 0 0 10px 0;background: #FDBA09;border-radius: 20px;}
#custommenu ul.mainnav li.level0:hover > a, #custommenu ul.mainnav li.level0.active > a {color: #fff;}

2. Зайдите в раздел Сайт - Редактор шаблонов - main.css - найдите:
#menu {z-index: 1;}

после него пропишите:
#menu.keep{background: url('http://design.shop-goods24.ru/bg.png') no-repeat center center;position: fixed;top: 0;left: 0;right: 0;z-index: 99;}



далее зайдите в main.js - найдите:
// Наверх
$(document).ready(function(){
  // hide #back-top first
  $("#back-top").hide();
	// fade in #back-top
	$(function () {
		$(window).scroll(function () {
			if ($(this).scrollTop() > 100) {
				$('#back-top').fadeIn();
			} else {
				$('#back-top').fadeOut();
			}
		});
		// scroll body to 0px on click
		$('#back-top').click(function () {
			$('body,html').animate({
				scrollTop: 0
			}, 800);
			return false;
		});
	});
});

замените на:
// Наверх
$(document).ready(function(){
  // hide #back-top first
  $("#back-top").hide();
	// fade in #back-top
	$(function () {
		$(window).scroll(function () {
			if ($(this).scrollTop() > 100) {
				$('#back-top').fadeIn();
				$('#menu').addClass('keep');
			} else {
				$('#back-top').fadeOut();
				$('#menu').removeClass('keep');
			}
		});
		// scroll body to 0px on click
		$('#back-top').click(function () {
			$('body,html').animate({
				scrollTop: 0
			}, 800);
			return false;
		});
	});
});

3. Опишите пожалуйста вопрос поподробней, необходимо удлинить поле поиска и увеличить размер иконок?

#9 Дамир

Дамир

    Новичок

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

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

Просмотр сообщенияVaccina (22 Август 2017 - 05:13) писал:

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

1. Зайдите в раздел Сайт - Редактор шаблонов - main.css - найдите:
#custommenu ul.mainnav li.level0 > a {display: block;padding: 5px 12px;position: relative;font-size: 16px;text-transform: uppercase;line-height: 20px;color: #fff;border: 1px solid transparent;margin: 0 0 10px 0;}
#custommenu ul.mainnav li.level0:hover > a, #custommenu ul.mainnav li.level0.active > a {border: 1px solid #929292;border-radius: 25px;}


замените на:
#custommenu ul.mainnav li.level0 > a {display: block;padding: 5px 12px;position: relative;font-size: 16px;text-transform: uppercase;line-height: 20px;color: #502C00;border: 1px solid transparent;margin: 0 0 10px 0;background: #FDBA09;border-radius: 20px;}
#custommenu ul.mainnav li.level0:hover > a, #custommenu ul.mainnav li.level0.active > a {color: #fff;}

2. Зайдите в раздел Сайт - Редактор шаблонов - main.css - найдите:
#menu {z-index: 1;}

после него пропишите:
#menu.keep{background: url('http://design.shop-goods24.ru/bg.png') no-repeat center center;position: fixed;top: 0;left: 0;right: 0;z-index: 99;}



далее зайдите в main.js - найдите:
// Наверх
$(document).ready(function(){
// hide #back-top first
$("#back-top").hide();
// fade in #back-top
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
$('#back-top').fadeIn();
} else {
$('#back-top').fadeOut();
}
});
// scroll body to 0px on click
$('#back-top').click(function () {
$('body,html').animate({
scrollTop: 0
}, 800);
return false;
});
});
});

замените на:
// Наверх
$(document).ready(function(){
// hide #back-top first
$("#back-top").hide();
// fade in #back-top
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
$('#back-top').fadeIn();
$('#menu').addClass('keep');
} else {
$('#back-top').fadeOut();
$('#menu').removeClass('keep');
}
});
// scroll body to 0px on click
$('#back-top').click(function () {
$('body,html').animate({
scrollTop: 0
}, 800);
return false;
});
});
});

3. Опишите пожалуйста вопрос поподробней, необходимо удлинить поле поиска и увеличить размер иконок?
1) можно ли сделать черный ободок как на скрине №1 и сделать шрифт более жирным?
2) по счет 3го вопроса - хотелось бы увеличить сам поиск немного и иконки...и еще изменить цвет этих 2 иконок.

#10 Vaccina

Vaccina

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

  • Модераторы
  • 24 353 сообщений

Отправлено 24 Август 2017 - 08:41

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

1. Зайдите в раздел Сайт - Редактор шаблонов - main.css - найдите:
#custommenu ul.mainnav li.level0 > a {display: block;padding: 5px 12px;position: relative;font-size: 16px;text-transform: uppercase;line-height: 20px;color: #502C00;border: 1px solid transparent;margin: 0 0 10px 0;background: #FDBA09;border-radius: 20px;}
#custommenu ul.mainnav li.level0:hover > a, #custommenu ul.mainnav li.level0.active > a {color: #fff;}

замените на:
#custommenu ul.mainnav li.level0 > a {display: block;padding: 5px 12px;position: relative;font-size: 16px;text-transform: uppercase;line-height: 20px;color: #502C00;border: 1px solid #000;margin: 0 0 10px 0;background: #FDBA09;border-radius: 20px;}
#custommenu ul.mainnav li.level0:hover > a, #custommenu ul.mainnav li.level0.active > a {color: #fff;font-weight:bold;}

2. Зайдите в раздел Сайт - Редактор шаблонов - main.css - найдите:
#search_mini_form input {background: #232323;color: #ccc;border: none;border-radius: 25px;height: 25px;float: right;font-size: 12px;margin-top: 9px;width: 200px;padding-left: 10px;padding-right: 30px;}
#search_mini_form input:focus {width: 250px;}

замените на:
#search_mini_form input {background: #232323;color: #ccc;border: none;border-radius: 25px;height: 25px;float: right;font-size: 12px;margin-top: 9px;width: 300px;padding-left: 10px;padding-right: 30px;}


далее найдите:
.header-tools .myaccount .tongle, .header-tools .mycart .tongle, .header-tools .mycompare .tongle {font-size: 16px;}

замените на:
.header-tools .myaccount .tongle, .header-tools .mycart .tongle, .header-tools .mycompare .tongle {font-size: 18px;}
.header-tools .myaccount .tongle, .header-tools .mycart .tongle i{color: #ffffff;}

цвет измените на необходимый.




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

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