Урок 19.CSS — дизайн блога

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

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

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

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

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

Бажаю усім фантазії і наснаги!

Шаблон у стилі Web 2.0

Шаблон веб 2.0

Шаблон для Румі у стилі web 2.0. У роботі було використано елементи freeware шаблона від Nick La.

Для коректного відображення слід скопіювати у блог стандартну тему Almost Spring, а вже потім копіювати даний шаблон.

Урок 18.CSS — у різних браузерах.

Ті, хто за допомогою моїх уроків змінював дизайн свого блога, скоріше за все вже помітили, що у одному браузері шаблон може виглядати трохи інакше, аніж у іншому. Найбільше проблем, на жаль, може принести найпопулярніший нині браузер — Internet Explorer. У браузерах Opera та Firefox CSS відображається майже ідентично. Кажуть, що у новій — 7 версії Internet Explorer — багів значно поменшало, але чи багато користувачів нині використовують Internet Explorer 7?
Усім, хто змінює дизайн CSS блога, я хочу дати корисну пораду: простежуйте свої зміни принаймні у двох браузерах:  Internet Explorer та Firefox, наприклад. Або у Opera і Internet Explorer. Таким чином у майбутьньму ви зможете уникнути неприємностей з полетівшими кудись убік елементами дизайну чи неправильним розташуванням малюнка.
У мене неодноразово запитували, як домогтися коректного відображення прозорості елементів у різних браузерах.
Тож почну саме з прозорості:
Safari, Mozilla, Opera 9

Ці браузери підтримують опцію CSS opacity (прозорість). Для надання тому чи іншому селектору прозорості (opacity) використовують числа від 0.0 (не прозорий) до 1.0 (прозорий), при цьому не можна вказувати одиниці в процентах.

Explorer

Для Explorer»а ж треба прописувати інший код:

filter: alpha(opacity=50);


Примітка: для того, щоб filter працював, його потрібно застосовувати до селекторів, а не властивостей.

Ви повинні надати ширину (width) або висоту (height) для елемента, якому встановлюється прозорість.

Описане вище не буде працювати у таких браузерах, як Explorer 5.0 Windows, Explorer Mac, и iCab.
Другою проблемою сумісності CSS з різними браузерами є розміщення елементів дизайна у вікні браузера.
Завжди треба пам’ятати, що якщо у Опері титульна назва блога знаходиться посередині, в Експлорері вона може з’їхати куди-небудь вниз чи угору. Тут конкретних засобів «лікування» проблеми немає.  Просто розташування того чи іншого елемента або блока підлаштовується до середньостатистичного за допомогою різних властивостей; так, щоб дизайн виглядав приблизно однаково у всіх браузерах.
Не жалкуйте часу на перевірку зовнішнього вигляду своєї сторінки, звикайте усе робити професійно!
Для тих, хто хоче торкнутися цього питання більш розгорнуто, надаю посилання на сайт з описом специфікацій CSS:

Вітаю з днем Святого Валентина!

Шаблон до дня святого Валентина

Вітаю усіх блогерів з цим чудовим святом, що от-от розпочнеться, і викладаю новий шаблон 🙂

Увага! Для того, щоб шаблон відображався коректно, спочатку скопіюйте до свого блога  стандартний шаблон під назвою Theme H.

Шаблони

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

 

Якщо вам захотілося скопіювати цей шаблон до свого блога, клікніть на малюнок. Коли перейдете на сторінку шаблона, знайдіть кнопочку "Подобається мій блог? Копіюйте CSS".

Увага! Перед тим, як скопіювати цей шаблон до свого блога, зайдіть у Налаштування >  Вид і оберіть шаблон під назвою Green, а потім вже копіюйте шаблон Notebook — тоді він буде виглядати коректно

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

Урок 17.Список дефініцій — IV (закінчення)

Сьогодні ми закінчимо огляд селекторів блога. Я сподіваюся, що за ці декілька місяців ви дізналися багато корисного з моїх уроків, а також розробили власні цікаві ідеї щодо оформлення своєї сторінки за допомогою CSS.

Опис селекторів блога, пов’язаних з коментарями:

# CommentNarrowColumn — як і раніше (див. попередні уроки) визначення виду вузької колонки ( «меню») — наприклад, можна використати тег margin.
# CommentBox — місце розташування блока, у якому відображаються введені коментарі.


# CommentBoxLabel — вигляд поля, яке з’являється перед коментарями ( Блог> Коментарі до замітки)
CommentBoxLabel A, # CommentBoxLabel: A hover: — вигляд посилань до коментарів
. TitleCommentedPosting — шрифт і положення коментарів
. InfoCommentedPosting — шрифт і положення інформації про коментар


# RecommendPosting — місцерозташування і розмір шрифта для лінка «Розкажи другу» (BackTrackComment (RSS) )
. InfoCommentAuthor — розташування і розміри шрифта, для логіна автора коментаря
. InfoCommentDate — відповідає за дату коментаря
. InfoCommentText — розташування і орієнтація тексту коментаря


# CommentAuthor — шрифт і позиція рядків «вхід» (або увійти у систему, щоб прокоментувати)  для окремого віконця, у якому вводяться коментарі.
# AreaCommentLabel — шрифт і позиція напису «Коментарі» над полем до якого вписується коментар
. CommentSystemMessage — розташування рядка «Щоб прокоментувати цю замітку, необхідно ввести ваші логін і пароль»
# DIV CommentKeys — поява кнопки «Зберегти» і «Скасувати»
# CommentCommentsList — розташування коментаря

Ми повертаємося до головної сторінки. Якщо ви дозволяєте шукати інформацію у своєму блозі (див. у налаштуваннях), є можливість оформити форму пошуку за власними побажаннями:

# BlogSearch — місцерозташування блока «Пошук»
DIV # BlogSearchText — вигляд віконечка, у яке вводиться інформація для пошуку
DIV # BlogSearchKey — вигляд кнопки «Пошук»


І знову коментарі:

. CommentError— місцерозташування напису про помилку при додаванні коментарів (наприклад, якщо натиснути кнопку «зберегти», нічого не додавши)

Далі йдуть селектори, що відносяться до головної сторінки:

#BlogTitlesLastPostings, # BlogAuthorsBox — місцерозташування блоків «Останні замітки» та «Про автора»


# BlogPagingBox — розташування блока зі сторінками блога (1, 2, 3, 4, 5 Далі)
DIV # BlogPagingPage — параметри блока зі сторінками блога (розміри, вигляд, рамки, колір і т.д.)
td.BlogPagingPrevious — розташування напису «Назад»
td.BlogPagingPage — номери сторінок (кількість сторінок)
td.BlogPagingNext — розташування напису «Далі»

І знову коментарі:


# CommentPassword input, CommentURL input, # CommentAuthor input, — розташування і розмір області, у якій ви пишете коментар (логін, пароль, адреса)
DIV captcha IMG, DIV captcha — зовнішній вигляд і розташування зображення захисту від спаму

 

У наступному уроці я розповім про те, як вирішити проблеми, пов’язані з адаптацією вашого коду до різних браузерів.

Урок 16.CSS — Список дефініцій ІІ

Для тих, хто хоче змінювати CSS календаря блога:

# BlogCalendarBox— налаштування календаря

TABLE.Calendar — шрифт для неактивних чисел календаря (наприклад, дні без записів)

TD.Month — селектор налаштування шрифта для неактивних місяців. Оскільки насправді неактивних місяців не буває, то ви можете ввести до селектора наприклад, жирне написання шрифту: для посилань, які будуть виділені жирним шрифтом, і для звичайного вигляду, або після переміщення миші. Ви також можете залишити цей розділ порожнім.

TD.Month А; TD.Month A: hover — відповідають за вигляд посилання на назву місяця.
TD.TD.DayOfWeek — відповідає за робочі дні  у календарі
TD.DayOfMonth — відповідає за вихідні дні у календарі. 
TD.DayOfMonth A TD.DayOfMonth A:hover
— відповідає за ті дні, у які присутні замітки

# BlogBookmarkBox— місце розташування блока закладинок
# BlogBookmarkTitle— визначення шрифту та положення «Закладки» 
.BookMarkContainerBox— як говорить сама назва, відповідає за шрифт і позицію назви папки закладок


# BookmarksItems — положення папки із закладками (відстань між категоріями закладок) 
. BookmarkLabel (.BookmarkTreeLevel) — розташування окремих ланок в закладках (інтервал між посиланнями) 
.BookmarkLabel, А. BookmarkLabel: hover — текст закладки — посилання та посилання після переміщення курсора миші 

Якщо у налаштуваннях ви обрали архів, а не календар до  свого блога,  буде корисно ознайомитися з такими селекторами:


# BlogArchiveBox— місце розташування блока з архівом.
# ArchiveTitle — визначення зовнішнього вигляду і розташування напису «Архів» 
. ArchiveItem — відповідає за зовнішній вигляд лінків архіва
. ArchiveItem А. ArchiveItem: hover — зовнішній вигляд  посилання на текст архіва (назви місяця), та вигляд посилання при наведенні на нього курсора миші.
У наступному уроці детально розберемо властивості блока з коментарями у вашому блозі.

Урок 15.CSS — Список дефініцій І

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

# BODY — зазвичай відповідає за дизайн усієї сторінки. У нашому випадку відповідає за фонове зображення блога, вигляд блога в цілому. Наприклад, якщо не уточнювати колір шрифту замітки десь посередині коду у іншому селекторі, браузер автоматично поставить колір для шрифту саме з селектора BODY.


# Body A — відповідає за формат посилань блога, якщо їх формат не уточнено іншим селектором.


# BlogMainBox — прямокутник, у якому вміщено усі елементи блога (назва, архів, замітки і т.д.).

#SuperScript — поле понад назвою блога.

# BlogTitleBox — прямокутник, у якому відображається назва блога.


# BlogTitleDescription — відповідає за вигляд опису блога, якщо він доступний для перегляду. Опис знаходиться відразу під назвою блога, всередині BlogTitleBox.


#BlogTitleText, #BlogTitleText A, #BlogTitleText A:hover — Ці три селектори відповідають за зовнішній вигляд тексту у шапці блога. Перше значення визначає загальні властивості назви блога — такі, як шрифт, його колір та розмір. Другий селектор відповідає за властивості лінка назви, а третій — за його вигляд при наведенні миші.


# BlogBodyBox — відповідає за весь блог під назвою, тобто, обидві колонки — вузьку і широку.


# Footer — відповідає за нижню частину блога. Це такий невеликий блок під  усіма замітками.


# BlogNarrowColumn — вузька колонка блога, у якій знаходяться ваші закладинки, календар або архів, поле для пошуку, посилання на останні замітки.


#BlogWideColumn, #BlogWideColumn A, #BlogWideColumn A:hover — широка колонка блога. Перший селектор відповідає за шрифт, його розміри та колір, фонове зображення блока. Другий селектор — за властивості лінків у цьому блоці, третій — за вигляд лінків, коли на них наведено курсор миші.


# BlogCategoriesBox — селектор, у якому розміщені лінки категорій вашого блога. Відповідає за розмір та вигляд шрифта, фон.

#BlogCategoriesBox A i #BlogCategoriesBox A:hover —  перший селектор відповідає — за властивості лінків у цьому блоці, другий — за вигляд лінків, коли на них наведено курсор миші.

# BlogRss: — відповідає за вигляд лінку на RSS блога.


. BlogPostingItemTitle — вигляд назви кожної замітки.
DIV.BlogPostingItemTitle А — властивості лінку назви замітки.


. BlogPostingContent — вигляд шрифта, який використано у замітках.
DIV.BlogPostingContent — вигляд посилань  у замітках.


. BlogPostingDate — відповідає за дату написання замітки.


. BlogPostingBox — відповідає за блок, у якому знаходиться замітка.


. BlogPostingInfo — відповідає за  зовнішній вигляд інформації про замітку


#BlogLinkiBox, #BlogLinkiBox A, #BlogLinkiBox A:hover — відповідає за логотип Blox’a. Два останні селектори  розшифровуються аналогічно, як наведені вище такого типу 🙂


#ShareCss, #ShareCss A, #ShareCss A:hover — відповідає за кнопочку «Зтягнути Css блога» у тому випадку, якщо ви зробили цю опцію доступною користувачам.