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

[Mixa]

Хочу поменять стиль шаблона. Нашёл "кучу" всего, но все меня не устраивает. А, сам я, пока не научился .
Прошу помочь знающих людей. Смысл в том, чтобы поменять цвета оформления, не меняя формы и объёмности. См. приложения:
п.1,2,3,4,5,6,7,8,10.

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

• 
• 
• 
• 
• 

[Castiel]

Mixa (28 Июнь 2014 - 00:10) писал:

Хочу поменять стиль шаблона. Нашёл "кучу" всего, но все меня не устраивает. А, сам я, пока не научился .
Прошу помочь знающих людей. Смысл в том, чтобы поменять цвета оформления, не меняя формы и объёмности. См. приложения:
п.1,2,3,4,5,6,7,8,10.

Здравствуйте, укажите номер аккаунта в профиле или в сообщении.
Основная часть элементов данного дизайна это картинки. Вам необходимо будет либо перерисовать все изображения либо использовать свои цвета.
Заменяем значения background на свое усмотрение.
Все изменения проводятся в файле main.css

1.

#header .blocks .rght { float:left; margin:0 0 0 0; background:url({ASSETS_IMAGES_PATH}haeder-bg.png) top right no-repeat; width:358px; height:110px;  }

#header .blocks .cntr { float:left; background:url({ASSETS_IMAGES_PATH}haeder-bgx.png) repeat-x; width:628px; height:20px; }

#header .blocks .lft { float:left; background:url({ASSETS_IMAGES_PATH}backsprite.png) 0 0 no-repeat; margin:0 0 0 0; width:14px; height:11px; }

2.

#panelsite div.centercol { background:url({ASSETS_IMAGES_PATH}panel-bgx.png) repeat-x; width:747px; }

#panelsite div.leftcol { background:url({ASSETS_IMAGES_PATH}panel-bg.png) no-repeat; width:12px; }

3.

#panelsite div.centercol .search { float:left; margin:11px 0 0 0px; background:url({ASSETS_IMAGES_PATH}searchbg.jpg) no-repeat; width:749px; height:41px; padding:10px 0 0 0px;}

4.

#left .block .bluesmall, #right .block .bluesmall { background:url({ASSETS_IMAGES_PATH}block-bg.jpg) no-repeat; height:28px; padding:9px 0 0 20px; }

5. Фон для пунктов каталога сайта, фон других элементов в пункте 8

#left .block .navigation ul li, #right .block .navigation ul li { background:url({ASSETS_IMAGES_PATH}block-main-nav-bg.jpg) no-repeat; width:223px; border-top:1px solid #FFF; border-bottom:1px solid #e2e2e2; overflow:hidden; }

6.

#left .block .greysmall, #right .block .greysmall { background:url({ASSETS_IMAGES_PATH}block-bg.jpg) 0 -88px no-repeat; height:28px; padding:10px 0 0 20px; color:#434343; }

7. Смотрите пункт 4

8. Имеется ввиду фон содержимого данного блока?
Находим

#left .block .padd, #right .block .padd { padding-left:10px; padding-right:10px; width:203px; }

Заменяем на

#left .block .padd, #right .block .padd { padding-left:10px; padding-right:10px; width:203px;background: #ff0; }

10. Не совсем понятно в каком месте необходимо изменить фон, уточните на большом скриншоте данную область.

[Mixa]

Castiel (28 Июнь 2014 - 07:35) писал:

Здравствуйте, укажите номер аккаунта в профиле или в сообщении.
Основная часть элементов данного дизайна это картинки. Вам необходимо будет либо перерисовать все изображения либо использовать свои цвета.
Заменяем значения background на свое усмотрение.
Все изменения проводятся в файле main.css

1.

#header .blocks .rght { float:left; margin:0 0 0 0; background:url({ASSETS_IMAGES_PATH}haeder-bg.png) top right no-repeat; width:358px; height:110px; }

#header .blocks .cntr { float:left; background:url({ASSETS_IMAGES_PATH}haeder-bgx.png) repeat-x; width:628px; height:20px; }

#header .blocks .lft { float:left; background:url({ASSETS_IMAGES_PATH}backsprite.png) 0 0 no-repeat; margin:0 0 0 0; width:14px; height:11px; }

2.

#panelsite div.centercol { background:url({ASSETS_IMAGES_PATH}panel-bgx.png) repeat-x; width:747px; }

#panelsite div.leftcol { background:url({ASSETS_IMAGES_PATH}panel-bg.png) no-repeat; width:12px; }

3.

#panelsite div.centercol .search { float:left; margin:11px 0 0 0px; background:url({ASSETS_IMAGES_PATH}searchbg.jpg) no-repeat; width:749px; height:41px; padding:10px 0 0 0px;}

4.

#left .block .bluesmall, #right .block .bluesmall { background:url({ASSETS_IMAGES_PATH}block-bg.jpg) no-repeat; height:28px; padding:9px 0 0 20px; }

5. Фон для пунктов каталога сайта, фон других элементов в пункте 8

#left .block .navigation ul li, #right .block .navigation ul li { background:url({ASSETS_IMAGES_PATH}block-main-nav-bg.jpg) no-repeat; width:223px; border-top:1px solid #FFF; border-bottom:1px solid #e2e2e2; overflow:hidden; }

6.

#left .block .greysmall, #right .block .greysmall { background:url({ASSETS_IMAGES_PATH}block-bg.jpg) 0 -88px no-repeat; height:28px; padding:10px 0 0 20px; color:#434343; }

7. Смотрите пункт 4

8. Имеется ввиду фон содержимого данного блока?
Находим

#left .block .padd, #right .block .padd { padding-left:10px; padding-right:10px; width:203px; }

Заменяем на

#left .block .padd, #right .block .padd { padding-left:10px; padding-right:10px; width:203px;background: #ff0; }

10. Не совсем понятно в каком месте необходимо изменить фон, уточните на большом скриншоте данную область.

Аккаунт SL-273788/ П.10 имеется ввиду фон страниц. Но при замене фона, правая, левая, верхняя и нижняя границы остаются белыми. Понятно, что это рисунки. Как их заменить на другие.
За остальные подсказки спасибо. Только хочется, чтобы общий вид остался такой, как есть, а цветовую политику изменить

[Castiel]

Mixa (28 Июнь 2014 - 16:20) писал:

Аккаунт SL-273788/ П.10 имеется ввиду фон страниц. Но при замене фона, правая, левая, верхняя и нижняя границы остаются белыми. Понятно, что это рисунки. Как их заменить на другие.
За остальные подсказки спасибо. Только хочется, чтобы общий вид остался такой, как есть, а цветовую политику изменить

10.

#cntrobj {
background: url({ASSETS_IMAGES_PATH}conteiner-bg-y.jpg) repeat-y;
}

Вам необходимо скачать старые изображения, перерисовать их (не изменяя размеры и формат картинки) и загрузить на сайт с тем же названием, предварительно удалив старые.

[Mixa]

Castiel (28 Июнь 2014 - 16:35) писал:

10.

#cntrobj {
background: url({ASSETS_IMAGES_PATH}conteiner-bg-y.jpg) repeat-y;
}

Вам необходимо скачать старые изображения, перерисовать их (не изменяя размеры и формат картинки) и загрузить на сайт с тем же названием, предварительно удалив старые.

Спасибо за помощь. Есть ещё вопросик. Как поменять цвет кнопки купит и в корзину?

[batta]

Здравствуйте.
Допишите в main.css

li.goodsPageSubmitButtonBlock a {
background: #***;
}

поменяйте *** на свой нужный Вам цвет
в maine.css

.blgreen {
background: url(http://design.xn--812-8cdz3am7au.xn--p1ai/whtblue-bg.jpg) center top repeat;
border: 1px solid #5fa8c4;
color: #494949;
text-shadow: 0px 1px 0 rgba(255, 255, 255, 0.4);
padding: 4px 10px 2px 10px;
font: normal 11px Verdana, Geneva, sans-serif;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
cursor: pointer;
}

измените на

.blgreen {
background: #***;
border: 1px solid #5fa8c4;
color: #494949;
text-shadow: 0px 1px 0 rgba(255, 255, 255, 0.4);
padding: 4px 10px 2px 10px;
font: normal 11px Verdana, Geneva, sans-serif;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
cursor: pointer;
}

измените *** на нужный Вам цвет

[Mixa]

Mixa (09 Июль 2014 - 18:59) писал:

Спасибо за помощь. Есть ещё вопросик. Как поменять цвет кнопки купит и в корзину?

И, как вообще поменять кнопку на свою? Расскажите.

[batta]

в main.css

.blgreen {  background:url({ASSETS_IMAGES_PATH}whtblue-bg.jpg) center top repeat; border:1px solid #5fa8c4; color:#FE010E; text-shadow: 0px 1px 0 rgba(255, 255, 255, 0.4); padding:4px 10px 2px 10px; //padding:1px 10px 0px 10px; //line-height:10px; font:normal 11px Verdana, Geneva, sans-serif;  -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius:4px; cursor:pointer;}

картинк whtblue-bg.jpg вместо этой картинки вставляете свою

[Mixa]

batta (09 Июль 2014 - 20:11) писал:

a.blgreen, a.whtgreen, a.whtblue, a.whtgray {
text-decoration: none;
display: inline-block;
height: 15px;
}
.blgreen {
background: url(http://design.xn--812-8cdz3am7au.xn--p1ai/whtblue-bg.jpg) center top repeat;
border: 1px solid #5fa8c4;
color: #494949;
text-shadow: 0px 1px 0 rgba(255, 255, 255, 0.4);
padding: 4px 10px 2px 10px;
font: normal 11px Verdana, Geneva, sans-serif;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
cursor: pointer;
}

в background: url(http://design.xn--81.../whtbl*e-bg.jpg) center top repeat; меняете url(http://design.xn--81.../wh*blue-bg.jpg) на свою картинку

ОК! Спасибо. Еще вопрос тоже самое кнопка "купить". Поменять картинку кнопки и отображение при наведении. К стати, а как быть с наведением в предыдущей? Т.е. куда вставить ссылку. И размеры кнопки я так понял "
padding: 4px 10px 2px 10px;"

[batta]

Да, совершенно верно это размеры, только я своё сообщение отредактировал посмотрите сообщение №8, это менять кнопку купить, если Вы хотите поменять кнопку "в корзину" то вам надо
в mine.css

.whtblue { border:1px solid #d0d0d0 !important; background:url({ASSETS_IMAGES_PATH}whtblue-nor.jpg) center top repeat-x; padding:5px 15px; font:normal 12px Verdana, Geneva, sans-serif; color:#504f4f; height:27px; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius:4px; cursor:pointer; outline:none; }

поменять whtblue-nor.jpg на свою картинку

[Mixa]

Castiel (28 Июнь 2014 - 16:35) писал:

10.

#cntrobj {
background: url({ASSETS_IMAGES_PATH}conteiner-bg-y.jpg) repeat-y;
}

Вам необходимо скачать старые изображения, перерисовать их (не изменяя размеры и формат картинки) и загрузить на сайт с тем же названием, предварительно удалив старые.

Получилось так! Хотелось бы, чтобы красным цветом была только кнопка купить. И текст в новинках не вылезал за кнопку.

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

• 

[Vaccina]

В шаблоне HTML найдите:

<button type="submit" class="whtgray">Купить сейчас</button>

замените на:

<button type="submit" class="whtgray">Купить</button>

далее найдите:

<button type="submit" class="whtgray">Купить</button>

замените на:

<button type="submit" class="whtgray buy">Купить</button>

далее найдите:

a.whtgray, button.whtgray  { background:url({ASSETS_IMAGES_PATH}button1.png) top center no-repeat; width:138px; height:18px; padding:7px 0 6px 0; text-align:center; font:bold 12px Verdana, Geneva, sans-serif; color:#3a3a3a; cursor:pointer; text-shadow: 0px 1px 0 rgba(255, 255, 255, 1); margin:0 10px 0 0;}
  a.whtgray:hover, button.whtgray:hover { background:url({ASSETS_IMAGES_PATH}button1.png) center center no-repeat; }
  a.whtgray:active, button.whtgray:active { background:url({ASSETS_IMAGES_PATH}button1.png) center bottom no-repeat; }
 

замените на:

a.whtgray, button.whtgray  { background:url({ASSETS_IMAGES_PATH}whtgray-bg.jpg) top center no-repeat; width:138px; height:18px; padding:7px 0 6px 0; text-align:center; font:bold 12px Verdana, Geneva, sans-serif; color:#3a3a3a; cursor:pointer; text-shadow: 0px 1px 0 rgba(255, 255, 255, 1); margin:0 10px 0 0;}
  a.whtgray:hover, button.whtgray:hover { background:url({ASSETS_IMAGES_PATH}whtgray-bg.jpg) center center no-repeat; }
  a.whtgray:active, button.whtgray:active { background:url({ASSETS_IMAGES_PATH}whtgray-bg.jpg) center bottom no-repeat; }
  a.whtgray.buy{ background:url({ASSETS_IMAGES_PATH}button1.png) top center no-repeat;}
  a.buy:hover{ background:url({ASSETS_IMAGES_PATH}button1.png) center center no-repeat; }
  a.buy:active{ background:url({ASSETS_IMAGES_PATH}button1.png) center bottom no-repeat; }
 

[Lamer]

batta (09 Июль 2014 - 20:11) писал:

в main.css

.blgreen { background:url({ASSETS_IMAGES_PATH}whtblue-bg.jpg) center top repeat; border:1px solid #5fa8c4; color:#FE010E; text-shadow: 0px 1px 0 rgba(255, 255, 255, 0.4); padding:4px 10px 2px 10px; //padding:1px 10px 0px 10px; //line-height:10px; font:normal 11px Verdana, Geneva, sans-serif; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius:4px; cursor:pointer;}

картинк whtblue-bg.jpg вместо этой картинки вставляете свою

Я сделал так и у меня стали кнопки которые выходят после нажатия "купить",  -  "продолжить покупки" и "перейти в корзину"  подхватывают изображение которое я сделал для кнопки "купить"   .

[Danil]

Lamer (20 Сентябрь 2014 - 18:06) писал:

Я сделал так и у меня стали кнопки которые выходят после нажатия "купить",  -  "продолжить покупки" и "перейти в корзину"  подхватывают изображение которое я сделал для кнопки "купить"   .

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

[Lamer]

Данил, сделал. Мне нужно -

1  Ховер сделать для купить, и ховер же для подробнее
2 Изменить цвета для active  кнопки "подробнее" и "купить"
3 Я сделал кнопку с текстом и теперь из под нее видна прежняя надпись купить. Как убрать?

[Danil]

Lamer (21 Сентябрь 2014 - 08:32) писал:

Данил, сделал. Мне нужно -

1  Ховер сделать для купить, и ховер же для подробнее
2 Изменить цвета для active  кнопки "подробнее" и "купить"
3 Я сделал кнопку с текстом и теперь из под нее видна прежняя надпись купить. Как убрать?

Зайдите в main.css
Для изменения цвета кнопки "подробнее" найдите код  

.whtgreen {
border: 1px solid #d0d0d0;
background: url({ASSETS_IMAGES_PATH}whtgreen-bg.jpg) center top repeat-x;
padding: 4px 10px 2px 10px;
font: normal 11px Verdana, Geneva, sans-serif;
color: #526645;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
cursor: pointer;
text-shadow: 0px 1px 0 rgba(255, 255, 255, 1);
}

Для кнопки "купить" и "быстрый заказ" найдите код

.blgreen {
background: url(http://design.spytime.ru/whtblue-bg.jpg) center top repeat;
border: 1px solid #526645;
color: #526645;
text-shadow: 0px 1px 0 rgba(255, 255, 255, 0.4);
padding: 4px 10px 2px 10px;
font: normal 11px Verdana, Geneva, sans-serif;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
cursor: pointer;
}

1)В background вставьте фоновую картинку без надписи, а саму надпись "купить" и "быстрый заказ" мы изменим стилями.
2)А можно без background, фон сделать градиентом в стилях.
Какой вариант Вам лучше?

[Lamer]

Я хочу так сделать -
кнопка  -
hover -

как считаете удобным, так давайте и делать

[Danil]

Lamer (21 Сентябрь 2014 - 09:20) писал:

Я хочу так сделать -
кнопка  -
hover -

как считаете удобным, так давайте и делать

Найдите код(для кнопок купить и быстрый заказ)

.blgreen {
background: url(http://design.spytime.ru/whtblue-bg.jpg) center top repeat;
border: 1px solid #526645;
color: #526645;
text-shadow: 0px 1px 0 rgba(255, 255, 255, 0.4);
padding: 4px 10px 2px 10px;
font: normal 11px Verdana, Geneva, sans-serif;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
cursor: pointer;
}

Замените на

.blgreen { border:1px solid #d0d0d0;background: #FF0; /* Old browsers */
background: -moz-linear-gradient(top, #FF0 0%, #F00 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FF0), color-stop(100%,#F00)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #FF0 0%,#F00 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #FF0 0%,#F00 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #FF0 0%,#F00 100%); /* IE10+ */
background: linear-gradient(to bottom, #FF0 0%,#F00 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FF0', endColorstr='#F00',GradientType=0 ); /* IE6-9 */
padding:4px 10px 6px 10px; font:normal 13px Verdana, Geneva, sans-serif; color:#000; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius:4px; cursor:pointer; text-shadow: 0px 1px 0 rgba(255, 255, 255, 1);}

Цвета #FF0 и #F00 замените на свои(по экспериментируйте).
Color:#000 для изменения цвета самой надписи.

[Lamer]

Убрал нах градиент, это ж  каким надо быть чтобы там смешать 5 цветов   и получить желаемый.
Данил, скажите как поменять в карточке товара цвета кнопок - в корзину и быстрый заказ.
2 Как сделать тень на кнопках?

[Danil]

Lamer (21 Сентябрь 2014 - 10:25) писал:

Убрал нах градиент, это ж  каким надо быть чтобы там смешать 5 цветов   и получить желаемый.
Данил, скажите как поменять в карточке товара - в корзину и быстрый заказ.
2 Как сделать тень на кнопках?

В main.css найдите

.whtblue, input[type=submit].paymentFormTbodySubmitButton {
border: 1px solid #d0d0d0 !important;
background: #607A53 center top repeat-x;
padding: 5px 15px;
color: #FFFFFF;
font-weight: bold;
color: #FFFFFF;
height: 32px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 1px;
cursor: pointer;
outline: none;
}

Меняйте по аналогии с предыдущими кнопками
Чтобы сделать тень к тексту вставьте данную строку в код стиля кнопки.

text-shadow: 3px 4px 2px #FF0;

По экспериментируйте со значениями.