Difference between revisions of "MediaWiki:Common.css"

Jump to: navigation , search
Line 1: Line 1:
__NOTOC__
+
/* CSS placed here will be applied to all skins */
  
{{updates |
+
#mp_content {
patchLink=http://www.castlestory.net/en/news/6196-Update-Version-07 |
+
margin-top: -120px;
patchText=Version 0.7 |
+
}
patchDate=August 23, 2016 |
 
videoLink=http://www.castlestory.net/en/news/6196-Update-Version-07 |
 
videoText=Castle Story Announce Trailler |
 
videoDate=August 23, 2016 |
 
postLink=http://www.castlestory.net/en/news/6196-Update-Version-07 |
 
postText=New Hero, Match Length Improvements and New Weekly Card Pack |
 
postDate=August 23, 2016 |
 
}}
 
  
<div id="mp_content">
+
img.mpImg{
<div class="mp_Panel">
+
border: solid black 4px;
<p class="mp_title">BEGINNER'S GUIDE</p>
+
margin-top: -25px;
 +
margin-bottom: -25px;
 +
-webkit-box-shadow: 0px 4px 0px 0px rgba(0,0,0,0.5);
 +
-moz-box-shadow: 0px 4px 0px 0px rgba(0,0,0,0.5);
 +
box-shadow: 0px 4px 0px 0px rgba(0,0,0,0.5);
 +
}
  
[[File:mp_beginnersguide.png|class=mpImg]]
+
.mp_title {
<p class="mp_imgDesc">Check out this easy to follow guide for a step-by-step tutorial on how to get started playing Castle Story!</p>
+
font-size: 24px;
<p class="mp_readmore">[[Beginner's Guide|LEARN HOW TO PLAY]]</p>
+
font-weight: 600;
</div>
+
}
  
<div class="mp_Panel">
+
.mp_imgDesc {
<div class="mp_leftPanel">
+
font-size: 14px;
<p class="mp_title">BRICKTRONS</p>
+
}
[[File:mp_bricktrons.png|class=mpImg]]
 
<p class="mp_imgDesc">Bricktrons are the brave and crafty little characters you control in the world of Castle Story.</p>
 
<p class="mp_readmore">[[Bricktrons|READ MORE]]</p>
 
</div>
 
 
<div class="mp_rightPanel">
 
<p class="mp_title">CORRUPTRONS</p>
 
[[File:mp_corruptrons.png|class=mpImg]]
 
<p class="mp_imgDesc">Corruptrons are evil creatures roaming the islands, eager to siege your castles and fight your Bricktrons!</p>
 
<p class="mp_readmore">[[Corruptrons|READ MORE]]</p>
 
</div>
 
</div>
 
  
<div class="breaker"></div>
+
.mp_readmore {
+
font-size: 14px;
<div class="mp_Panel">
+
text-align: right;
<p class="mp_title">BLOCKS, STRUCTURES & RESOURCES</p>
+
margin-top: -30px;
 +
}
  
[[File:mp_nighttime.png|class=mpImg]]
+
.mp_Panel {
<p class="mp_imgDesc">Check out this easy to follow guide for a step-by-step tutorial on how to get started playing Castle Story!</p>
+
min-height: 100px;
<p class="mp_readmore">[[Blocks, Structures & Resources|READ MORE]]</p>
+
width: 65%;
</div>
+
background-color: red;
 +
margin-bottom: 35px;
 +
}
  
<div class="mp_Panel">
+
.mp_leftPanel {
<div class="mp_leftPanel">
+
width: 48%;
<p class="mp_title">GAMEMODES</p>
+
float: left;
[[File:mp_gamemodes.png|class=mpImg]]
+
background-color: green;
<p class="mp_imgDesc">Learn about different gamemodes available in Castle Story. Want to take over an island, or build a Castle to withstand infinite waves of attacks?</p>
+
}
<p class="mp_readmore">[[Gamemodes|READ MORE]]</p>
+
 
</div>
+
.mp_rightPanel {
+
width: 48%;
<div class="mp_rightPanel">
+
float: right;
<p class="mp_title">ADVANCED STRATEGIES</p>
+
background-color: blue;
[[File:mp_strats.png|class=mpImg]]
+
}
<p class="mp_imgDesc">Already mastered the basics of Castle Story? Time to step your game up with these advanced tips 'n tricks!</p>
 
<p class="mp_readmore">[[Strategies|READ MORE]]</p>
 
</div>
 
</div>
 
</div>
 

Revision as of 22:18, 8 December 2016

/* CSS placed here will be applied to all skins */

#mp_content {
	margin-top: -120px;
}

img.mpImg{
	border: solid black 4px;
	margin-top: -25px;
	margin-bottom: -25px;
	-webkit-box-shadow: 0px 4px 0px 0px rgba(0,0,0,0.5);
	-moz-box-shadow: 0px 4px 0px 0px rgba(0,0,0,0.5);
	box-shadow: 0px 4px 0px 0px rgba(0,0,0,0.5);
}

.mp_title {
	font-size: 24px;
	font-weight: 600;
}

.mp_imgDesc {
font-size: 14px;
}

.mp_readmore {
font-size: 14px;
text-align: right;
margin-top: -30px;
}

.mp_Panel {
min-height: 100px;
width: 65%;
background-color: red;
margin-bottom: 35px;
}

.mp_leftPanel {
width: 48%;
float: left;
background-color: green;
}

.mp_rightPanel {
width: 48%;
float: right;
background-color: blue;
}