Урок№6. Как изменить меню сайта на ucoz.ru
В этом уроке Вы узнаете, как поменять горизонтальное и вертикальное меню на ucoz.ru. Сначала мы поменяем верхнее меню, потом левое и правое.
Как поменять верхнее меню на ucoz
Верхнее меню мы изменим незначительно. Поменяем цвет фона, сделаем нижнее подчёркивание и установим цвет ссылки белым.
Зайдите в «Дизайн» -> Управление дизайном (CSS)
Найдите следующую строчку в верхней части таблицы стилей:
#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 «Форма входа»:
Передвиньте горизонтальную прокрутку вправо до места, где стоит код <!-- <bc> -->$LOGIN_FORM$<!-- </bc> -->:
Удалите <!-- <bc> -->$LOGIN_FORM$<!-- </bc> --> и вместо него вставьте следующий:
<div id="login"><a href="#" onclick="window.open('http://login.uid.me/?site=0ЗДЕСЬ_ДОЛЖНО_БЫТЬ_НАЗВАНИЕ_САЙТА&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&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
Популярность заметки: 9%
Опубликовал admin 3 декабря, 2012 | Комментариев нет | Просмотров: 45,011
Рейтинг заметки:
Размещено в рубрике: Сайт на UCOZ
Метки: ucoz
Если Вам понравились материалы сайта http://webcaum.ru, и Вы хотите отблагодарить автора данного ресурса, то скопируйте код баннера, который представлен ниже, и вставьте его на любой странице Вашего сайта.