Template 3: Difference between revisions

From Ascension Sojourns
No edit summary
No edit summary
Line 3: Line 3:
 
----
  
----
   
−
{{#css:
 +
<css>
  +
/* Wrapper around the table: sets text-color (and could change font)*/
−
table {
  
  +
.CTWrapper {
−
background-color: white;
  
  +
width : 900px;
−
border-collapse: collapse;
  
  +
align : center;
−
color: #f9f9f9; /* This is the main text colour. */
  
  +
background : #1d2e38;
−
margin: 0 auto; /* This centers the box. */
  
  +
border : 1px solid green;
−
max-width: 900px;
  
  +
color : silver;
−
width: 900px; /* This can be changed but other numbers may also need adjusting if you do. */
  
 
}
  
}
  +
−
td {
  
  +
/* Color of the Links, needs to be in the wrapper so it does not change
−
font-family: Palatino Linotype, Perpetua, serif; /* This sets the font for everything but the text in .main */
  
  +
* ALL the links, but only those of the actual content
−
text-align: center; /* If you want a different default alignment, change it here. */
  
  +
*/
  +
.CTWrapper a {
  +
color: gold;
 
}
  
}
  +
−
table a, table a:hover, table a:visited, table a:active,table a.external, table a.external:hover, table a.external:visited, table a.external:active {
  
  +
.CTWrapper a :hover{
−
color: #FFF8E5 !important; /* This changes all the links to the colour you set, in all states. */
  
  +
color: blue;
 
}
  
}
  +
−
.banner {
  
  +
.CTWrapper a :visited{
−
background-color: #1d2e38;
  
  +
color: gold;
−
border-radius: 15px; /* remove this line or set to 0 if you want sharp corners. */
  
 
}
  
}
  +
−
.banner .leftpic, .banner .rightpic {
  
  +
.CTWrapper a:link {
−
padding: 1.5em 0 4em;
  
  +
color: grey;
−
width: 200px;
  
 
}
  
}
  +
−
.banner .main {
  
  +
/* Design of the large Headers of the individual sections
−
color: #FFBF00;
  
  +
* in the Table (e.g.: INFORMATION)
−
font-family: Perpetua, serif;
  
  +
*/
−
font-size: 42pt;
 
  +
.CTHeader {
−
font-style: italic;
  
  +
color : #f0f1f3;
−
font-variant: small-caps;
  
−
text-align: center;
+
vertical-align : center;
  +
font-size : 22pt;
−
text-shadow: 1px 1px 3px #44202c;
 
  +
font-family : Palatino Linotype, Perpetua, serif;
−
width: 490px;
  
  +
text-align : center;
  +
padding-top : 8px;
  +
font-variant : small-caps;
  +
-moz-border-radius-topleft : 15px 11px;
  +
-moz-border-radius-topright : 15px 11px;
  +
-webkit-border-top-left-radius : 15px 11px;
  +
-webkit-border-top-right-radius : 15px 11px
 
}
  
}
  +
−
.data {
  
  +
/* Color defition for the Table Cells */
−
border-collapse: separate;
  
  +
.CTData {
−
border-spacing: .25em;
  
  +
background-color : #1d2e38;
−
min-width: calc(900px + .5em);
  
  +
margin : 15px;
  +
color : silver;
  +
 
}
  
}
  +
−
.heading {
  
  +
/* Alternative Color definition of Table Cells, aka: 2nd Color */
−
background-color: #1d2e38;
 
  +
.CTData2 {
−
color: #FFBF00;
  
  +
background : #000000;
−
border-radius: 15px 15px 0 0;
  
−
font-size: 22pt;
 +
margin : 15px;
−
font-variant: small-caps;
  
−
height: 1.25em;
  
−
left: 0;
  
−
line-height: 1.25em;
  
−
padding-bottom: 0.1em;
  
−
position: absolute;
  
−
text-align: center;
  
−
top: 0;
  
−
width: 100%;
  
 
}
  
}
  +
−
.cell {
  
  +
/* Color and style of the box surrounding the Picture */
−
background-color: #4c5b70;
  
  +
.CTBox {
−
border-radius: 15px;
  
  +
border-top : 3px solid green;
−
vertical-align: top;
 
  +
border-bottom : 1px solid green;
−
font-size:12px;
  
  +
border-right : 2px solid green;
−
position: relative;
  
  +
border-left : 2px solid green;
−
width: 50%;
  
  +
background : #f0f1f3;
  +
text-align : center;
  +
margin : 0px;
 
}
  
}
  +
−
.info {
  
  +
/* Color and Style of the large text under the picture. */
−
padding: 4.25em 1em 1em; /* The first number may need tweaking if you change the font or font size in the headings */
  
  +
.CTBigText {
  +
font-size : 48pt;
  +
font-family : Palatino Lionotype, Perpetua, serif;
  +
font-variant : small-caps;
  +
text-align : center;
  +
align : center;
  +
text-shadow : 1px 1px 3px #000000;
  +
color : #1d2e38;
 
}
  
}
  +
−
.info img {
  
  +
.CTTable {
−
height: auto;
  
  +
background: #f0f1f3;
−
max-width: 100%;
  
 
}
  
}
  +
−
.logs {
  
  +
/* Color and Stlye of the little navigation menu*/
−
text-align: left;
  
  +
.CTNav {
  +
color : silver;
  +
text-align : center;
  +
text-transform : uppercase;
  +
font-size : 7pt;
  +
border-bottom : 5px solid #1d2e38;
 
}
  
}
  +
</css>
−
.subhead {
  
  +
<!-- Actual Content goes here -->
−
font-variant: medium-caps;
 
  +
<div class="CTWrapper">
−
font-size: 16pt;
  
  +
<!-- Top Banner Start-->
−
}
  
  +
{| class="CTTable" cellpadding="0" cellspacing="0" width="900"
−
.subsubhead {
  
  +
|-
−
display: inline-block;
  
  +
|height = "13" class = "CTData2" colspan = "3"| &nbsp;
−
font-size: 13pt;
  
  +
|-
−
padding-top: 8px;
  
  +
|height = "90" width = "150" class = "CTData" | &nbsp;
−
}
  
  +
|rowspan = "2" width = "490" class = "CTBox" | [[File:Bender.jpg|center|390px]] <span class="CTBigText"> ''{{PAGENAME}}'' </span>
−
/* Example of page-specific adjustments below */
  
  +
|width = "150" class = "CTData"| &nbsp;
−
.pics {
  
  +
|-
−
vertical-align: middle;
  
  +
|-
−
}
  
  +
|height = "50" class = "CTData2" |&nbsp;
−
.pics .info {
  
  +
|class = "CTData2" |&nbsp;
−
padding: 4.25em 0 1em;
  
  +
|-
−
}
  
  +
|colspan = "3" class = "CTData2 CTNav" | '''Navigation:'' [[#I-Facts|Information]], [[#I-Gallery|Snapshots]], [[#I-Hooks|Contacts]], [[#I-Quotes|Quotes]]'''''
−
}}
  
−
{| class="banner"
  
−
|-
  
−
| class="main" | [[File:Bender.jpg|300px|Center]]<br> Character Full Name Here
  
 
|}
  
|}
  +
<!-- Top Banner End-->
−
{| class="data plainlinks"
  
  +
<!-- Info Start -->
−
|-
  
  +
{| width = "900px" cellpadding = "5" cellspacing = "0" class = "CTTable"
−
| class="cell facts" | <div class="heading">Information</div>
  
  +
| width = "50%" class = "CTData2 CTHeader" | <span id="I-Facts">Information</span>
−
<div class="info">{{:YOURcharNAMEHERE/Facts}}</div>
  
  +
| |
−
| class="cell pics" | <div class="heading">Snapshots</div>
  
−
<div class="info">{{YOURcharNAMEHERE/Snapshots}}</div>
 +
| width = "50%" class = "CTData2 CTHeader" | <span id="I-Gallery>Snapshots</span>
−
|-
 +
|-
  +
| class = "CTData" | {{:{{PAGENAME}}/Facts}}<!-- Do not delete the ':' (colon)! -->
−
| class="cell hooks" | <div class="heading">RP Hooks</div>
  
  +
| rowspan = "5" |
−
<div class="info">{{:YOURcharNAMEHERE/Hooks}}</div>
  
  +
| class = "CTData" | {{:{{PAGENAME}}/Snapshots}}<!-- Do not delete the ':' (colon)! -->
−
| class="cell contacts" | <div class="heading">Contacts</div>
  
  +
|-
−
<div class="info">{{:YOURCharNAMEHERE/Contacts}}</div>
  
  +
| class = "CTData2 CTHeader" | <span id="I-Hooks">Contacts</span>
−
|-
  
−
| class="cell logs" colspan=2| <div class="heading">RP Logs</div>
 +
| class = "CTData2 CTHeader" | <span id="I-Quotes">Quotes</span>
  +
|-
−
<div class="info"><DynamicPageList>
  
  +
| class = "CTData" | {{:{{PAGENAME}}/Hooks}}<!-- Do not delete the ':' (colon)! -->
−
category=Logs&{{YOURNAMEHERE}} /* Remove the curly brackets and put in your page name. Ex: Logs&Brittany
  
  +
| class = "CTData" | {{:{{PAGENAME}}/Quotes}}<!-- Do not delete the ':' (colon)! -->
−
order=descending
  
−
shownamespace=false
  
−
noresultsheader=''None yet.''
  
−
</DynamicPageList></div>
  
 
|}
  
|}
  +
<!--Info End -->
  +
</div> <!-- CTWrapper -->
  +
  +
== RP Logs ==
  +
{{ RP Logs | name = {{PAGENAME}} | columns = 4 | ordermethod = gamedate }}
  +
[[Category:ADD YOUR CATEGORIES]]
  +
 
[[Category: PCs]]
  
[[Category: PCs]]
 
----
  
----
−
<nowiki>
 +
<nowiki><css>
  +
/* Wrapper around the table: sets text-color (and could change font)*/
−
{{<nowiki>#css:
  
  +
.CTWrapper {
−
table {
  
  +
width : 900px;
−
background-color: white;
  
  +
align : center;
−
border-collapse: collapse;
  
  +
background : #1d2e38;
−
color: #f9f9f9; /* This is the main text colour. */
  
  +
border : 1px solid green;
−
margin: 0 auto; /* This centers the box. */
  
−
max-width: 900px;
 +
color : silver;
−
width: 900px; /* This can be changed but other numbers may also need adjusting if you do. */
  
−
}
  
−
td {
  
−
font-family: Palatino Linotype, Perpetua, serif; /* This sets the font for everything but the text in .main */
  
−
text-align: center; /* If you want a different default alignment, change it here. */
  
−
}
  
−
table a, table a:hover, table a:visited, table a:active,table a.external, table a.external:hover, table a.external:visited, table a.external:active {
  
−
color: #FFF8E5 !important; /* This changes all the links to the colour you set, in all states. */
  
−
}
  
−
.banner {
  
−
background-color: #1d2e38;
  
−
border-radius: 15px; /* remove this line or set to 0 if you want sharp corners. */
  
−
}
  
−
.banner .leftpic, .banner .rightpic {
  
−
padding: 1.5em 0 4em;
  
−
width: 200px;
  
 
}
  
}
  +
−
.banner .main {
  
  +
/* Color of the Links, needs to be in the wrapper so it does not change
−
color: #FFBF00;
  
  +
* ALL the links, but only those of the actual content
−
font-family: Perpetua, serif;
  
  +
*/
−
font-size: 42pt;
 
  +
.CTWrapper a {
−
font-style: italic;
  
  +
color: gold;
−
font-variant: small-caps;
  
−
text-align: center;
 
−
text-shadow: 1px 1px 3px #44202c;
 
−
width: 490px;
  
 
}
  
}
  +
−
.data {
  
  +
.CTWrapper a :hover{
−
border-collapse: separate;
  
  +
color: blue;
−
border-spacing: .25em;
  
−
min-width: calc(900px + .5em);
  
 
}
  
}
  +
−
.heading {
  
  +
.CTWrapper a :visited{
−
background-color: #1d2e38;
 
−
color: #FFBF00;
 +
color: gold;
−
border-radius: 15px 15px 0 0;
  
−
font-size: 22pt;
  
−
font-variant: small-caps;
  
−
height: 1.25em;
  
−
left: 0;
  
−
line-height: 1.25em;
  
−
padding-bottom: 0.1em;
  
−
position: absolute;
  
−
text-align: center;
  
−
top: 0;
  
−
width: 100%;
  
 
}
  
}
  +
−
.cell {
  
  +
.CTWrapper a:link {
−
background-color: #4c5b70;
  
  +
color: grey;
−
border-radius: 15px;
  
−
vertical-align: top;
 
−
font-size:12px;
  
−
position: relative;
  
−
width: 50%;
  
 
}
  
}
  +
−
.info {
  
  +
/* Design of the large Headers of the individual sections
−
padding: 4.25em 1em 1em; /* The first number may need tweaking if you change the font or font size in the headings */
  
  +
* in the Table (e.g.: INFORMATION)
  +
*/
  +
.CTHeader {
  +
color : #f0f1f3;
  +
vertical-align : center;
  +
font-size : 22pt;
  +
font-family : Palatino Linotype, Perpetua, serif;
  +
text-align : center;
  +
padding-top : 8px;
  +
font-variant : small-caps;
  +
-moz-border-radius-topleft : 15px 11px;
  +
-moz-border-radius-topright : 15px 11px;
  +
-webkit-border-top-left-radius : 15px 11px;
  +
-webkit-border-top-right-radius : 15px 11px
 
}
  
}
  +
−
.info img {
  
  +
/* Color defition for the Table Cells */
−
height: auto;
  
  +
.CTData {
−
max-width: 100%;
  
  +
background-color : #1d2e38;
  +
margin : 15px;
  +
color : silver;
  +
 
}
  
}
  +
−
.logs {
  
  +
/* Alternative Color definition of Table Cells, aka: 2nd Color */
−
text-align: left;
  
  +
.CTData2 {
  +
background : #000000;
  +
margin : 15px;
 
}
  
}
  +
−
.subhead {
  
  +
/* Color and style of the box surrounding the Picture */
−
font-variant: medium-caps;
 
  +
.CTBox {
−
font-size: 16pt;
  
  +
border-top : 3px solid green;
  +
border-bottom : 1px solid green;
  +
border-right : 2px solid green;
  +
border-left : 2px solid green;
  +
background : #f0f1f3;
  +
text-align : center;
  +
margin : 0px;
 
}
  
}
  +
−
.subsubhead {
  
  +
/* Color and Style of the large text under the picture. */
−
display: inline-block;
  
  +
.CTBigText {
−
font-size: 13pt;
  
−
padding-top: 8px;
 +
font-size : 48pt;
  +
font-family : Palatino Lionotype, Perpetua, serif;
  +
font-variant : small-caps;
  +
text-align : center;
  +
align : center;
  +
text-shadow : 1px 1px 3px #000000;
  +
color : #1d2e38;
 
}
  
}
  +
−
/* Example of page-specific adjustments below */
  
−
.pics {
 +
.CTTable {
  +
background: #f0f1f3;
−
vertical-align: middle;
  
 
}
  
}
  +
−
.pics .info {
  
  +
/* Color and Stlye of the little navigation menu*/
−
padding: 4.25em 0 1em;
  
  +
.CTNav {
  +
color : silver;
  +
text-align : center;
  +
text-transform : uppercase;
  +
font-size : 7pt;
  +
border-bottom : 5px solid #1d2e38;
 
}
  
}
  +
</css>
−
}}
  
  +
<!-- Actual Content goes here -->
−
{| class="banner"
  
  +
<div class="CTWrapper">
−
|-
  
  +
<!-- Top Banner Start-->
−
| class="main" | [[File:Bender.jpg|300px|Center]]<br> Character Full Name Here
  
  +
{| class="CTTable" cellpadding="0" cellspacing="0" width="900"
  +
|-
  +
|height = "13" class = "CTData2" colspan = "3"| &nbsp;
  +
|-
  +
|height = "90" width = "150" class = "CTData" | &nbsp;
  +
|rowspan = "2" width = "490" class = "CTBox" | [[File:XXX.jpg|center|390px]] <span class="CTBigText"> ''{{PAGENAME}}'' </span>
  +
|width = "150" class = "CTData"| &nbsp;
  +
|-
  +
|-
  +
|height = "50" class = "CTData2" |&nbsp;
  +
|class = "CTData2" |&nbsp;
  +
|-
  +
|colspan = "3" class = "CTData2 CTNav" | '''Navigation:'' [[#I-Facts|Information]], [[#I-Gallery|Snapshots]], [[#I-Hooks|Contacts]], [[#I-Quotes|Quotes]]'''''
 
|}
  
|}
  +
<!-- Top Banner End-->
−
{| class="data plainlinks"
  
  +
<!-- Info Start -->
−
|-
  
  +
{| width = "900px" cellpadding = "5" cellspacing = "0" class = "CTTable"
−
| class="cell facts" | <div class="heading">Information</div>
  
  +
| width = "50%" class = "CTData2 CTHeader" | <span id="I-Facts">Information</span>
−
<div class="info">{{:YOURcharNAMEHERE/Facts}}</div>
  
  +
| |
−
| class="cell pics" | <div class="heading">Snapshots</div>
  
−
<div class="info">{{YOURcharNAMEHERE/Snapshots}}</div>
 +
| width = "50%" class = "CTData2 CTHeader" | <span id="I-Gallery>Snapshots</span>
−
|-
 +
|-
  +
| class = "CTData" | {{:{{PAGENAME}}/Facts}}<!-- Do not delete the ':' (colon)! -->
−
| class="cell hooks" | <div class="heading">RP Hooks</div>
  
  +
| rowspan = "5" |
−
<div class="info">{{:YOURcharNAMEHERE/Hooks}}</div>
  
  +
| class = "CTData" | {{:{{PAGENAME}}/Snapshots}}<!-- Do not delete the ':' (colon)! -->
−
| class="cell contacts" | <div class="heading">Contacts</div>
  
  +
|-
−
<div class="info">{{:YOURCharNAMEHERE/Contacts}}</div>
  
  +
| class = "CTData2 CTHeader" | <span id="I-Hooks">Contacts</span>
−
|-
  
−
| class="cell logs" colspan=2| <div class="heading">RP Logs</div>
 +
| class = "CTData2 CTHeader" | <span id="I-Quotes">Quotes</span>
  +
|-
−
<div class="info"><DynamicPageList>
  
  +
| class = "CTData" | {{:{{PAGENAME}}/Hooks}}<!-- Do not delete the ':' (colon)! -->
−
category=Logs&{{YOURNAMEHERE}} /* Remove the curly brackets and put in your page name. Ex: Logs&Brittany
  
  +
| class = "CTData" | {{:{{PAGENAME}}/Quotes}}<!-- Do not delete the ':' (colon)! -->
−
order=descending
  
−
shownamespace=false
  
−
noresultsheader=''None yet.''
  
−
</DynamicPageList></div>
  
 
|}
  
|}
  +
<!--Info End -->
−
[[Category:Active PCs]]
  
  +
</div> <!-- CTWrapper -->
−
</nowiki>
  
  +
  +
== RP Logs ==
  +
{{ RP Logs | name = {{PAGENAME}} | columns = 4 | ordermethod = gamedate }}
  +
[[Category:ADD YOUR CATEGORIES]]
 
</nowiki>
  
</nowiki>

Revision as of 06:54, 11 April 2023

When you paste this code into your page, change all references to YOURcharNAMEHERE to name you've used for your character page. The references should then look like this: Marty/Facts. If you need additional help contact staff.


 
 
Bender.jpg
Template 3 		 
   
Navigation: Information, Snapshots, Contacts, Quotes
Information Snapshots
Template 3/Facts Template 3/Snapshots
Contacts Quotes
Template 3/Hooks Template 3/Quotes

RP Logs

None yet.

<css> /* Wrapper around the table: sets text-color (and could change font)*/ .CTWrapper { width  : 900px; align  : center; background : #1d2e38; border  : 1px solid green; color  : silver; } /* Color of the Links, needs to be in the wrapper so it does not change * ALL the links, but only those of the actual content */ .CTWrapper a { color: gold; } .CTWrapper a :hover{ color: blue; } .CTWrapper a :visited{ color: gold; } .CTWrapper a:link { color: grey; } /* Design of the large Headers of the individual sections * in the Table (e.g.: INFORMATION) */ .CTHeader { color  : #f0f1f3; vertical-align  : center; font-size  : 22pt; font-family  : Palatino Linotype, Perpetua, serif; text-align  : center; padding-top  : 8px; font-variant  : small-caps; -moz-border-radius-topleft  : 15px 11px; -moz-border-radius-topright  : 15px 11px; -webkit-border-top-left-radius  : 15px 11px; -webkit-border-top-right-radius : 15px 11px } /* Color defition for the Table Cells */ .CTData { background-color : #1d2e38; margin  : 15px; color  : silver; } /* Alternative Color definition of Table Cells, aka: 2nd Color */ .CTData2 { background  : #000000; margin  : 15px; } /* Color and style of the box surrounding the Picture */ .CTBox { border-top  : 3px solid green; border-bottom : 1px solid green; border-right  : 2px solid green; border-left  : 2px solid green; background  : #f0f1f3; text-align  : center; margin  : 0px; } /* Color and Style of the large text under the picture. */ .CTBigText { font-size  : 48pt; font-family  : Palatino Lionotype, Perpetua, serif; font-variant : small-caps; text-align  : center; align  : center; text-shadow  : 1px 1px 3px #000000; color  : #1d2e38; } .CTTable { background: #f0f1f3; } /* Color and Stlye of the little navigation menu*/ .CTNav { color  : silver; text-align  : center; text-transform : uppercase; font-size  : 7pt; border-bottom  : 5px solid #1d2e38; } </css> <!-- Actual Content goes here --> <div class="CTWrapper"> <!-- Top Banner Start--> {| class="CTTable" cellpadding="0" cellspacing="0" width="900" |- |height = "13" class = "CTData2" colspan = "3"|   |- |height = "90" width = "150" class = "CTData" |   |rowspan = "2" width = "490" class = "CTBox" | [[File:XXX.jpg|center|390px]] <span class="CTBigText"> ''{{PAGENAME}}'' </span> |width = "150" class = "CTData"|   |- |- |height = "50" class = "CTData2" |  |class = "CTData2" |  |- |colspan = "3" class = "CTData2 CTNav" | '''Navigation:'' [[#I-Facts|Information]], [[#I-Gallery|Snapshots]], [[#I-Hooks|Contacts]], [[#I-Quotes|Quotes]]''''' |} <!-- Top Banner End--> <!-- Info Start --> {| width = "900px" cellpadding = "5" cellspacing = "0" class = "CTTable" | width = "50%" class = "CTData2 CTHeader" | <span id="I-Facts">Information</span> | | | width = "50%" class = "CTData2 CTHeader" | <span id="I-Gallery>Snapshots</span> |- | class = "CTData" | {{:{{PAGENAME}}/Facts}}<!-- Do not delete the ':' (colon)! --> | rowspan = "5" | | class = "CTData" | {{:{{PAGENAME}}/Snapshots}}<!-- Do not delete the ':' (colon)! --> |- | class = "CTData2 CTHeader" | <span id="I-Hooks">Contacts</span> | class = "CTData2 CTHeader" | <span id="I-Quotes">Quotes</span> |- | class = "CTData" | {{:{{PAGENAME}}/Hooks}}<!-- Do not delete the ':' (colon)! --> | class = "CTData" | {{:{{PAGENAME}}/Quotes}}<!-- Do not delete the ':' (colon)! --> |} <!--Info End --> </div> <!-- CTWrapper --> == RP Logs == {{ RP Logs | name = {{PAGENAME}} | columns = 4 | ordermethod = gamedate }} [[Category:ADD YOUR CATEGORIES]]

Retrieved from "https://ascensionsojourns.com/wiki/index.php?title=Template_3&oldid=655"