Как поменять цвет фона на сайте ucoz: Как изменить фон на сайте ucoz через таблицу стилей css – Как изменить фон сайта на картинку? шаблон №1321 — Вопрос от Рекламое Агенство

Содержание

Как изменить фон сайта uCoz?

                Эту тему нужно было бы рассматривать после раздела ЧЕТВЕРТЫЙ ШАГ:  Меняем «шапку» сайта uCoz. То есть после переделки верхней части ресурса. Дело в том, что изменив верхнюю картинку сайта, как бы виднее, или удобнее двигаться дальше.  Однако все зависит от автора создаваемого изделия. Как он решит? Можно сначала переделать «шапку» на своем ресурсе, а потом подобрать красивый фон для сайта и сменить его цвет. Или наоборот, сначала изменить фон для сайта ucoz, а потом вставить новое изображение шапки. Мы же исходим из других соображений. Чтобы предлагаемый материал воспринимался проще, стараемся преподносить его с нарастающей сложностью. То есть от простого к сложному. А так как поменять фон на сайте проще, чем изменить шапку, поэтому начинаем с первого.

Как поменять фон шаблона на сайте uCoz

       Но, прежде нам необходимо понять, что же такое фон сайта? Здесь надо различать, что фон сайта и фон странички сайта, это две разные вещи. И цвета у них меняются по разному. Как изменить цвет фона страницы сайта, узнаем в следующей статье.  Сегодня, наша задача изменить цвет самого сайта, то есть его каркаса или шаблона. Посмотрите на картинку под номером 1.   Вот он,  фон сайта uCoz,  чтобы было понятно,  выделено красным цветом, показан сам шаблон  

 (каркас) изделия, где мы должны изменить цвет. Вот теперь перед нами встала задача: «Как поменять фон на сайте  uCoz?» Для этого надо зайти  => Панель Управления  =>  Управление дизайном,   =>  Таблица стилей(CSS).   Открываем   Таблицу,     видим   много   пронумерованных строчек,  разных  буковок  и  циферок,  Рис. 2.  Как  только  выучите  HTML и CSS, начнете немного 

                                                                 

Чтобы увеличить нажми на картинку

 

разбираться в них. Впрочем, не надо растраиваться. Мы Вам поможем. Начинаем искать такую фразу repeat-x #f3f8f9; . У нас она находится на третьей строке, Рис 2, подчеркнуто красным.  Это и есть фон каркаса шаблона.

 

                 Внимание! Циферки и буковки во фразе « repeat-x #f3f8f9; » после знака решётка « # » и до знака точка с запятой « ; »,  вот они « f3f8f9 », это обозначение цвета в HTML.  Мы показываем «переделку» на шаблоне №806. У Вас он может быть другой. У каждого шаблона свой цвет, своя таблица стилей, свой HTML. Они имеют отличия друг от друга. Поэтому циферки и буковки будут другие. Это надо иметь ввиду.

 

                 Наша фраза находится на третьей строке. Ваша может находится в другом месте, на другой строке, но где — то рядом. Ищите. Главное, она скрывается в разделе /* General Style */ и никуда от туда не денется. Для первого раза можно искать методом «тыка». Видите строчку похожую на такую форму, измените её. Поставте, например такой цвет: FF0000 — красный; 00FF00 — зеленый или 0000FF — синий. Сразу всё будет видно, где есть изменения. Такой метод тыка можно применять для поисков других целей. Вообще это хороший метод. Запомните его, он Вам пригодится.

 

                  Внимание!   Ещё раз напоминаем и предупреждаем. Прежде чем что — то менять в HTML и Стилях CSS, скопируйте или всё полностью, или отдельный раздел, где делаете изменения и сохраните. Или прочитайте статью Резервное копирование данных  Поверьте, может понадобится.

 

                 Меняем часть вышеуказанной фразы, вот эту f3f8f9, на другую — вот такую FF0000,   Рис 3. 

                                                               

Чтобы увеличить нажми на картинку

 

=>  незабываем  «Сохранить».  Вы можете подобрать любой другой цвет. Будете проходить Графику, узнаете все обозначения. Красный цвет FF0000 мы использовали для того, чтобы шаблон было видно и он выделялся.  

  Другие статьи на тему: Небольшие изменения шаблона сайта:                 

И смех, и грех:            

 

            РАССЫЛКА НОВОСТЕЙ НАШЕГО САЙТА             
Подпишитесь прямо сейчас
 

 

Редактирование стандартного шаблона #1801 — База знаний uCoz

1. Как изменить шапку сайта?

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

Название вашего сайта — текст, который будет отображаться в переменной $SITE_NAME$. Чтобы изменить его требуется перейти в Панель управления → Настройки → Общие настройки и изменить поле “Название вашего сайта” на необходимое.

Если же вместо текста нужно изображение тогда перейдите в Панель управления → Дизайн → Редактор → Глобальные блоки → Верхняя часть сайта найдите 5 строку кода:

<a href="$HOME_PAGE_LINK$">$SITE_NAME$</a>

и вместо $SITE_NAME$ пропишите:

<img src="ссылка на логотип">

где «ссылка на логотип» – пропишите ссылку, которую вы можете получить, осуществляя:

1) Логотип загружается в файловый менеджер сайта (Панель управления → Инструменты.)

2) После загрузки изображения, просто кликните на название изображение и вы получите заветную ссылку.

Изменить фон шапки сайта можно в Панель управления → Дизайн → Редактор → Таблица стилей (CSS). Вам потребуется перейти к 113 строке кода:

.header { background-color: #ec174f; color: #fff; margin: 0 auto; position: relative;}

#ec174f – фон шапки сайта. Его можно изменить на любой другой html-цвет.

2. Как изменить промо-блок?

Промоблок состоит из двух слайдеров, изменить которые Вы можете перейдя в Панель управления → Дизайн → Редактор → Глобальные блоки → PROMO.

Для изменения первого слайдера перейдите к строкам 2-50.

Данный слайдер состоит из 3 слайдов, строки 4-18, 19-33, 34-48, в каждом из которых можно изменить:

Изображения. Фоновое и к описанию соответственно:

<img alt="photo" src="/.s/t/1801/main.png">
<img alt="promo" src="/.s/t/1801/promo.png">

где /.s/t/1801/main.png и /.s/t/1801/promo.png – является ссылкой на изображение. Вместо него можно указать свою ссылку на свое изображение, предварительно загрузив его в Файловый менеджер сайта.

Заголовок и текст:

<h2>Lorem ipsum dolor</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus aliquam aspernatur consequatur corporis doloribus eligendi eos facilis, id impedit in molestias odio odit porro quae rem sequi sit, soluta vero.</p>

Кнопка:

<a href="#">More</a>

где More – вы можете изменить на любой свой текст, а вместо # укажите ссылку для перехода.

Для изменения второго слайдера перейдите к строкам 51-154.

Данный слайдер-карусель состоит из 10 блоков , в каждом вы можете изменить:

Изображение:

<img alt="cover" src="/.s/t/1801/1.jpg">

где /.s/t/1801/1.jpg – является ссылкой на изображение. Вместо него можно указать свою ссылку на свое изображение, предварительно загрузив его в Файловый менеджер сайта.

Текст и ссылка для перехода к материалу:

<a href="#">Lorem ipsum</a>
<p>Lorem ipsum dolor</p>

где вместо # укажите ссылку для перехода.

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

В таком случаи в коде шаблона удаляем строки 3-49 и вместо них пропишите код необходимого созданного информера, например, $MYINF_1$  

При создании или редактировании информера необходимыми параметрами являются:  

  • Тип данных: Материалы
  • Количество материалов: 10
  • Количество колонок: 1

Шаблон информера будет иметь вид:  

<div>
 <div>
 <div><img src="/_pu/5/95754642.jpg" alt="cover"></div>
 <div><img src="/_pu/5/95754642.jpg" alt="cover"></div>
 </div>
 <div>
 <a href="$ENTRY_URL$">$TITLE$</a>
 <p>$MESSAGE$</p>
 </div>
 </div>

Более детально с тем, как создать и настроить информер вы можете ознакомится здесь: https://www.ucoz.ru/help/tools/informery

3. Как сделать, чтобы промо-блок отображался не только на главной странице?

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

Для этого необходимо перейти в Панель управления → Дизайн → Редактор → PROMO в 1 строке указать ID необходимых страниц  модулей в условии

<?if($URI_ID$='page1')?> <?endif?>

или добавить условие для вывода в нужных модулях:

<?if($MODULE_ID$='forum')?> <?endif?> 

Также вы можете удалить данные условные операторы для отображения во всех модулях и страницах.

4. Как изменить цвет  блоков?

Для изменений перейдите в Панель управления → Дизайн → Редактор → Таблица стилей (CSS), найдите там 213 строку:

.sidebox { margin: 30px 0; padding: 20px; background-color: #fff; }

#fff – это и есть цвет блока. #fff можете заменить на любой другой цвет html.

5. Как изменить фон шаблона?

Изменить фон сайта можно в Панель управления → Дизайн → Редактор → Таблица стилей (CSS). Вам потребуется перейти к 29 строке кода:

body.base { background: #000; }

#000 – является ссылкой на данное изображение. Вместо него можно указать свою ссылку на свое изображение, предварительно загрузив его в Файловый менеджер сайта.

6. Как изменить нижнюю часть сайта?

Изменить фон нижней части сайта можно в Панель управления → Дизайн → Редактор → Таблица стилей (CSS). Вам потребуется перейти к 257 строке кода:

footer { background-color: #161616; color: #9e9e9e; }

#161616 – фон нижней части сайта. Его можно изменить на любой другой html-цвет.

В правом углу расположены иконки социальных сетей, для их изменения перейдите в Панель управления → Дизайн → Редактор → Нижняя часть, где в строках 10-17 укажите свои ссылки на аккаунты в социальных сетях:

<div>
<span><a href="https://vk.com" target="_blank"></a></span>
<span><a href="https://twitter.com" target="_blank"></a></span>
<span><a href="https://facebook.com" target="_blank"></a></span>
<span><a href="https://instagram.com" target="_blank"></a></span>
<span><a href="https://plus.google.com" target="_blank"></a></span>
<span><a href="https://ok.ru/" target="_blank"><</a></span>
</div>

Редактирование стандартного шаблона #1804- База знаний uCoz

1. Как изменить шапку сайта?

Верхняя часть шаблона состоит из социальных иконок, ссылок на страницы авторизации/регистрации, названия сайта, пунктов меню и формы поиска.

Чтобы изменить верхнюю часть сайта перейдите в в Панель управления → Дизайн → Редактор → Глобальные блоки → Верхняя часть сайта

Укажите ссылки на свои социальные сети в строках 4-11:

<a href="https://www.facebook.com/" target="_blank"></a>
<a href="https://twitter.com/" target="_blank"></a>
<a href="http://www.flickr.com/" target="_blank"></a>
<a href="https://vimeo.com/" target="_blank"></a>

Название вашего сайта — текст, который будет отображаться в переменной $SITE_NAME$. Чтобы изменить его требуется перейти в Панель управления → Настройки → Общие настройки и изменить поле “Название вашего сайта” на необходимое.

Если же вместо текста нужно изображение тогда перейдите в Панель управления → Дизайн → Редактор → Глобальные блоки → Верхняя часть сайта найдите 22 строку кода:

<a href="$HOME_PAGE_LINK$"><!-- <logo> -->$SITE_NAME$<!-- </logo> --></a>

и вместо $SITE_NAME$ пропишите:

<img src="ссылка на логотип">

где «ссылка на логотип» – пропишите ссылку, которую вы можете получить, осуществляя:

1) Логотип загружается в файловый менеджер сайта (Панель управления → Инструменты.)

2) После загрузки изображения, просто кликните на название изображение и вы получите заветную ссылку.

Чтобы изменить фон шапки сайта, перейдите в Панель управления → Дизайн → Редактор → Таблица стилей (CSS), после чего найдите там 125 строку:

.bottom-head-container{background-color:#958959;padding:0 20px;width:100%;display:flex;align-items:center}

#958959 – является цветом верхней части сайта. Его можно изменить на любой другой html-цвет.

2. Как изменить промо-блок?

Промоблок состоит из слайдера, для того, чтобы изменить его, необходимо перейти в Панель управления → Дизайн → Редактор → Глобальные блоки → PROMO.

Слайдер состоит из 3 слайдов. Вам необходимо найти строки 4-44, где для каждого слайда можно изменить:

Заголовок, описание и кнопку для перехода к материалу и изображение:

<h2>Lorem ipsum dolor</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus aliquam aspernatur consequatur corporis doloribus eligendi eos facilis, id impedit in molestias odio odit porro quae rem sequi sit, soluta vero.</p>
<a href="#">More</a>

где More – вы можете изменить на любой свой текст, а вместо # укажите ссылку для перехода.

<img src="/.s/t/1804/main.png" alt="promo">

где /.s/t/1804/main.png – является ссылкой на изображение. Вместо него можно указать свою ссылку на свое изображение, предварительно загрузив его в Файловый менеджер сайта.

Для изменения превью следующего слайда перейдите к строкам 42-44 и укажите свои ссылки на изображения:

<a data-slide-index="0" href=""><img src="/.s/t/1804/main.png" /></a>
<a data-slide-index="1" href=""><img src="/.s/t/1804/2.jpg" /></a>
<a data-slide-index="2" href=""><img src="/.s/t/1804/3.jpg" /></a>

Изменить фон промо блока можно в Панель управления → Дизайн → Редактор → Таблица стилей (CSS). Вам потребуется перейти к 115 строке кода:

.top-part.sitePage1{background:#161616 url("/.s/t/1804/slider-background.png") no-repeat 100% 0}

где /.s/t/1804/slider-background.png – является ссылкой на изображение. Вместо него можно указать свою ссылку на свое изображение, предварительно загрузив его в Файловый менеджер сайта.

3. Как сделать, чтобы слайдер отображался не только на главной странице?

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

Для этого необходимо перейти в Панель управления → Дизайн → Редактор → PROMO в 1 строке указать ID необходимых страниц  модулей в условии

<?if($PAGE_ID$='sitePage1')?> <?endif?>

или добавить условие для вывода в нужных модулях:

<?if($MODULE_ID$='forum')?> <?endif?>  

Также вы можете удалить данные условные операторы для отображения во всех модулях и страницах.

4. Как изменить фон шаблона?

Изменить фон сайта можно в Панель управления → Дизайн → Редактор → Таблица стилей (CSS). Вам потребуется перейти к 30 строке кода:

body.base{background-color:#4a4a4a}

#4a4a4a – фон сайта. Его можно изменить на любой другой html-цвет.

5. Как изменить цвет блоков?

Для изменений перейдите в Панель управления → Дизайн → Редактор → Таблица стилей (CSS), найдите там 245 строку:

.sidebox,.profile{margin-bottom:20px;padding:5px;background-color:#f8f7f0}

#f8f7f0 – это и есть цвет бордера. #f8f7f0 можете заменить на любой другой цвет html.

6. Как изменить контент нижней часть сайта?

Для изменения нижней части перейдите в Панель управления → Дизайн → Редактор → Глобальные блоки → Нижняя часть сайта.  

Она состоит из дополнительной информации о сайте и контактов. Для того чтобы изменить информацию о сайте перейдите к строкам 4-20 и замените информацию и ссылки на свои:

<div>
<h6>About</h6>
<p>Integer euismod lobortis lectus sed suscipit. Donec commodo et velit at tristique. Cras vitae nunc porttitor nibh varius pellentesque nec in urna. Proin a neque non purus tincidunt hendrerit. Sed magna mi, dapibus ultrices ultricies ut, accumsan in ante. Suspendisse a dui vel felis fringilla porta. Mauris vulputate auctor enim vitae accumsan. Duis congue neque magna, ut auctor sem semper ac. Proin aliquet dui id dolor gravida consequat. Aliquam et vestibulum libero, et lobortis sem. Duis ut elit libero. Ut commodo bibendum hendrerit.</p>
</div>
<div>
<h6>Quick links</h6>
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
<a href="#">Link 4</a>
<a href="#">Link 5</a>
</div>
</div>

Для изменения второй части — контактной информации перейдите к строкам строки 24-46 и аналогичным образом измените контактную информацию:

<div>
<h6>Adress</h6>
<p>Donec imperdiet urna sem, ac interdum lorem tristique convallis.</p>
</div>
<div>
<h6>Phones</h6>
<a href="#">+1 (234) 567-8901</a>
<a href="#">+1 (234) 567-8901</a>
</div>
<div>
<h6>Follow us</h6>
<div>
<span><a href="https://vk.com" target="_blank"></a></span>
<span><a href="https://twitter.com" target="_blank"></a></span>
<span><a href="https://facebook.com" target="_blank"></a></span>
<span><a href="https://instagram.com" target="_blank"></a></span>
<span><a href="https://plus.google.com" target="_blank"></a></span>
<span><a href="https://ok.ru/" target="_blank"></a></span>
</div>
</div>

7. Как изменить фон нижней части сайта?

Изменить фон нижней части сайта можно в Панель управления → Дизайн → Редактор → Таблица стилей (CSS). Вам потребуется перейти к 285 строке кода:

footer{background-color:#161616;color:#f8f7f0}

#161616 – фон нижней части сайта. Его можно изменить на любой другой html-цвет.

8. Какой цвет основных элементов сайта?

Основным цветом сайта является #958959.

Если требуется сменить цветовую гамму, то воспользуйтесь заменой #958959 на любой свой html-цвет, используя замену внутри шаблона Таблица стилей CSS.

Редактирование стандартного шаблона #1714 — База знаний uCoz

1. Как изменить шапку сайта?

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

Чтобы изменить название требуется перейти в Панель управления → Дизайн → Редактор → Глобальные блоки → Верхняя часть сайта. Вам потребуется 3 строчка кода:

<a href="$HOME_PAGE_LINK$"><!-- <logo> -->Мой сайт<!-- </logo> --></a>

где «Мой сайт» – вы можете изменить на любой свой текст.

Если же вместо текста Вы хотите разместить изображение, тогда в этой же строке вместо «Мой сайт» пропишите код:

<img src="ссылка на логотип">

где «ссылка на логотип» – пропишите ссылку, которую вы можете получить, осуществляя:

1) Логотип загружается в файловый менеджер сайта (Панель управления → Инструменты.)

2) После загрузки изображения, просто кликните на название изображение и вы получите заветную ссылку

Изменить фон шапки сайта можно в Панель управления → Дизайн → Редактор → Таблица стилей (CSS). Вам потребуется перейти к ___ строке кода:

– фон шапки сайта. Его можно изменить на любой другой html-цвет.

2. Как изменить фон шаблона?

Чтобы изменить фоновое изображения, перейдите в Панель управления → Дизайн → Редактор → Таблица стилей (CSS), после чего необходимо найдите там 31 строку:

body.base{border:0;background:#211d1b url(/.s/t/1714/book.jpg) no-repeat center 0;background-attachment:fixed}

/.s/t/1714/book.jpg – является ссылкой на данное изображение. Вместо него можно указать свою ссылку на свое изображение, предварительно загрузив его в Файловый менеджер сайта.

3. Как изменить изображение и текст в верхней части сайта?

Для того, чтобы сменить картинку в верхней части сайта, необходимо перейти в Панель управления → Дизайн → Редактор → PROMO. Вам потребуется 4 строчка кода:

<img src="/.s/t/1714/women.png" alt="photo">

где /.s/t/1714/women.png – является ссылкой на данное изображение. Вместо него можно указать свою ссылку на свое изображение, предварительно загрузив его в Файловый менеджер сайта. Для изменения текста вам понадобится строка 8-9:

<h2>Lorem ipsum dolor sit amet</h2>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ut euismod sem. Proin ultricies, justo in scelerisque vehicula, nisl lorem euismod quam, eu varius nulla lectus sed felis. Integer feugiat lectus est, ut fermentum eros auctor at. Ut dictum et nisl sit amet aliquam. </p>

Измените кнопку в строке 11:

<a href="#">More</a>

где More – вы можете изменить на любой свой текст, а вместо # укажите ссылку для перехода.

Для изменения фона за текстом перейдите в Панель управления → Дизайн → Редактор → Таблица стилей (CSS), после чего необходимо найти 63 строку:

.information-wrapper{display:flex;background-color:#3e4b7d;color:#fff}

#3e4b7d – фон блока с текстом. Его можно изменить на любой другой html-цвет.

4. Как сделать, чтобы промо-блок отображался не только на главной странице?

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

Для этого необходимо перейти в Панель управления → Дизайн → Редактор → PROMO в 1 строке указать ID необходимых страниц  модулей в условии

<?if($PAGE_ID$='sitePage1')?> <?endif?>

или добавить условие для вывода в нужных модулях:

<?if($MODULE_ID$='forum')?> <?endif?>  

Также вы можете удалить данные условные операторы для отображения во всех модулях и страницах.

5. Как изменить цвет блоков?

Чтобы изменить фон правого блока нужно перейти в Панель управления → Дизайн → Редактор → Таблица стилей (CSS). Вам потребуется перейти к 42 строке кода:

aside{-webkit-box-flex:2;-ms-flex:2 1 10px;flex:2 1 10px;background-color:#f0f0f0;padding:30px 0;border-left:1px solid #d6d6d6;max-width:315px}

#f0f0f0 – фон правого блока сайта. Его можно изменить на любой другой html-цвет.

6. Какой цвет основных элементов сайта?

Цветом цветом основных элементов сайта является #02ab84.

Если требуется сменить цветовую гамму, то воспользуйтесь заменой #02ab84 на любой свой html-цвет, используя замену внутри шаблона Таблица стилей CSS.

Редактирование стандартного шаблона #1807- База знаний uCoz

1. Как изменить шапку сайта?

Верхняя часть шаблона состоит из формы поиска, иконок социальных сетей, ссылок на страницы авторизации/регистрации, названия сайта и пунктов меню.

Чтобы изменить верхнюю часть сайта перейдите в в Панель управления → Дизайн → Редактор → Глобальные блоки → Верхняя часть сайта

Укажите ссылки на свои социальные сети в строках 23-30:

<span><a href="https://vk.com" target="_blank"></a></span>
<span><a href="https://twitter.com" target="_blank"></a></span>
<span><a href="https://facebook.com" target="_blank"></a></span>
<span><a href="https://instagram.com" target="_blank"></a></span>
<span><a href="https://plus.google.com" target="_blank"></a></span>
<span><a href="https://ok.ru/" target="_blank"></a></span>

Название вашего сайта — текст, который будет отображаться в переменной $SITE_NAME$. Чтобы изменить его требуется перейти в Панель управления → Настройки → Общие настройки и изменить поле “Название вашего сайта” на необходимое.

Если же вместо текста нужно изображение тогда перейдите в Панель управления → Дизайн → Редактор → Глобальные блоки → Верхняя часть сайта найдите 48 строку кода:

<a href="$HOME_PAGE_LINK$"><!-- <logo> -->$SITE_NAME$<!-- </logo> --></a>

и вместо $SITE_NAME$ пропишите:

<img src="ссылка на логотип">

где «ссылка на логотип» – пропишите ссылку, которую вы можете получить, осуществляя:

1) Логотип загружается в файловый менеджер сайта (Панель управления → Инструменты.)

2) После загрузки изображения, просто кликните на название изображение и вы получите заветную ссылку.

Чтобы изменить фон шапки сайта, перейдите в Панель управления → Дизайн → Редактор → Таблица стилей (CSS), после чего найдите там 89 строку:

.header{color:#fff;margin:0 auto;position:relative;background-color:#1d2436}

#1d2436 – является цветом верхней части сайта. Его можно изменить на любой другой html-цвет.

2. Как изменить промо-блок?

Промоблок состоит из слайдера, для того, чтобы изменить его, необходимо перейти в Панель управления → Дизайн → Редактор → Глобальные блоки → PROMO.

Слайдер состоит из 3 слайдов. Вам необходимо найти строки 2-52, где для каждого слайда можно изменить:

Изображение:

<img src="/.s/t/1807/1.jpg" alt="photo">

где /.s/t/1807/1.jpg – является ссылкой на изображение. Вместо него можно указать свою ссылку на свое изображение, предварительно загрузив его в Файловый менеджер сайта.

Заголовок, описание и кнопку для перехода к материалу и изображение:

<h2>Lorem ipsum dolor</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus aliquam aspernatur consequatur corporis doloribus eligendi eos facilis, id impedit in molestias odio odit porro quae rem sequi sit, soluta vero.</p>
<a href="#">More</a>

где More – вы можете изменить на любой свой текст, а вместо # укажите ссылку для перехода.

Для изменения превью следующего слайда перейдите к строкам 47-51 и укажите свои ссылки на изображения:

<a data-slide-index="0" href=""><img src="/.s/t/1807/1.jpg" /></a>
<a data-slide-index="1" href=""><img src="/.s/t/1807/2.jpg" /></a>
<a data-slide-index="2" href=""><img src="/.s/t/1807/3.jpg" /></a>

3. Как сделать, чтобы слайдер отображался не только на главной странице?

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

Для этого необходимо перейти в Панель управления → Дизайн → Редактор → PROMO в 1 строке указать ID необходимых страниц  модулей в условии

<?if($PAGE_ID$='sitePage1')?> <?endif?>

или добавить условие для вывода в нужных модулях:

<?if($MODULE_ID$='forum')?> <?endif?>  

Также вы можете удалить данные условные операторы для отображения во всех модулях и страницах.

4. Как изменить фон шаблона?

Изменить фон сайта можно в Панель управления → Дизайн → Редактор → Таблица стилей (CSS). Вам потребуется перейти к 29 строке кода:

body{background:#0f131c;font-size:13px;line-height:1.67;color:#989eb2}

#0f131c – фон сайта. Его можно изменить на любой другой html-цвет.

5. Как изменить цвет блоков?

Блоки не имеют изображений или каких-то других особенностей. Цвет блоков зависит от фона сайта.

6. Как изменить нижнюю часть сайта?

Для изменения нижней части перейдите в Панель управления → Дизайн → Редактор → Глобальные блоки → Нижняя часть сайта.  

Она состоит из иконок социальных сетей, перейдите к строкам 10-17 и замените ссылки на свои:

<span><a href="https://vk.com" target="_blank"></a></span>
<span><a href="https://twitter.com" target="_blank"></a></span>
<span><a href="https://facebook.com" target="_blank"></a></span>
<span><a href="https://instagram.com" target="_blank"></a></span>
<span><a href="https://plus.google.com" target="_blank"></a></span>
<span><a href="https://ok.ru/" target="_blank"></a></span>

Изменить фон нижней части сайта можно в Панель управления → Дизайн → Редактор → Таблица стилей (CSS). Вам потребуется перейти к 285 строке кода:

.footer{background-color:#1d2436}

#1d2436 – фон нижней части сайта. Его можно изменить на любой другой html-цвет.

7. Какой цвет основных элементов сайта?

Цветом цветом основных элементов сайта является #fea32e.

Если требуется сменить цветовую гамму, то воспользуйтесь заменой #fea32e на любой свой html-цвет, используя замену внутри шаблона Таблица стилей CSS.

Редактирование стандартного шаблона #1802 — База знаний uCoz

1. Как изменить шапку сайта?

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

Название вашего сайта — текст, который будет отображаться в переменной $SITE_NAME$. Чтобы изменить его требуется перейти в Панель управления → Настройки → Общие настройки и изменить поле “Название вашего сайта” на необходимое.

Если же вместо текста нужно изображение тогда перейдите в Панель управления → Дизайн → Редактор → Глобальные блоки → Верхняя часть сайта найдите 5 строку кода:

<a href="$HOME_PAGE_LINK$"><!-- <logo> -->$SITE_NAME$<!-- </logo> --></a>

и вместо $SITE_NAME$ пропишите:

<img src="ссылка на логотип">

где «ссылка на логотип» – пропишите ссылку, которую вы можете получить, осуществляя:

1) Логотип загружается в файловый менеджер сайта (Панель управления → Инструменты.)

2) После загрузки изображения, просто кликните на название изображение и вы получите заветную ссылку.

Для указания своих ссылок к социальным сетям  перейдите к строкам 34-41:

<a href="https://vk.com" target="_blank"></a></span>
<a href="https://twitter.com" target="_blank"></a></span>
<a href="https://facebook.com" target="_blank"></a></span>
<a href="https://instagram.com" target="_blank"></a></span>
<a href="https://plus.google.com" target="_blank"></a></span>
<a href="https://ok.ru/" target="_blank"></a></span>
</div>

Изменить фон шапки сайта можно в Панель управления → Дизайн → Редактор → Таблица стилей (CSS). Вам потребуется перейти к 44 строке кода:

header { background-color: #fff; }

#fff – фон шапки сайта. Его можно изменить на любой другой html-цвет.

2. Как изменить промо-страницу?

Для редактирования промо-страницы нужно перейдите  в Панель управления → Дизайн → Редактор → PROMO.

Данная страница состоит из 7 так называемых блоков, изменение которых рассмотрим далее.

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

1)

В первом блоке можно изменить изображение, текст и кнопку для перехода к материалу в строках 3-14:

<img src="/.s/t/1802/promo.jpg" alt="img">

вместо /.s/t/1802/promo.jpg — укажите свою ссылку на свое изображение.

<div>Lorem Ipsum</div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ut
euismod sem. Proin ultricies, justo in scelerisque vehicula, nisl lorem euismod quam, nulla lectus sed felis.
</div>

2)

Изменить название данного блока можно в строке 17:

<h4>My Services</h4>

Далее к каждому пункту можно изменить иконку, заголовок с ссылкой для перехода и описание:

<div>
<i><img src="/.s/t/1802/svg/sign-1.svg" alt="img"></i>
<h5><a href="#">Lorem ipsum</a></h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ut euismod sem. Proin ultricies,
nisl lorem euismod quam, lectus sed felis.</p>
</div>

3)

В данном блоке изображение изменяется в строке 47:

<img src="/.s/t/1802/about.jpg" alt="img">

Вместо “/.s/t/1802/about.jpg» укажите свою ссылку на свое изображение.

Заголовок и текст изменяется в строках 50-54:

<h4>About us</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ut euismod sem. Proin ultricies, justo
n scelerisque vehicula, nisl lorem euismod quam, eu varius nulla lectus sed felis. Integer feugiat
lectus est, ut fermentum eros auctor at. Ut dictum et nisl sit amet aliquam. Donec porta libero sit amet
elit aliquet fringilla.</p>
</div>

Для изменения фона за текстом вам требуется перейти в Панель управления → Дизайн → Редактор → Таблица стилей (CSS). Здесь перейдите к 81 строке кода:

.about-me { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; justify-content: space-around; background-color: #f1f1f1; }

#f1f1f1 – это и есть цвет блока. #f1f1f1 можете заменить на любой другой цвет html.

4)

Данный блок содержит слайдер с 6-тью информационными карточками.  

Заголовок измените в строке 59:

<h4>Our doctors</h4>

Для каждого информационного блока строки 59-102, можно изменить изображение и заголовок с описанием:

<img src="/.s/t/1802/services_01.jpg" alt="example">
<div>
<p>Lorem ipsum</p>
<p>Lorem ipsum dolor</p>

Вместо “/.s/t/1802/services_01.jpg» укажите свою ссылку на свое изображение.

5)

Заголовок измените в строке 122:

<h4>Devices</h4>

Данный блок содержит информационный слайдер.

По аналогии с предыдущими слайдерами Вы можете изменить изображение слайдера и его текст:

<li>
<div><img src="/.s/t/1802/devices_01.jpg" alt="example"></div>
<div>
<h5>Lorem ipsum dolor</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed mattis vel sem posuere imperdiet.
Fusce varius nunc lectus, eget auctor metus maximus ac. Nullam lobortis enim eget quam iaculis,
in malesuada diam convallis. Interdum et malesuada fames ac ante ipsum primis in faucibus. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed mattis vel sem posuere imperdiet.
Fusce varius nunc lectus, eget auctor metus maximus ac. Nullam lobortis enim eget quam iaculis,
in malesuada diam convallis. Interdum et malesuada fames ac ante ipsum primis in faucibus. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed mattis vel sem posuere imperdiet.
Fusce varius nunc lectus, eget auctor metus maximus ac. Nullam lobortis enim eget quam iaculis,
in malesuada diam convallis. Interdum et malesuada fames ac ante ipsum primis in faucibus. </p>
</div>
</li>

Превью к слайдам измените в строках 183-186 указав свои ссылки на изображения.

<a data-slide-index="0" href=""><img src="/.s/t/1802/previews.jpg"></a>
<a data-slide-index="1" href=""><img src="/.s/t/1802/previews.jpg"></a>
<a data-slide-index="2" href=""><img src="/.s/t/1802/previews.jpg"></a>
<a data-slide-index="3" href=""><img src="/.s/t/1802/previews.jpg"></a>

6)

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

Если вы желаете изменить «Вид информера» перейдите в раздел «Инструменты» — «Информеры», где выберите необходимый информер и измените его.

Также вы можете удалить данный блок если не желаете использовать этот модуль. Найдите строки 199-221, 222-239 и удалите их.

3. Как изменить фон шаблона?

Чтобы цвет фона, перейдите в Панель управления → Дизайн → Редактор → Таблица стилей (CSS), после чего необходимо найдите там 31 строку:

body { background: #f4ffe9; margin: 0; font-size: 15px; color: #444; line-height: 1.5; font-family: "Roboto Condensed", sans-serif; }

#f4ffe9 – является цветом фона. Вместо него можно указать свой цвет или ссылку на свое изображение, предварительно загрузив его в Файловый менеджер сайта.

4. Как изменить цвет блоков?

Чтобы изменить фон правого блока нужно перейти в Панель управления → Дизайн → Редактор → Таблица стилей (CSS). Вам потребуется перейти к 42 строке кода:

aside {  width: 370px;  font-size: 14px;  border-left: 1px solid #e5ebf0;}

и добавить  в список сss cвойство:

background-color: #000;

где #000 — цвет фона. Его можно изменить на любой другой html-цвет.

5. Как изменить нижнюю часть сайта?

Нижняя часть сайта не имеет каких либо особенностей. В правом углу расположены иконки социальных сетей, для их изменения перейдите в Панель управления → Дизайн → Редактор → Нижняя часть, где в строках 9-16 укажите свои ссылки на аккаунты в социальных сетях:

<div>
<span><a href="https://twitter.com/" target="_blank"></a></span>
<span><a href="https://www.facebook.com/" target="_blank"></a></span>
<span><a href="https://vimeo.com/" target="_blank"></a></span>
<span><a href="http://instagram.com/" target="_blank"></a></span>
  <span><a href="http://vk.com/" target="_blank"></a></span>
</div>

5. Какой цвет основных элементов сайта?

Основным цветом элементов сайта является #26bf66

Если требуется сменить цветовую гамму, то воспользуйтесь заменой #26bf66 на любой свой html-цвет, используя замену внутри шаблона Таблица стилей CSS.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *