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


Вид Каталога


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

#1 demon408

demon408

    Продвинутый пользователь

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

Отправлено 19 Октябрь 2014 - 21:48

Здравствуйте,
Помогите, пожалуйста, произвести следующие изменения в отображении каталога:

Как сейчас:

Безымянный.jpg

Как надо сделать:

цауца.png

То есть надо сделать вид 1 уровня как 2 и 3

#2 Ирина345

Ирина345

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

  • Модераторы
  • 5 709 сообщений

Отправлено 20 Октябрь 2014 - 08:06

Просмотр сообщенияdemon408 (19 Октябрь 2014 - 21:48) писал:

Здравствуйте,
Помогите, пожалуйста, произвести следующие изменения в отображении каталога:

Как сейчас:

Прикрепленный файл Безымянный.jpg

Как надо сделать:

Прикрепленный файл цауца.png

То есть надо сделать вид 1 уровня как 2 и 3
Здравствуйте, найдите
.nav ul li { float:none; border-bottom:1px solid #FFF; }
замените на
.nav ul li { float:none; border-bottom:1px solid #FFF; background: #333333; }
далее найдите
.nav li { text-align:left; position:relative; }
замените на
.nav li { text-align:left; position:relative;background: #999; }
далее  найдите
.nav ul li a { float:none; padding:3px 9px; font-weight:normal; color:#050505 !important; }
замените на
.nav ul li a { float:none; padding:3px 9px; font-weight:normal; color:#ffffff !important; }


#3 demon408

demon408

    Продвинутый пользователь

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

Отправлено 20 Октябрь 2014 - 11:29

Просмотр сообщенияИрина345 (20 Октябрь 2014 - 08:06) писал:

Здравствуйте, найдите
.nav ul li { float:none; border-bottom:1px solid #FFF; }
замените на
.nav ul li { float:none; border-bottom:1px solid #FFF; background: #333333; }
далее найдите
.nav li { text-align:left; position:relative; }
замените на
.nav li { text-align:left; position:relative;background: #999; }
далее  найдите
.nav ul li a { float:none; padding:3px 9px; font-weight:normal; color:#050505 !important; }
замените на
.nav ul li a { float:none; padding:3px 9px; font-weight:normal; color:#ffffff !important; }

К сожалению, совсем не то получилось, появился только серый фон:

Безымянный.png

Надо чтобы было точь-в-точь как здесь:

аыца.png

#4 AnnaM

AnnaM

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

  • Пользователи
  • PipPipPipPip
  • 1 040 сообщений

Отправлено 20 Октябрь 2014 - 12:31

Просмотр сообщенияdemon408 (20 Октябрь 2014 - 11:29) писал:

К сожалению, совсем не то получилось, появился только серый фон:

Прикрепленный файл Безымянный.png

Надо чтобы было точь-в-точь как здесь:

Прикрепленный файл аыца.png
замените в main.css
.nav li a {
padding: 0 0 0;
font-weight: bold;
color: #CC0099;
line-height: normal;
}
на
.nav li a {
padding: 0 0 0;
font-weight: bold;
color: #000;
line-height: normal;
border-bottom: 1px solid #fff;
}

и добавьте
.nav ul li.level2 {
background: #999 !important;
}


#5 demon408

demon408

    Продвинутый пользователь

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

Отправлено 20 Октябрь 2014 - 13:20

Просмотр сообщенияAnnaM (20 Октябрь 2014 - 12:31) писал:

замените в main.css
.nav li a {
padding: 0 0 0;
font-weight: bold;
color: #CC0099;
line-height: normal;
}
на
.nav li a {
padding: 0 0 0;
font-weight: bold;
color: #000;
line-height: normal;
border-bottom: 1px solid #fff;
}

и добавьте
.nav ul li.level2 {
background: #999 !important;
}


Получилось вот что:

цывв.png

Еще нужно:

1) сделать шрифт и его размер на 1 уровне как на 2 и 3
2) межстрочные линии на 2 и 3 уровне почему-то стали жирные, нужно сделать как было
3) второй уровень немного наезжает на первый, нужно подправить

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

#6 AnnaM

AnnaM

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

  • Пользователи
  • PipPipPipPip
  • 1 040 сообщений

Отправлено 20 Октябрь 2014 - 13:27

Просмотр сообщенияdemon408 (20 Октябрь 2014 - 13:20) писал:

Получилось вот что:

Прикрепленный файл цывв.png

Еще нужно:

1) сделать шрифт и его размер на 1 уровне как на 2 и 3
2) межстрочные линии на 2 и 3 уровне почему-то стали жирные, нужно сделать как было
3) второй уровень немного наезжает на первый, нужно подправить

В общем нужно все подровнять, чтобы было один в один как на скрине из моего предыдущего сообщения.
1) замените в main.css
.nav {
padding: 0 3px 37px 7px;
margin: 0;
font-size: 15px;
}
на
.nav {
padding: 0 3px 37px 7px;
margin: 0;
font-size: 12px;
}
2) замените в main.css
.nav ul li {
float: none;
/border-bottom: 1px solid #FFF;
background: #333333;
}
на
.nav ul li {
float: none;
/* border-bottom: 1px solid #FFF; */
background: #333333;
}


#7 AnnaM

AnnaM

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

  • Пользователи
  • PipPipPipPip
  • 1 040 сообщений

Отправлено 20 Октябрь 2014 - 13:35

Просмотр сообщенияdemon408 (20 Октябрь 2014 - 13:20) писал:

Получилось вот что:

Прикрепленный файл цывв.png

Еще нужно:

1) сделать шрифт и его размер на 1 уровне как на 2 и 3
2) межстрочные линии на 2 и 3 уровне почему-то стали жирные, нужно сделать как было
3) второй уровень немного наезжает на первый, нужно подправить

В общем нужно все подровнять, чтобы было один в один как на скрине из моего предыдущего сообщения.
Также замените  
.nav ul li.active a,
.nav ul li.over a  { color:#FFF !important; background:#333333; }
на
.nav ul li.active a,
.nav ul li.over a  { color:#000 !important; background:#999; }


#8 demon408

demon408

    Продвинутый пользователь

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

Отправлено 20 Октябрь 2014 - 14:06

Просмотр сообщенияAnnaM (20 Октябрь 2014 - 13:35) писал:

Также замените  
.nav ul li.active a,
.nav ul li.over a { color:#FFF !important; background:#333333; }
на
.nav ul li.active a,
.nav ul li.over a { color:#000 !important; background:#999; }

Нет, получилось вот так:

уауа.png

А надо наоборот, чтобы на всех 3-х уровнях active был с темно-серым фоном и белым шрифтом, как здесь:

аыца.png

#9 Alekseys

Alekseys

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

  • Пользователи
  • PipPipPipPip
  • 2 355 сообщений

Отправлено 20 Октябрь 2014 - 14:54

Просмотр сообщенияdemon408 (20 Октябрь 2014 - 14:06) писал:

Нет, получилось вот так:

Прикрепленный файл уауа.png

А надо наоборот, чтобы на всех 3-х уровнях active был с темно-серым фоном и белым шрифтом, как здесь:

Прикрепленный файл аыца.png
Здравствуйте. В main.css добавьте
.nav li a:hover{background-color:black; color:white!important;}
.nav li li a:hover{background-color:black; color:white!important;}
.over a{background-color:black; color:white!important;}


#10 demon408

demon408

    Продвинутый пользователь

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

Отправлено 20 Октябрь 2014 - 15:39

Просмотр сообщенияAlekseys (20 Октябрь 2014 - 14:54) писал:

Здравствуйте. В main.css добавьте
.nav li a:hover{background-color:black; color:white!important;}
.nav li li a:hover{background-color:black; color:white!important;}
.over a{background-color:black; color:white!important;}

Извините, я немного ошибся. Все правильно, все оставляем как есть, но только для второго уровня active нужно сделать фон #999 и черный шрифт.

#11 Alekseys

Alekseys

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

  • Пользователи
  • PipPipPipPip
  • 2 355 сообщений

Отправлено 20 Октябрь 2014 - 15:51

Просмотр сообщенияdemon408 (20 Октябрь 2014 - 15:39) писал:

Извините, я немного ошибся. Все правильно, все оставляем как есть, но только для второго уровня active нужно сделать фон #999 и черный шрифт.
В main.css замените
.nav ul li a {
float: none;
padding: 3px 9px;
font-weight: normal;
color: #ffffff !important;
}
на
.nav ul li a {
float: none;
padding: 3px 9px;
font-weight: normal;
color: black!important;
background-color: #999;
border: 1px solid white;
}


#12 demon408

demon408

    Продвинутый пользователь

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

Отправлено 20 Октябрь 2014 - 16:41

Просмотр сообщенияAlekseys (20 Октябрь 2014 - 15:51) писал:

В main.css замените
.nav ul li a {
float: none;
padding: 3px 9px;
font-weight: normal;
color: #ffffff !important;
}
на
.nav ul li a {
float: none;
padding: 3px 9px;
font-weight: normal;
color: black!important;
background-color: #999;
border: 1px solid white;
}

Не помогло, ну да ладно, и так хорошо.
И последнее, необходимо подровнять по красной линии:

Безымянный.png

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

#13 Alekseys

Alekseys

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

  • Пользователи
  • PipPipPipPip
  • 2 355 сообщений

Отправлено 20 Октябрь 2014 - 16:45

Просмотр сообщенияdemon408 (20 Октябрь 2014 - 16:41) писал:

Не помогло, ну да ладно, и так хорошо.
И последнее, необходимо подровнять по красной линии:

Прикрепленный файл Безымянный.png

Первый блок сделать на пару px уже, а второй сдвинуть немного правее, чтобы не наезжал на первый.
Замените в main.css
.nav li.over ul {
left: 200px;
}
на
.nav li.over ul {
left: 206px;
}


#14 demon408

demon408

    Продвинутый пользователь

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

Отправлено 20 Октябрь 2014 - 17:21

Большое всем спасибо! Теперь все как надо

#15 demon408

demon408

    Продвинутый пользователь

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

Отправлено 08 Февраль 2015 - 16:00

Здравствуйте, помогите, пожалуйста, внести еще небольшие изменения. Необходимо кнопку "Добавить в корзину" на странице товара заменить на кнопку такого вида:

a.knopka {
color: #fff;
text-decoration: none;
user-select: none;
background: #000000;
padding: .7em 1.5em;
outline: none;
}
a.knopka:hover { background: #4d4d4d; }
a.knopka:active { background: white; }

#16 Alekseys

Alekseys

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

  • Пользователи
  • PipPipPipPip
  • 2 355 сообщений

Отправлено 08 Февраль 2015 - 16:15

Просмотр сообщенияdemon408 (08 Февраль 2015 - 16:00) писал:

Здравствуйте, помогите, пожалуйста, внести еще небольшие изменения. Необходимо кнопку "Добавить в корзину" на странице товара заменить на кнопку такого вида:

a.knopka {
color: #fff;
text-decoration: none;
user-select: none;
background: #000000;
padding: .7em 1.5em;
outline: none;
}
a.knopka:hover { background: #4d4d4d; }
a.knopka:active { background: white; }
Здравствуйте. Данные изменения Вам необходимо заменить в main.css в
button.button span {
float: left;
height: 25px;
background: #2F3030;
padding: 0 0 0 7px;
font: 13px Trebuchet MS, Helvetica, sans-serif;
text-align: center;
white-space: nowrap;
color: #fff;
font-weight: bold;
}
на
button.button span {
float: left;
height: 25px;
padding: 0 0 0 7px;
font: 13px Trebuchet MS, Helvetica, sans-serif;
text-align: center;
white-space: nowrap;
color: #fff;
font-weight: bold;
}
и добавить
button.button span {
float: left;
color: #fff;
text-decoration: none;
user-select: none;
background: #000000;
padding: .7em 1.5em!important;
outline: none;
}
button.button span span:hover {
background: #4d4d4d;
}
button.button span span:active {
background: white;
}


#17 demon408

demon408

    Продвинутый пользователь

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

Отправлено 08 Февраль 2015 - 16:40

Получилось вот что:

Безымянный.png

Осталось еще подровнять (убрать лишнее сверху и по бокам)

#18 Alekseys

Alekseys

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

  • Пользователи
  • PipPipPipPip
  • 2 355 сообщений

Отправлено 08 Февраль 2015 - 16:55

Просмотр сообщенияdemon408 (08 Февраль 2015 - 16:40) писал:

Получилось вот что:

Прикрепленный файл Безымянный.png

Осталось еще подровнять (убрать лишнее сверху и по бокам)
В main.css замените
button.button span {
float: left;
color: #fff;
text-decoration: none;
user-select: none;
background: #000000;
padding: .7em 1.5em!important;
outline: none;
}
на
button.button span span {
float: left;
color: #fff;
text-decoration: none;
user-select: none;
background: #000000;
padding: .7em 1.5em!important;
outline: none;
}


#19 demon408

demon408

    Продвинутый пользователь

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

Отправлено 26 Март 2015 - 17:38

Здравствуйте, помогите, пожалуйста, установить такую же галерею изображений как в Движении:

Безымянный.png

#20 demon408

demon408

    Продвинутый пользователь

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

Отправлено 28 Март 2015 - 22:08

мне ждать помощи или нет?




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

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