[CUSTOMIZATION] HaoAsakura Style Template IP 1.3.0.53a


Subject: [CUSTOMIZATION] HaoAsakura Style Template IP 1.3.0.53a
This guide will explain you the bases to realize your template for your Icy Phoenix in “HaoAsakura”’s style.
What I mean for “HaoAsakura”’s style??
Just a Template similar to those of the 3 sites I worked on:
- www.souleateritalia.it
- www.fmaitalia.net
- www.bakanashumi.it
…creating a style totally mine, completely different from Icy Phoenix original style.
The guide is written assuming you have a minimum of familiarity with the various features of Icy Phoenix (CMS above) and know CSS, HTML and Graphics (The Web can provide excellent tutorials on these three things, as well as sites like IP support.
Link to the collection of guides on icyphoenix.it > Link



-BEGIN... -

The sample template included in this topic is a “simple” White Pearl renamed and modified to obtain a Home Page with my style (all original files, images and anything else not edited in this template are present in this archive).
I put on hand of all of you the template so you can study and improve that on base of your requirements.
I’ve used in that case the “White Pearl” but nobody forbids you to use other Icy Phoenix templates…
You have only to use fantasy and adapt “the scheme” on base of occasions.
I remember you that the images are only example!!!
I’ll analyze step by step every file modified present in the root of my template.




The "common.css" is the same present in the root>template>default but whit a simply variation.
SEARCH:
Code: [Download] [Hide] [Select]
#content {
padding: 2px 7px 5px 7px;
text-align: center;
}

REPLACE WITH:
Code: [Download] [Hide] [Select]
#content {
padding: 0px 0px 0px 0px;
text-align: center;
}

The "style_sample.css" instead contain the instructions for the site width, the header height and the management of the 2 columns of the layout.
The first change is the call of “common.css” that it isn’t again the default one but it’s the one in my template’s root
SEARCH:
Code: [Download] [Hide] [Select]
@import url("../default/common.css");

REPLACE WITH:
Code: [Download] [Hide] [Select]
@import url("common.css");

The site width now is setted to 900 px
Is a “right” width and in average with the standard width of the most of the site in the web.
SEARCH:
Code: [Download] [Hide] [Select]
#global-wrapper {
/*
width: 980px !important;
clear: both;
margin: 0 auto;
*/
}

REPLACE WITH:
Code: [Download] [Hide] [Select]
#global-wrapper {
width: 918px !important;
clear: both;
margin: 0 auto;
}

Why 918 px and not 900px like I’ve write before?
Simply because you must have to hold in your mind the 2 shadow columns (rightshadow and leftshadow) that the original “White Pearl” uses with a width of 9px for shadow.
9px x 2 = 18px + 900px =918px
If your intention is to use larger columns you have to do the same reasoning, multiplying for 2 the width of your columns and add it to 900px to obtain the total width of the site.
If you create larger column remember to modify the attribute
Code: [Download] [Hide] [Select]
#wrapper-inner {
padding-top: 0px;
padding-bottom: 0px;
padding-left: 9px;
padding-right: 9px;
}

The header height is set to 300px.
I think that is very important to have a height proportional to the width of the left column (in that case 250px)
SEARCH:
Code: [Download] [Hide] [Select]
#top_logo {
border: 0px solid #e8e8e8;
background: #ffffff url('images/p_white/top_header.gif') repeat-x;
height: 115px;
}

REPLACE WITH:
Code: [Download] [Hide] [Select]
#top_logo {
border: 0px solid #e8e8e8;
/*background: #ffffff url('images/p_white/top_header.gif') repeat-x;*/
height: 300px;
}

In the final part of the CSS is present the voice to manage the “column” of HaoAsakura’s style template
Code: [Download] [Hide] [Select]
/* INIZIO (begin) - LAYOUT 2 COLUMN [HAOSTYLE] */
#background_index {
background: url('images/sample/skin/bg_index.png') repeat-y;
height: 100%;
width: 100%;
float: left;
}

/* FINE (end) - LAYOUT 2 COLUMN [HAOSTYLE] */

The file “bg_index.png” is the image that create the left column.
In that case in the “skin” folder is present a PNG image with the dimension of 250px x 1px.
The dimension is not binding and you can have fun as you like.



- HEADER -

For the header we’ll use an image (with the format that you like, in that case PNG) with the dimension 900px x 300px.
In my template the image is located in the “skin” folder and I’ve called it “bg_header.png”
The image must be putted in CMS>global Block’s
You have to create a new block with the name that you like in the “Header Centre (left)” position, and to turn off (if they are active) the voices “show borders” show titlebar”, “Localize Titlebar” and “show background”.
Now you have to way to follow:
1- Insert the image with BBCODE
Code: [Download] [Hide] [Select]
[align=center][img]/templates/haostyle/images/sample/skin/bg_header.png[/img][/align]

2- Insert the image with HTML code
Code: [Download] [Hide] [Select]
<table width="900" height="300" border="0" align="center" cellpadding="0" cellspacing="0" background="/templates/haostyle/images/sample/skin/bg_header.png">
<tr>
<td></td>
</tr>
</table>

I suggest you to use HTML code, that because is the base to realize a wonderful header with buttons.
In the “[b]overall_header.tpl[/]” I’ve deleted the code:
Code: [Download] [Hide] [Select]
<tr>
<td width="100%" class="forum-buttons" colspan="3">
<a href="{FULL_SITE_PATH}{U_PORTAL}">{L_HOME}</a>&nbsp;&nbsp;<img src="{FULL_SITE_PATH}{IMG_MENU_SEP}" alt="" />&nbsp;
<a href="{FULL_SITE_PATH}{U_INDEX}">{L_INDEX}</a>&nbsp;&nbsp;<img src="{FULL_SITE_PATH}{IMG_MENU_SEP}" alt="" />&nbsp;
<!-- BEGIN switch_upi2db_off -->
<a href="{FULL_SITE_PATH}{U_SEARCH_NEW}">{L_NEW2}</a>&nbsp;&nbsp;<img src="{FULL_SITE_PATH}{IMG_MENU_SEP}" alt="" />&nbsp;
<!-- END switch_upi2db_off -->
<!-- BEGIN switch_upi2db_on -->
<span style="vertical-align: top;">{L_POSTS}:&nbsp;</span><a href="{FULL_SITE_PATH}{U_SEARCH_NEW}">{L_NEW2}</a><span style="vertical-align: top;">&nbsp;•&nbsp;</span>{L_DISPLAY_U}<span style="vertical-align: top;">&nbsp;•&nbsp;</span>{L_DISPLAY_M}<span style="vertical-align: top;">&nbsp;•&nbsp;</span>{L_DISPLAY_P}&nbsp;&nbsp;<img src="{FULL_SITE_PATH}{IMG_MENU_SEP}" alt="" />&nbsp;
<!-- END switch_upi2db_on -->
<!-- IF S_LOGGED_IN -->
<a href="{FULL_SITE_PATH}{U_PROFILE}">{L_PROFILE}</a>&nbsp;&nbsp;<img src="{FULL_SITE_PATH}{IMG_MENU_SEP}" alt="" />&nbsp;
<!-- ENDIF -->
<!-- IF S_HEADER_DROPDOWN -->
<a href="{FULL_SITE_PATH}{U_SEARCH}" onMouseOver="dropdownmenu(this, event, menu1, '250px');" onMouseOut="delayhidemenu();">{L_SEARCH}</a>&nbsp;&nbsp;<img src="{FULL_SITE_PATH}{IMG_MENU_SEP}" alt="" />&nbsp;
<!-- ELSE -->
<a href="{FULL_SITE_PATH}{U_SEARCH}">{L_SEARCH}</a>&nbsp;&nbsp;<img src="{FULL_SITE_PATH}{IMG_MENU_SEP}" alt="" />&nbsp;
<!-- ENDIF -->
<a href="{FULL_SITE_PATH}{U_FAQ}">{L_FAQ}</a>&nbsp;&nbsp;<img src="{FULL_SITE_PATH}{IMG_MENU_SEP}" alt="" />&nbsp;
<!-- IF not S_LOGGED_IN -->
<a href="{FULL_SITE_PATH}{U_REGISTER}">{L_REGISTER}</a>&nbsp;&nbsp;<img src="{FULL_SITE_PATH}{IMG_MENU_SEP}" alt="" />&nbsp;
<!-- ENDIF -->
<a href="{FULL_SITE_PATH}{U_LOGIN_LOGOUT}">{L_LOGIN_LOGOUT2}</a>
</td>
</tr>

Since I’ve deleted this line of code I suggest you to active in forum , fromCMS > Standard Pages > Forum, the “Nav Header” block ( “nav header [header]” block file) and locate it in “Top/Centre” position.
But nothing prevents to you to find an alternative solution more comfortable alternative to your requirements and tastes!

The “overall_inc_body.tpl” file was modified so that in the home page will not appear the Private Message for the notification box.
Very important modification to avoid that the notify “cracks” the Header from the central body of the site.
The voice:
Code: [Download] [Hide] [Select]
<!-- IF S_LOGGED_IN --><div class="popup{PRIVMSG_IMG}"><a href="{FULL_SITE_PATH}{U_PRIVATEMSGS}">{PRIVATE_MESSAGE_INFO}</a></div><!-- ENDIF -->

It is changed in:
Code: [Download] [Hide] [Select]
<!-- IF S_LOGGED_IN -->
<?php if ($_SERVER['SCRIPT_NAME'] == "/index.php" ): ?>
<?php else: ?>
<div class="popup{PRIVMSG_IMG}"><a href="{FULL_SITE_PATH}{U_PRIVATEMSGS}">{PRIVATE_MESSAGE_INFO}</a></div>
<?php endif; ?>
<!-- ENDIF -->




- FOOTER -


The first thing to do is decide the footer height.
In that case is 100px and the used image has the following dimension: 900px x 100px.
The “overall_inc_footer.tpl” was modified to allow to left column to “fit” in the footer.
The original TPL was
Code: [Download] [Hide] [Select]
<!-- IF SWITCH_CMS_GLOBAL_BLOCKS -->
<!-- IF TC_BLOCK --><div style="vertical-align: top;"><!-- BEGIN tailcenter_blocks_row -->{tailcenter_blocks_row.CMS_BLOCK}<!-- END tailcenter_blocks_row --></div><!-- ENDIF -->
</td>
<!-- IF TR_BLOCK --><td width="5"><img src="{SPACER}" alt="" width="5" height="10" /></td><td width="{FOOTER_WIDTH}" style="width: {FOOTER_WIDTH}px !important;" valign="top"><!-- BEGIN tailright_blocks_row -->{tailright_blocks_row.CMS_BLOCK}<!-- END tailright_blocks_row --></td><!-- ENDIF -->
</tr>
</table>
<div style="vertical-align: top;"><!-- BEGIN tail_blocks_row -->{tail_blocks_row.CMS_BLOCK}<!-- END tail_blocks_row --></div>
<!-- ENDIF -->

{CMS_ACP}
<div style="text-align: center;"><br /><span class="admin-link">{ADMIN_LINK}</span><br /><br /></div>

</td>
</tr>
<!-- IF FOOTER_BANNER_BLOCK -->
<tr><td width="100%" colspan="3">{FOOTER_BANNER_BLOCK}</td></tr>
<!-- ENDIF -->

Now it is:
Code: [Download] [Hide] [Select]
<!-- IF FOOTER_BANNER_BLOCK -->
<tr><td width="100%" colspan="3">{FOOTER_BANNER_BLOCK}</td></tr>
<!-- ENDIF -->

Doing in that way I’ve deleted from this file the voice “CMS” and “ACP” from the bottom of the site.
Since this voice is very important that must be replaced.
In “overall_footer.tpl” insert the voice removed from the other TPL modifying it in base of your tastes.
In my TPL I’ve removed the generation page stats.
If you decide to follow my same way I suggest you to disable this stats from the ACP.
I’ve not a lot of things to say on this modify.
The footer style is limited only by your fantasy.
I ask yo to NOT remove the credits (it isn’t important in which position).



- CENTRAL "BLOCK"-

The more difficult part (it is more corrected to say elaborated) in my template is the central “block”.
Doesn’t exist a standard to apply to the blocks to use in the central part of the site: the standard blocks DO NOT GO WELL AS THEY ARE!
My “vision” of the site and therefore the realization bases on the combination concept of lateral menu + news.
The combinations, maintaining fixed the lateral menu are multiple.
All depends on your fantasy and how much you want try.
To simplify that I’ve created two example blocks:
-lateral menu
-news
One more important thing that you must remember is the width of the left column and, consequently, the bigger one on the left.
In that case the left menu is based on a table with a fixed width of 250px while the news block had a fixed width of 650px (250px + 650px = 900px > site width)
TEMPLATE > HAOSTYLE > BLOCKS > haostyle_menu_laterale_block.tpl
Code: [Download] [Hide] [Select]
<div style="text-align:center; padding-top:10px; padding-bottom:5px;"><img src="/templates/haostyle/images/sample/skin/ml_banner.png" /></div>
<table border="0" width="250px" cellspacing="0" cellpadding="0">
<tr>
<td align="left">&nbsp;&nbsp;<a href="/index.php">Homepage</a></td></tr>
<tr>
<td align="left">&nbsp;&nbsp;<a href="/forum.php">Forum</a></td></tr>
</table>

Is a very simple block composed by an image ( I suggest you to use one with the same width of the column) and selection voices enclosed in a table with a fixed width of 250 px.
The block is only a preview therefore you could find eventual error.
To you the pleasure to create a wonderful lateral menu.
Nobody will prohibit to “take” the “standard” block and modify that on base of your requirements and adapt that to your template, fixing the width.
TEMPLATE > HAOSTYLE > BLOCKS > haostyle_news_block.tpl
The block that you can find is a standard news_block.tpl where I’ve only imposed a width of 650px.
The voice
Code: [Download] [Hide] [Select]
<table class="empty-table" width="100%" cellspacing="0" cellpadding="0" border="0">

Is changed in
Code: [Download] [Hide] [Select]
<table class="empty-table" width="650px" cellspacing="0" cellpadding="0" border="0">

Working on this block and on the style_?.css it’s possible to create your own news block personalized


- ADMIN CMS PANEL -

You absolutely have to remove the check to the “navigation” voice from every site page and save.


- FORUM -

You can leave the site like it is!
But I can’t understand why not modify it after you have passed hours on the realization of your new template.
For the forum I’ve not specific councils to give you, only to search on the support all you need.
I remember you that the Header and the footer will be the same of the Home Page.



- CONCLUSIONS -

Realize the “HaoAsakura Style Template” is not a very simple work but it isn’t even impossible job.
I’m been so much precise as possible in this guide otherwise it is possible that something is escaped.
You have to add what it lacks like the fantasy to adapt all to your tastes.
Nothing is impossible if there is the will to try and try again!
To Webmaster users of the CMS Icy Phoenix I can only Say this:
”nobody born “learned”, the important is the determination and the wish to do”

Thanks to have chose my “style”

HaoAsakura

Quote:
Thank you to have read this guide until the end.


Quote:
Notes on the translation by Marf1:
I have tried to be the most possible faithful to the guide (written in Italian) with this translation, however you could find errors, also perhaps rough, and for this I make my excuses but my English is what it is


haoasakurastyletemplate.rar
Description:  
Download
Filename: haoasakurastyletemplate.rar
Filesize: 343.47 KB
Downloaded: 215 Time(s)

Subject: Re: [CUSTOMIZATION] HaoAsakura Style Template IP 1.3.0.53a
Very good one HaoAsakura.

bookmarked

Subject: Re: [CUSTOMIZATION] HaoAsakura Style Template IP 1.3.0.53a
Hi HaoAsakua

apology a question?

this guide is to make a web style how souleater.it o fmaitalia.net ?

Profile PM  
Subject: Re: [CUSTOMIZATION] HaoAsakura Style Template IP 1.3.0.53a
Madara wrote: [View Post]
Hi HaoAsakua

apology a question?

this guide is to make a web style how souleater.it o fmaitalia.net ?

exactly :mrviolet:

Subject: Re: [CUSTOMIZATION] HaoAsakura Style Template IP 1.3.0.53a
Good !! :shock:

Thanks HaoAsakura.

I have one problem with block header :(

else as how replacement the tbl with my images customs?

and As I remove the space sitelogo

Sorry for the problems :cry:

64i7x2
5bwcq8
2r2vqef
t890jm
21lu3bn

Profile PM  
Subject: Re: [CUSTOMIZATION] HaoAsakura Style Template IP 1.3.0.53a
Variables such as the issues may be different.
For this I've created a general guide and I've added an example to study and understand.
From an image I can not pinpoint the problem and fix it.
As I wrote must be familiar with Icy Phoenix, CSS and HTML.
It' isnt an excuse not to help ...
It' isnt an excuse to ask me to create a template to be paid!

Devoting time and passion you will certainly find the solution to the problem ^ ^

Subject: Re: [CUSTOMIZATION] HaoAsakura Style Template IP 1.3.0.53a
Thank you very much for sharing this tutorial and a basic template, I'm sure many users will appreciate.

Subject: Re: [CUSTOMIZATION] HaoAsakura Style Template IP 1.3.0.53a
Thanks a lot for charing this HaoAsakura

bookmarked this topic :mricy:

Profile PM  

Page 1 of 1


  
You cannot post new topics
You cannot reply to topics
You cannot edit your posts
You cannot delete your posts
You cannot vote in polls
You cannot attach files
You can download files
You cannot post calendar events

   

This is a "Lo-Fi" version of our main content. To view the full version with more information, formatting and images, please click here.

Powered by Icy Phoenix based on phpBB
Generation Time: 0.5303s (PHP: 5% SQL: 95%)
SQL queries: 33 - Debug Off - GZIP Enabled