Урок№6. Как изменить меню сайта на ucoz.ru - Все о мотоблоках

Урок№6. Как изменить меню сайта на ucoz.ru

В этом уроке Вы узнаете, как поменять горизонтальное и вертикальное меню на ucoz.ru. Сначала мы поменяем верхнее меню, потом левое и правое.

Как поменять верхнее меню на ucoz

Верхнее меню мы изменим незначительно. Поменяем цвет фона, сделаем нижнее подчёркивание и установим цвет ссылки белым.

Зайдите в «Дизайн» -> Управление дизайном (CSS)

Управление дизайном CSS на ucoz

Найдите следующую строчку в верхней части таблицы стилей:

#navBar {padding:5px;background:#6B6B6B;overflow:auto;}

Поменяем сначала цвет фона меню #6B6B6B на #949494, т.е. так:

#navBar {padding:5px;background:#949494;overflow:auto;}

Нажмите «Сохранить» и Вы увидите, что фон стал более светлым.

Теперь давайте сделаем нижнее подчёркивание чёрного цвета (#000000) толщиной в 2px, т.е. нам нужно добавить следующий код (красным цветом помечено то, что было добавлено):

#navBar {padding:5px;background:#949494;overflow:auto;border-bottom:2px solid #000000;}

, где
border-bottom – это команда, которая определяет стили для нижнего подчёркивания
2px – толщина нижнего подчёркивания
solid – означает, что линия будет сплошная
#000000 – чёрный цвет.

Нам осталось поменять цвет ссылки в верхнем меню. Для этого нам нужно найти четыре строчки, которые расположены ниже (после стилей для заголовка h1) и слегка подправить их:

#navBar a:link {text-decoration:underline; color:#CCCCCC;}
#navBar a:active {text-decoration:underline; color:#CCCCCC;}
#navBar a:visited {text-decoration:underline; color:#CCCCCC;}
#navBar a:hover {text-decoration:none; color:#FFFFFF;}

Для справки:
a:link – псевдокласс для тех ссылок, которые еще не посещались пользователем.
a:active – псевдокласс для активных ссылок. Активной ссылка становится во время её нажатия.
a:visited – псевдокласс для ссылок, которые уже посещались пользователем.
a:hover – псевдокласс для ссылок, на которые наводится курсор.

Для всех вышеперечисленных стилей мы зададим белый цвет #FFFFFF. Данные text-decoration мы оставим без изменений.

Для справки:
text-decoration: underline; – устанавливает подчеркнутый текст (пример).
text-decoration: none; – отменяет все эффекты, в том числе и подчеркивания у ссылок, которое задано по умолчанию.
text-decoration: blink; – устанавливает мигающий текст примерно раз в секунду (пример).
text-decoration: line-through; – создает перечеркнутый текст (пример).
text-decoration: overline; – линия проходит над текстом (пример).
text-decoration: inherit; – значение наследуется у родителя.

Итак, приведите стили для ссылок верхнего меню в следующий вид (красным цветом помечено то, что было изменено):

#navBar a:link {text-decoration:underline; color:#FFFFFF;}
#navBar a:active {text-decoration:underline; color:#FFFFFF;}
#navBar a:visited {text-decoration:underline; color:#FFFFFF;}
#navBar a:hover {text-decoration:none; color:#FFFFFF;}

Нажмите «Сохранить» и обновите сайт. Фон мы поменяли, нижнее подчёркивание сделали, и цвет ссылок поменяли. Наведите курсор мышки на любой пункт верхнего меню, и Вы увидите, что нижнее подчёркивание исчезает у ссылки (за эту функцию отвечает стиль text-decoration:none).

Как поменять вертикальное меню сайта на ucoz

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

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

.subColumn {width:20%;vertical-align:top;background:#F6F6F6;}

Вместо #F6F6F6 укажите цвет #E8B556:

.subColumn {width:20%;vertical-align:top;background:#E8B556;}

Нажмите «Сохранить» и посмотрите, что получилось. Да, пока не очень всё красиво выглядит, но не пугайтесь, сейчас мы всё оформим в лучшем виде. 😉

На следующем шаге мы поменяем фон заголовков блоков меню (Поиск, Друзья сайта, Статистика, Форма входа и т.д.). Найдите строчку:

.boxTable th {text-align:center;background:#EBEBEB;}

Замените цвет #EBEBEB на #9C793A:

.boxTable th {text-align:center;background:#9C793A;}

Нажмите «Сохранить». Фон заголовка мы поменяли, теперь удалим разделительные линии серого цвета между блоками меню. Они нам не понадобятся.

Найдите строчку:

.boxTable {border:0px; padding:0px; border-collapse: collapse; width:100%; border-top:1px solid #DDDDDD; border-bottom:1px solid #DDDDDD;}

Нам нужно удалить следующие стили:

border-top:1px solid #DDDDDD;
border-bottom:1px solid #DDDDDD;

Чтобы понять, что мы удаляем, я предлагаю Вам на время поменять цвет #DDDDDD на #FF0000 (красный цвет), и Вы увидите, о каких линиях идёт речь.

После того как Вы удалите border-top и border-bottom, наш код для класса .boxTable будет выглядеть так:

.boxTable {border:0px; padding:0px; border-collapse: collapse; width:100%; margin-bottom:3px;}

Нажмите «Сохранить». Линии исчезли.

Давайте сначала доработаем правое меню, а потом перейдём к левому. В правой колонке нам осталось поменять цвет ссылок в блоке «Друзья сайта». Если посмотреть код страницы сайта (Правая кнопка мыши в нейтральной области -> Исходный код), то мы увидим, что ссылки на сайты друзей стоят в контейнере таблицы <td class=»boxContent»></td>. Каждая ссылка заключена в теги <li></li>. Значит, чтобы написать нужные нам стили для ссылок друзей, необходимо сначала написать .boxContent, потом через пробел li и затем уже стили для ссылок.

Добавьте на отдельной строчке нижеприведённый код в таблицу стилей и нажмите «Сохранить»:

.boxContent li a {text-decoration:underline; color:#FFFFFF;}

, где
text-decoration:underline; – устанавливает подчеркнутый текст;
color:#FFFFFF; – устанавливает белый цвет ссылки.

Обновив сайт, Вы увидите, что ссылка подчеркнута, и цвет ссылки поменялся на белый. Наведите курсор мышки на любую ссылку в блоке «Друзья сайта». Вы обнаружите, что ссылка никак не меняется. Как упоминалось раньше, a:hover – псевдокласс для ссылок, на которые наводится курсор. Цвет ссылки для псевдокласса a:hover мы не будем менять, но сделаем так, чтобы нижнее подчёркивание у ссылки убиралось. Добавьте в таблицу стилей CSS следующий код:

.boxContent li a:hover {text-decoration:none; color:#FFFFFF;}

Сохраните изменения, и Вы увидите, что при наведении курсора мыши на любую из ссылок блока «Друзья сайта» нижнее подчёркивание исчезает.

В правой колонке мы сделали всё, что нужно.

Перейдём к доработке дизайна в левой колонке.

В первую очередь мы поменяем оформление пунктов меню. Сначала мы изменим фон и цвет рамки пунктов меню. Для этого нужно найти и отредактировать следующий код:

.uMenuV li {margin: 3px 0px; background:url(‘/.s/t/844/3.gif’) repeat-x #FFFFFF; padding:5px; text-align:center; text-transform:uppercase; border:1px solid #DDDDDD;}

Чтобы поменять фон пунктов меню, нужно код url(‘/.s/t/844/3.gif’) repeat-x #FFFFFF заменить на #9C793A.

Чтобы поменять серый цвет рамки пунктов меню на  чёрный, нужно в border заменить код #DDDDDD (серый цвет) на #000000 (чёрный цвет).

В итоге мы получаем следующий код (красным цветом обозначены произведённые изменения в коде):

.uMenuV li {margin: 3px 0px;background: #9C793A; padding:5px; text-align:center; text-transform:uppercase; border:1px solid #000000;}

Теперь нам нужно поменять цвет ссылок  пунктов меню. Для этого мы будем править следующие коды, которые расположены чуть выше .uMenuV li:

.uMenuV li a:link {text-decoration:none; color:#7D7D7D}
.uMenuV li a:active {text-decoration:none; color:#7D7D7D}
.uMenuV li a:visited {text-decoration:none; color:#7D7D7D}
.uMenuV li a:hover {text-decoration:underline; color:#000000}

Мы поменяем только цвет ссылок во всех состояниях на #FFFFFF (белый цвет). Т.е. данные коды должны быть приведены в следующий вид (красным цветом помечены изменения, которые произошли):

.uMenuV li a:link {text-decoration:none; color:#FFFFFF}
.uMenuV li a:active {text-decoration:none; color:#FFFFFF}
.uMenuV li a:visited {text-decoration:none; color:#FFFFFF}
.uMenuV li a:hover {text-decoration:underline; color:#FFFFFF}

Сохраните все изменения и обновите сайт. Вроде ничего получилось. 🙂

Нам осталось сделать пару завершающих штрихов – это поменять серый цвет линии под заголовком «Статистика» на #FFFFFF (белый цвет) и разобраться с формой входа.

Чтобы поменять цвет линии на #FFFFFF нужно найти и отредактировать следующий код:

hr {color:#CCCCCC;height:1px;border:none;background:#CCCCCC;}

Тег <hr /> рисует горизонтальную линию. Та линия, которая находится под заголовком «Статистика» и есть тег <hr />, если смотреть на страницу с точки зрения кода (чтобы посмотреть код страницы, нужно на странице сайта в нейтральной области нажать на правую кнопку мышки и выбрать пункт «Исходный код») .

Что мы видим, исходя из стилей CSS:

  • указан серый цвет #CCCCCC у color (если честно, вообще не понятно, зачем эта команда применяется по умолчанию, т.к. в данном случае color не на что не влияет, поэтому мы его просто удалим);
  • высота (height) линии равняется 1px;
  • написана команда none, чтобы бордюр (border) не отображался так, как он должен выглядеть по умолчанию;
  • указан серый цвет #CCCCCC у background (фон).

Чтобы поменять цвет линии на белый нужно заменить значение background#CCCCCC на #FFFFFF. Также удалим лишний код color. В итоге мы получаем следующий код:

hr {height:1px;border:none;background: #FFFFFF;}

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

Зайдите в Дизайн -> Управление дизайном (шаблоны) -> Первый контейнер

Найдите строчку, где стоит заголовок h2 «Форма входа»:

Найдите строчку, где стоит заголовок h2 «Форма входа»:

Передвиньте горизонтальную прокрутку вправо до места, где стоит код <!— <bc> —>$LOGIN_FORM$<!— </bc> —>:

Передвиньте горизонтальную прокрутк

Удалите <!— <bc> —>$LOGIN_FORM$<!— </bc> —> и вместо него вставьте следующий:

<div id=»login»><a href=»#» onclick=»window.open(‘http://login.uid.me/?site=0ЗДЕСЬ_ДОЛЖНО_БЫТЬ_НАЗВАНИЕ_САЙТА&amp;ref=’+window.location.href,’unetLoginWnd’,’width=500,height=350,resizable=yes,titlebar=yes’);return false;»>Войти через uID</a></div>

Вместо ЗДЕСЬ_ДОЛЖНО_БЫТЬ_НАЗВАНИЕ_САЙТА нужно вставить название сайта. В моём случае, katalogik.ucoz.ru – адрес сайта, а katalogik – название сайта. Значит я вставляю следующий код:

<div id=»login»><a href=»#» onclick=»window.open(‘http://login.uid.me/?site=0katalogik&amp;ref=’+window.location.href,’unetLoginWnd’,’width=500,height=350,resizable=yes,titlebar=yes’);return false;»>Войти через uID</a></div>

Вы же вставляете название своего сайта.

Нажмите «Сохранить» и обновите дизайн сайта. На данный момент мы видим обычную ссылку серого цвета. Чтобы изменить вид ссылки, нужно задать стили для #login.

Зайдите в админке в Дизайн -> Управление дизайном (CSS) и вставьте следующие стили в таблицу CSS:

#login {text-align:center} /*Устанавливает элементы внутри блока по центру */
#login a {color:#FFFFFF; text-decoration:underline;} /* Стили для неактивной ссылки */
#login a:hover {color:#FFFFFF; text-decoration:none;} /* Стили для ссылок, на которые наводится курсор */

Сохраните изменения и обновите сайт. Ссылка для входа пользователей расположена по центру, у неё теперь белый цвет, она подчёркнута, и при наведении на неё курсора мыши подчёркивание исчезает.

Осталось немного доработать форму входа. Я предлагаю сделать двойную рамку вокруг ссылки «Войти через uID». Для этого в #login мы добавим следующие значения (красным цветом то, что нужно добавить):

#login {text-align:center; border:4px double #FFFFFF;padding:5px;}

, где
padding:5px; – внутренний отступ в 5px со всех сторон
border:4px double #FFFFFF; – двойная (double) рамка белого цвета (#FFFFFF) в 4px.

Нажмите «Сохранить» и обновите главную страницу сайта.

Теперь форма входа гармонично смотрится с нашим дизайном сайта. Как говорится, простенько, но со вкусом 🙂 .

Нам осталось изменить цвет текста в левом меню, когда открываются категории каталога. Зайдите в раздел «Каталог сайтов», и Вы увидите следующую картину в левом меню:

Как изменить цвет текста в левом меню, когда открываются категории каталога

Как видите, ссылки не сочетаются с дизайном сайта. Давайте подправим это. Для редактирования ссылок мы будем менять следующие стили:

a.catName:link {text-decoration:none; color:#7D7D7D;}
a.catName:visited {text-decoration:none; color:#7D7D7D;}
a.catName:hover {text-decoration:none; color:#000000;}
a.catName:active {text-decoration:none; color:#7D7D7D;}

О том, что каждый псевдокласс означает, мы поговорили в начале данного урока. Предлагаю для всех псевдоклассов указать чёрный цвет #000000 и все ссылки сделать подчёркнутыми. Ссылку без подчёркивания мы сделаем только для того случая, когда курсор мыши наводится на ссылку, т.е. для псевдокласса «a.catName:hover» мы оставим значение «text-decoration:none; » без изменений. Таким образом, мы указываем следующие значения (красным отмечено то, чтобы было изменено):

a.catName:link {text-decoration:underline; color:#000000;}
a.catName:visited {text-decoration:underline; color:#000000;}
a.catName:hover {text-decoration:none; color:#000000;}
a.catName:active {text-decoration:underline; color:#000000;}

Сохраните изменения и обновите страницу, оставаясь в разделе каталога сайта. Мы видим, что оформление ссылок поменялось не только в левом меню, но и в содержимом сайта. Нам осталось поменять цвет скобок, которые стоят рядом с каждой ссылкой. Для этого нужно отредактировать следующий код:

.catNumData {font-size:7pt;color:#6E6E6E;}

Поменяем серый цвет #6E6E6E на чёрный #000000:

.catNumData {font-size:7pt;color:#000000;}

Сохраните изменения и обновите страницу. Цвет скобок поменялся.

Поздравляю Вас! За 6 уроков мы полностью поменяли дизайн сайта на ucoz. А сейчас, давайте сравним, что было до и после, и полюбуемся результатом нашей с Вами работой. 😉

До


Увеличить (+)

После


Увеличить (+)

На мой взгляд, получилось неплохо. По крайней мере, теперь Вы знаете принцип того, как надо менять основные элементы сайта, сделанного на UCOZ.

Урок№7. Как работать с визуальным редактором сайта на ucoz.ru

Ссылка на основную публикацию