Структура для дизайна или делаем свой стиль (CSS)

Страница: 1

Тема закрыта

Сообщений 1 страница 5 из 5

Поделиться126.03.15 00:33:41

Автор: chibi
мусюндере
Уважение: +170
Сообщений: 9402

При использовании данной структуры большая просьба не убирать копирайты из стиля. В вашем копирайте/футере указывать адрес Футуры или ник Чиби необязательно, но последней точно будет очень приятно :з Все вопросы и проблемы решаются в этой теме.

С чего начать?
1. Для начала нужно обязательно ознакомиться с основами в первом сообщении этой темы, там прописаны основные свойства, которые задаются элементам.
2. Сокращенные названия: "структура style.css" - первое окно; "цвета style_cs.css" - цвета, второе окно.
3. Теперь, чтобы не было непоняток, пройдемся по основным названиям, с которыми может возникнуть путанница

верхняя часть

http://savepic.net/6518920.jpg

1 - шапка
2 - основной фон
3 - верхний фон

середина

http://savepic.net/6503560.jpg

4 - меню навигации
5 - пользовательские ссылки
6 - категория
7 - тело
8 - название форума
9 - описание форума

нижняя часть

http://savepic.net/6490248.jpg

2 - основной фон
10 - нижний фон
11 - копирайт/футер

Поделиться226.03.15 00:33:59

Автор: chibi
мусюндере
Уважение: +170
Сообщений: 9402

Структура style.css

Код:

/* structure by futura.rusff.me
-------------------------------------------------------------*/

/*************************************************************
A - SETUP
**************************************************************/

/* A1 Import the colour scheme
-------------------------------------------------------------*/

/* A1.1 */
  @import url(style_cs.css);

/* A2 Deal with browser defaults and wonkiness
-------------------------------------------------------------*/

/* A2.1 */
html, body {margin: 0; padding: 0}

/* A2.2 */
.punbb * {
  margin: 0}

/* A2.3 */
.punbb ul, .punbb dl, .punbb li, .punbb dd, .punbb dt {
  padding: 0;
  list-style: none;}

/* A2.4 */
.punbb img {
  border:none}

/* A2.5 */
.punbb .main table {
  table-layout: fixed;
  width: 100%;}

/* A2.6 */
.checkfield input[type="checkbox"], .radiofield input[type="radio"] {margin: 0 0.3em;}

/* A2.7 */
p[class="checkfield"] *,
div[class="checkfield"] *,
fieldset[class="radiofield"] * {
  height: 1.8em;
  vertical-align: middle}


 /* A3 Text setup
-------------------------------------------------------------*/

/* A3.1 */
body {
  font-size: 100.01%;}

/* A3.2 */
.punbb {
  font: normal 68.75% verdana;}

/* 3.3 */
.punbb textarea, .punbb input, .punbb select, .punbb optgroup {
  font: 1em verdana, arial, helvetica, sans-serif}
  .punbb input, .punbb select {padding: 2px;}

/* A3.4 */
.punbb h1, .punbb h2, .punbb h3, .punbb h4, .punbb table, .punbb th {
  font-size: 1em;
  font-weight: normal;}

/* A3.5 */
.punbb h1 span, .punbb h2 span, .punbb legend span {
  font-size: 1.1em;}

/* A3.6 */
.punbb pre {
  font: 1.1em/140% monaco, "bitstream vera sans mono", "courier new", courier, monospace}

/* A3.7 */
.punbb address, .punbb em {
  font-style: normal}

/* A3.8 */
.punbb .post-content em {
  font-style: normal}

/* A3.9 */
.punbb .post-content em.bbuline {
  font-style: normal;
  text-decoration: underline;}

/* A3.10 */
.punbb a {
  text-decoration: underline}

/* A3.11 */
.punbb optgroup {
  font-weight: bold;}


/* A4 Float clearing and hidden items
-------------------------------------------------------------*/

/* A4.1 */
#pun:after,
.punbb .container:after,
.punbb .post-links ul:after,
.punbb .main div.inline:after,
.punbb .post-box:after,
.punbb .linksb:after {
  clear: both;
  content: ".";
  display: block;
  height: 0;
  visibility: hidden;
  overflow:hidden;
  line-height: 0.0;
  font-size: 0;}

/* A4.2 */
.acchide,
#pun-index #pun-main h1,
#pun-navlinks h2,
#pun-pagelinks h2,
#pun-status h2,
#pun-ulinks h2,
.punbb .forum h2,
.punbb .multipage .topic h2,
.punbb dl.post-sig dt span,
.punbb p.crumbs strong,
.punbb .divider hr,
.punbb .required label em,
.punbb .formsubmit label,
.punbb .submitfield label,
.punbb .modmenu label,
#pun-userlist .main h2 {
  font-size: 0;
  height: 0;
  width: 0;
  line-height: 0.0;
  position:absolute;
  left: -9999px;
  overflow: hidden}


/* A5 Basic page layout and borders
-------------------------------------------------------------*/

/* A5.1 */
#pun {
  margin: 0px auto auto auto;
  width: 945px;}

/* A5.2 */
.punbb { 
  width: 910px; 
  position: relative;
  height: auto;
  margin-left: 15px;}

/* A5.3 */
#pun-redirect, #pun-maint {
  margin: 0;
  width: 100%;
  height: 100%;
  float: none; 
  top: 0 !important;
  left: 0 !important; }

/* A5.4 */
.punbb .section, .punbb .main {
  margin-bottom: 1em;}

/* A5.5 */
.punbb .category, .punbb .post {
  margin-top: 0.4em;}

/* A5.6 */
.punbb #pun-category1, .punbb .toppost, .punbb .topicpost {
  margin-top: 0;}

/* 5.7 */
#pun-post .topic {
  margin-top: 1em;}

/* A5.8 */
.punbb .section, .punbb .forum, .punbb .formal, .punbb .modmenu, .punbb .info,
.punbb .category, .punbb .post {
  border-style: none;
  border-width: 0px 0px 0px 0px}

/* A5.9 */
.punbb .container {
  border-style: none;
  border-width: 0px;}

/* A5.10 */
.punbb .section h2, #pun-main h1, #pun-main h2, #pun-stats h2, #pun-debug h2 {
  padding: 5px 1em 5px 1em;
  border-style: none;
  border-width: 0px; }


/*************************************************************
B - MAIN CONTENT - GENERAL
**************************************************************/

/* B1 Parsed Content, Signatures and Scroll Boxes
-------------------------------------------------------------*/

/* B1.1 */
.punbb .post-content {
  padding: 0;
  margin: 0;
  width: 100%;
  overflow: hidden;}

/* B1.2 */
.punbb .post-sig dt {
  display: block;
  margin: 5px 0;}

/* B1.3 */
.punbb .post-content p {
  margin: 0;
  padding: 0 0 1em 0;
  line-height: 150%;}

/* B1.4 */
.punbb .post-content img {
  vertical-align: text-bottom}

/* B1.5 */
.punbb .post-content img.postimg {
  vertical-align: middle;}

/* B1.6 */
.punbb .post-content .blockcode, .punbb .post-content blockquote {
  width: 100%;
  overflow: hidden; }

/* B1.7 */
.punbb .post-content .scrollbox {
  width: 100%;
  overflow: auto;}

/* B1.8 */
.punbb .post-content .quote-box, .punbb .post-content .code-box {
  margin: 0.4em 1.8em 0.2em 1.8em;
  padding: 1em;}

/* B1.9 */
.punbb .quote-box cite, .punbb .code-box strong.legend {
  display: block;
  padding-bottom: 0.5em;
  font-size: 0.9em;
  font-weight: bold;
  margin: 0;}

/* B2 Information boxes
-------------------------------------------------------------*/

/* B2.1 */
.punbb .info-box {
  padding: 1.1em 1.7em 1em 1.7em;
  border-style: none;
  border-width: 0px;
  margin: 0 0 1.1em 0;}

/* B2.2 */
.punbb .info-box * {
  padding: 0 0 0.7em 0;}

/* B2.3 */
.punbb #pun-main .info-box .legend {
  font-size: 1.1em;
  font-weight: bold;}


/* B3 Pagination and posting links
-------------------------------------------------------------*/

/* B3.1 */
.punbb .linkst {
  float: left;
  position: relative;
  width: 100%;
  font-size: 1.1em;
  height: 0;}

/* B3.2 */
.multipage {
  margin-top: 3em;}

/* B3.3 */
.linkst .pagelink {
  position: absolute;
  top: -4.5em;
  left: 1em;
  width: 24em; }

/* B3.4 */
.linkst .postlink {
  position: absolute;
  top: -4.5em;
  right: 1em;
  width: 16em;
  text-align: right;
  font-weight: bold;}

/* B3.5 */
.punbb .linksb {
  text-align: right;
  padding: 0.4em 1em 0.5em 1em;
  font-size: 1.1em;}

/* B3.6 */
.linksb .pagelink {
  float: left;
  width: 24em;
  text-align: left;}

/* B3.7 */
.linksb .postlink {
  float: right;
  width: 16em;
  font-weight: bold}

/* B3.8 */
.subscribelink {
  clear:both;
  padding-top: 0.3em;
  padding-bottom: 0.5em;}


/*************************************************************
C - MAIN CONTENT - SPECIFIC
**************************************************************/

/* C1 Form layout
-------------------------------------------------------------*/

/* C1.1 */
.punbb .formal .container {
  padding: 1.7em 2.3em 1.1em 2.3em;}

/* C1.2 */
.punbb .formsubmit {
  padding: 0 0 0 1.7em;
  margin: 1em 0 0 0;}

/* C1.3 */
.punbb .formsubmit input, .punbb .formsubmit a, .punbb .formsubmit span {
  margin: 0 0.6em 0 0}

/* C1.4 */
.punbb fieldset {
  border-style: none;
  border-width: 0px;
  padding: 0 18px 0 18px;
  margin: 0 0 1em 0}

/* C1.5 */
.punbb fieldset legend {
  padding: 0;
  margin: 0 0 0 11px;
  font-size: 1.1em}

/* C1.6 */
.punbb fieldset legend span {
  padding: 0 5px;
  margin: 0 0 0 -15px;}

/* C1.7 */
.punbb fieldset fieldset {
  border-style: none;
  margin: 0;
  padding: 0 0 8px 0 }

/* C1.8 */
.punbb .fs-box {
  padding: 1em 0 0.8em 0;}

/* C1.9 */
.punbb .fs-box p, .punbb .fs-box fieldset {
  padding: 0 0 0.8em 0}

/* C1.10 */
.punbb .inline .inputfield, .punbb .inline .selectfield, .punbb .inline .passfield {
  float: left;
  margin-right: 1em;}

/* C1.11 */
.punbb .inline .infofield {
  clear:both }

/* C1.12 */
.punbb .datafield br {
  display: none; }

/* C1.13 */
.punbb .required label, .punbb .datafield span.input {
  font-weight: bold }

/* C1.14 */
.punbb .datafield span.input a {
  font-weight: normal; }

/* C1.15 */
.punbb .areafield span.input, .punbb p.longinput span.input {
  display: block;
  padding: 0 12em 0 0;
  height: 100%; /* For IE */ }

/* C1.16 */
.punbb textarea, .punbb .longinput input {
  width: 64%;
  margin: 0; }

/* C1.17 */
.punbb .hashelp {
  position: relative;  }

/* C1.18 */
.punbb .helplinks {
  display: block;
  position: absolute;
  top: 1em;
  right: 0;
  font-weight: normal;
  width: 36%; }

/* c1.19 */
.punbb #profile .helplinks {
  top: 1.5em; }

/* C1.20 */
.punbb .helplinks span {
  display: block;
  padding-bottom: 0.2em; }

/* C1.21 */
#pun-post .formal .info-box li {
  padding-left: 4px;
  list-style-type: square;
  list-style-position: inside;
  line-height: 1.5;
  margin: 0; }


/* C2 Table layout
-------------------------------------------------------------*/

/* C2.1 */
.punbb .main .tcl {
  overflow: hidden;
  text-align: left;
  width: 50%;}

/* C2.2 */
.punbb .main .tc2, .punbb .main .tc3, .punbb .main .tcmod {
  text-align: center;
  width: 10%; }

/* C2.3 */
.punbb .main .tcr {
  overflow: hidden;
  text-align: left;
  width: 30%; }

/* C2.4 */
#pun-userlist .main .tcl,
#pun-searchtopics .main .tcl,
#pun-modviewforum .main .tcl {
  width: 40%}

/* C2.5 */
#pun-userlist .main .tc2,
#pun-searchtopics .main .tc2 {
  text-align: left;
  width: 20%;}

/* C2.6 */
#pun-debug table .tcl {
  width: 15%;
  white-space:normal; }

/* C2.7 */
#pun-debug .tcr {
  width: 90%;
  white-space: normal; }

/* C2.8 */
#pun-index .tcl h3 {
  font-size: 1.2em;
  font-weight: bold;}

/* C2.9 */
.punbb td span.youposted {
  font-weight: bold;
  margin-left: -1em;
  position: absolute;}

/* C2.10 */
.punbb td .modlist {
  display: block;
  padding-top: 0.3em}

/* C2.11 */
.punbb .main td {
  border-style: none;
  border-width: 1px 0 0 1px;
  padding: 0.8em 1em;}

/* C2.12 */
.punbb .main th {
  border-style: none;
  border-width: 0 0 0 1px;
  padding: 0.4em 1em 0.4em 1em; }

/* C2.13 */
.punbb .main .tcl {
  border-left-style: none;
  border-left-width: 0}

/* C2.14 */
.punbb tbody.hasicon td.tcl {
  margin-right: 15px;}

/* C2.15 */
.punbb div.icon {
    float: left;
    display: block;}

 /* C3 Topics
-------------------------------------------------------------*/

/* C3.1 */
.punbb .post .container {
  border-style: none;
  padding-bottom: 1px; }

/* C3.2 */
.punbb .post h3 {
  border-style: none;
  border-width: 0px; }

/* C3.3 */
.punbb .post h3 span {
  padding: 0.5em 1em;
  display: block;
  margin-left: 19em;
  border-left-style: solid;
  border-left-width: 1px; }

/* C3.4 */
.punbb .post h3 strong {
  float: right;
  width: 5em;
  text-align: right;
  font-weight: normal; }

/* C3.5 */
.punbb .post .post-author {
  float: left;
  margin-top: -1.5em;
  overflow: hidden;}

/* C3.6 */
.punbb .post .post-author ul, .punbb .post .post-author p {
  padding: 0 1em 1em 1em;
  line-height: 140%; }

/* C3.7 */
.pa-author {
  font-size: 1.1em;
  font-weight: bold;
  text-align: center;}

/* C3.8 */
.pa-author a {
  text-decoration: none}

/* C3.9 */
li.pa-title {
  padding-bottom: 0.4em;}

li.pa-online {
  line-height: 0.8em;
  padding-left: 0.4em;
  margin-top: 0.7em;}

/* C3.11 */
.punbb .post-body {
  margin-left: 19em;
  border-left-style: solid;
  border-left-width: 1px;
  padding: 0 0 1px 0; }

/* C3.12 */
.punbb .post-box {
padding: 1em;
text-align: justify;}

/*C3.13 */
.punbb fieldset .post-box {
  margin-bottom: 0.8em }

/* C3.14 */
.punbb .post-links {
  border-left-style: solid;
  border-left-width: 1px;}

/* C3.15 */
.punbb .post-links ul {
  padding: 0 1em 0 0;
  height: 2em;
  line-height: 2em;
  border-top-style: dashed;
  border-top-width: 1px;
  background: transparent;
  text-align: right; }

/* C3.16 */
.punbb .post-links li {
  display: inline;
  padding-left: 1em; }

/* C3.17 */
.pl-email, .pl-website {
  float: left; }

/* C3.18 */
.punbb .clearer {
  clear: both;
  height: 0;
  font-size: 0;}


/* C4 Moderator menu
-------------------------------------------------------------*/

/* C4.1 */
.punbb .modmenu .container {
  padding: 0.5em 1em;
  text-align: right; }

/* C4.2 */
.punbb .modmenu strong, .punbb .modmenu a {
  height: 1.8em;
  line-height: 1.8em; }

/* C4.3 */
.punbb .modmenu .container strong {
  float: left;  }

/* C4.4 */
.punbb .modmenu input {
  margin-left: 1em; }


/* C5 Message boxes
-------------------------------------------------------------*/

/* C5.1 */
.punbb .info .container {
  padding: 0.8em 1em }

/* C5.2 */
.punbb .info .container .backlink {
  padding-top: 0.8em;}


/* C6 Profile
-------------------------------------------------------------*/

/* C6.1 */
#profile .container {
  padding-left: 18.6em;}

/* C6.2 */
#profilenav {
  float: left;
  width: 14em;
  margin-left: -16.3em;
  display: inline;}

/* C6.3 */
#profilenav li {
  padding-bottom: 0.8em;}

/* C6.4 */
#viewprofile ul, #profilenav ul {
  border-style: solid;
  border-width: 1px;
  padding: 1.5em 18px 0.8em 18px;
  margin: 0 0 1em 0; }

/* C6.5 */
#viewprofile h2, #profilenav h2 {
  background: transparent;
  border: none;
  padding: 0 0 0 0;
  margin: 0 15px -1em 4px; }

/* C6.6 */
#viewprofile h2 span, #profilenav h2 span {
  padding: 0 5px;
  position: relative; }

/* C6.7 */
#viewprofile li, #setmods dl {
  padding: 0 0 0 16em;
  margin-bottom: 0.2em; }

/* C6.8 */
#viewprofile li span {
  float: left;
  width: 14em;
  margin-left: -16em;
  padding: 0.5em 1em;
  font-weight: bold;}

/*C6.9 */
#setmods dt {
  float: left;
  width: 14em;
  margin-left: -16em;
  padding: 0.8em 1em;
  font-weight: bold;
  display: inline;}

/* C6.10 */
#viewprofile li strong, #viewprofile li div, #setmods dd {
  display: block;
  padding: 0.5em 1em;
  font-weight: normal; }

/* C6.11 */
.punbb img.avatardemo {
  float: right;
  margin: 0 0 0.8em 1.8em}


/* C7 User list
-------------------------------------------------------------*/

/* C7.1 */
#pun-userlist .formal, #pun-userlist .formal .container {
  border-bottom: none;
  margin-bottom: 0; }

/* C7.2 */
#pun-userlist .usertable .container {
  padding: 0 2.3em 2.3em 2.3em;
  border-top: none;}

/* C7.3 */
#pun-userlist .usertable table {
  border-style: none;
  border-width: 0px;}


/*************************************************************
D - PUNBB SECTIONS OTHER THAN MAIN CONTENT
**************************************************************/

/* D1 Logo and description
-------------------------------------------------------------*/

/* D1.1 */
#pun-title {
  margin: 0;
  border-style: none;
  border-width: 1px 1px 0 1px;}

/* D1.2 */
#pun-title h1 {
  display : block;
  height : 40px;
  padding: 2em 1em 0 1em; }

/* D1.3 */
#pun-title .container {
  border-style: none; }

/* D1.4 */
#pun-title h1 span  {
  display: none;}

#pun-title table {
  border: none;
  height: 400px;
  width: 100%;}

/* D2 Page navigation
-------------------------------------------------------------*/

/* D2.1 */
#pun-pagelinks {
  position: absolute;
  left: 0;
  margin: 0;
  border: none;
  padding: 0;
  width: 100%; }

/* D2.2 */
#pun-pagelinks .container {
  background: transparent;
  border: none;
  padding: 0}

/* D2.3 */
#pun-pagelinks .container li {
  display: inline }

/* D2.4 */
#pun-pagelinks li a, #pun-pagelinks a:link, #pun-pagelinks a:hover {
  height: 2em;
  line-height: 2em;
  padding: 0;
  font-size: 1.2em;
  margin-left: -9999px;
  display: block;
  float:left;
  width: 100%; }

/* D2.5 */
#pun-pagelinks a:active, #pun-pagelinks a:focus {
  position:relative;
  margin: 0;}

#pun-pagelinks li a span {
  display:block;
  margin: 0 1em }

/* D3 Forum navigation
-------------------------------------------------------------*/

/* D3.1 */
#pun-navlinks, #pun-navlinks .container {
  border-style: none;
  border-width: 0;
  margin: 0;}

/* D3.2 */
#pun-navlinks .container {
  padding: 0.8em 1em;
  text-align: center;}

/* D.3 */
#pun-navlinks li {
  display: inline;
  padding-right: 1em;}

/* D3.4 */
#pun-navlinks li a {
  font-size: 1.1em;}

/* D4 User links
-------------------------------------------------------------*/

/* D4.1 */
#pun-ulinks  {
  padding-bottom: 1px;}

/* D4.2 */
#pun-ulinks .container {
  border-top: none;
  text-align: center;
  padding: 0em 1em;}

/* D4.3 */
#pun-ulinks li, #pun-ulinks li a {
  display: inline;
  border-left-style: none;
  border-left-width: 0px;
  white-space: nowrap;
  padding-left: 3px;}

/* D4.4 */
#pun-ulinks li a {
  padding: 0 -0.1em 0 -0.1em;}

/* D4.5 */
#pun-ulinks li.item1, #pun-ulinks li.item1 a {
  border-left-style: none;
  border-left-width: 0;
  padding-left: 0}

/* D5 Welcome box and Top Breadcrumbs
-------------------------------------------------------------*/

/* D5.1 */
#pun-status, #pun-status .container {
  border-bottom: none;
  margin-bottom: 0;}

/* D5.2 */
#pun-status .container {
  padding: 0.8em 1em 1em 1em; }

/* D5.3 */
#pun-status span {
  white-space: nowrap;
  margin-right: 0.5em;}

/* D5.4 */
#pun-crumbs1 {
  font-weight: bold;
  overflow: hidden;
  margin-top: 0;}

/* D5.5 */
#pun-crumbs1 p.container {
  border-top: none;
  padding: 1em 1em 1.2em 1em;
  font-size: 1.1em; }

/* D5.6 */
#pun-break1 {
  margin: 0 1em;
  border-style: none none;
  border-width: 0px 0;
  height: 0;
  margin: -2px 1em;
  position: relative;
  z-index: 1; }

/* D6 Announcement
-------------------------------------------------------------*/

/* D6.1 */
#pun-announcement h2 {
  padding: 0;
  margin: 0 1em -3.5em 1em;
  border-style: none none none none;
  border-width: 0 0 0px 0;
  position: relative;
  display: none; }

/* D6.2 */
#pun-announcement h2 span {
  display: block;
  padding: 1em 0 0.8em 0;
  border-bottom-style: solid;
  border-bottom-width: 1px; }

/* D6.3 */
#pun-announcement .container {
  padding: 1em 1em 1em 1em; }

/* D7 Statistics
-------------------------------------------------------------*/

/* D7.1 */
#pun-stats .container {
  padding: 0.8em 1em}

/* D7.2 */
#pun-stats li.item1, #pun-stats li.item2 {
  float: left;
  clear: both;
  line-height: 150%; }

/* D7.3 */
#pun-stats li.item3, #pun-stats li.item4 {
  text-align: right;
  line-height: 150%;}

/* D7.4 */
li#onlinelist {
  margin-top: 1em;
  border-top-style: solid;
  border-top-width: 1px;
  float: left;
  width: 100%;
  line-height: 130%; }

/* D7.5 */
li#onlinelist div {
  border-top-style: solid;
  border-top-width: 1px;
  padding: 0.7em 0 0 0;}

/* D8 Quick Jump - About - Bottom Breadcrumbs
-------------------------------------------------------------*/

/* D8.1 */
#pun-qjump {
  margin: 0;
  border: none;
  width: 50%;
  position: relative;
  float: left; }

/* D8.2 */
#pun-qjump .container {
  border: none;
  background: transparent;
  padding: 0.8em 1em; }

/* D8.3 */
#pun-about {
  margin-top: 1px; }

/* D8.4 */
#pun-about .container {
  border-top-style: none;
  text-align: right;
  line-height: 150%;
  padding: 0.8em 1em; }

/* D8.5 */
#pun-about p span {
  display:block;
  padding-left: 50%;
  margin-bottom: 4px; }

/* D8.6 */
#pun-crumbs2 {
  font-weight: bold;
  overflow: hidden;
  margin-bottom: 0px;
  border-bottom: none;}

/* D8.7 */
#pun-crumbs2 .container {
  border-bottom: none;
  padding: 0.8em 1em;
  font-size: 1.1em;}

/* D8.8 */
#pun-break4 {
  margin: -2px 1em;
  border-style: none none;
  border-width: 0px 0;
  position: relative;
  height: 0;
  z-index: 1; }

/* D8.9 */
div.punbb-admin #pun-about .container {
  border-top-style: solid;
  border-top-width: 1px;}

/* D9 Help file
-------------------------------------------------------------*/

/* D9.1 */
#pun-help .formal .info-box h3.legend {
  border-bottom-style: solid;
  border-bottom-width: 1px;
  padding-bottom: 0;
  margin-bottom: 0.8em; }

/* D9.2 */
#pun-help .formal .info-box h3.legend span {
  padding-bottom: 0.6em;
  display: block;
  border-bottom-style: solid;
  border-bottom-width: 1px;
  font-size: 1.1em; }

/* D9.3 */
#pun-help .formal p, #pun-help .formal dd {
  margin-bottom: 1em}

/* D9.4 */
#pun-help .formal ul, #pun-help .formal dl {
  padding: 0 0 0 1em  }

/* D9.5 */
#pun-help .formal li {
  padding: 0;
  line-height: 130%  }

/* D9.6 */
#pun-help .formal li * {
  vertical-align: text-top  }

/* D9.7 */
#pun-help .formal dt span {
  font: 1.4em/120% monaco, "bitstream vera sans mono", "courier new", courier, monospace  }

/* D9.8 */
#pun-help .formal .parsedmsg, #pun-help .formal .parsedmsg .incode {
  padding-bottom: 0; }

.pl-share { display: none !important; }
li.reports { display: none !important; }
p.lastedit {display:none;}
/* structure by futura.rusff.me
-------------------------------------------------------------*/

Что нужно знать обязательно?

/* A5.1 */
#pun {
margin: 0px auto auto auto;
width: 945px;}

/* A5.2 */
.punbb {
width: 910px;
position: relative;
height: auto;
margin-left: 15px;}

/* A5.1 */ - ширина тела форума (такой же будет ширина вашей картинки, они обязательно должны совпадать)
width: 945px; - ширина в пикселях

/* A5.2 */ - ширина текста в теле форума, иными словами не сам форум, а текст в нем. значение ширины обязательно должно быть меньше, чем в 5.1, иначе текст будет просто вылезать за границы.
width: 910px; - ширина в пикселях
margin-left: 15px; - отступ от левого края

/* D3.2 */
#pun-navlinks .container {
padding: 0.8em 1em;
text-align: center;}

/* D4.1 */
#pun-ulinks {
padding-bottom: 1px;}

/* D3.2 */ - расположение меню навигации
/* D4.1 */ - расположение пользовательских ссылок
регулируется с помощью:
position: relative; - добавляем для блока
top: -400px; - в данном случае меню поднимется вверх на 400 пикселей, положительное значение опустит вниз.

/* A3.5 */
.punbb h1 span, .punbb h2 span, .punbb legend span {
font-size: 1.1em;}

/* A3.5 */ - расположение текста в категориях
регулируется с помощью:
position: relative; - добавляем для блока
top: 40px; - в данном случае текст опускается вниз на 40 пикселей

Поделиться326.03.15 00:34:25

Автор: chibi
мусюндере
Уважение: +170
Сообщений: 9402

Цвета style_cs.css

Код:

/* structure by futura.rusff.me
-------------------------------------------------------------*/

/* CS1 Основа
-------------------------------------------------------------*/

/* CS1.1 Фон */ 
body {
  background: url("верхний фон") repeat-x top center, url("нижний фон") repeat-x bottom center, url("основной фон") repeat;}

#pun {
  background: url("фон тела форума") repeat-y;}

/* CS1.2 Шапка */
#pun-title.section {
  background: transparent url("картинка шапки") top center scroll no-repeat; 
  height: 307px;
  width: 952px; 
  margin-top: 0px;
  margin-left: 2px;}

/* CS1.3 Копирайт */
#copyright {
  text-align: center;
  background: url("картинка копирайта") scroll center; 
  width: 960px; 
  height: 111px;
  margin-left: 2px;}

#html-footer {
  margin: 0px;
  text-align: center; }

/* CS2 Форум
-------------------------------------------------------------*/

/* CS2.1 Текст на форуме */
.punbb .main .container, .punbb .post .container, .punbb .post h3, #pun-title, #pun-title .container, .punbb .modmenu .container, .punbb legend span, #viewprofile h2 span, #profilenav h2 span, .punbb-admin #pun-admain legend span, .punbb .post h3 span, .punbb th, #viewprofile li, #setmods dl, #pun-navlinks .container, #pun-status .container, #pun-crumbs1 p.container, #pun-stats .container, #pun-about .container, #pun-crumbs2 .container, .linkst .pagelink, .linksb .pagelink {
  color: #060200;
  background-color: transparent;}

/* CS2.2 Категории */
#pun-stats h2, .punbb .main h1, .punbb .main h2, #pun-debug h2, .punbb-admin #pun-admain h2  {
  background: url("фон категории") no-repeat left;
  height: 70px;
  margin-left: 6px;
  font-style: normal;
  text-align: center;
  color: #212121;
  font-size: 12px;}

/* CS2.3 Цитата*/
.punbb .quote-box {
  background-image: url(фон цитаты);
  color: #060200;
  border: solid;
  border-width: 0px 0px 0px 4px;
  border-color: #0A0F0E;}

/* Код */
.punbb .code-box {
  background-image: url(фон кода);
  color: #060200;}

/* Форма ответа */
.punbb textarea, .punbb select, .punbb input, .punbb .button {
  background-image: url(фон формы ответа);
  color: #060200;}

/* CS2.4 Прокрутка */
::-webkit-scrollbar {width: 9px; height: 5px; background-color: #AAB8AD;}  
::-webkit-scrollbar-thumb {background-color: #0A1716;}
::-webkit-scrollbar-thumb:active {background: #CE621A;}

/* выделенный текст */
::selection {background: #1C6259; color: #C3CBC6;}

/* CS2.5 Переадресация */
#pun-redirect { 
  background: url("общий фон") repeat; 
  position: fixed;
  text-align: center;
  font-size: 12px;}

#pun-redirect .main-title {
  margin-bottom: 0px!important;
  text-align: center;
  margin-top: 10px;
  background: url(фон заголовка) center no-repeat; }

/* CS2.6 Профиль */
 /* Фон */
.punbb .post .post-author {
  text-align: center;
  background: url(верхний фон) top center no-repeat, url(нижний фон) bottom center no-repeat, url(основной фон) repeat-y;
  width: 200px;
  margin-top: -20px;
  padding-top: 1px;
  margin-left: 9px;}

/* меняем ссылку ника */
li.pa-author a, li.pa-author {
  color: #899B8D !important;
  font: 12px 'Calibri';}

li.pa-author a:hover, li.pa-author a:focus, li.pa-author a:active {
  color: #AAB8AD !important;}

/* CS2.7 Форумы */
/* описание форумов */
.tclcon {
  font-size: 12px;
  padding-left: 3px;
  color: #362F1B;}

/* название форумов */
#pun-index .tcl h3 a {
  font-size: 12px;
  font-style: normal;
  text-align: center;}

/* CS2.8 Окна, кнопки и прочее */
/* Окно репутации */
.punbb-admin #pun-admain .adcontainer, #pun-reputation div.inner div.container, #pun-report div.inner div.container , #pun-popup_awards div.inner div.container {
  color: #060200;
  background: url(фон) repeat;}

#pun-reputation .tc2 textarea {width: 600px !important;}
#pun-reputation .tcl {width: 80px !important;}
#pun-reputation h1 {
   background: url(фон) repeat;
   text-align: center; width: 757px; height: 15px; margin-left: 0px; padding-top: 20px !important;}

/* Настройки кнопок "отправить", "посмотреть" и др. */
#pun-main .formsubmit input {
  background: #FFFFFF;
  padding: 5px;
  border: none !important;
  text-transform: lowercase;
  margin-top: -20px !important;}

#pun-main .formsubmit input:hover {
  background: #FFFFFF;}

/* Настройки выпадающих списков */
.punbb input, .punbb select {
  background-color: #CFCFCF;
  color: #002C1D;
  padding: 2px;}

/* Окна в форме ответа */
#size-area, #font-area, #color-area, #smilies-area, #keyboard-area, #imageup-area, #font-area, #size-area, #color-area, #smilies-area, #image-area, #imageup-area, #imageattach-area, #keyboard-area, #video-area, #table-area, #addition-area {
  background: url(фон) repeat;
  color: #7e7e7e;
  padding: 5px;
  border: solid #c4c4c4 1px !important;}

/* Линия разделитель */
hr {
  color: #1C6258;
  background-color: #1C6258;
  height: 2px;
  border: none;}

/* CS3 Рамки
-------------------------------------------------------------*/

.punbb .post-body, .post h3, #pun-title, .punbb .section, .punbb .forum, .punbb .formal, .punbb .modmenu, .punbb .info, .punbb .category, .punbb .post, #pun-stats h2, .punbb .main h1, .punbb .main h2, #pun-debug h2, .punbb-admin #pun-admain h2, .punbb td, .punbb fieldset, #viewprofile ul, #profilenav ul, .punbb .post .post-body, .punbb .post h3 span, .post-links ul, .post-links, .usertable table, #pun-ulinks li, #pun-announcement h2 span, li#onlinelist, #pun-help .formal .info-box h3.legend span, #pun-ulinks li a, #pun-announcement h2, li#onlinelist div, #pun-help .formal .info-box h3.legend, .punbb .divider, .punbb .formal fieldset .post-box, .punbb .info-box, .punbb-admin #pun-admain .adcontainer {
  border-color: transparent;}

/* CS4 Ссылки
-------------------------------------------------------------*/

/* CS4.1 Обычные ссылки*/
.punbb a, .punbb a:link, .punbb a:visited, .punbb-admin #pun-admain a, .punbb-admin #pun-admain a:link, .punbb-admin #punbb-admain a:visited, .punbb li.isactive a, .punbb li.isactive a:link, .punbb li.isactive a:visited {
  text-decoration: none;
  color: #4D5953;}

.punbb a:hover, .punbb a:focus, .punbb a:active,  .punbb-admin #pun-admain .nodefault,
.punbb-admin #punbb-admain a:hover, .punbb-admin #punbb-admain a:focus, .punbb-admin #punbb-admain a:active {
 color: #253930;}

/* CS4.2 Ссылки в меню навигации */
#pun-navlinks a {
  color: #899B8D;
  font-weight: normal;
  font-style: normal;}

#pun-navlinks a:hover, #pun-navlinks a:focus, #pun-navlinks a:active, #pun-pagelinks a:active, #pun-pagelinks a:focus {
  color: #AAB8AD;}

/* CS4.3 Пользовательские ссылки */
#pun-ulinks a {
 color: #BDCAC0;}

#pun-ulinks a:hover, #pun-ulinks a:focus, #pun-ulinks a:active {
  color: #D3E2D6;}

/* CS5 Иконки сообщений
 -------------------------------------------------------------*/

/* Старые */
.punbb table Div.icon {
  float: left;
  display: block;
  width: 47px;
  height: 35px;
  background-image: url(старые);
  background-repeat: no-repeat;
  position: relative;
  margin-left: 5px;
  margin-top: 0px;
  margin-right: 5px;}

/* Новые */
TR.inew Div.icon {
  background: url(новые) no-repeat;}

/* Важно */
TR.isticky Div.icon {
  background: url(важные) no-repeat;}

/* Закрыто */
TR.iclosed Div.icon {
  background: url(закрытые) no-repeat;}


/*CS6 Таблицы и прочее
 ---------------------------------*/


/* structure by futura.rusff.me
-------------------------------------------------------------*/

HTML-низ, самый низ

Код:

<! ВСЕ КОДЫ И БАННЕРЫ СТАВИТЬ ВЫШЕ КОПИРАЙТА --------------------------->
<div id="copyright">
</div>
<!-------------------------------------------------------->

/* CS1 Основа */

/* CS1.1 Фон */
body - задает задний фон, здесь достаточно просто вставить свои картинки. Фон чаще всего задается текстурами, поэтому необязательно делать размер картинки 2000 на 2000, лучше, если вы сделаете небольшую картинку (например, 50-200 пикселей), а она уже автоматически будет размножаться. Главное - следите за стыками. Абсолютно также поступайте с верхним и нижним фоном, но в высоту они должны быть равны исходным на макете, ширина же должна быть небольшой.
#pun - задет фон тела форума, не забываем про пункты /* A5.1 */ и /* A5.2 */, которые зададут ему ширину. Картинка должна быть в ширину равна исходной на макете (включая рамку), в высоту стараемся делать ее как можно меньше, но опять следим за стыками.

/* CS1.2 Шапка */
background: transparent url("картинка шапки") top center scroll no-repeat; - картинка шапки. Делается такой же ширины, как тело форума, если не выходит за него. Если шапка "большая", т.е. выходит за рамки тела форума, обрезается до края элемента, который отличается от фона. Сам же фон размножаем в первом пункте. Именно верхний фон в CS1.1 будет задавать фон под шапкой, так что не забудьте его замкнуть.
height: 307px; - высота изображения
width: 952px; - ширина изображения
margin-left: 2px; - двигаем шапку вправо (отрицательное значение подвинет ее влево), чтобы стыковать с телом форума. советую сначала настроить фон и тело, а потом уже двигать шапку.

/* CS1.3 Копирайт */
background: url("картинка копирайта") scroll center; - картинка копирайта задается как и шапка, нижний фон в CS1.1 будет отвечать за фон под копирайтом.
width: 960px; - ширина изображения
height: 111px; - высота изображения
margin-left: 2px; - двигаем копирайт вправо (отрицательное значение подвинет влево), чтобы стыковать с телом форума. советую сначала настроить фон и тело, а потом уже двигать копирайт.

/* CS2 Форум */

/* CS2.1 Текст на форуме */
color: #060200; - цвет текста на всем форуме

/* CS2.2 Категории */
background: url("фон категории") no-repeat left; - фон категории, должен соответствовать ширине картинки тела форума.
height: 70px; - высота картинки
margin-left: 6px; - двигает картинку вправо (отрицательное - влево)
margin-top: 1px; - двигает картинку вниз (отрицательное - вверх)
text-align: center; - позиция текста
color: #212121; - цвет текста
font-size: 12px; - размер шрифта
здесь и далее все прочие преобразования текста и шрифта можно задать самостоятельно (смотри пункт 1 в первом сообщении темы).

/* CS2.3 Цитата*/
background-image: url(фон цитаты); - картинка цитаты (размножается автоматически, поэтому желательно картинку делать небольшую по размерам)
color: #060200; - цвет текста в цитате
border: solid; - рамка отображается
border-width: 0px 0px 0px 4px; - в примере задана левая рамка в 4 пикселя, другие рамки отображаться не будут (порядок значений такой: верх право низ лево)
border-color: #0A0F0E; - цвет рамки

/* Код */ и /* Форма ответа */ задаются по одному принципу
background-image: url(фон кода); - картинка
color: #060200; - цвет текста

/* CS2.4 Прокрутка */
::-webkit-scrollbar {width: 9px; height: 5px; background-color: #AAB8AD;} - задается ширина прокрутки, ширина горизонтальной прокрутки и цвет фона
::-webkit-scrollbar-thumb {background-color: #0A1716;} - цвет ползунка прокрутки
::-webkit-scrollbar-thumb:active {background: #CE621A;} - цвет при нажатии мышкой

/* выделенный текст */ - оформление текста при выделении его мышкой
background: #1C6259; - цвет фона
color: #C3CBC6; - цвет текста

/* CS2.5 Переадресация */ - в структуре дан простейший вариант переадресации, для людей, которые не делают ее отдельно, но вы всегда можете настроить ее как пожелаете
#pun-redirect задает фон всей страницы
#pun-redirect .main-title задает фон и стиль заголовка, обычно стиль шрифта наследуется от категорий

/* CS2.6 Профиль */ - приведен простейший вариант оформления профиля, все прочие коды будут даны в следующем сообщении
/* Фон */
text-align: center; - расположение текста в профиле
background: url(верхний фон) top center no-repeat, url(нижний фон) bottom center no-repeat, url(основной фон) repeat-y; верхний и нижний фоны не размножаются никак, поэтому высота и ширина должны соответствовать тем, что есть на макете. основной фон профиля размножается только по вертикали, т.е. картинка должна соответствовать в ширину значению ниже (обрезается строго по краям рамки, не заходя на общий фон тела), а высота должна быть как можно меньше.
width: 200px; - ширина всего профиля
margin-top: -20px; - отступ вверх (положительное - вниз)
padding-top: 1px; - отступ текста профиля от верхнего края (двигает текст вниз, отрицательное - вверх)
margin-left: 9px; - отступ вправо (отрицательное - влево)

/* меняем ссылку ника */
color: #899B8D !important; - задает цвет ссылки ника в обычном состоянии
font: 12px 'Calibri'; - устанавливает размер шрифта и название

li.pa-author a:hover, li.pa-author a:focus, li.pa-author a:active {
color: #AAB8AD !important; - цвет ссылки при наведении курсора

/* CS2.7 Форумы */ - дан простейший вариант оформления
/* описание форумов */
font-size: 12px; - размер шрифта
padding-left: 3px; - отступ слева
color: #362F1B; - цвет текста
кроме того, можно задать width (ширину) окна, text-align (выравнивание текста) и прочие параметры шрифта и текста

/* название форумов */
font-size: 12px; - размер шрифта
тут же задаются и все прочие параметры шрифта и текста

/* CS2.8 Окна, кнопки и прочее */
/* Окно репутации */ - отвечает за окно, которое выскакивает, когда мы изменяем репутацию (где можно написать свой комментарий), и подобные ему
color: #060200; - цвет текста
background: url(фон) repeat; - фон внутри него

/* Настройки кнопок "отправить", "посмотреть" и др. */ - отвечает за кнопки "отправить" и "посмотреть"
background: #FFFFFF; - фон
color: #7e7e7e; - цвет текста
border: solid #c4c4c4 1px !important; - рамка

#pun-main .formsubmit input:hover - кнопки при наведении курсора

/* Настройки выпадающих списков */ - настройка выпадающих списков
background-color: #CFCFCF; - фон
color: #002C1D; - цвет текста

/* Окна в форме ответа */ - выпадающие окна в форме ответа вроде шрифта, его размера и т.д.
background: url(фон) repeat; - фон
color: #7e7e7e; - цвет текста
border: solid #c4c4c4 1px !important; - рамка

/* Линия разделитель */ - настройка линии разделителя [hr], цвет прописывается два раза для разных браузеров
color: #1C6258; - цвет линии
background-color: #1C6258; - цвет линии

/* CS4 Ссылки */

в данном разделе всегда первый код задает обычное состоянии ссылки, а второй - при наведении курсора.
/* CS4.1 Обычные ссылки*/ - стиль всех ссылок на форуме
/* CS4.2 Ссылки в меню навигации */ - форум, участники и т.д.
/* CS4.3 Пользовательские ссылки */ - активные темы, новые сообщения, темы без ответов и т.д.

/* CS5 Иконки сообщений */
/* Старые */ - задает не только иконки старых сообщений, но и стиль всех иконок в целом, далее ставятся только картинки
float: left; - расположение иконок, если поставить right, то иконки окажутся справа от описания форумов
width: 47px; - ширина изображений
height: 35px; - высота изображений
background-image: url(старые); - самой изображение
margin-left: 5px; - подвинет вправо (отрицательно - влево)
margin-top: 0px; - подвинет вниз (отрицательное - вверх)
margin-right: 5px; - подвинет текст описания от иконки направо

Поделиться426.03.15 00:34:56

Автор: chibi
мусюндере
Уважение: +170
Сообщений: 9402

Дополнительные селекторы
находятся либо в первом окне стиля (структуры), либо прописываются дополнительно
здесь прописаны все возможные варианты
п.1 Главная страница

• Убирает слово награды из меню

#pun-navlinks #navawards {
display: none;}

• Привет, Гость! Войдите или зарегистрируйтесь

/* D5.2 */
#pun-status .container {...}

• Название вашего форума строчкой ниже

/* D5.5 */
#pun-crumbs1 p.container {...}

• Строка "форум тем сообщений последнее сообщение" (под категориями)

.punbb th {
background: transparent url("фон");
color: #цвет;}

• Картинка в статистику

#pun-stats ul.container {
background: url(картинка) no-repeat;
padding-left: 10px;
padding-bottom: 20px;}

• Название вашего форума внизу

/* D8.7 */
#pun-crumbs2 .container {...}

/* D8.4 */
#pun-about .container {...}

п.2 Профиль
.pa-author {...} - ник
.pa-title {...} - статус
.pa-avatar {...} - аватар
.pa-posts {...} - сообщений
.pa-reputation {...} - репутация
.pa-ip {...} - ip
.pa-online {...} - активен

п.3 Прочее

• Полоска, разграничивающая пост и подпись

/* B1.2 */
.punbb .post-sig dt {
display: block;
border-top: 1px solid #505050;
width: 250px;
margin: 5px 0;}

• Полоса между постами

/* C3.1 */
.punbb .post .container {
border-style: none none solid none;
border-width: 2px;
border-color: #000000;
padding-bottom: 1px;}

Поделиться526.03.15 00:36:25

Автор: chibi
мусюндере
Уважение: +170
Сообщений: 9402

Основные дополнительные скрипты

- Замена форум, участники и т.д на картинки
- Стрелки вверх-вниз
- Своя картинка в каждую категорию
- Пиар-вход
- Выделить код

Любой объект в шапке
в цвета нужно дописать блок (вместо dop1 можно использовать любое название на латинице) и задать все его значения (в т.ч. здесь удобно прописать отображение текста, шрифта и т.д.)

#dop1 {
display: block;
position: absolute;
margin-top: 236px;
margin-left: 15px;}

margin-top: 236px; - отступ сверху (двигает блок вниз)
margin-left: 15px; - отступ слева (двигает блок вправо)

в html-вверх размещаем наш блок

<div id="dop1">
здесь любая ваша информация
</div>

количество подобных блоков не ограничено, главное - для каждого задавать свое название

Тема закрыта

Страница: 1

Futura: каталог аниме форумов

Меню навигации

Пользовательские ссылки

Объявление

Информация о пользователе

Структура для дизайна или делаем свой стиль (CSS)

Сообщений 1 страница 5 из 5

Поделиться126.03.15 00:33:41

Поделиться226.03.15 00:33:59

Поделиться326.03.15 00:34:25

Поделиться426.03.15 00:34:56

Поделиться526.03.15 00:36:25