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

[shopyuliya]

Добрый день.
Давно хочу сделать кое какие изменения, но сама совсем не представляю как.
Вот сайт, vega-market. ru как образец, что я хочу сделать:
1. отделить верхнее меню от основного блока и скруглить углы. При наведении на пункт меню, что бы кнопка меняла цвет.
2. отделить левое и правое меню от основного блока. Скруглить углы.
3. Разрезать левое и правое меню по пунктам, т.е. что бы между пунктами была тонкая полоска фона. При наведении что бы кнопка меняла цвет.
4. В правом меню, заголовок Каталог товаров оформить как в правом меню
5. Отредактировать заголовок Вы смотрели. Сейчас очень большой шрифт

[Dars]

shopyuliya (08 Ноябрь 2014 - 14:09) писал:

Добрый день.
Давно хочу сделать кое какие изменения, но сама совсем не представляю как.
Вот сайт, vega-market. ru как образец, что я хочу сделать:
1. отделить верхнее меню от основного блока и скруглить углы. При наведении на пункт меню, что бы кнопка меняла цвет.
2. отделить левое и правое меню от основного блока. Скруглить углы.
3. Разрезать левое и правое меню по пунктам, т.е. что бы между пунктами была тонкая полоска фона. При наведении что бы кнопка меняла цвет.
4. В правом меню, заголовок Каталог товаров оформить как в правом меню
5. Отредактировать заголовок Вы смотрели. Сейчас очень большой шрифт

Здравствуйте!
1. В main.css найдите код:

#mainNav {position: absolute;left: 0px;bottom: 5px;height: 35px;background: url("http://design.dukan39.ru/nav_bg.jpg") no-repeat;}
#mainNav table {float:left;border-collapse: collapse;border-spacing: 0;background: url("http://design.dukan39.ru/nav_bg_right.gif") no-repeat bottom right;padding: 5px 5px 0 0;height: 30px;margin:auto;}

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

#mainNav {position: absolute;left: 0px;bottom: 5px;height: 35px;background: url("http://design.dukan39.ru/nav_bg.jpg") no-repeat; border-radius:10px;}
#mainNav table {float:left;border-collapse: collapse;border-spacing: 0;background: url("http://design.dukan39.ru/nav_bg_right.gif") no-repeat bottom right;padding: 5px 5px 0 0;height: 30px;margin:auto; border-radius:10px;}

Далее добавьте строку:

#mainNav table td div a:hover {background:green;}

Вместо green напишите нужный вам цвет.

2, 3. Эти пункты, как я понимаю, вы уже сделали самостоятельно?

4. В шаблоне HTML замените код:

 <td id="leftMenuBlockWrap"> 
	   <div id="leftMenuBlock">
						<!-- Каталог -->

						<div id="Border">
						<div id="Menuleft">
						  <h4 class="contentTbodyCatalogHeader">Каталог товаров</h4>

на:

 <td id="leftMenuBlockWrap">
  <div class="blocktitle bluesmall">Каталог товаров</div> 
	   <div id="leftMenuBlock">
						<!-- Каталог -->

						<div id="Border">
						<div id="Menuleft">

В main.css строку:

.right .blocktitle {
font-weight: normal; color: #BE9E4C; font-size: 1.8em; line-height: 1.1538em; margin: 0.7692em 0 0.3846em 0;
}

замените на:

.blocktitle {
font-weight: normal; color: #BE9E4C; font-size: 1.8em; line-height: 1.1538em; margin: 0.7692em 0 0.3846em 10px;
}

5. В main.css добавьте строку:

#leftMenuBlock h2 {font-size:20px}

Вместо 20 - нужное вам значение шрифта.

[shopyuliya]

Dars (09 Ноябрь 2014 - 08:23) писал:

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

По 1, 4 и 5 пунктам огромное спасибо, все как и нужно.
По 2 и 3 нет сама не справилась пока, хочу что бы получилось 3 блока, между ними были тонкие вертикальные полоски фона, так же как мы отделили верхнее меню от основного блока.

И как сделать сайт адаптивным под мобильные устройства?

[Ирина345]

shopyuliya (09 Ноябрь 2014 - 14:08) писал:

По 1, 4 и 5 пунктам огромное спасибо, все как и нужно.
По 2 и 3 нет сама не справилась пока, хочу что бы получилось 3 блока, между ними были тонкие вертикальные полоски фона, так же как мы отделили верхнее меню от основного блока.

И как сделать сайт адаптивным под мобильные устройства?

Здравствуйте, найдите в main.css

#leftMenuBlock {
background: #F7F6C7;
border: 2px solid ##008B45;
height: 600px;
margin: 10px;
width: 170px;
font-weight: bold;
border-radius: 10px;
}

замените на

#leftMenuBlock {

border: 2px solid ##008B45;
height: 600px;
margin: 10px;
width: 170px;
font-weight: bold;
border-radius: 10px;
}

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

#subNavigation li {
  font-size: 1.2em;
		line-height: 1.6em;
		padding: 0.6em 0 0.6em 11px;
  background: url({ASSETS_IMAGES_PATH}subnav_rule.gif) no-repeat left bottom;
}

замените на

#subNavigation li {
  font-size: 1.2em;
		line-height: 1.6em;
		padding: 0.6em 0 0.6em 11px;
  background: url({ASSETS_IMAGES_PATH}subnav_rule.gif) no-repeat left bottom;
background: #F7F6C7;
margin-top: 2px
}

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

#subNavigation li a:hover,
#subNavigation li a:active {
  background: url({ASSETS_IMAGES_PATH}square_bullet.gif) no-repeat 0 0.6em;
  color: #D0431D;
  text-decoration: none;
}

замените на

#subNavigation li a:hover,
#subNavigation li a:active {
  background: #123456 url({ASSETS_IMAGES_PATH}square_bullet.gif) no-repeat 0 0.6em;
  color: #D0431D;
  text-decoration: none;
}

для того что бы поменять цвет при наведение измените значение #123456

[shopyuliya]

Ирина345 (09 Ноябрь 2014 - 14:26) писал:

Здравствуйте, найдите в main.css

Здравствуйте, спасибо. Как я поняла, это позволило разделить в каталоге категории товаров. Но почему-то border-radius: 10px не применяется
Как же можно сделать что бы как на этом сайте. 3 блока левое меню, основной блок и правое меню, а между ними просвечивают полоски фона? vega-market. ru - образец

[Alekseys]

shopyuliya (09 Ноябрь 2014 - 15:23) писал:

Здравствуйте, спасибо. Как я поняла, это позволило разделить в каталоге категории товаров. Но почему-то border-radius: 10px не применяется
Как же можно сделать что бы как на этом сайте. 3 блока левое меню, основной блок и правое меню, а между ними просвечивают полоски фона? vega-market. ru - образец

Здравствуйте. В main.css добавьте

#subNavigation li:hover {
background: #6B8E23 0 0.6em;
border-radius: 10px;
}

и

#subNavigation li:hover a {
color: #D0431D;
}

[shopyuliya]

Alekseys (09 Ноябрь 2014 - 15:32) писал:

Здравствуйте. В main.css добавьте

#subNavigation li:hover {
background: #6B8E23 0 0.6em;
border-radius: 10px;
}

и

#subNavigation li:hover a {
color: #D0431D;
}

Спасибо, это позволило при наведении кнопку полностью залить цветом и скруглить уголки, но до наведения, уголку не круглые.
Подскажите как поменять цвет шрифта при наведении?

[Alekseys]

shopyuliya (09 Ноябрь 2014 - 15:49) писал:

Спасибо, это позволило при наведении кнопку полностью залить цветом и скруглить уголки, но до наведения, уголку не круглые.
Подскажите как поменять цвет шрифта при наведении?

Для изменения цвета шрифта замените параметр color  в main.css в

#subNavigation li:hover a {
color: #D0431D;
}

для изменения скругления меню до наведения измените в main.css

#subNavigation li {
font-size: 1.2em;
line-height: 1.6em;
padding: 0.6em 0 0.6em 11px;
background: url(http://design.dukan39.ru/subnav_rule.gif) no-repeat left bottom;
background: #F7F6C7;
margin-top: 2px;
}

на

#subNavigation li {
font-size: 1.2em;
line-height: 1.6em;
padding: 0.6em 0 0.6em 11px;
background: url(http://design.dukan39.ru/subnav_rule.gif) no-repeat left bottom;
background: #F7F6C7;
margin-top: 2px;
border-radius: 10px;
}

[shopyuliya]

Alekseys (09 Ноябрь 2014 - 15:53) писал:

Для изменения цвета шрифта замените параметр color  в main.css в
[CODE]
#subNavigation li:hover a {
color: #D0431D;
}

Спасибо, то что нужно.
Поправила цвет по аналогии и в верхнем меню.

[shopyuliya]

И последняя доделка, которую хочется реализовать.
См. картинку. фон где черные стрелочки, уголки везде круглые.

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

• 

[Alekseys]

shopyuliya (09 Ноябрь 2014 - 16:44) писал:

И последняя доделка, которую хочется реализовать.
См. картинку. фон где черные стрелочки, уголки везде круглые.

Уточните пожалуйста, о каких стрелочках речь.

[shopyuliya]

Alekseys (09 Ноябрь 2014 - 16:58) писал:

Уточните пожалуйста, о каких стрелочках речь.

загрузила не ту картинку

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

• 

[Alekseys]

shopyuliya (09 Ноябрь 2014 - 23:52) писал:

загрузила не ту картинку

В main.css замените

#content {
width: 1100px;
border-radius: 10px;
margin: 0 auto;
background-color: #fff;
}

на

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

[shopyuliya]

Alekseys (10 Ноябрь 2014 - 00:02) писал:

В main.css замените

#content {
width: 1100px;
border-radius: 10px;
margin: 0 auto;
background-color: #fff;
}

на

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

Не помогло, только круглые уголки стали прямыми

[Alekseys]

shopyuliya (10 Ноябрь 2014 - 15:14) писал:

Не помогло, только круглые уголки стали прямыми

Здравствуйте. Уточните пожалуйста, что именно Вы желаете изменить?

[shopyuliya]

Alekseys (10 Ноябрь 2014 - 15:43) писал:

Здравствуйте. Уточните пожалуйста, что именно Вы желаете изменить?

Я хочу разделить сайт на 3 части, левое меню, тонкая полоска фона, основной блок, тонкая полоска фона и правое меню. Сейчас левое меню. основной блок и правое меню выглядит одним блоком

[Alekseys]

shopyuliya (10 Ноябрь 2014 - 22:52) писал:

Я хочу разделить сайт на 3 части, левое меню, тонкая полоска фона, основной блок, тонкая полоска фона и правое меню. Сейчас левое меню. основной блок и правое меню выглядит одним блоком

К сожалению на данном шаблоне это сделать не удастся.

[shopyuliya]

Alekseys (10 Ноябрь 2014 - 23:00) писал:

К сожалению на данном шаблоне это сделать не удастся.

Поняла. Спасибо за помощь.

[A-start]

Как на левую часть страницы наложить фон? что бы выглядило примерно так:

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

• 

[RayLi]

A-start (25 Ноябрь 2014 - 12:26) писал:

Как на левую часть страницы наложить фон? что бы выглядило примерно так:

Здравствуйте.
На вашем сайте уже применены подобные изменения.
Скажите, пожалуйста, ваш вопрос ещё актуален?