https://www.icyphoenix.com/viewtopic.php?f=36&t=7150 ----------------------------------- HaoAsakura Tue 11 May, 2010 20:30 [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 > [url=http://www.icyphoenix.com/viewforum.php?f=4]Link [hr] [align=center][b][size=18]-BEGIN... -[/size][/b][/align] 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. [hr] The "[b]common.css[/b]" is the same present in the [i]root>template>default[/i] but whit a simply variation. SEARCH: [code linenumbers=false]#content { padding: 2px 7px 5px 7px; text-align: center; }[/code] REPLACE WITH: [code linenumbers=false]#content { padding: 0px 0px 0px 0px; text-align: center; }[/code] The [b]"style_sample.css[/b]" 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 linenumbers=false]@import url("../default/common.css");[/code] REPLACE WITH: [code linenumbers=false]@import url("common.css");[/code] 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 linenumbers=false]#global-wrapper { /* width: 980px !important; clear: both; margin: 0 auto; */ }[/code] REPLACE WITH: [code linenumbers=false]#global-wrapper { width: 918px !important; clear: both; margin: 0 auto; }[/code] 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 linenumbers=false]#wrapper-inner { padding-top: 0px; padding-bottom: 0px; padding-left: 9px; padding-right: 9px; }[/code] 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 linenumbers=false]#top_logo { border: 0px solid #e8e8e8; background: #ffffff url('images/p_white/top_header.gif') repeat-x; height: 115px; }[/code] REPLACE WITH: [code linenumbers=false]#top_logo { border: 0px solid #e8e8e8; /*background: #ffffff url('images/p_white/top_header.gif') repeat-x;*/ height: 300px; }[/code] In the final part of the CSS is present the voice to manage the “column” of HaoAsakura’s style template [code linenumbers=false]/* 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] */[/code] 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. [hr] [align=center][b][size=18]- HEADER -[/size][/b][/align] 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 [i]CMS>global Block’s[/i] 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 linenumbers=false][align=center][img]/templates/haostyle/images/sample/skin/bg_header.png[/img][/align][/code] 2- Insert the image with HTML code [code linenumbers=false]
[/code] 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 linenumbers=false] {L_HOME}    {L_INDEX}    {L_NEW2}    {L_POSTS}: {L_NEW2} • {L_DISPLAY_U} • {L_DISPLAY_M} • {L_DISPLAY_P}    {L_PROFILE}    {L_SEARCH}    {L_SEARCH}    {L_FAQ}    {L_REGISTER}    {L_LOGIN_LOGOUT2} [/code] Since I’ve deleted this line of code I suggest you to active in forum , from[i]CMS > Standard Pages > Forum[/i], 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 “[b]overall_inc_body.tpl[/b]” 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 linenumbers=false]
{PRIVATE_MESSAGE_INFO}
[/code] It is changed in: [code linenumbers=false]
{PRIVATE_MESSAGE_INFO}
[/code] [hr] [align=center][b][size=18]- FOOTER -[/size][/b][/align] 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 “[b]overall_inc_footer.tpl[/b]” was modified to allow to left column to “fit” in the footer. The original TPL was [code linenumbers=false]
{tailcenter_blocks_row.CMS_BLOCK}
{tailright_blocks_row.CMS_BLOCK}
{tail_blocks_row.CMS_BLOCK}
{CMS_ACP}

{ADMIN_LINK}

{FOOTER_BANNER_BLOCK} [/code] Now it is: [code linenumbers=false] {FOOTER_BANNER_BLOCK} [/code] 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 “[b]overall_footer.tpl[/b]” 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] I ask yo to NOT remove the credits (it isn’t important in which position).[/i] [hr] [align=center][b][size=18]- CENTRAL "BLOCK"-[/size][/b][/align] 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 [u]DO NOT GO WELL AS THEY ARE![/u] 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) [i]TEMPLATE > HAOSTYLE > BLOCKS >[/i] [b]haostyle_menu_laterale_block.tpl[/b] [code linenumbers=false]
  Homepage
  Forum
[/code] 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 [i]preview[/i] 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. [i]TEMPLATE > HAOSTYLE > BLOCKS >[/i] [b]haostyle_news_block.tpl[/b] The block that you can find is a standard news_block.tpl where I’ve only imposed a width of 650px. The voice [code linenumbers=false][/code] Is changed in [code linenumbers=false]
[/code] Working on this block and on the style_?.css it’s possible to create your own news block personalized [hr] [align=center][b][size=18]- ADMIN CMS PANEL -[/size][/b][/align] You absolutely have to remove the check to the “navigation” voice from every site page and save. [hr] [align=center][b][size=18]- FORUM -[/size][/b][/align] 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. [hr] [align=center][b][size=18]- CONCLUSIONS -[/size][/b][/align] 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: [i]”nobody born “learned”, the important is the determination and the wish to do” [/i] Thanks to have chose my “style” HaoAsakura [quote][i]Thank you to have read this guide until the end.[/i][/quote] [quote][i]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[/i][/quote] ----------------------------------- spydie Wed 12 May, 2010 00:33 Re: [CUSTOMIZATION] HaoAsakura Style Template IP 1.3.0.53a ----------------------------------- Very good one HaoAsakura. bookmarked ----------------------------------- Madara Wed 12 May, 2010 03:55 Re: [CUSTOMIZATION] HaoAsakura Style Template IP 1.3.0.53a ----------------------------------- Hi [b]HaoAsakua[/b] apology a question? this guide is to make a web style how souleater.it o fmaitalia.net ? ----------------------------------- HaoAsakura Wed 12 May, 2010 06:36 Re: [CUSTOMIZATION] HaoAsakura Style Template IP 1.3.0.53a ----------------------------------- [quote user="Madara" post="48946"]Hi [b]HaoAsakua[/b] apology a question? this guide is to make a web style how souleater.it o fmaitalia.net ?[/quote] exactly :mrviolet: ----------------------------------- Madara Wed 12 May, 2010 15:29 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: [img]http://i39.tinypic.com/64i7x2.png[/img] [img]http://i43.tinypic.com/5bwcq8.png[/img] [img]http://i41.tinypic.com/2r2vqef.png[/img] [img]http://i39.tinypic.com/t890jm.png[/img] [img]http://i39.tinypic.com/21lu3bn.png[/img] ----------------------------------- HaoAsakura Wed 12 May, 2010 20:37 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 ^ ^ ----------------------------------- Mighty Gorgon Mon 17 May, 2010 22:46 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. ----------------------------------- TheSteffen Thu 20 May, 2010 12:16 Re: [CUSTOMIZATION] HaoAsakura Style Template IP 1.3.0.53a ----------------------------------- Thanks a lot for charing this [b]HaoAsakura[/b] bookmarked this topic :mricy: