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

Модератор: Turboblack

Ответить
Аватара пользователя
Turboblack
Начальник
Сообщения: 239
Зарегистрирован: Ср дек 18, 2024 8:25 pm
Благодарил (а): 43 раза
Поблагодарили: 65 раз
Контактная информация:

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

Сообщение Turboblack »

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

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

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

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

Код: Выделить всё

.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);
}
/* Заголовки */

Код: Выделить всё

.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;
}
/* Текст и абзацы */

Код: Выделить всё

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

Код: Выделить всё

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

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

Код: Выделить всё

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

Код: Выделить всё

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

Код: Выделить всё

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

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

Код: Выделить всё

.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-код блога завернут в свой контейнер с классом,
например

Код: Выделить всё

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

Если вы используете гостевую, или чат, можно дополнить стили для них по тому же принципу
современное общество это стереотип считающий совокупность недостатков превосходством
Аватара пользователя
alsk
Птица-говорун
Сообщения: 127
Зарегистрирован: Вс янв 12, 2025 11:21 am
Благодарил (а): 6 раз
Поблагодарили: 13 раз

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

Сообщение alsk »

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

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

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

Вернуться в «Веб-дизайн»