CMSimple-XH

CMSimple_XH Template Tutorial

Visitor Statistics
» 1 Online
» 2 Today
» 1 Yesterday
» 3 Week
» 16 Month
» 322 Year
» 472 Total
Record: 35 (09.11.2018)

Final styling

The template is finished. Depending on some details (colors, texts, images etc.) it is sometime necessary to make small adjustments in already made styling. It means to "play" with pixels and other units, adjusting paddings and margins, add/remove text and links decoration, and make another fine-styling.

 

template.htm

...
	<div class="footer-container inner">
		<!-- footer-container -->
		<!-- footer -->
		Your copyright &copy; 2018 | Powered by <a href="https://cmsimple-xh.org" target="_blank">CMSimple_XH</a> | Template by <a href="http://example.com" target="_blank">YourTemplate</a> | <?php echo lastupdate(1);?>
		<br>
		<?php echo loginlink();?> <!-- Creates the login link. -->
	</div>
</div>
<div class="small-display">
	YOUR DISPLAY HAS<br>
	SMALL RESOLUTION<br>
	MINIMAL 320px<br>
	IS REQUIRED
</body>
</html>

 

 

stylesheet.css

...
@media (min-width: 1025px) {
	.alt-nav{display:none;}
	.locator{width: 70%;}
	.searchbox{width: 30%;}
	.navigation{width: 25%;}
	.content{width: 50%;}
	.news{width: 25%;}
	.box{width: 100%;}
}
/* cmsimple_XH functions */
.searchbox input[type=search]{width: 150px; height: 30px; border: 1px solid #ccc;}
.searchbox input[type=submit]{width: 80px; height: 30px; border: 1px solid #444; background: #ccc;}
.searchbox input[type=submit]:hover{background: orange;}
.locator span{font-weight:bold;}
.mailformlink{width: 250px; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid #444;}
.sitemaplink{width: 250px;}
/* navigation */
.navigation ul.menulevel1{width: 250px; background: #999;}

 

 

PREVIEW

 

 

top
YOUR DISPLAY HAS
SMALL RESOLUTION
MINIMAL 320px
IS REQUIRED