Avatar

Блог, который мы заслужили (Web1.0 Hosting matters)

by Turboblack ⌂, Monday, September 16, 2024, 08:05 (30 days ago)

Для того чтобы стилизовать блог,
который подключается через <!--#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 в ваш файл стилей или внутри своего шаблона.
Настройте цвета, шрифты, и размеры под ваш дизайн.

Если вы используете гостевую, или чат, можно дополнить стили для них по тому же принципу

--
We live in the distant past, we are still not at all civilized

Tags:
themes, templates, блог, blog


Complete thread:

 RSS Feed of thread