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

[kirill-lavrov82]

Здравствуйте, хочу к новому году немного украсить сайт. Как пример можно глянуть тут что бы летели снежинки голубого цвета.
А так же вставить надпись с новым годом и картинку как на скрине.
Помогите это реализовать пожалуйста.

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

• 

[miyako]

kirill-lavrov82 (13 Декабрь 2012 - 10:31) писал:

Здравствуйте, хочу к новому году немного украсить сайт. Как пример можно глянуть тут что бы летели снежинки голубого цвета.
А так же вставить надпись с новым годом и картинку как на скрине.
Помогите это реализовать пожалуйста.

Чтобы вставить картинки вам нужно открыть шаблон HTML и в блок <div id="header"> вставить следующих два кода:

<div style="position: absolute; top: 4px;  left: 350px; "> <img src="{ASSETS_IMAGES_PATH}название изображения"/> </div>

<div style="position: absolute;top: 35px;  right: 230px; "><img src="{ASSETS_IMAGES_PATH}название изображения"/> </div>

[kirill-lavrov82]

miyako (13 Декабрь 2012 - 13:12) писал:

Чтобы вставить картинки вам нужно открыть шаблон HTML и в блок <div id="header"> вставить следующих два кода:

<div style="position: absolute; top: 4px; left: 350px; "> <img src="{ASSETS_IMAGES_PATH}название изображения"/> </div>

<div style="position: absolute;top: 35px; right: 230px; "><img src="{ASSETS_IMAGES_PATH}название изображения"/> </div>

Картинку поставил, разобрался, а как сделать снежок??? Кто подскажет???

[Megamarket]

Наверное скрипт сам должен быть для снега, нужно в интернете поискать что то на подобие. Я тоже таким интересуюсь!

[Vaccina]

Если вам необходима анимация, то вы можете подобрать один из вариантов тут

http://www.jqueryrai...l-with-example/
http://pixeljack.ru/blog/jsnow/
http://www.jquery4u....istmas-effects/
http://jquerybyexamp...ect-plugin.html

[kirill-lavrov82]

Vaccina (14 Декабрь 2012 - 01:16) писал:

Если вам необходима анимация, то вы можете подобрать один из вариантов тут

http://www.jqueryrai...l-with-example/
http://pixeljack.ru/blog/jsnow/
http://www.jquery4u....istmas-effects/
http://jquerybyexamp...ect-plugin.html

Спасибо!!! Все получилось и работает.

[Megamarket]

Vaccina (14 Декабрь 2012 - 01:16) писал:

Если вам необходима анимация, то вы можете подобрать один из вариантов тут

http://www.jqueryrai...l-with-example/
http://pixeljack.ru/blog/jsnow/
http://www.jquery4u....istmas-effects/
http://jquerybyexamp...ect-plugin.html

Мне тоже очень понравилось. Спасибо!

[kirill-lavrov82]

Появились вопросы, не получается с фоном, много раз пробовал, но не вышло, темы читал, не получается, то фон короткий, то он по верх всего идет. помогите решить. Фон нужен от шапки до подвала неподвижный. На скрине нарисовал. Затем увеличить слайдер, или для этого просто достаточно увеличить размер показываемых  картинок?  Так же не понял как полностью заменить шапку и подвал сайта.

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

• 

[Koderhan]

kirill-lavrov82 (20 Декабрь 2012 - 18:07) писал:

Появились вопросы, не получается с фоном, много раз пробовал, но не вышло, темы читал, не получается, то фон короткий, то он по верх всего идет. помогите решить. Фон нужен от шапки до подвала неподвижный. На скрине нарисовал. Затем увеличить слайдер, или для этого просто достаточно увеличить размер показываемых  картинок?  Так же не понял как полностью заменить шапку и подвал сайта.

Фон по бокам основного контента можно изменить следующим образом.
В файле main.csstemplate.
Найти код:

Заменить:

#contentWrap {clear: both;background: url(http://f1.foto.rambler.ru/preview/r/600x600/4d26f8f9-151c-3ff9-7014-16b9654f28e0/%D1%84%D0%BE%D0%BD_%D0%BD%D0%B5%D0%B1%D0%BE.gif);background-color: gray;}

где код:

http://f1.foto.rambler.ru/preview/r/600x600/4d26f8f9-151c-3ff9-7014-16b9654f28e0/%D1%84%D0%BE%D0%BD_%D0%BD%D0%B5%D0%B1%D0%BE.gif

Ссылка на изображение а gray это цвет фона.

Найти код:

#content {width: 960px;margin: 0 auto;}

Заменить:

#content {width: 960px;margin: 0 auto;background-color: white;}

В файле nyvo_default.css.
Найти код:

.theme-default .nivoSlider {
position:relative;
background:#fff url({ASSETS_IMAGES_PATH}nyro_loading.gif) no-repeat 50% 50%;
margin-bottom:-10px;
-webkit-box-shadow: 0px 1px 5px 0px #4a4a4a;
-moz-box-shadow: 0px 1px 5px 0px #4a4a4a;
box-shadow: 0px 1px 5px 0px #4a4a4a;
width: 98%;
}

Заменить:

.theme-default .nivoSlider {
position:relative;
background:#fff url({ASSETS_IMAGES_PATH}nyro_loading.gif) no-repeat 50% 50%;
margin-bottom:-10px;
-webkit-box-shadow: 0px 1px 5px 0px #4a4a4a;
-moz-box-shadow: 0px 1px 5px 0px #4a4a4a;
box-shadow: 0px 1px 5px 0px #4a4a4a;
width: 98%;
}

Найти код:

.theme-default {
width: 535px;
}

Заменить:

.theme-default {
width: 100%;
}

[kirill-lavrov82]

Koderhan (20 Декабрь 2012 - 19:15) писал:

Фон по бокам основного контента можно изменить следующим образом.
В файле main.csstemplate.
Найти код:

Заменить:

#contentWrap {clear: both;background: url(http://f1.foto.rambler.ru/preview/r/600x600/4d26f8f9-151c-3ff9-7014-16b9654f28e0/%D1%84%D0%BE%D0%BD_%D0%BD%D0%B5%D0%B1%D0%BE.gif);background-color: gray;}

где код:

http://f1.foto.rambler.ru/preview/r/600x600/4d26f8f9-151c-3ff9-7014-16b9654f28e0/%D1%84%D0%BE%D0%BD_%D0%BD%D0%B5%D0%B1%D0%BE.gif

Ссылка на изображение а gray это цвет фона.

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

[Vaccina]

В данный момент на вашем сайте шапка отображается корректно. Возможно вам необходимо очистить кэш в вашем браузере.

Для задания фиксированного фона - вам необходимо в файле стилей main.css раздела редактора тем - найти

#content {
	margin: 0 auto;
	width: 960px;
}

и заменить на

#content {
	margin: 0 auto;
	width: 960px;
	background-color: #fff;
}

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

#contentWrap {
	background: url("/web/upload/assets/images/133/132311/contentWrap_bg.jpg") repeat-x scroll left bottom transparent;
	clear: both;
}

и замените на

#contentWrap {
	background: url("/web/upload/assets/images/133/132311/contentWrap_bg.jpg") repeat-x fixed left top;
	clear: both;
}

далее в разделе редактора тем - найдите файл "contentWrap_bg.jpg" и замените его на необходимое изображение для фиксированного фона.

Для изменения размера слайдера - вам необходимо в файле стилей main.css найти

.theme-default {
	width: 535px;
}

и изменить свойство width для задания необходимой ширины. Так же в файле стилей nyro_default.css найдите

.nivoSlider {
	border-radius: 0 0 0 0;
	height: 300px;
	overflow: hidden;
	position: relative;
	width: 533px;
}

и измените свойства width и height для задания необходимой ширины и высоты соответственно.

[kirill-lavrov82]

Со слайдером ясно, далее нужно соответственно подогнать фото под заданный размер слайдера, понял. А какого размера долженбыть фиксированный задний фон, я не понял. Файл "contentWrap_bg.jpg" имеет размер 300*300.


Еще вопрос такой, сейчас верхнее меню состоит из прямоугольных блоков, как немного каждому из них закруглить края??? как на этом сайте например.

[support 2.0]

kirill-lavrov82 (21 Декабрь 2012 - 05:04) писал:

Со слайдером ясно, далее нужно соответственно подогнать фото под заданный размер слайдера, понял. А какого размера долженбыть фиксированный задний фон, я не понял. Файл "contentWrap_bg.jpg" имеет размер 300*300.


Еще вопрос такой, сейчас верхнее меню состоит из прямоугольных блоков, как немного каждому из них закруглить края??? как на этом сайте например.

Да, размер этого файла 300х300. Просто в стилях задано, что это изображение потом при вставки в левый верхний угол копируется и становится одним большим фоном.

[kirill-lavrov82]

support 2.0 (21 Декабрь 2012 - 13:45) писал:

Да, размер этого файла 300х300. Просто в стилях задано, что это изображение потом при вставки в левый верхний угол копируется и становится одним большим фоном.

1.А что с блоками меню, ткните носом что покрутить нужно, с цветом и отступами между ними разобрался, как закруглить не пойму

2.Вроде разобрался, а можно ли выделить как на картинке тонкой черной полоской на скрине нарисовал.

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

• 

[Koderhan]

kirill-lavrov82 (21 Декабрь 2012 - 14:27) писал:

1.А что с блоками меню, ткните носом что покрутить нужно, с цветом и отступами между ними разобрался, как закруглить не пойму

2.Вроде разобрался, а можно ли выделить как на картинке тонкой черной полоской на скрине нарисовал.

В файле main.csstemplate.
Найти код:

#contentMainTb {width: 960px;margin:0;border-collapse: collapse;border-spacing: 0;}

Заменить:

#contentMainTb {
width: 960px;
margin:0;
border-collapse: collapse;
border-spacing: 0;
border-left: 1px solid #006C80;
border-right: 1px solid rgb(0, 108, 128);
}

[kirill-lavrov82]

Koderhan (21 Декабрь 2012 - 15:34) писал:

В файле main.csstemplate.
Найти код:

#contentMainTb {width: 960px;margin:0;border-collapse: collapse;border-spacing: 0;}

Заменить:

#contentMainTb {
width: 960px;
margin:0;
border-collapse: collapse;
border-spacing: 0;
border-left: 1px solid #006C80;
border-right: 1px solid rgb(0, 108, 128);
}

Полосы получились, что посоветовать можете с закруглением маленьких блоков меню???

[support 2.0]

kirill-lavrov82 (21 Декабрь 2012 - 17:52) писал:

Полосы получились, что посоветовать можете с закруглением маленьких блоков меню???

Найдите в файле main.css строчку (252 строка)

#mainNav table td div a:link,
#mainNav table td div a:visited {display: block; font: 12px/22px sans-serif;height: 26px;color: #000;padding: 4px 10px 0 10px;background: url("/web/upload/assets/images/133/132311/nav_item_bg.gif") repeat-x bottom left;}

и замените ее на

#mainNav table td div a:link,
#mainNav table td div a:visited {display: block; font: 12px/22px sans-serif;height: 26px;color: #000;padding: 4px 10px 0 10px;background: url("/web/upload/assets/images/133/132311/nav_item_bg.gif") repeat-x bottom left;moz-border-radius: 15px 15px 15px 15px;  -webkit-border-radius: 15px 15px 15px 15px;  border-radius: 15px 15px 15px 15px;}

[kirill-lavrov82]

support 2.0 (21 Декабрь 2012 - 18:31) писал:

Найдите в файле main.css строчку (252 строка)

#mainNav table td div a:link,
#mainNav table td div a:visited {display: block; font: 12px/22px sans-serif;height: 26px;color: #000;padding: 4px 10px 0 10px;background: url("/web/upload/assets/images/133/132311/nav_item_bg.gif") repeat-x bottom left;}

и замените ее на

#mainNav table td div a:link,
#mainNav table td div a:visited {display: block; font: 12px/22px sans-serif;height: 26px;color: #000;padding: 4px 10px 0 10px;background: url("/web/upload/assets/images/133/132311/nav_item_bg.gif") repeat-x bottom left;moz-border-radius: 15px 15px 15px 15px; -webkit-border-radius: 15px 15px 15px 15px; border-radius: 15px 15px 15px 15px;}

Результата нет, сделал все как сказали, только у меня это 303 строка, поменял код, и результат ноль. Прилагаю картинку, что хочу сделать. И такой вопрос еще по полосам из прошлого поста, а нельзя ли их сделать еще тоньше, а  то сильно толстоватые.

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

• 

[support 2.0]

kirill-lavrov82 (22 Декабрь 2012 - 07:57) писал:

Результата нет, сделал все как сказали, только у меня это 303 строка, поменял код, и результат ноль. Прилагаю картинку, что хочу сделать.

Найдите вот такой блок ( у Вас примерно он начинается с 302 строки)

#mainNav table td div {float:left;font-size: 1.25em;line-height: 1.3333em;height: 30px;background: #FFF url("/web/upload/assets/images/133/132311/nav_item_bg.gif") repeat-x bottom left;}
#mainNav table td div a:link,
#mainNav table td div a:visited {display: block; font: 12px/22px sans-serif;height: 26px;color: #000;padding: 4px 10px 0 10px;background: url("/web/upload/assets/images/133/132311/nav_item_bg.gif") repeat-x bottom left;moz-border-radius: 15px 15px 15px 15px; -webkit-border-radius: 15px 15px 15px 15px; border-radius: 15px 15px 15px 15px;}

и замените его на

#mainNav table td div {float:left;font-size: 1.25em;line-height: 1.3333em;height: 30px;background: #FFF url("/web/upload/assets/images/133/132311/nav_item_bg.gif") repeat-x bottom left;moz-border-radius: 15px 15px 0px 0px; -webkit-border-radius: 15px 15px 0px 0px; border-radius: 15px 15px 0px 0px;}
#mainNav table td div a:link,
#mainNav table td div a:visited {display: block; font: 12px/22px sans-serif;height: 26px;color: #000;padding: 4px 10px 0 10px;background: url("/web/upload/assets/images/133/132311/nav_item_bg.gif") repeat-x bottom left;moz-border-radius: 15px 15px 0px 0px; -webkit-border-radius: 15px 15px 0px 0px; border-radius: 15px 15px 0px 0px;}

kirill-lavrov82 (22 Декабрь 2012 - 07:57) писал:

И такой вопрос еще по полосам из прошлого поста, а нельзя ли их сделать еще тоньше, а  то сильно толстоватые.

У Вас ширина полос стоит 1 пиксель - меньше сделать нельзя. Но Вы можете поставить цвет бледнее и он будет визуально казаться тоньше. Для этого вставленный ранее блок

#contentMainTb {
width: 960px;
margin:0;
border-collapse: collapse;
border-spacing: 0;
border-left: 0px solid #000;
border-right: 0px solid #000;(0, 108, 128);
}

замените на

#contentMainTb {
width: 960px;
margin:0;
border-collapse: collapse;
border-spacing: 0;
border-left: 1px solid #93BBC2;
border-right: 1px solid #93BBC2;
}

Результат можете посмотреть на прикрепленном изображении.

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

• 

[kirill-lavrov82]

support 2.0 (22 Декабрь 2012 - 08:40) писал:

Результат можете посмотреть на прикрепленном изображении.

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