Как изменить размер картинки на сайте юкоз

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

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

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

<a class="logo-lnk" 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:

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

<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="#" class="info-btn">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.

Рейтинг: 43  (помогла ли Вам эта инструкция: да / нет)
        
Просмотров: 79241
        
Комментариев:

Сергей   
16.09.2014   
9873   
3.4 из 5.0 (17)

Оцените материал:

• 1
• 2
• 3
• 4
• 5

Введение

Продолжаем настройки интернет магазина uCoz. Вспоминаем, где остановились в прошлый раз Панель управления — Интернет магазин — Настройки:

Каталог категорий

Речь в этом пункте пойдет об <?$CATALOG$(N,K)?>, про который мы говорили на уроке 51.

Разделитель для списка ссылок на подкатегории. Позволяет настроить вывод подкатегорий, по умолчанию, они располагаются через запятую на одной строке. Можно поменять запятую на | . Другим популярным вариантом является расположение подкатегорий на разных строках. Для этого используется разделитель <br />.

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

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

Список категорий

В этом разделе речь пойдет о переменной $CATEGORIES$, которая работает на всех страницах интернет магазина. Зачастую она используется для меню навигации по категориям в сайдбарах.

Тип отображения списка категорий. Позволяет определить эффект показа категорий: Раскрывающееся дерево или Раздвигающиеся блоки.

Использовать для блоков названия стилей стандартного дизайна. Стандартные стили: .gTable для обертки, .gTableTop для главных категорий и .forumNameTd. Если удалить эту галочку, то и классы будут убраны. Это нужно для тех случаев, когда настройки стандартных стилей не совпадают с желаемыми настройками списка категорий.

Выводить количество активных товаров возле названия категории. Отображается в скобках после названия категории. Например Категория (12).

Настройка загрузчика изображений

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

Когда вы прикрепляете изображение к товару (через форму редактирования или обработчик прайсов), это изображение сохраняется на сервере в трех экземплярах, которые используются для вывода в переменных $PHOTO$, $THUMB$ и $SMALL$. Каждый из экземпляров имеет свои размеры, которые указываются в этих настройках:

Размеры (ширина/высота в пикселях) для иконки товара — размер изображения для $SMALL$. Обычно используется в шаблоне «Вид товара в корзине» или в прайс-листах.

Размеры (ширина/высота в пикселях) для превью изображения товара — размер изображения для $THUMB$. Обычно используется в шаблоне «Вид товара в каталоге», в результатах поиска.

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

Если установлена галочка Ограничивать размер загружаемых изображений товара, то исходное изображение будет сначала подведено под пропорции, а потом загружено на сервер в качестве $PHOTO$.

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

Оцените материал:

• 1
• 2
• 3
• 4
• 5

Расскажите друзьям и коллегам о полезной статье:

                  Шаг за шагом, общими усилиями,  не торопясь, изменяем стандартный шаблон сайта. И сегодня наступила очередь верхней картинки , так называемой «Шапки».  «Шапка» — это лицо сайта, оно должно быть индивидуальным и отличатся от других.  Для грамотных пользователей НТМL, CSS — это действие не сложно, но для начинающих составляет определенные трудности.  Поэтому, с нашей стороны, постараемся рассказать об этой  манипуляции, понятно и  подробно. Сам процесс замены внешнего  вида сайта, делится на техническую — просто замена картинки; и художественную, то есть  изготовление  самой илюстрации. Художественную часть мы с вами рассматривать не будем, это другая, отдельная тема Potoshopa. Но, подскажем направления  создания «уникального рисунка».

            Внимние!  Эта функция работает только в браузере Mozilla Firefox. Ни в одном другом «обзорнике» этой функции нет. Была в старых версиях Opera, но в новых, например 0.12 её нет. В одной из наших статей «Вид сайта в браузере» мы рассказывали, что надо иметь у себя на компьютере все основные: Internet Exploer у всех есть;  Opera; Mozilla Firefox; Google Chrome; сейчас вышел новый, детище Yandex с одноименным названием. В этой статье мы говорили, что необходимо постоянно просматривать все изменения во всех выше названных браузерах, потому — что некоторые функции у них разные.

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