Change the Default Homepage

With a little HTML knowledge, it's easy to change the default home page for Pixaria from the default gallery view and create a custom home page.

The default home page PHP script index.welcome.php is located in the base directory of your Pixaria installation and its corresponding template file is resources/templates_default/welcome/index.html.

To customise the homepage, first follow the instructions for creating a custom theme and then make a copy of the default homepage file inside your custom theme directory:

resources/themes/mytheme/templates/welcome/index.html

Next, open this file in your preferred text editor and modify the contents to suit your requirements:

{*

/*
*
*	Pixaria Gallery
*	Copyright Jamie Longstaff
*
*/

*}{include_template file="layout/main.head.html"}

<!-- Show the basic search form -->
{if $set_func_show_gallery_map == "0"}
	{load_pixie name="gallery_listing"}
{else}
	{load_pixie name="gallery_listing_map"}
{/if}

<!-- INCLUDE THE BOTTOM HTML TEMPLATE -->
{include_template file="layout/main.foot.html"}

To customise the home page, remove the default code for displaying the galleries which will leave you with a blank canvas to work with:

{include_template file="layout/main.head.html"}


{include_template file="layout/main.foot.html"}

Now, you can insert your own content into the space between the header and footer templates. Some suggestions for layouts you can use are shown here:

Two Column Layout

{include_template file="layout/main.head.html"}

<div class="block">
	
	<div class="head">Two-Column Block Layout</div>
	
	<div class="body">
		
		<div class="box col-6">
		
			<p>Column 1</p>

		</div>
		
		<div class="box col-6">
		
			<p>Column 2</p>
			
		</div>
		
		<div class="clear"></div>
		
	</div>
	
</div>

{include_template file="layout/main.foot.html"}

Fixed Width Layout

{include_template file="layout/main.head.html"}

<div class="block">
	
	<div class="head">Fixed With Block Layout</div>
	
	<div class="body">
		
		<div class="box col-12">
		
			<p>Place your content here...</p>

		</div>
		
		<div class="clear"></div>
		
	</div>
	
</div>

{include_template file="layout/main.foot.html"}

Three Column Layout

{include_template file="layout/main.head.html"}

<div class="block">
	
	<div class="head">Three-Column Block Layout</div>
	
	<div class="body">
		
		<div class="box col-4">
		
			<p>Column 1</p>

		</div>
		
		<div class="box col-4">
		
			<p>Column 2</p>
			
		</div>
		
		<div class="box col-4">
		
			<p>Column 3</p>
			
		</div>
		
		<div class="clear"></div>
		
	</div>
	
</div>

{include_template file="layout/main.foot.html"}

blog comments powered by Disqus


Last edited on Saturday September 17 2011 at 02:59:04