Руководство по HamsterCMS от TomoTomoTan
Ручной «Хомяк» – наглядное пособие по Hamster CMS. Предисловие и глава 1. - Как включить
Ручной «Хомяк» – наглядное пособие по Hamster CMS. Глава 2 - О шаблонах и содержимом
Ручной «Хомяк» – наглядное пособие по Hamster CMS. Глава 3 - Доступ к сайту через FTP, редактирование шаблона
Ручной «Хомяк» – наглядное пособие по Hamster CMS. Глава 4 - Устройство шаблона. Немного о включениях.
Ручной «Хомяк» – наглядное пособие по Hamster CMS. Глава 5 - Создание собственного шаблона. Загрузка файлов на сайт с помощью WebFTP

Блог, который мы заслужили

Moderator: Turboblack

User avatar
Turboblack
Начальник
Posts: 242
Joined: Wed Dec 18, 2024 8:25 pm
Has thanked: 44 times
Been thanked: 65 times

Блог, который мы заслужили

Post by Turboblack »

Для того чтобы стилизовать блог,
который подключается через <!--#include virtual="/cgi-bin/blog/?$args" -->,
можно и нужно использовать CSS.

Блог выводит элементы HTML, такие как заголовки, абзацы, изображения и т.д.
Я предложу общие стили, которые помогут сделать блог современным и привлекательным.

Итак, пример стилей для блога:

/* Основные стили для контейнера блога */

Code: Select all

.blog-container {
max-width: 800px;
margin: 0 auto;
padding: 20px;
background-color: #f9f9f9;
border-radius: 8px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
/* Заголовки */

Code: Select all

.blog-container h1, .blog-container h2, .blog-container h3 {
color: #333;
margin-bottom: 15px;
font-family: 'Arial', sans-serif;
}

.blog-container h1 {
font-size: 36px;
}

.blog-container h2 {
font-size: 28px;
}

.blog-container h3 {
font-size: 22px;
}
/* Текст и абзацы */

Code: Select all

.blog-container p {
line-height: 1.6;
color: #555;
font-size: 18px;
margin-bottom: 20px;
font-family: 'Georgia', serif;
}
/* Ссылки */

Code: Select all

.blog-container a {
color: #007BFF;
text-decoration: none;
transition: color 0.3s ease;
}

.blog-container a:hover {
color: #0056b3;
}
/* Изображения */

Code: Select all

.blog-container img {
max-width: 100%;
border-radius: 8px;
margin-bottom: 20px;
}
/* Цитаты */

Code: Select all

.blog-container blockquote {
font-style: italic;
color: #666;
border-left: 4px solid #007BFF;
padding-left: 15px;
margin-left: 0;
font-family: 'Georgia', serif;
}
/* Списки */

Code: Select all

.blog-container ul {
list-style-type: disc;
margin-left: 20px;
color: #555;
}

.blog-container ul li {
margin-bottom: 10px;
}
/* Кнопки для взаимодействия, например "Читать далее" */

Code: Select all

.blog-container .btn {
display: inline-block;
background-color: #007BFF;
color: #fff;
padding: 10px 20px;
border-radius: 4px;
text-decoration: none;
transition: background-color 0.3s ease;
}

.blog-container .btn:hover {
background-color: #0056b3;
}

a {
text-decoration: none;
}

a[href*="?page="] {
font-size: 24px;
font-weight: bold;
text-decoration: none;
color: #ff0000;
}
a[href*="?page="]:hover {
text-decoration: underline;
}
Как применить стили:

Убедитесь, что HTML-код блога завернут в свой контейнер с классом,
например

Code: Select all

<div class="blog-container">
Добавьте CSS в ваш файл стилей или внутри своего шаблона.
Настройте цвета, шрифты, и размеры под ваш дизайн.

Если вы используете гостевую, или чат, можно дополнить стили для них по тому же принципу
современное общество это стереотип считающий совокупность недостатков превосходством
User avatar
alsk
Птица-говорун
Posts: 128
Joined: Sun Jan 12, 2025 11:21 am
Has thanked: 6 times
Been thanked: 13 times

Re: Блог, который мы заслужили

Post by alsk »

Наверное, это про https://old.net.eu.org/ ?

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

---
шото мне как-то не очень. Вчера/сегодня я много на форуме понаписювал. Отдохну пару дней.

Return to “Веб-дизайн”