Vai al contenuto
najaru

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

Recommended Posts

najaru

.

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" />

<!-- IE fixes -->

<!--[if lte IE 6]>

<style type="text/css">

#ccnt {_height:1200px;}

.post {padding:0 0 25px;}

</style>

<![endif]-->

<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

<!-- Header -->

<div id="hdr">

<!-- Search form -->

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

<!-- Logo -->

<div id="logo">

<a href="#"></a>

</div>

<!-- Slogan -->

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

<!-- Main Menu -->

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

<!-- Main Container -->

<div id="cnt">

<!-- Left Column -->

<div id="lcnt">

<!-- Left Column Section Links -->

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

<!-- Popular Posts -->

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

<!-- Wallpapers -->

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

<!-- Friends -->

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

<!-- Main - Center Column -->

<div id="ccnt">

<!-- Post -->

<div class="post">

<!-- Post Title - Permalink -->

<h2>

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

</h2>

<!-- Post Details -->

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

<!-- Post Content -->

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

<!-- Read More -->

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

</div>

<!-- Post -->

<div class="post">

<!-- Post Title - Permalink -->

<h2>

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

</h2>

<!-- Post Details -->

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

<!-- Post Content -->

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

<!-- Pagination -->

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

<!-- Center Column bottom Borders -->

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

</div>

<!-- Right Column -->

<div id="rcnt">

<!-- Additional Sections Links -->

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

<!-- RSS Box -->

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

<!-- Latest Tweets -->

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

<!-- Sponsors -->

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

<!-- Footer -->

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

<!-- DryIcons credit: Do not remove the following code if you are using this template under the DryIcons Free License Terms of Use

If you'd like to use this theme without the obligatory back-link to http://dryicons.com/ please

consider using it under the DryIcons Commercial License Terms

For details see http://dryicons.com/terms/ -->

<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]

Condividi questo messaggio


Link di questo messaggio
Condividi su altri siti
najaru

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

Condividi questo messaggio


Link di questo messaggio
Condividi su altri siti

Crea un account o accedi per lasciare un commento

You need to be a member in order to leave a comment

Crea un account

Iscriviti per un nuovo account nella nostra comunità. È facile!

Registra un nuovo account

Accedi

Sei già registrato? Accedi qui.

Accedi Ora


×