Оформление личных тем

После принятия в игру каждый персонаж открывает собственную тему в этом подфоруме.
Здесь должна быть собрана информация о:
► хронологии персонажа;
► взаимоотношениях с другими персонажами, которые можно выяснить в той же личной теме или через ЛС.
► дополнительные сведения (место жительства, наличие любимого радиоактивного кота и т.д.) заполняются по желанию.

ИНТЕРАКТИВНОЕ ОФОРМЛЕНИЕ ЛИЧНОЙ ТЕМЫ

Оформление темы свободное, но мы предлагаем Вам ознакомиться с интерактивным шаблоном личной темы. В нем нет абсолютно ничего сложного и при должной аккуратности каждый сможет заполнить его и получить красоту :З

Итак, ниже вы можете увидеть то, как будет выглядеть Ваша личная тема после загрузки. Она состоит из трех вкладок: информация, хронология и отношения. Также к редактированию доступна картинка. Если вы умеете работать с HTML кодом, смело копируйте его и приступайте! Если же нет, то давайте подробно рассмотрим, что и как нужно редактировать в коде (за который, кстати, еще раз большое спасибо вещему духу!)

Инструкция
► Прежде всего скопированный и вставленный в поле ответа код необходимо, в свою очередь, поместить в теги [code*][*/code]. Это необходимо для того, чтобы впоследствии форум мог прочитать код и интерпретировать его, поскольку, в отличие от обычного содержимого постов, данный код написан на HTML.
► Затем приступаем к редактированию кода:
<div id="spiritworkroom">
<div class="spiritfirst">
<div class="spiritfirstpic"><img src="http://forumstatic.ru/files/0019/ff/6d/70215.gif"><span>код от вещего духа</span></div>
</div>
В первом блоке кода мы можем заменить картинку на, например, фото персонажа или какое-то тематическое, знаковое для него изображение. Для этого мы просто заменяем ссылку на нужную нам, внимательно следя, чтобы ссылка осталась в кавычках "". Размер картинки строго 190х490 пикселей.
<div class="spiritsecond">
<div class="tabs">
<input id="tab1" type="radio" name="tabs" checked>
<label for="tab1">ID: (номер, выданный после принятия анкеты)</label>

<input id="tab2" type="radio" name="tabs">
<label for="tab2">хронология</label>

<input id="tab3" type="radio" name="tabs">
<label for="tab3">отношения</label>
Во втором блоке мы ничего не трогаем, кроме номера ID. В нем Вам будет необходимо вставить три цифры, полученные после регистрации, вместо текста, выделенного жирным. Это названия наших вкладок с информацией, и они едины для всех.
<section id="content-tab1">
<p>
Начало первой вкладки. ЭТУ СТРОЧКУ НЕОБХОДИМО УДАЛИТЬ ПРИ РЕДАКТИРОВАНИИ!<br><br>
<b>Полное имя персонажа:</b> информация;<br>
<b>Возраст и дата рождения:</b> информация;<br>
<b>Группа крови:</b> группа и резус;<br>
<br>
<b>Занятость:</b> информация;<br>
<br>
<b>Лицензия на оружие:</b> Если есть - прописать какое, если нет - оставить прочерк;<br>
</p>
</section>
Эта часть кода - то, что будет отражаться в нашей первой вкладке. Все, что мы заполняем своей информацией, выделено красным.
<section id="content-tab2">
<p>
Начало второй вкладки. ЭТУ СТРОЧКУ НЕОБХОДИМО УДАЛИТЬ ПРИ РЕДАКТИРОВАНИИ!<br>
<br>
Здесь располагается хронология персонажа в свободной форме или же по шаблону, предложенному ниже:<br>
<center><b>Настоящее</b></center><br>
<b>дата</b> - название эпизода - <i>имена участников</i>;<br>
<br>
<center><b>Прошлое</b></center><br>
<b>дата</b> - название эпизода - <i>имена участников</i>;<br>
<br>
<center><b>Альтернатива</b></center><br>
<b>дата</b> - название эпизода - <i>имена участников</i>;<br>
</p>
</section>
Это наша вторая вкладка и первая часть, где можно самостоятельно придумать вид хронологии. Для этого давайте пройдемся то основным тегам в HTML. Они практически такие же, как и привычные вам теги B, I, U, S и другие над формой ответа. Слова, которые нужно выделить, также обрамляются тегами.Ниже список самых популярных тегов:
<b></b> - тег для жирного начертания;
<i></i> - тег для курсива;
<u></u> - тег для подчеркивания;
<center></center> - тег для центрования надписи;
<left></left> - тег для расположения текста по левому краю;
<right></right> - тег для расположения текста по левому краю;
<br> - очень важный тег! Это тег переноса на новую строку! Его необходимо ставить каждый раз, когда необходим перенос. Тег <br> можно дублировать необходимое количество раз подряд в зависимости то того, сколько переносов Вам нужно добавить.
<color=white></color> - тег цвета текста, где цвет вставляется на место white. Это также может быть не название цвета, а его цифровой вид, например, #000000.
Важно! Следите за тем, чтобы случайно не удалить теги <p></p>. Внутри них Вы можете делать, что хотите, но только внутри них.
<section id="content-tab3">
<p>
Начало третьей вкладки. ЭТУ СТРОЧКУ НЕОБХОДИМО УДАЛИТЬ ПРИ РЕДАКТИРОВАНИИ!<br>
<br>
Отношения персонажа в свободной форме.<br>
</p>
</section>
</div>
</div>
</div>
<div class="clearer"></div>
Наша последняя третья вкладка. Здесь действуют те же правила, что и для вкладки Хронологии. При помощи тегов Вы можете оформить ее по своему желанию, помещая текст в рамки тега <p></p>.
<style>...</style>
После тега <style> мы ничего не трогаем!
Вот и все! Не так уж и много, правда?
► По итогу у вас должен остаться заполненный HTML код, который вы отправляете в качестве первого сообщения в Вашу личную тему. Не стоит пугаться, если сначала код так и останется кодом. Это изменится через некоторое время.
После прочтения инструкции что-то осталось непонятным? Боитесь заполнить самостоятельно, но хочется, чтобы было красиво? Напишите ЛС Эльзбет! Наша прекрасная леди обязательно Вам поможет ;)

Код:

<div id="spiritworkroom">
<div class="spiritfirst">
<div class="spiritfirstpic"><img src="http://forumstatic.ru/files/0019/ff/6d/70215.gif"><span>код от вещего духа</span></div>
</div> 
  
<div class="spiritsecond">
<div class="tabs">
<input id="tab1" type="radio" name="tabs" checked>
<label for="tab1">ID: _____ </label>
 
<input id="tab2" type="radio" name="tabs">
<label for="tab2">хронология</label>
 
<input id="tab3" type="radio" name="tabs">
<label for="tab3">отношения</label>
 
<section id="content-tab1">
<p>
<br><br>
<b>Полное имя персонажа:</b> информация;<br>
<b>Возраст и дата рождения:</b> информация;<br>
<b>Группа крови:</b> информация;<br>
<br>
<b>Занятость:</b> информация;<br>
<br>
<b>Лицензия на оружие:</b> информация;<br>
</p>
</section> 

<section id="content-tab2">
<p>
Начало второй вкладки. Здесь располагается хронология персонажа в свободной форме или же по шаблону, предложенному ниже.<br>
<br>
<center><b>Настоящее</b></center><br>
<b>дата</b> - название эпизода - <i>имена участников</i>;<br>
<br>
<center><b>Прошлое</b></center><br>
<b>дата</b> - название эпизода - <i>имена участников</i>;<br>
<br>
<center><b>Альтернатива</b></center><br>
<b>дата</b> - название эпизода - <i>имена участников</i>;<br>
</p>
</section> 


<section id="content-tab3">
<p>
<br>
<br>
Отношения персонажа в свободной форме.<br>
</p>
</section>   
</div>
</div>
</div>
<div class="clearer"></div>

<style>
/* код от вещего духа */
@import url('https://fonts.googleapis.com/css?family=Playfair+Display:400,700,900|Prata&subset=cyrillic');
@import url('https://fonts.googleapis.com/css?family=Amatic+SC:400,700|Old+Standard+TT:400,700|Oranienbaum|Oswald:300,400,700|PT+Sans:400,700|Roboto+Condensed:300,400,700|Roboto:300,400,700');

#spiritworkroom {width: 610px;
height: 520px;
background: #fefefe;
margin:auto;
box-shadow: 0 0 0 1px rgba(0,0,0,.2)}

.spiritfirst {float: left;
  margin: 10px;
width: 190px;
height: 490px;
box-shadow: 0 0 0 1px rgba(0,0,0,.2);
overflow: hidden;
position: relative;
border: 5px solid #fefefe}

.spiritfirstpic {margin:auto;
width: 190px;
height: 490px;}

.spiritfirstpic span {
    position: relative;
    margin-left: -120px;
    color: #ffffff8a;
}

.spiritsecond {background: #fefefe;
width: 389px;
  margin: 10px;
  height: 500px;
  margin-top:9px;
border: 1px solid rgba(0,0,0,.2);
  position: absolute;
  margin-left: 211px
}

.tabs {
	padding: 0px;
	margin: 0 auto;
}

.tabs>section {
	display: none;
	padding: 10px;
  height: 440px;
  overflow-y: auto;
  margin: 5px;
  font-family: arial;
  font-size: 11px;
  text-align: justify
}
.tabs>section>p {
	margin: 0 0 5px;
	line-height: 1.5;
	color: #383838;
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	-webkit-animation-name: fadeIn;
	animation-name: fadeIn;
}

 
@keyframes fadeIn {
	from {
    transform: translate(-400px,0);
    transform-origin: 50% 0%;
	}
	to {
    transform: translate(0px,0);
	}
}

.tabs>input {
	display: none;
	position: absolute;
}

.tabs>label:first-of-type {box-shadow: none}
.tabs>label {
	display: inline-grid;
	margin: 0 -3px 0px;
	padding: 10px 0px;
	font-weight: 600;
	text-align: center;
	color: #aaa;
	background: #fefefe;
  width: 131px;
  border: solid rgba(0,0,0,.2);
  border-width: 0px 0px 1px 0px;
  left: 3px;
  top: 0px;
  position: relative;
  font-family: pt sans;
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: lighter;
  box-shadow: 1px 0 0 0 rgba(0,0,0,.2) inset
}
.tabs>label:after {content: "";
display: block;
position:absolute;
width: 123px;
height: 3px;
background: #dfdfdf;
left:3px;
bottom:3px;
transform: scaleX(0);
  transition: all .3s cubic-bezier(0.25, 0.1, 0.25, 1) 0s}

.tabs>label:hover:after {transform: scaleX(1);
background: #888;}
.tabs>label:hover {
	color: #888;
	cursor: pointer;
  transition: all .3s cubic-bezier(0.25, 0.1, 0.25, 1) 0s
}

.tabs>input:checked+label {
	color: #555;
  background: #f1f1f1;
}
.tabs>input:checked+label:after {content: "";
display: block;
position:absolute;
width: 123px;
height: 3px;
background: #888;
left:3px;
bottom:3px;
transform: scaleX(1);
  transition: all .3s cubic-bezier(0.25, 0.1, 0.25, 1) 0s}

#tab1:checked~#content-tab1, #tab2:checked~#content-tab2, #tab3:checked~#content-tab3 {
	display: block;
}
</style>

Код:

<div id="spiritworkroom">
<div class="spiritfirst">
<div class="spiritfirstpic"><img src="http://forumstatic.ru/files/0019/ff/6d/70215.gif"><span>код от вещего духа</span></div>
</div> 
  
<div class="spiritsecond">
<div class="tabs">
<input id="tab1" type="radio" name="tabs" checked>
<label for="tab1">ID: _____ (номер, выданный после принятия анкеты)</label>
 
<input id="tab2" type="radio" name="tabs">
<label for="tab2">хронология</label>
 
<input id="tab3" type="radio" name="tabs">
<label for="tab3">отношения</label>
 
<section id="content-tab1">
<p>
Текст в первой вкладке. ЭТУ СТРОЧКУ НЕОБХОДИМО УДАЛИТЬ ПРИ РЕДАКТИРОВАНИИ!<br><br>
<b>Полное имя персонажа:</b> информация;<br>
<b>Возраст и дата рождения:</b> информация;<br>
<b>Группа крови:</b> информация;<br>
<br>
<b>Занятость:</b> информация;<br>
<br>
<b>Лицензия на оружие:</b> информация;<br>
</p>
</section> 

<section id="content-tab2">
<p>
Текст во второй вкладке. ЭТУ СТРОЧКУ НЕОБХОДИМО УДАЛИТЬ ПРИ РЕДАКТИРОВАНИИ!<br>
<br>
Здесь располагается хронология персонажа в свободной форме или же по шаблону, предложенному ниже:<br>
<center><b>Настоящее</b></center><br>
<b>дата</b> - название эпизода - <i>имена участников</i>;<br>
<br>
<center><b>Прошлое</b></center><br>
<b>дата</b> - название эпизода - <i>имена участников</i>;<br>
<br>
<center><b>Альтернатива</b></center><br>
<b>дата</b> - название эпизода - <i>имена участников</i>;<br>
</p>
</section> 


<section id="content-tab3">
<p>
Текст в третьей вкладке. ЭТУ СТРОЧКУ НЕОБХОДИМО УДАЛИТЬ ПРИ РЕДАКТИРОВАНИИ!<br>
<br>
Отношения персонажа в свободной форме.<br>
</p>
</section>   
</div>
</div>
</div>
<div class="clearer"></div>

<style>
/* код от вещего духа */
@import url('https://fonts.googleapis.com/css?family=Playfair+Display:400,700,900|Prata&subset=cyrillic');
@import url('https://fonts.googleapis.com/css?family=Amatic+SC:400,700|Old+Standard+TT:400,700|Oranienbaum|Oswald:300,400,700|PT+Sans:400,700|Roboto+Condensed:300,400,700|Roboto:300,400,700');

#spiritworkroom {width: 610px;
height: 520px;
background: #fefefe;
margin:auto;
box-shadow: 0 0 0 1px rgba(0,0,0,.2)}

.spiritfirst {float: left;
  margin: 10px;
width: 190px;
height: 490px;
box-shadow: 0 0 0 1px rgba(0,0,0,.2);
overflow: hidden;
position: relative;
border: 5px solid #fefefe}

.spiritfirstpic {margin:auto;
width: 190px;
height: 490px;}

.spiritfirsttitle {font-family: playfair display;
font-weight: 900;
width: 190px;
color: #dfdfdf;
text-shadow: 1px 1px 0px #000;
font-size: 18px;
height: 73px;
margin: -80px 0 0 0px;
z-index: 10;
position: relative;
padding-left: 10px;
background: rgba(0,0,0,.65);
transition: all .7s cubic-bezier(0.25, 0.1, 0.25, 1) .15s}
.spiritfirsttitle subtitle {box-shadow: 0 -2px 0 0 rgba(255,255,255,.1);
  font-family: pt sans;
font-weight: normal;
color: #cecece;
text-shadow: 1px 1px 0px #333;
font-size: 9px;
display: block;
text-align: right;
letter-spacing: 1px;
margin-top:4px;
margin-right: 20px}
.spiritfirsttitle:before {background:linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,.65));
content: "";
display: block;
position: absolute; 
width: 100%;
height: 50px;
top: -50px;
margin-left: -10px}
.spiritfirsttext {
z-index:8;
position: relative;
background: rgba(0,0,0,.65);
width: 190px;
margin: 0px 0 0 0px;
font-family: pt sans;
font-size: 10px;
text-align: justify;
padding: 1px 0px;
  color: #efefef;}
.spiritfirsttext about {margin: 10px 15px;
display: block;
box-shadow: 0 -2px 0 0 rgba(255,255,255,.1);
padding-top:10px}
.spiritfirsttext:after {background:linear-gradient(to bottom, rgba(0,0,0,.65), rgba(0,0,0,0));
content: "";
display: block;
position: absolute; 
width: 100%;
height: 100px;
bottom: -100px;
margin-left: 0px}
.spiritfirsttext subtitle {
  text-align: center;
  display: block;
  width: 190px;
  font-size: 9px;
  font-family: pt sans;
  color: #999;
  opacity: 0;
  transform: translate(0,400px);
  transition: all 1s cubic-bezier(0.25, 0.1, 0.25, 1) .15s
}

.spiritfirst:hover .spiritfirsttitle {margin-top: -530px;
}
.spiritfirst:hover subtitle {opacity:1;
  transform: translate(0,0px)} 

.spiritsecond {background: #fefefe;
width: 389px;
  margin: 10px;
  height: 500px;
  margin-top:9px;
border: 1px solid rgba(0,0,0,.2);
  position: absolute;
  margin-left: 211px
}


.tabs {
	padding: 0px;
	margin: 0 auto;
}

.tabs>section {
	display: none;
	padding: 10px;
  height: 440px;
  overflow-y: auto;
  margin: 5px;
  font-family: arial;
  font-size: 11px;
  text-align: justify
}
.tabs>section>p {
	margin: 0 0 5px;
	line-height: 1.5;
	color: #383838;
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	-webkit-animation-name: fadeIn;
	animation-name: fadeIn;
}

 
@keyframes fadeIn {
	from {
    transform: translate(-400px,0);
    transform-origin: 50% 0%;
	}
	to {
    transform: translate(0px,0);
	}
}

.tabs>input {
	display: none;
	position: absolute;
}

.tabs>label:first-of-type {box-shadow: none}
.tabs>label {
	display: inline-grid;
	margin: 0 -3px 0px;
	padding: 10px 0px;
	font-weight: 600;
	text-align: center;
	color: #aaa;
	background: #fefefe;
  width: 131px;
  border: solid rgba(0,0,0,.2);
  border-width: 0px 0px 1px 0px;
  left: 3px;
  top: 0px;
  position: relative;
  font-family: pt sans;
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: lighter;
  box-shadow: 1px 0 0 0 rgba(0,0,0,.2) inset
}
.tabs>label:after {content: "";
display: block;
position:absolute;
width: 123px;
height: 3px;
background: #dfdfdf;
left:3px;
bottom:3px;
transform: scaleX(0);
  transition: all .3s cubic-bezier(0.25, 0.1, 0.25, 1) 0s}

.tabs>label:hover:after {transform: scaleX(1);
background: #888;}
.tabs>label:hover {
	color: #888;
	cursor: pointer;
  transition: all .3s cubic-bezier(0.25, 0.1, 0.25, 1) 0s
}

.tabs>input:checked+label {
	color: #555;
  background: #f1f1f1;
}
.tabs>input:checked+label:after {content: "";
display: block;
position:absolute;
width: 123px;
height: 3px;
background: #888;
left:3px;
bottom:3px;
transform: scaleX(1);
  transition: all .3s cubic-bezier(0.25, 0.1, 0.25, 1) 0s}

#tab1:checked~#content-tab1, #tab2:checked~#content-tab2, #tab3:checked~#content-tab3 {
	display: block;
}
</style>

Restless Souls

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

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

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

Оформление личных тем

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

Поделиться12019-02-13 18:27:20

<div id="spiritworkroom"> <div class="spiritfirst"> <div class="spiritfirstpic"><img src="http://forumstatic.ru/files/0019/ff/6d/70215.gif"><span>код от вещего духа</span></div> </div>	В первом блоке кода мы можем заменить картинку на, например, фото персонажа или какое-то тематическое, знаковое для него изображение. Для этого мы просто заменяем ссылку на нужную нам, внимательно следя, чтобы ссылка осталась в кавычках "". Размер картинки строго 190х490 пикселей.
<div class="spiritsecond"> <div class="tabs"> <input id="tab1" type="radio" name="tabs" checked> <label for="tab1">ID: (номер, выданный после принятия анкеты)</label> <input id="tab2" type="radio" name="tabs"> <label for="tab2">хронология</label> <input id="tab3" type="radio" name="tabs"> <label for="tab3">отношения</label>	Во втором блоке мы ничего не трогаем, кроме номера ID. В нем Вам будет необходимо вставить три цифры, полученные после регистрации, вместо текста, выделенного жирным. Это названия наших вкладок с информацией, и они едины для всех.
<section id="content-tab1"> <p> Начало первой вкладки. ЭТУ СТРОЧКУ НЕОБХОДИМО УДАЛИТЬ ПРИ РЕДАКТИРОВАНИИ!<br><br> <b>Полное имя персонажа:</b> информация;<br> <b>Возраст и дата рождения:</b> информация;<br> <b>Группа крови:</b> группа и резус;<br> <br> <b>Занятость:</b> информация;<br> <br> <b>Лицензия на оружие:</b> Если есть - прописать какое, если нет - оставить прочерк;<br> </p> </section>	Эта часть кода - то, что будет отражаться в нашей первой вкладке. Все, что мы заполняем своей информацией, выделено красным.
<section id="content-tab2"> <p> Начало второй вкладки. ЭТУ СТРОЧКУ НЕОБХОДИМО УДАЛИТЬ ПРИ РЕДАКТИРОВАНИИ!<br> <br> Здесь располагается хронология персонажа в свободной форме или же по шаблону, предложенному ниже:<br> <center><b>Настоящее</b></center><br> <b>дата</b> - название эпизода - <i>имена участников</i>;<br> <br> <center><b>Прошлое</b></center><br> <b>дата</b> - название эпизода - <i>имена участников</i>;<br> <br> <center><b>Альтернатива</b></center><br> <b>дата</b> - название эпизода - <i>имена участников</i>;<br> </p> </section>	Это наша вторая вкладка и первая часть, где можно самостоятельно придумать вид хронологии. Для этого давайте пройдемся то основным тегам в HTML. Они практически такие же, как и привычные вам теги B, I, U, S и другие над формой ответа. Слова, которые нужно выделить, также обрамляются тегами.Ниже список самых популярных тегов: <b></b> - тег для жирного начертания; <i></i> - тег для курсива; <u></u> - тег для подчеркивания; <center></center> - тег для центрования надписи; <left></left> - тег для расположения текста по левому краю; <right></right> - тег для расположения текста по левому краю; <br> - очень важный тег! Это тег переноса на новую строку! Его необходимо ставить каждый раз, когда необходим перенос. Тег <br> можно дублировать необходимое количество раз подряд в зависимости то того, сколько переносов Вам нужно добавить. <color=white></color> - тег цвета текста, где цвет вставляется на место white. Это также может быть не название цвета, а его цифровой вид, например, #000000. Важно! Следите за тем, чтобы случайно не удалить теги <p></p>. Внутри них Вы можете делать, что хотите, но только внутри них.
<section id="content-tab3"> <p> Начало третьей вкладки. ЭТУ СТРОЧКУ НЕОБХОДИМО УДАЛИТЬ ПРИ РЕДАКТИРОВАНИИ!<br> <br> Отношения персонажа в свободной форме.<br> </p> </section> </div> </div> </div> <div class="clearer"></div>	Наша последняя третья вкладка. Здесь действуют те же правила, что и для вкладки Хронологии. При помощи тегов Вы можете оформить ее по своему желанию, помещая текст в рамки тега <p></p>.
<style>...</style>	После тега <style> мы ничего не трогаем!