Меню

Как изменить цвет шрифта меню сайта ucoz



Как изменить цвет шрифта меню сайта ucoz

Четверг, 28.01.2021, 10:24
—>Приветствую Вас Гость | RSS

Как изменить цвет шрифта основного меню сайта

Boritanik Дата: Вторник, 30.11.2010, 11:47 | Сообщение # 1

Если , Вам необходимо заменить цвет текста основного меню:

1. Заходим в ПАНЕЛЬ УПРАВЛЕНИЯ сайтом и вверху находим вкладку ДИЗАЙН ,нажав выбираем УПРАВЛЕНИЕ ДИЗАЙНОМ CSS

2. Открыв находим следующее :

/* Site Menus */
.uMenuH li

* В строчке помеченной красным цвет шрифта основного меню — белый (#FFFFFF)
* В строчке помеченной зелёным цвет шрифта активного меню — красный (#FF0000)
* В строчке помеченной оранжевым цвет шрифта при подводке курсором меню — черный (#000000)

Вот и меняя эти коды цвета , Вы достигните задуманного !

Источник

Меняем размер и цвет шрифта меню


Screen 1.

цвет вообще непонятный. Вывод — надо передел ы вать шрифт полностью: 1. увеличить размер букв; 2. изменить их цвет. Как это сделать ? О ткрываем как всегда => Панель Управления => Управление дизайном => Таблица стилей (CSS):


Screen 2.

цветом. Цифра 10 обозначает размер шрифта, меняем её на 12pt и делаем «Сохранить«. Перегружаем сайт и видим, что строчки меню стали вполне нормального размера. Однако заголовок » Меню сайта » остался прежним. Значит его тоже надо увеличить.


Screen 3.

Четвертый шаг — размер шрифта изменили, заголовок изменили, остался на очереди цвет шрифта меню. Находим в Таблице стилей (CSS) раздел /* Site Menus */ , Screen 4. У нас строки 73, 74,


Screen 4.

75. Меняем КОД цвета на красный ( FF 0000 ). Незабываем почистить cuci в настройках браузера. Если цвет не меняется ищем КОД методом «тыка». В нашем случае цвет шрифта меню изменился на красный, Screen 5. Обратите внимание цвет меняется только в блоке меню, все остальные блоки остались


Screen 5.

прежними. С прежним цветом осталась и строка меню «Главная страница». Это потому, что данная строка активирована. Для того, чтобы изменить её цвет делаем:
Пятый шаг — меняем КОД color на строках 76, 78, 79 (ещё раз повторяем — так как все шаблоны разные у Вас могут быть другие строки, ищите. ), Screen 6. Кроме того, при наведении стрелки курсора на строку меню, она сменит свой окрас на такой же цвет.


Screen 6.

Источник

Как изменить цвет шрифта меню сайта ucoz

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

Очень важно! Если вдруг, перед тем как изучить урок вы обнаружили что вид вашей панели отличается от того что описано в уроке, не пугайтесь! Просто переключите новую панель на старую. Как это сделать? Вот в этой инструкции.

Рекомендую почитать:
Как поменять адрес сайта на ucoz Всего за 200р.

Давайте немного вернёмся в прошлый урок и вспомним что нам удалось сделать а точнее мне. На сколько помню первое что я сделал этот обвернул наши два элемента рекламу и текст в отдельные блоки div. При помощи этих блоков div теперь я буду управлять элементами на сайте, то-есть рекламой и текстом.

Управлять будем при помощи стилей css.

В прошлом уроке мне удалось рекламу разместить слева от текста, а текст с право от рекламы))

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

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

Назад в тот-же раздел css

В прошлом уроке мы прописали классы нашим блоками div. Для рекламы, название класса я дал «block_google» а для текста «block_text». У вас это могут быть ваши собственные названия, так-что если вдруг что-то работать не будет возможно название класса не правильное.

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

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

Для этого зайдите в раздел управление дизайном.

Откроется документ в котором прописываются стили. Этот документ промотайте до самого низа, и в самом низу, там где мы вставили правила для блока с рекламой, под ними вставьте следующие правила для текста.

Вот так как у меня.

Если сохранить документ и перейти на сайт посмотреть что получилось, тогда можно увидеть вот что.

То-есть наш блок с текстом отступил от блока с рекламой ровно на 20 пикселей, остальных изменений визуально мы не видим, но уверяю они есть!

Стили css

Разберём немного стили. Как вы помните из прошлого урока, стили прописываются между фигурных скобок <Стили>, так вот что мы сегодня прописали туда?

Первый стили margin-left:20px; отвечает за внешний отступ слева, от блока на 20 пикселей. У любого блока в html есть граница, эта граница разделяет блок на внутри блока и снаружи блока.

Пример:

С таким-же успехом мы можем отступать и сверху, справа, снизу от других блоков или элементов на сайте.

Для этого просто пропишите —

  1. margin-top:20px; | Сверху
  2. margin-right:20px; | Справа
  3. margin-bottom:20px; | Снизу

Следующий стиль float мы уже знаем из предыдущего урока, так что давайте поговорим о width:60%;. Это правило в стилях задаёт ширину для блоков, в нашем случае 60%. Шестьдесят процентов означает что блок будет занимать эту ширину относительно родительского блока, который сам по себе имеет сто процентную ширину.

Визуальный пример:

Вот в принципе и всё со стилями мы разобрались, нам осталось разобраться со шрифтами для текста.

Как — же изменить шрифт на своём сайте?

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

вот пример как это сделал я —

После сохранения документа смотрим что получилось.

Как видим шрифт у текста поменялся.

Рассмотрим правило стиля

font: 16px ‘segoe print’; — слово font отвечает за определение шрифтов в документе. 16 px задаёт размер тексту, а ‘segoe print’ это и есть сам шрифт.

Запомним сразу, если шрифт состоит из двух слов как в нашем случае segoe print, его обязательно нужно пемещать в одинарные или двойные кавычки.

Вот и всё шрифт мы поменяли, но у вас возникли вопросы, где брать эти шрифты?

А здесь всё очень просто, для этого в яндексе или google пропишите ключевое слово шрифты html, и вы получити кучу сайтов на которых можно отыскать понравившийся шрифт и вставить его за место того который прописан у меня, после сохранить документ и посмотреть что получится на сайте.

Куча стандартных шрифтов:

А как поменять шрифт у всего сайта?

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

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

Теперь давайте пропишем шрифт для всего сайта

Как это сделать? Всё очень просто, промотайте страницу со стилями до самого верха, и найдите селектор body — он отвечает за всё тело сайта.

Так вот, у него найдите стиль который отвечает за шрифты.

В моём случае он имеет три разных шрифта, Verdana, Arial, и случайный шрифт из той же серии с засечками, который подставляется автоматически при помощи sans-serif, это происходит если предыдущих двух шрифтов не оказалось на компьютере у посетителя вашего сайта.

Так вот, за место этих трёх шрифтов вы можете подставить свой шрифт или несколько своих шрифтов через запитую.

После сохраните документ и посмотрите что у вас получилось на сайте.

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

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

Источник

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.boxContent li a

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

.boxContent li a:hover

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

#login /*Устанавливает элементы внутри блока по центру */
#login a /* Стили для неактивной ссылки */
#login a:hover /* Стили для ссылок, на которые наводится курсор */

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

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

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

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

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

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

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

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

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

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

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

После

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

Популярность заметки: 9%

Опубликовал admin 3 декабря, 2012 | Комментариев нет | Просмотров: 45,040

Размещено в рубрике: Сайт на UCOZ

Если Вам понравились материалы сайта http://webcaum.ru, и Вы хотите отблагодарить автора данного ресурса, то скопируйте код баннера, который представлен ниже, и вставьте его на любой странице Вашего сайта.

Внимание! На данный момент возможность комментирования на сайте закрыта по причине нехватки времени у автора отвечать на вопросы посетителей сайта. Как только у автора блога появится время, форма с отправкой комментариев обязательно будет установлена обратно.

Источник

Читайте также:  Какие цветом есть аметисты

Слово "Цвет" и его описание © 2021
Внимание! Информация, опубликованная на сайте, носит исключительно ознакомительный характер и не является рекомендацией к применению. Обязательно проконсультируйтесь с вашим лечащим врачом!