[TUTORIAL] Creare una pagina con un template precostruito

najaru

Inviato 14 Giugno 2010

- Condividi

Inviato 14 Giugno 2010

1) ACP -content

2) Pages, cartella asset

3) creare un nuovo file css, chiamato style.css

inserire un codice tipo questo

/assets/style
style.css
save in /assets
stylissimo css for ipb member
body {
background: url({parse block="media_url"}/header_1px.jpg) repeat-x;
margin:0px;
font-family:Verdana,Arial,Helvetica;
font-size:11px;
}
.tutorial, .showcases, .inspiration, .brushes, .photoshop, .templates, .resources, .software, .about, .contact, .faq, .terms, .advertise, .rss, .twitter, .cld, .pby, .comm {
background:url({parse block="media_url"}/sprite.jpg) no-repeat;
height:24px;
min-height:24px;
display:block;
}
.tutorial, .showcases, .inspiration, .brushes, .photoshop, .templates, .resources, .software, .about, .contact, .faq, .terms, .advertise {
line-height:24px;
}
#hdr {
margin: 0 auto;
width:1000px;
height:400px;
background: url({parse block="media_url"}/header.jpg) no-repeat;
position: relative;
z-index:5;
}
#logo {
background:url({parse block="media_url"}/logo.jpg) no-repeat;
width:188px;
height:113px;
position:relative;
top:64px;
left:406px;
}
#logo a {
width:100%;
height:100%;
display:block;
}
#search_form {
float:right;
}
.search_field{
margin: 37px 0 0 0;
width:150px;
border:0px none;
color:#837E7B;
background:#1F1A17;
}
.search_button {
width:21px;
height:21px;
border:0px none;
margin: 0 7px 0 0;
cursor: pointer;
padding:0;
background:url({parse block="media_url"}/sprite.jpg) no-repeat 0 -1410px;
}
.search_button:hover {
background-position:0 -1318px;
}
.htit {
color:#FFF;
text-align:center;
margin:62px 0 0 0;
font-size:9px;
}
#menu {
width:592px !important;
width:620px;
height:194px;
margin:30px auto;
}
#menu a {
display:block;
width:128px;
text-align: center;
font-size:18px;
color:#A1A1A1;
text-decoration:none;
padding:140px 0 0 0;
float:left;
margin:0 10px;
}
#menu a:hover {
color:#000;
}
.menu_freeb {
background: url({parse block="media_url"}/icons/download_128.png) no-repeat;
background-position:0px 4px;
}
.menu_grap {
background: url({parse block="media_url"}/icons/palette_128.png) no-repeat;
}
.menu_frm {
background: url({parse block="media_url"}/icons/comments_128.png) no-repeat;
background-position:0px 11px;
}
.menu_fnt {
background: url({parse block="media_url"}/icons/text_page_128.png) no-repeat;
background-position:0px 4px;
}
#cnt {
width:1000px;
margin:0 auto;
position:relative;
background: url({parse block="media_url"}/content.jpg) repeat-y 0 165px;
}
#lcnt {
width:180px;
float:left;
position:relative;
z-index:7;
margin: 44px 0 0 0;
}
#ccnt {
width:640px;
min-height:1200px;
height:auto;
float:left;
background: url({parse block="media_url"}/ccnt.jpg) no-repeat;
position:relative;
}
#dummy {
width:640px;
height:228px;
float:left;
background: url({parse block="media_url"}/dummy.jpg) no-repeat;
position:absolute;
bottom:0px;
}
#rcnt {
width:180px;
float:left;
position:relative;
z-index:7;
margin: 44px 0 0 0;
}
/* -- Left Side Links -- */
.pop_post {
background:url({parse block="media_url"}/sprite.jpg) no-repeat;
display:block;
min-height:24px;
}
.lslink a {
color:#A1A1A1;
text-decoration:none;
font-size:12px;
text-align:right;
padding: 0 35px 10px 0;
}
.lslink a:hover {
color:#000;
}
.tutorial {
background-position: 163px 0px;
}
.tutorial:hover {
background-position: 163px -60px;
}
.showcases {
background-position: 160px -120px;
}
.showcases:hover {
background-position: 160px -180px;
}
.inspiration {
background-position: 160px -240px;
}
.inspiration:hover {
background-position: 160px -300px;
}
.brushes {
background-position: 160px -360px;
}
.brushes:hover {
background-position: 160px -420px;
}
.photoshop {
background-position: 160px -480px;
}
.photoshop:hover {
background-position: 160px -540px;
}
.templates {
background-position: 160px -600px;
}
.templates:hover {
background-position: 160px -660px;
}
.resources {
background-position: 160px -720px;
}
.resources:hover {
background-position: 160px -780px;
}
.software {
background-position: 160px -840px;
}
.software:hover {
background-position: 160px -900px;
}
.sidetit_l, .sidetit_r {
width:145px;
color:#FAA61A;
margin:40px 0 20px;
height:22px;
background-color:#F3F4F4;
font-size:14px;
}
.sidetit_l {
text-align:right;
padding:5px 35px 0 0;
}
.sidetit_r {
text-align:left;
padding:5px 0 0 35px;
}
.pop_post {
background-position: 163px 0;
color:#A1A1A1;
text-decoration:none;
text-align:right;
padding: 0 35px 10px 0;
border-bottom: 2px dotted #EEE;
margin:0 0 10px 0;
}
.pop_post:hover {
background-position: 163px -60px;
color:#000;
}
.pop_post div {
text-align:right;
width:144px;
}
.pop_post span {
text-align:right;
margin: 0 35px 0 0;
display:block;
}
.adv {
width:180px;
height:60px;
background-color:#EEE;
text-align:center;
padding: 40px 0 0 0;
}
.adv a {
color:#A1A1A1;
font-weight:bold;
text-decoration:none;
}
.adv a:hover {
color:#000;
}
/*
.side_title img {
border:0px none;
margin:0px 0 10px 0;
}
*/
.img_link img {
border:0px none;
margin:0px 0 10px 0;
}
.friends {
background:url({parse block="media_url"}/sprite.jpg) no-repeat 159px -720px;
display:block;
height:24px;
color:#A1A1A1;
text-decoration:none;
text-align:right;
padding: 0 35px 5px 0;
line-height:20px;
}
.friends:hover {
background-position: 159px -780px;
color:#000;
}
.friends span {
float:right;
margin: 0 35px 0 0;
}
/* -- Right Side Links -- */
.rslink a {
color:#A1A1A1;
text-decoration:none;
font-size:12px;
display:block;
height:24px;
text-align:left;
padding: 0 0 10px 35px;
}
.rslink a:hover {
color:#000;
}
.rslink span {
margin: 0 0 0 35px;
}
.about {
background-position: -30px 0;
}
.about:hover {
background-position: -30px -60px;
}
.contact {
background-position: -30px -120px;
}
.contact:hover {
background-position: -30px -180px;
}
.faq {
background-position: -30px -240px;
}
.faq:hover {
background-position: -30px -300px;
}
.terms {
background-position: -30px -360px;
}
.terms:hover {
background-position: -30px -420px;
}
.advertise {
background-position: -30px -480px;
}
.advertise:hover {
background-position: -30px -540px;
}
.rss {
background-position: 0 -1474px;
height: 48px;
margin: 40px 0 0 0;
padding: 9px 0 0 56px;
}
.p_twit {
font-size:9px;
color:#000;
margin:0px 0 0 35px;
}
.p_twit span {
color:#ACACAC;
}
.p_twit a {
color:#ACACAC;
text-decoration:none;
}
.p_twit a:hover {
text-decoration: underline;
color:#000;
}
.twitter {
background-position: -30px -600px;
height:70px;
border-bottom: 2px dotted #EEE;
margin:0 0 10px 0;
}
.twitter:hover {
background-position: -30px -720px;
}
/* - Center Conteiner Style - */
.post {
width:526px;
position:relative;
z-index:117;
margin: 44px auto 0px;
border-bottom: 2px dotted #EEE;
}
.tit {
font-size:24px;
margin:0 0 10px 0;
width:426px;
font-weight:normal;
text-decoration:none;
color:#000;
}
.tit:hover {
color: #58595B;
}
.post_tit {
width:428px;
height:28px;
background-color:#EEE;
/*- IE 6 Fix -*/
overflow:hidden;
}
.post_tit span {
font-size:9px;
padding: 0px 0px 0 24px;
float:left;
color:#A1A1A1;
margin: 0 10px;
line-height:28px;
cursor:default;
}
.post_tit span:hover {
color:#000;
}
.post_tit a {
font-size:9px;
padding: 0px 0px 0 24px;
float:left;
color:#A1A1A1;
margin: 0 10px;
text-decoration:none;
line-height:28px;
}
.post_tit a:hover {
color:#000;
text-decoration:underline;
}
.cld {
background-position: 0px -957px;
}
.cld:hover {
background-position: 0px -1017px;
}
.pby {
background-position: 0px -1197px;
}
.pby:hover {
background-position: 0px -1257px;
}
.comm {
background-position: 0px -1076px;
}
.comm:hover {
background-position: 0px -1136px;
}
.ptxt {
color:#A1A1A1;
}
.more-link {
width:86px;
height:18px;
display:block;
text-decoration:none;
background-color:#FAA61A;
color:#FFF;
padding:3px 0 0 8px;
margin:18px 0 36px 0;
}
.more-link:hover {
color:#000;
}
#pagination {
position:relative;
z-index:7;
text-align:center;
font-size:11px;
margin:30px 0 0 0;
height:100px;
line-height:40px;
}
.prev {
border:1px solid #FAA61A;
color:#FAA61A;
padding:2px 3px;
}
.page_num_activ {
border:1px solid #FAA61A;
color:#FAA61A;
padding:2px 5px;
}
.page_num {
background-color:#DEDEDC;
color:#000;
padding:2px 5px;
border:1px solid #DEDEDC;
text-decoration:none;
}
.page_num:hover {
background-color: #FAA61A;
border-color: #FAA61A;
}
.next {
background-color: #FAA61A;
border:1px solid #FAA61A;
color:#FFF;
padding:2px 3px;
text-decoration:none;
}
.next:hover {
color:#000;
}
/* -- Footer Style -- */
#foo {
width:100%;
height:63px;
background: url({parse block="media_url"}/fbg.jpg) repeat-x;
}
#foot_menu {
width:1000px;
height:63px;
margin:0px auto;
position:relative;
background: url({parse block="media_url"}/footer.jpg) no-repeat;
}
#f_menu {
height:63px;
width:296px !important;
width:340px;
position:absolute;
left:50%;
top: 0;
margin:0 0 0 -148px !important;
margin:0 0 0 -170px;
text-align:center;
}
#f_menu a {
display:block;
float:left;
width:48px;
text-align: center;
font-size:9px;
color:#808285;
text-decoration:none;
padding:43px 0 0 0;
margin:0 13px;
}
#f_menu a:hover {
color:#000;
}
.f_freeb {
background: url({parse block="media_url"}/icons/download_48.png) no-repeat;
background-position:0px -4px;
}
.f_grap {
background: url{parse block="media_url"}/icons/palette_48.png) no-repeat;
background-position:0px -4px;
}
.f_frm {
background: url{parse block="media_url"}/icons/comments_48.png) no-repeat;
background-position:0px 0px;
}
.f_fnt {
background: url({parse block="media_url"}/icons/text_page_48.png) no-repeat;
background-position:0px -4px;
}
.f_left {
position:absolute;
padding:30px 0 0;
font-size:9px;
color:#808285;
}
.f_rght {
position:absolute;
right: 0;
padding:30px 135px 20px 0;
font-size:9px;
color:#808285;
text-decoration:none;
}
.f_rght:hover {
color:#000;
}
/* -- Comments -- */
.comments {
width:526px;
padding:25px 57px 56px;
z-index:7;
position:relative;
}
.cmnt_hdr {
margin:44px 0 0 56px;
font-weight: normal;
font-size:20px;
}
.comment {
width:526px;
margin:20px 0;
}
.comment_header {
background-color: #eee;
width:100%;
height:42px;
margin: 0px;
padding: 3px 0 0;
font-size:12px;
}
.comment_header p {
margin:10px 0 0 26px;
font-weight:bold;
}
.comment_header span {
color:#838280;
}
.comment_time {
font-size:10px;
margin:0 0 0 26px;
}
.avatarcnt {
margin:-57px 0px 0 424px;
width:70px;
height:70px;
padding:8px;
position:absolute;
border: 1px solid #EEEEEE;
background-color: #FFFFFF;
}
.comment_text {
min-height:42px;
padding: 10px 0 0 26px;
margin:0px;
color:#A1A1A1;
width:395px;
}
#cmntfrm {
margin: 20px 0 0;
}
#cmntfrm fieldset {
border: 1px solid #EEE;
padding:25px;
}
#cmntfrm span {
color:#FAA61A;
}
#cmntfrm input {
border:0px none;
background-color:#F3F4F4;
height:21px;
width:203px;
margin: 0 10px 0 0;
padding:5px 0 0 5px;
}
#cmntfrm textarea {
border:0px none;
background-color:#F3F4F4;
padding:5px 0 0 3px;
}
#cmntfrm #submit {
float:right;
width:130px;
height:27px;
background-color:#A9A9A9;
color:#FFFFFF;
font-weight:bold;
cursor:pointer;
padding:0px;
}
#cmntfrm #submit:hover {
color:#000000;
}
.pyct {
font-size:14px;
font-weight:bold;
background-color:#FAA61A;
color:#FFF;
padding:7px;
}
.aptxt {
color:#A1A1A1;
margin:0 0 70px 0;
}

NOTA: sono da cambiare tutti gli URL(image/...jpg) conURL({parse block="media_url"}/...jpg) come anche /images/icons/...jpg in URL({parse block="media_url"}/icons/...jpg)

4) In Template, creare un nuovo template chiamato ad esempio stylissimo

stylissimo
stylissimo
stylissimo template for ipb member
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR...ransitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta content="true" name="mssmarttagspreventparsing" />
<meta http-equiv="imagetoolbar" content="no" />
<title>Stylissimo Template</title>
<link rel="stylesheet" type="text/css" media="screen" href="{$this->settings['base_url']} app=ccs&module=pages&section=pages&folder=assets&page=style.css" />


<script type="text/javascript">
/*
* Simple JS function for setting the search value
*/
function clS(t){
var srch = document.getElementById('s'), val = srch.value.toString().toLowerCase(), re = /^\s+$/;
if(t) {
if(val == 'search...' || val == 'search'){
srch.value = '';
}
} else {
if(val == 'search...' || val == 'search' || val == '' || re.test(val)) {
srch.value = 'search...';
}
}
}
</script>
</head>
{ccs special_tag="page_content"}

NOTA: cambiare il link al file esterno css con quello attuale <link rel="stylesheet" type="text/css" media="screen" href="{$this->settings['base_url']} app=ccs&module=pages&section=pages&folder=assets&page=style.css" />

Meglio lasciare cosi i java

5) Scegliere Pages, e creare una nuova pagina chiamata index_stylissimo

/index_stylissimo.html
index_stylissimo
index_stylissimo.html
save in /
stylissimo html for ipb member
raw html
template: stylissimo
edit page content only
Use IPB Wrapper: yes

<div id="hdr">

<form id="search_form" action="" method="get">
<input class="search_field" type="text" value="search..." onfocus="clS(1);" onblur="clS(0);" name="s" id="s" />
<input class="search_button" type="submit" value="" id="searchsubmit" />
</form>

<div id="logo">
<a href="#"></a>
</div>

<p class="htit">f r e e w e b t e m p l a t e b y d r y i c o n s</p>

<div id="menu">
<a class="menu_freeb" href="#">Freebies</a>
<a class="menu_grap" href="#">Graphics</a>
<a class="menu_frm" href="#">Forum</a>
<a class="menu_fnt" href="#">Fonts</a>
</div>
</div>

<div id="cnt">

<div id="lcnt">

<div class="lslink">
<a class="tutorial" href="#">Tutorials</a>
<a class="showcases" href="#">Showcases</a>
<a class="inspiration" href="#">Inspiration</a>
<a class="brushes" href="#">Brushes</a>
<a class="photoshop" href="#">Photoshop</a>
<a class="templates" href="#">Templates</a>
<a class="resources" href="#">Resources</a>
<a class="software" href="#">Software</a>
</div>

<h3 class="sidetit_l">Popular posts</h3>
<a class="pop_post" href="#">Logo Design Process Tutorial</a>
<a class="pop_post" href="#">Great use of pop music in great films</a>
<a class="pop_post" href="#">Icon design tutorial: How to make a Calendar icon</a>
<a class="pop_post" href="#">DryIcons.com 2.0</a>
<a class="pop_post" href="#">1st Anniversary and Graphics Giveaway Winners</a>
<a class="pop_post" href="#">Smashing Magazine and DryIcons collaboration</a>

<h3 class="sidetit_l">Wallpapers</h3>
<a class="img_link" href="http://dryicons.com/free-graphics/"><img src="{parse block="media_url"}/wallpaper.jpg" /></a>

<h3 class="sidetit_l">Friends</h3>
<a class="friends" href="http://dryicons.com/about/#orchida">Orchida</a>
<a class="friends" href="http://dryicons.com/about/#designair">DesignAir</a>
<a class="friends" href="http://dryicons.com/about/#vssr">V.S.S.R.</a>
<a class="friends" href="http://dryicons.com/about/#decoder">Decoder</a>
</div>

<div id="ccnt">

<div class="post">

<h2>
<a class="tit" href="#">Logo Design Process Tutorial</a>
</h2>

<div class="post_tit">
<span class="cld">February 28th, 2009</span>
<span class="pby">Posted by: Designer</span>
<a class="comm" href="#">22 comments</a>
</div>

<img src="{parse block="media_url"}/tutorial_index.jpg" />
<p class="ptxt">
<b>Introduction</b><br /><br />
One of the main aspects of the branding process includes logo development. Your logo, or brand mark, in other words, needs to reflect your brand accurately, as it will play a huge role in your brand recognition. This however doesn't mean that the branding process ends when you've developed your logo, branding takes a lot of time, commitment, managing skills and finally, the ability to reflect the image you want others to have of you and your business
<br />
This tutorial is intended to benefit both our potential clients, so they can have a fully comprehensive overview of our logo design process and methods; and many of our users, interested in the process of designing and developing a logo.
<br />
For the purpose of this tutorial, we're going to design and develop a logo for an imaginary company, called "LTD", short from Logo Tutorial by DryIcons.
</p>

<a class="more-link" href="#">Read more...</a>
</div>

<div class="post">

<h2>
<a class="tit" href="#">Icon design tutorial: How to make a Calendar icon</a>
</h2>

<div class="post_tit">
<span class="cld">February 28th, 2009</span>
<span class="pby">Posted by: Designer</span>
<a class="comm" href="#">22 comments</a>
</div>

<img src="{parse block="media_url"}/final_icon.jpg" />
<p class="ptxt">
In the past few weeks we have received several e-mails from different users in which they were asking us if we could share a few tips regarding icon development. This tutorial is our reply to those users and a small contribution to all of you out there interested in icon development.
</p>
<a class="more-link" href="#">Read more...</a>
</div>

<div id="pagination">
<span class="prev">« Prev</span>
<span class="page_num_activ">1</span>
<a class="page_num" href="#">2</a>
<a class="page_num" href="#">3</a>
<a class="page_num" href="#">4</a>
<a class="next" href="#">Next »</a>
</div>

<div id="dummy"></div>
</div>

<div id="rcnt">

<div class="rslink">
<a class="about" href="#">About Us</a>
<a class="contact" href="#">Contact</a>
<a class="faq" href="#">FAQ</a>
<a class="terms" href="#">Terms of Use</a>
<a class="advertise" href="#">Advertise</a>
</div>

<a href="http://feeds.feedbur...onsFreeGraphics" class="rss"><img height="26" width="88" alt="" style="border: 0pt none ;" src="http://feeds.feedburner.com/~fc/DryIconsFreeGraphics?bg=DEDEDC&fg=444444&anim=0"/></a>

<h3 class="sidetit_r">Latest Tweets</h3>
<div class="twitter">
<p class="p_twit">
<span>@Wed 13 May, 2009 16:23</span>
Frame Swirl: 06 May, 2009Frame Swirl Vector Graphic
<a href="http://tinyurl.com/ctj47o">http://tinyurl.com/ctj47o</a>
</p>
</div>
<div class="twitter">
<p class="p_twit">
<span>@Wed 13 May, 2009 16:23</span>
Frame Swirl: 06 May, 2009Frame Swirl Vector Graphic
<a href="http://tinyurl.com/ctj47o">http://tinyurl.com/ctj47o</a>
</p>
</div>
<div class="twitter">
<p class="p_twit">
<span>@Wed 13 May, 2009 16:23</span>
Frame Swirl: 06 May, 2009Frame Swirl Vector Graphic
<a href="http://tinyurl.com/ctj47o">http://tinyurl.com/ctj47o</a>
</p>
</div>
<div class="twitter">
<p class="p_twit">
<span>@Wed 13 May, 2009 16:23</span>
Frame Swirl: 06 May, 2009Frame Swirl Vector Graphic
<a href="http://tinyurl.com/ctj47o">http://tinyurl.com/ctj47o</a>
</p>
</div>

<h3 class="sidetit_r">Sponsors</h3>
<a class="img_link" target="_blank" href="http://dryicons.com"><img src="{parse block="media_url"}/dryicons_banner.jpg" /></a><br />
<div class="adv">
<a class="img_link" href="#">advertise here</a>
</div>
</div>
<br style="clear:both;"/>
</div>

<div id="foo">
<div id="foot_menu">
<div id="f_menu">
<a class="f_freeb" href="#">Freebies</a>
<a class="f_grap" href="#">Graphics</a>
<a class="f_frm" href="#">Forum</a>
<a class="f_fnt" href="#">Fonts</a>
</div>
<span class="f_left">© 2009 Stylissimo. All rights reserved.</span>

<a class="f_rght" href="http://dryicons.com/" title="Stylissimo Template and Icons provided by DryIcons.com">Template and Icons by DryIcons.com</a>
</div>
</div>

NOTA: usare {parse block="media_url"} per sostituire /image/..jpg

6) caricare le immagini nella cartella /www.site.com/ccs_files mantenerla nella cartella asset

[source] InvisionNutCase [/source]

Link al commento

Condividi su altri siti

Domanda

2 risposte a questa domanda

Messaggi raccomandati

Mikelito

Inviato 29 Giugno 2010

Ottima mi può ritornare inutile :sisi:

Autore

nella versione attuale del content c'è già una pagina stile CMS classico precostruita. Non mi esalta moltissimo ma è comunque buona (diciamo sulla falsariga di quella base di joomla con un articolo in alto largo a tutta colonna e gli altri sotto in due colonne).

il vantaggio è che se uno ci sa lavorare bene può personalizzarla a piacere

Crea un account o accedi per lasciare un commento

Devi essere un membro per lasciare un commento

Crea un account

Iscriviti per un nuovo account nella nostra community. È facile!

Registra un nuovo account

Accedi

Sei già registrato? Accedi qui.

Accedi Ora

Seguaci 0

Accedi

3.x [TUTORIAL] Creare una pagina con un template precostruito

Domanda

najaru

Link al commento

Condividi su altri siti

2 risposte a questa domanda

Messaggi raccomandati

Mikelito

Link al commento

Condividi su altri siti

najaru

Link al commento

Condividi su altri siti

Crea un account o accedi per lasciare un commento

Crea un account

Accedi

Chi sta navigando 0 utenti

Annunci

Browse

Download

Informazioni importanti