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

С чего начать?

Подберите шаблон, который в своем изначальном варианте больше остальных подходит вам по структуре и внешнему виду. Для этого откройте раздел «Дизайн» в панели управления.

В качестве примера возьмем шаблон №1802. Однако всё, о чем мы будем говорить далее, применимо к любому другому.

Меняем цвет текста

Когда мы определились с шаблоном, пора настроить его на собственный вкус и цвет! Допустим, нас не устраивает цвет заголовка в шапке сайта.

Чтобы узнать, какой класс в таблице стилей CSS отвечает за заголовок сайта и его цвет, кликаем правой кнопкой мыши на текст заголовка и нажимаем «Просмотреть код».

Название этой функции может немного различаться в зависимости от того, каким браузером вы пользуетесь. Просмотреть код — в Google Chrome, Исследовать элемент — в браузере Yandex, Проверить объект — в Safari и так далее.

А вот и интересующая нас информация. Здесь мы видим, что за цвет и прочие параметры заголовка ответственен элемент #site-logo.

Открываем таблицу стилей CSS и находим его там.

За цвет отвечает параметр color. Меняем стандартные данные #26bf66 на свои. Например, сделаем заголовок черным, прописав color: #000.

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

Цвет ссылки при наведении

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

Видим, что за настройки нашей ссылки отвечает стиль .services h4. Также отмечаем, что он располагается на 93-й строке таблицы стилей CSS.

В таблице CSS нас будет интересовать псевдокласс :hover, установленный для этого стиля. Именно он отвечает за цвет ссылки при наведении курсора.

Здесь нам необходимо заменить значение #26bf66 на код, соответствующий синему цвету. Выглядит он так: #0000ff.

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

Настройка фона блока

Последовательность действий будет привычная: сначала смотрим на код элемента в браузере и находим строчку в CSS, которая отвечает за настройки этого элемента.

В качестве примера заменим фон блока «О нас», или «About us» в нашем случае.

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

Нужным нам стилем здесь является .about-me, который располагается на 54-й строчке CSS.

Необходимый параметр для замены фонового цвета — background-color. Заменим текущее значение #f1f1f1 на что-то более контрастное. Например, установим яркий лимонный цвет #fde910.

Безграничные возможности HTML и CSS

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

Не бойтесь и не ленитесь пробовать что-то новое, не забывая про резервную копию шаблонов :)


8 комментариев
avatar
1 Написал monopoly 22 Декабря 2018, 21:19
Добрый день!
Написано туманно, нельзя это все через визуальный редактор сделать?
И еще!
Как вернуть деньги за оплаченный шаблон Diamant!
После установки мой сайт глубоко зависает и грузит ничего!
Служба поддержки не отвечает!
Разработчик отправляет к администрации Ucoz
моя почта: blagokhar@gmail.com
сайт: blagokhar.com
1
2 Написал olepav 23 Декабря 2018, 01:34
Здравствуйте. Что-то сделать через визуальный редактор можно, но далеко не всё. Кроме того, визуальный редактор имеет неприятную особенность – засоряет код сайта.
А где именно показалось туманно? Вроде старался максимально понятным языком описать все настройки, но буду рад дополнительно пояснить.

По поводу шаблона необходимо было обратиться на почту support@utemplate.pro
Подскажите, туда вы отправляли сообщение?
3 Написал Svetov 25 Декабря 2018, 15:26
Добрый день!

таких уроков полно на просторах интернета. это обычные какие-то махинации с аштиэмл.

интереснее и правильнее делать уроки именно с вашей цмс. например 

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

как сделать так чтобы у каждой опции было несколько картинок??
есть товар, у него несколько цветов, и у каждого цвета несколько ракурсов или подробных фотографий. 

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

как сделать блок с временем типа акция и до конца акции осталось 23 часа 12 минут. и после того как время истечет блок или товар исчезал или менялась цена на стандартную.

как сделать так чтобы сортировка на странице каталога осуществлялась помимо того что по имени цене и т.д. ещё была галочка "товары в наличии"

как сделать нормальное сравнение товаров, чтобы все корректно работали спецификации, чтобы можно было менять порядок их

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

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

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

как сделать бонусную систему сайта?

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

прошу передать в нужные ваши отделы эту информацию. 
об этих проблемах во всех форумах, на всех ветках, на всех ювиш (или как она там эта доска желаний называется?) везде всегда все просят сделать. и не недавно это все, это уже года 4 как просят точно. а вы решили потянуть тут резину с тем как менять цвет.
лучше тогда уж пишите урок " КАК СМЕНИТЬ УКОЗ НА ДРУГУЮ ЦМС "

простите конечно, но хочется видеть сервис развивающийся
0
4 Написал olepav 26 Декабря 2018, 01:33
Здравствуйте. Урок не претендует на звание первого в своем роде. По поводу гайда по модулю магазина – будет и это, обязательно сделаем.
avatar
5 Написал Canon_L 26 Декабря 2018, 18:01
Помнится был у меня простенький сайт на Народе в нулевых, приходилось все делать методом тыка. Сейчас по каждой мелочи в интернете есть настолько развернутые уроки, есть площадки, где помогут и подскажут как лучше реализовать любую идею, что подобные уроки больше похожи на то, что в блоге настолько уже нечего писать, что решили хоть этой обжеванной и пережеванной миллионы раз темой забивать новостную ленту. Да и вообще не понимаю это жлобство! Не понимаешь и есть желание учиться - заплати деньги, походи на курсы, научат куда более профессиональным вещам чем в подобных статейках. Нет курсов или лень разбираться - заплати деньги, тебе сделают сайт под ключ. Я конечно понимаю, что мы живем во времена беспомощного подрастающего поколения и видеоинструкций на YT "как забить гвоздь" или "как сварить яйцо вкрутую", но блин не в блоге же этим заниматься...

Если UCOZ реально хочет быть полезным - прислушайтесь к моему совету, уже не единожды говорил об этом, возьмите за правило раз в 2 месяца анонсировать работу над планируемым модулем. Месяц пользователи накидывают свои идеи и рассказывают чего им не хватает, вы выбираете на ваш взгляд самые адекватные и востребованные предложения и месяц реализуете их + все ваши наработки по ТЗ. Если бы мы совместно поработали в таком ключе год-полтора, то реально бы подтянули систему до современного уровня. Сейчас же складывается впечатление, что люди, которые пишут ТЗ вообще далеки от того или иного модуля, от представлений как должно работать, от тонкостей каждого модуля, как их улучшать и развивать. Пришли, за наши деньги штаны попротирали на рабочем месте, ЗП получили и забыли.
6 Написал bandjuk 28 Декабря 2018, 18:47
Ха, ну ты дал! Это ж им напрягаться придется )
Но если серьезно, то многие уже не раз про это писали, но видимо у них свое виденье "как лучше". Сделали абы как (если вообще сделали) и давитесь тем, что есть.
8 Написал lonely-wolf 01 Января 2019, 05:27
Может, Вы не в курсе, только Народ с 2013 года перешёл на Юкоз.
Реанимируйте сайт, ведь такое долгое время жизни сайта - лучше, чем только что созданные сайты.
Это я Вам как SEO-специалист говорю.
7 Написал nomid 31 Декабря 2018, 18:12
По своему опыту скажу, что в начале тоже через редактор делал. Но, когда немного изучил HTML и CSS, получив отличные результаты на сайте — захотелось большего. До сих пор не останавливаюсь, уже несколько лет. Так что, рекомендую все же хоть частично изучить HTML и CSS.

Что касается урока — отлично, как раз самое то для новичка. И действительно, это даже не 1% всех возможностей CSS smile
Ваш комментарий