Задать вопрос
Найти ответ
1.Как изменить шрифт?
2.Как сделать определенную ширину шаблона, или коробку с содержимым?
3.Как изменить основной цвет (theme)
4.Редактирование стилей топбара
5.Меню

1) Переходим на сайт с шрифтами от Google - Google Fonts
2) Выбираем нужный шрифт и нажимаем на кнопку - select this font


3) JОкрываем вкладку Family selected

4) Переходим в вкладку @IMPORT, и копируем ссылку на файл в css Style

Переходим в Общие стили дизайна и изменяем CSS, на 7 строчке находим:
Код
@import url('https://fonts.googleapis.com/css?family=Fira+Sans+Extra+Condensed:100,200,300,400,400i,500');
и заменяем ее на нужный нам;
Код
@import url('https://fonts.googleapis.com/css?family=Eater');
Так же копируем и font-family, переходим снова в Наш CSS и ищем 23 строчку с переменной --font-family-sans-serif и содержимое ее заменяем с
Код
--font-family-sans-serif:"Fira Sans Extra Condensed"
на
Код
--font-family-sans-serif: 'Eater', cursive

в итоге получаем до\после: было

стало

было

стало

Данное решение можно использовать как кастомизацию шаблона либо интеграцию рекламы.
1) Переходим в ПУ - Дизайн - Редактор - CSS (Общие стили) и смотрим на последние строчки 22-24 :

Код
/*--- Коробка
html{background:#ccc} /*--- BOX -- можно использовать картинку ---*/  
body,#header{max-width:1250px;margin:0 auto} /*--- BOX -- for body - margin:10em auto ---*/  
--*/
Убираем из нее закрывающие стили надписи и получаем:
Код
html{background:#ccc} /*--- BOX -- можно использовать картинку ---*/  
body,#header{max-width:1250px;margin:0 auto} /*--- BOX -- for body - margin:10em auto ---*/
В итоге получаем:

Далее мы хотим сделать картинку, для этого мы добавляем в селектор html содержимое для атрибута background ссылку на картинку, изменив код на:
Код
html{background:url(/img/bg/4-min.jpg) 50% 50% no-repeat fixed;background-size:cover} /*--- BOX -- можно использовать картинку ---*/  
body,#header{max-width:1250px;margin:0 auto} /*--- BOX -- for body - margin:10em auto ---*/
Более подробная инструкция о роботе с атрибутом фона можно найти по ссылке; В итоге получаем:

Теперь переходим к полной коробке: делаем отступы и сверху, для этого, как и написано в комментарии добавляем к body - margin, и получаем конечный код:
Код
html{background:url(/img/bg/4-min.jpg) 50% 50% no-repeat fixed;background-size:cover}  
body,#header{max-width:1250px;margin:0 auto}
body{margin:10em auto}
На демонстрации он выглядит так:

1) Переходим в ПУ - Дизайн - Редактор - CSS (Общие стили) и смотрим на строчки 9-17:

Код
/*---Основной цвет, можно вписывать переменные ---*/
  /*--- основной цвет ---*/
  --theme:#47b475;
  /*--- hover цвет фона ---*/
  --themeh:#e2e6ea;
  /*--- цвет шрифта ---*/
  --colorp:#fff;
  /*--- hover цвет шрифта ---*/
  --colorph:#111;
2) Ищем в интернете Color Picker, наткнулся на такой - Color Picker, и копируем понравившийся нам цвет:
3) Вставляем его в CSS код, и получаем:
Код
/*---Основной цвет, можно вписывать переменные ---*/
  /*--- основной цвет ---*/
  --theme:#7171da;
  /*--- hover цвет фона ---*/
  --themeh:#e2e6ea;
  /*--- цвет шрифта ---*/
  --colorp:#fff;
  /*--- hover цвет шрифта ---*/
  --colorph:#111;
Таким же способом изменяем цвета шрифтов и hover.
Что получилось в итоге в примере:
modernity edit color uCoz
modernity edit color uCoz
.

Верхняя часть сайта

Верхняя часть сайта используется как основная навигация по сайту, а так же кроме меню включает "виджеты": корзина, мини-профиль, форма поиска.
Существует 10 рабочих комбинаций меню; далее по порядку вариации и рассмотрение кода. а. В зависимости от вариации верхней части меню, будут меняться и элементы находящиеся под ним: слайдер и секция с "хлебными крошками".

Default версия или "По умолчанию"

Default menu MODERNITY

Default + Transparent

<header id="header" class="transparent tr">

Default + Above navigarion

<header id="header" class="an">

Default + Above navigarion + Transparent

<header id="header" class="an transparent tr">

Light

<header id="header" class="light">

Light + Transparent

<header id="header" class="light transparent tr">

Light + Above navigarion

<header id="header" class="light an">

Light + Above navigarion + Transparent

<header id="header" class="light transparent an tr">

Big menu, лейблы hot, new и иконки в меню

hide code

Fixed

Вы можете добавить класс "fixed". При скролле страницы ниже чем на 750px меню будет фиксироваться в верхней части сайта, а Above nav, если есть - скрываться

<header id="header" class="fixed">

В шаблоне MODERNITY большое внимание уделено топбару и меню. Мы любим удобное редактирование

Дополнительная информация с Базы данных uCoz

Меню сайта — один из основных функциональных элементов, состоящий из набора ссылок на ключевые страницы. По умолчанию в него входят ссылки на активные модули и стандартные страницы («Информация о сайте», «Обратная связь»). Конструктор меню позволяет изменить набор ссылок без редактирования HTML-кода шаблонов сразу для всех страниц сайта.

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

Чтобы отредактировать меню, перейдите в панель управления, откройте раздел «Дизайн» / «Конструктор меню»:


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

Чтобы изменить пункт, наведите на него курсор мыши и нажмите «Изменить»:
На примере меню покажем как изменять опции чтобы добавлять плашки HOT и NEW


Рассмотрим на примере пункты меню элементы и прогресс бары, для пункта элементы, мы хотим присвоить в 2 ряда "большой ul", в опциях нужно будет присвоить ему класс bigul, так же поставить плашку HOT, чтобы пользователи знали что там есть интересное, для этого дописываем класс hot на примере опции будут такими:



Для пункта прогресс бары нам нужно присвоить иконку, и показать что это новинка, добавив плашку NEW, для этого переходим к выбору ion иконок - ionicons.com/v2/, выбрав, вписываем ее в опции - ion-navicon, и добавляем класс hot