Icy Phoenix

     
 


Post new topic  Reply to topic 
Page 1 of 1
 
 
Reply with quote Download Post 
Post [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: 113 Time(s)

 




____________
http://img407.imageshack.us/img407/...nnerbakabk0.png
 
HaoAsakuraSend private messageVisit poster's website  
Back to topPage bottom
Icy Phoenix is an open source project, you can show your appreciation and support future development by donating to the project.

Support us
 
Reply with quote Download Post 
Post Re: [CUSTOMIZATION] HaoAsakura Style Template IP 1.3.0.53a 
 
Very good one HaoAsakura.

bookmarked
 




____________
Out of Order
 
spydieSend private messageVisit poster's website  
Back to topPage bottom
Reply with quote Download Post 
Post 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  ?
 



 
MadaraSend private message  
Back to topPage bottom
Reply with quote Download Post 
Post 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  
 




____________
http://img407.imageshack.us/img407/...nnerbakabk0.png
 
HaoAsakuraSend private messageVisit poster's website  
Back to topPage bottom
Reply with quote Download Post 
Post Re: [CUSTOMIZATION] HaoAsakura Style Template IP 1.3.0.53a 
 
Good !!    

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  

64i7x2
5bwcq8
2r2vqef
t890jm
21lu3bn
 



 
MadaraSend private message  
Back to topPage bottom
Reply with quote Download Post 
Post 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 ^ ^
 




____________
http://img407.imageshack.us/img407/...nnerbakabk0.png
 
HaoAsakuraSend private messageVisit poster's website  
Back to topPage bottom
Reply with quote Download Post 
Post 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.
 




____________
Luca
SEARCH is the quickest way to get support.
Icy Phoenix ColorizeIt - CustomIcy - HON
 
Mighty GorgonSend private messageSend e-mail to userVisit poster's website  
Back to topPage bottom
Reply with quote Download Post 
Post Re: [CUSTOMIZATION] HaoAsakura Style Template IP 1.3.0.53a 
 
Thanks a lot for charing this HaoAsakura

bookmarked this topic  
 




____________
TheSteffen
Often SEARCH is the quickest way to get support.
IcyPhoenix German Support
 
TheSteffenSend private message  
Back to topPage bottom
Post new topic  Reply to topic  Page 1 of 1
 


Display posts from previous:    

HideWas this topic useful?

Link this topic
URL
BBCode
HTML




 
Permissions List
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