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)

Insert template graphics

There are two types of graphics or media. Those used in the content and those used in template. In this template, there is the logo, banner and alt-nav button. Here the graphics will be inserted directly by their URL path (later they will be replaced by PHP variable).

 

template.htm

...
<body id="body">
	<div class="alt-nav">
		<!-- alternative navigation container -->
		<div class="btn">
			<!-- alt-nav button -->
			<img src="images/alt-nav-btn.png">
		</div>
		<div class="nav">
			<!-- alternative navigation START-->
			ALTERNATRIVE NAVIGATION
		</div>		
	</div>
	<div class="top-container inner">
		<!-- top-container -->
		<div class="logo">
			<!-- logo -->
			<img src="images/logo.png">
		</div>
		<div class="sitename">
			<!-- sitename -->
			SITENAME
		</div>
		<div class="languagemenu">
			<!-- languagemenu -->
			LANGUAGEMENU
		</div>
		<div class="clear"></div>
	</div>
	
	<div class="banner-container">
		<!-- banner-container -->
		<img src="images/banner.jpg">
		<div class="slogan">
			<!-- slogan -->
			SLOGAN
		</div>
	</div>
...

 

 

stylesheet.css

...
/*** step 6 ***/
/* insert images in template */
.logo img{
	width: 150px;
	height: auto;
	float: left;
}
.banner-container{
	position: relative;
}
.banner-container img{
	width: 100%;
	float: left;
}
.slogan{
	position: absolute;
}
.btn img{
	height: 100%;
	width: auto;
	padding-right: 1%;
	float: right;
}

 

 

PREVIEW

 

top
YOUR DISPLAY HAS
SMALL RESOLUTION
MINIMAL 320px
IS REQUIRED