Google+ Blogger WordPress Facebook Like Vkontakte Odnoklassniki LiveJournal vKruguDruzei Facebook Email Gmail
среда, 30 мая 2018 г.

Фишки для дизайна с использованием CSS

Источник :https://www.bdblogov.ru/2016/03/chips-for-design-with-using-CSS-for-blogger.html
Изображение слева для заголовка сообщения
Изображение для заголовка сообщения слева
.post-title {
    background: url(адрес картинки) no-repeat left transparent;
    padding-left: 35px;
    }
Изображения слева и справа для заголовка поста
Изображения для заголовка постов справа и слева
.post-title:before,
.post-title:after {
content: url(адрес изображения);
}
Иконка сверху слева для заголовка поста
Картинка сверху слева для заголовка поста
.post-outer:before {content: url(адрес изображения);}
Иконка сверху по центру для заголовка сообщения
Картинка сверху по центру для заголовка сообщения
.post-outer:before {
content: url(адрес картинки);
display: block;
width: auto;
margin: 0 150px;
}
Меняйте значение margin: 0 150px; и настраивайте положение картинки по центру или справа
Изображение слева для шапки блога
Изображение слева для шапки блога
.header {
    background: url(адрес картинки) no-repeat left transparent;
    padding-left:75px;top:3px; //*отступ от названия заголовка;
    }
Изображение справа в шапке блога
Изображение справа в шапке блога
.header {
    background: url(адрес картинки) no-repeat right transparent;
    padding-right:75px;top:3px;
    }
Изменить расположение заголовка (названия) блога (по центру или правее)
Изменить расположение заголовка (названия) блога
.header{ padding-left:275px;top:3px;}
Автоматическая подпись под всеми сообщениями в блоге
Автоматическая подпись под всеми постами в блоггер
.entry-content:after {
content: url(адрес подписи);
margin-left: 50px;
}
Почитайте пост  Как создать красивую подпись для своих веб сайтов/блогов

(https://www.bdblogov.ru/2014/01/as-create-a-beautiful-signature.html)
Убрать иконку карандаша в комментариях
Иконка карандаша в комментариях
Убираем иконку карандаша на чистом CSS
.comments .comments-content .icon.blog-author {display:none;}
Гаджет Архив блога в прокрутке
#BlogArchive1 .widget-content{height:300px; width:auto;overflow:auto;}
Гаджет Ярлыки в прокрутке
#Label1 .widget-content{height:100px; width:auto;overflow:auto;}

Изменить на странице цвет выделяемого текста при копировании
::selection {
background: #ff6200;
color: #fff;
 }
::-moz-selection {
background: #ff6200;
color: #fff;
}
Скрыть подчеркивание ссылок
a:link {text-decoration:none;}

Коды CSS вставляем в шаблон изменить шаблон выше строки ]]></b:skin>.
Можно вставить дизайн добавить гаджет внизу макета блога: <style>код CSS</style>. Или в таком же варианте в редакторе сообщений по вкладке HTML оформить для отдельной страницы.
У кого на главной больше одного поста, при вставке кода в один из них, картинки в заголовке появятся во всех сообщениях. Коды картинок для заголовка поста устанавливайте на страницы, не отображающиеся на главной. 
И в заключение два скрипта, для автоматического изменения основного фона при переходе на другие страницы. Скрипт вставить шаблон изменить шаблон выше закрывающего тэга </head>.
Автоматически меняющийся основной фон блога при переходе
<script type='text/javascript'>//<![CDATA[
function get_random_color(){var e="0123456789ABCDEF".split("");var t="#";for(var n=0;n<6;n++){t+=e[Math.round(Math.random()*14)]}return t}$(function(){$(".content").each(function(){$(this).css("background-color",get_random_color())})})//]]></script>
Меняющийся фон заголовка
<script type='text/javascript'>//<![CDATA[
function get_random_color(){var e="0123456789ABCDEF".split("");var t="#";for(var n=0;n<6;n++){t+=e[Math.round(Math.random()*14)]}return t}$(function(){$(".header").each(function(){$(this).css("background-color",get_random_color())})})//]]></script>



0 коммент.:

Отправить комментарий