1. А можна такий же, але з перламутровими ґудзиками? Так!
2. Дії з об'єктами
3. зміна шрифтів

Отже, у вас є готовий сайт на UMI.ru. З професійним дизайном, ретельно спроектовані інтерфейсами, налаштованими стилями форматування. Але що робити, якщо поточний шаблон вам не зовсім підходить: хочеться змінити зовнішній вигляд сайту, пограти з квітами, адаптувати веб-сторінки під ваш корпоративний стиль або ваше бачення? Як змінити сайт?

Перш за все, уважно вивчити всі основні правила юзабіліті і звіряти з ними все подальші дії. І діяти!

А можна такий же, але з перламутровими ґудзиками? Так!

На 1С-UMI є можливість змінити зовнішній вигляд готового сайту кількома способами, які можна поєднувати або використовувати окремо:
1. Найпростіший спосіб - змінити вигляд сторінок сайту за допомогою картинок.

• Поставте ваш логотип в лівому верхньому куті сайту. Якщо у вас немає логотипу - це може бути будь-який іміджеве зображення, що допомагає зрозуміти, чому присвячений сайт. Це може бути навіть ваша фотографія - якщо бізнес прив'язаний до вашої особистості (наприклад, уроки англійської мови).
• Замініть основне іміджеве зображення в "шапці" сайту. Це ключовий елемент вашого брендингу і перше, що побачить відвідувач вашого сайту, тому підбирайте зображення дуже ретельно. Воно повинно бути якісним, демонструвати суть вашої пропозиції і особливості позиціонування. Використовувати його можна також в якості тимчасового або постійного банера, який рекламує якесь речення або акцію.
• Додайте картинки, що ілюструють текст сайту. Це легко зробити за допомогою візуального редактора. Ілюстрації в тексті потрібні, але, в залежності від використання, вони можуть як покращити сайт, так і зіпсувати його. Про те, як грамотно працювати з зображеннями для веб-сторінок, ми поговоримо окремо, в інший раз.

Вихідний шаблон дизайну:

Шаблон, змінений за допомогою картинок:

2. Найбільш радикальний спосіб - змінити шаблон дизайну.

Цей спосіб підійде, якщо ви хочете повністю змінити зовнішній вигляд сайту, вибравши іншу тематику оформлення. Для цього просто зайдіть в розділ "Дизайн - Зміна дизайну" в панелі управління вашого сайту і виберіть новий дизайн. При цьому, ви можете зберегти всі внесені зміни: тексти, картинки, структуру, об'єкти каталогу і т.д.

3. Найбільш творчий спосіб - редагування стилів CSS.

CSS - це технологія опису зовнішнього вигляду веб-сторінок, написаних на мові розмітки HTML. Певні стилі CSS вже застосовані до готових сайтів на UMI.ru і описують зовнішній вигляд всіх елементів: текстів, кнопок, посилань, меню, "хлібних кішок" і ін. Для їх зміни необхідно прописати нові стилі в спеціальному файлі, який знаходиться в розділі " Дизайн "-" управління CSS "в панелі управління вашого сайту (доступно на платному тариф).

За допомогою стилів CSS можна змінити:

• фон сайту (вставити фонову картинку або поміняти колір)
• колір, розташування і кут нахилу об'єктів
• шрифти
• форматування абзаців
• додати тіні, рамки або заокруглення об'єктів
• пересунути блоки або змінити їх форму
• багато іншого.

Все це можна зробити самостійно, але вам будуть потрібні деякі базові знання про редагування стилів CSS. Не лякайтеся, вам не доведеться складати код: всі стилі вже є в спеціальних підручниках. Розібратися в основах вам допоможе відмінний самовчитель CSS - htmlbook.ru , А отримати потрібний код - генератори CSS: css3maker.com і css3generator.com . А якщо у вас є знайомі, які знають мову HTML, то вони з легкістю допоможуть в редагуванні стилів.

І сайт перетворюється ...

Як змінити сайт за допомогою CSS і подивитися, які стилі вже застосовані до елементів сторінок - ви дізнаєтеся з нашого керівництва .

А щоб ви зрозуміли, наскільки це легко - розберемо кілька прикладів.

Дії з об'єктами

Перед тим, як змінити сайт, не забудьте зберегти його резервну копію - тоді ви зможете його легко відновити з разі неполадок. Тепер можна приступати до редагування. За допомогою інструменту інспектування коду (В нашому прикладі використаний Firebug в браузері Mozilla Firefox) знаходимо код необхідного елемента - в даному випадку, це код кнопки:

У правому віконці інспектора "Стиль" прописаний код, позначений різними кольорами:

• чорним - клас (в даному випадку, кнопка),
• зеленим - CSS-властивість (в даному випадку, колір),
• синім - значення (в даному випадку, блакитний),
• закреслений код позначає, що даний стиль не працює, оскільки конфліктує з іншим, більш пріоритетним стилем.

Ми бачимо, що клас кнопки називається .direction_title. Щоб зрозуміти, який фрагмент представленого коду відповідає за колір, можна "перевести" зелені теги, скориставшись пошуком в довіднику . За колір фону кнопки відповідає властивість background (не плутайте з властивістю color, воно відповідає за колір шрифту). Зараз кнопці присвоєно стиль background: # 1f1f1f; де background - це властивість, що визначає стиль фону, а # 1f1f1f - блакитний колір в шістнадцятковій кодуванні кольору.

Тепер перейдемо до розділу "Дизайн" - "Управління CSS" адмінзони нашого сайту і пропишемо нове значення для класу кнопки, дотримуючись той же синтаксис, що показує інспектор в вихідному коді: між відкриває і закриває фігурної дужки поміщають CSS-властивості зі значеннями, розділяючи їх знаком ";".

Таким чином, в загальному вигляді схема CSS-коду виглядає так:

Тег.Імя класу {свойство1: значення; властивість2: значення; ...}

• записуємо клас (назва елемента) - .direction_title
• ставимо фігурні дужки - {}
• всередині фігурних дужок прописуємо стиль кнопки - background:
• після двокрапки вказуємо код червоного кольору - # ff0000
• в кінці рядка ставимо;
• не забуваємо в самому кінці закрити фігурну дужку.

Що вийшло:

Було стало

Друге завдання: переміщення кнопки вгору і вправо на 100px.

Для початку подивимося значення поточного розташування кнопки за допомогою інспектора, якщо потрібно - "переведемо" через самовчитель . Зараз стоять значення bottom: 20px; left: 40px; де bottom - відстань від нижнього краю кнопки до нижнього краю батьківського блоку, а left - відстань від лівого краю кнопки до лівого краю батьківського блоку.

Таким чином, для переміщення кнопки вгору і вправо на 100px потрібно додати по 100px знизу і зліва - вийде 120px знизу і 140px зліва. Додамо нові значення в наш файл стилів до вже прописаному класу нашої кнопки .direction_title, дотримуючись синтаксис вихідного коду:

Що вийшло:

Було стало

зміна шрифтів

При редагуванні деяких текстових полів на готових сайтах не виникає візуальний редактор, а тому не можна стандартним способом змінити колір, розмір і накреслення шрифту. Це можуть бути заголовки, анонси новин, ціни на товари, контактні дані в шапці сайту, написи на кнопках та ін. Ми зробили це навмисне: налаштували кращі шрифти, найзручніші для читання і оптимально підходять до дизайну сайту. Але якщо все ж вам буде потрібно змінити стиль цих елементів, то це можна зробити за допомогою CSS.

Завдання: змінити розмір і колір шрифту в заголовку "Новости".

Знайдемо клас заголовка і значення стилів за допомогою інспектора коду Firebug, якщо потрібно - "переведемо" значення через довідник .

Ми бачимо, що клас заголовка "Новости" називається .shop-heading, за розмір шрифту відповідає властивість font-size, значення якого зараз - 18px; а за колір - властивість color зі значенням # 111111 (темно-сірий).

Перейдемо до розділу "Дизайн" - "Управління CSS" адмінзони сайту і змінимо ці значення на потрібні нам. Наприклад, збільшимо розмір до 28px, а колір змінимо на червоний. Як ви пам'ятаєте, колір вказується в шістнадцятковому коді:

Зберігаємо і дивимося, що вийшло. Зверніть увагу, що при зміні стилю елемента зовнішній вигляд змінять ВСЕ елементи на сайті, до яких застосовано даний стиль. У нашому випадку, стиль .shop-heading застосований до заголовків "Новости" і "Популярні товари".

Що вийшло:

Було стало

Ще кілька прикладів роботи з CSS описані в нашому керівництві.

можливі складності

1. Не "спрацьовують" стилі, прописані у файлі CSS.
Рішення: після значення властивості прописати правило! Important, яке дозволяє підвищити пріоритет стилю. наприклад:
.shop-heading {
color: # ff0000! important;
font-size: 28px
! important;}

2. Вам не сподобався результат роботи зі стилями. Рішення: просто очистити файл стилів CSS в адмінзоне.

3. Якщо після зміни CSS ви змінили шаблон дизайну, то прописані вами стилі збережуться, але можуть не працювати в разі, якщо на новому шаблоні використовується інша верстка. Рішення: внести зміни в CSS заново, з урахуванням нової верстки.