Продолжая улучшать собственный сайт, важно обратить особое внимание на так называемые системные сообщения. Это то, с чем постоянно сталкиваются пользователи Вашего сайта. Это и сообщения об ошибках, и сообщения о том, что материал или комментарий опубликован. "CSS Message Boxes for Blogs" позволяет значительно улучшить вид этих системных сообщений.
Для этого нужно в css файл добавить следующий код:
/*message box chethstudios */
.fave_css, .home_css, .idea_css, .author_css, .rss_css, .pen_css, .tooledit_css, .alert_css, .comment_css, .lock_css, .book_css {
border: 1px solid
margin: 10px 0px;
padding:15px 10px 15px 50px;
background-repeat: no-repeat;
background-position: 10px center;
}
.fave_css {
color: #00529B;
background-color: #BDE5F8; -moz-border-radius-topleft: 18px; -moz-border-radius-topright: 18px; -moz-border-radius-bottomright: 18px; -moz-border-radius-bottomleft: 18px;
background-image: url(http://4.bp.blogspot.com/_5rlxf3T9Z9U/SsIXnWAiPmI/AAAAAAAADbw/PNPR20ioK_...);
}
.home_css {
color: #4F8A10;
background-color: #DFF2BF; -moz-border-radius-topleft: 18px; -moz-border-radius-topright: 18px; -moz-border-radius-bottomright: 18px; -moz-border-radius-bottomleft: 18px;
background-image:url(http://1.bp.blogspot.com/_5rlxf3T9Z9U/SsIXp7bJEAI/AAAAAAAADb4/c0XYyhY-DX...);
}
.idea_css {
color: #9F6000;
background-color: #FEEFB3; -moz-border-radius-topleft: 18px; -moz-border-radius-topright: 18px; -moz-border-radius-bottomright: 18px; -moz-border-radius-bottomleft: 18px;
background-image: url(http://1.bp.blogspot.com/_5rlxf3T9Z9U/SsIXsMD87MI/AAAAAAAADcA/hx_l4F3pcL...);
}
.author_css {
color: #2E2D2D;
background-color: #A1C2C7; -moz-border-radius-topleft: 18px; -moz-border-radius-topright: 18px; -moz-border-radius-bottomright: 18px; -moz-border-radius-bottomleft: 18px;
background-image: url(http://4.bp.blogspot.com/_5rlxf3T9Z9U/SsIeeYeesFI/AAAAAAAADcw/yVE6xvr9S_...);
}
.rss_css {
color: #4F8A10;
background-color: #DFF2BF; -moz-border-radius-topleft: 18px; -moz-border-radius-topright: 18px; -moz-border-radius-bottomright: 18px; -moz-border-radius-bottomleft: 18px;
background-image:url(http://3.bp.blogspot.com/_5rlxf3T9Z9U/SsIX0rlYZ9I/AAAAAAAADcY/YE6Y2Nev0t...);
}
.pen_css {
color: #2E2D2D;
background-color: #C8E0C8; -moz-border-radius-topleft: 18px; -moz-border-radius-topright: 18px; -moz-border-radius-bottomright: 18px; -moz-border-radius-bottomleft: 18px;
background-image: url(http://1.bp.blogspot.com/_5rlxf3T9Z9U/SsIXyk9CJRI/AAAAAAAADcQ/BJZBSRCq7t...);
}
.tooledit_css {
color: #554529;
background-color: #F1C983; -moz-border-radius-topleft: 18px; -moz-border-radius-topright: 18px; -moz-border-radius-bottomright: 18px; -moz-border-radius-bottomleft: 18px;
background-image: url(http://3.bp.blogspot.com/_5rlxf3T9Z9U/SsIX4ODWwwI/AAAAAAAADcg/p8D5a_X72Q...);
}
.alert_css {
color: #2E2D2D;
background-color: #D25F66; -moz-border-radius-topleft: 18px; -moz-border-radius-topright: 18px; -moz-border-radius-bottomright: 18px; -moz-border-radius-bottomleft: 18px;
background-image: url(http://1.bp.blogspot.com/_5rlxf3T9Z9U/SsIX7-C1GYI/AAAAAAAADco/5XubUJ34o2...);
}
.comment_css {
color: #2E2D2D;
background-color: #A6C8D2; -moz-border-radius-topleft: 18px; -moz-border-radius-topright: 18px; -moz-border-radius-bottomright: 18px; -moz-border-radius-bottomleft: 18px;
background-image: url(http://1.bp.blogspot.com/_5rlxf3T9Z9U/SsIXkQfrW9I/AAAAAAAADbo/EsSD0I42sr...);
}
.lock_css {
color: #2E2D2D;
background-color: #FFBABA; -moz-border-radius-topleft: 18px; -moz-border-radius-topright: 18px; -moz-border-radius-bottomright: 18px; -moz-border-radius-bottomleft: 18px;
background-image: url(http://1.bp.blogspot.com/_5rlxf3T9Z9U/SsIXuytpYfI/AAAAAAAADcI/I4Tm0W5gDQ...);
}
.book_css {
color: #4F8A10;
background-color: #DFF2BF; -moz-border-radius-topleft: 18px; -moz-border-radius-topright: 18px; -moz-border-radius-bottomright: 18px; -moz-border-radius-bottomleft: 18px;
background-image:url(http://1.bp.blogspot.com/_5rlxf3T9Z9U/SsIXiIlQU2I/AAAAAAAADbg/b3ERrIS-id...);
}
/*message box end*/Сами же сообщения об ошибках нужно обернуть в следующие конструкции:
<div class="fave_css ">
This is a neat box to show some text with a heart message icon.
</div>
<div class="home_css ">
This is a neat box to show some text with a home message icon.
</div>
<div class="idea_css ">
This is a neat box to show some text with a idea message icon.
</div>
<div class="author_css ">
This is a neat box to show some text with a author message icon.
</div>
<div class="rss_css ">
This is a neat box to show some text with a rss message icon.
</div>
<div class="pen_css ">
This is a neat box to show some text with a pen/pencil message icon.
</div>
<div class="tooledit_css ">
This is a neat box to show some text with a edit message icon.
</div>
<div class="alert_css ">
This is a neat box to show some text with a alert/caution message icon.
</div>
<div class="comment_css ">
This is a neat box to show some text with a comment message icon.
</div>
<div class="lock_css ">
This is a neat box to show some text with a lock message icon.
</div>
<div class="book_css ">
This is a neat box to show some text with a book message icon.
</div>
Комментарии (0)
Отправить комментарий