Utilizzare un design CSS prelevato da un qualsiasi sito
Esempio: andiamo al sito http://tuttocss.it.gg.Clicchiamo su Entra nel sito
Come vediamo, per usufruire di tutti i template CSS, bisogna registrarsi(è gratis) il sito, puoi farlo qui.
Ora facciamo un esempio con i template disponibili al pubblico web!
Dopo aver selezionato la sezione CSS, clicchiamo sulla lista 1 (è una delle 2 a cui si può accedere senza login)..
Prendiamo in esempio il primo template della prima lista:
Andiamo a selezionare tutto il testo sopra il design di quel template, per farlo basta posizionarsi con il mouse all’inizio del codice e scendere giù fino alla fine.. dopo aver selezionato il testo sopra il design, sulla tastiera, digitiamo ctrl+c (copia)..
Dopo di che, andiamo su it.gg
• La tua scatola delle costruzioni
• Impostare design
• Dal menù a tendina, selezioniamo: “CSS-Design-Generale-non buono"
• Scendendo giù lasciamo vuoto il campo Impostazioni design
• Selezioniamo la scheda Impostazioni avanzate
• Qui nel testo sopra il design incolliamo il codice copiato precedentemente dal sito tuttocss.it.gg,
facendo ctrl+v o semplicemente, tasto destro, incolla..(fare questi passaggi con browser diverso da google chrome perché con esso non so come mai, ma non fa incollare tutto il codice)
Ritorniamo al sito tuttocss, al template di prima, qui selezioniamo il testo sotto il design (ctrl+c), andiamo nuovamente su it.gg dove abbiamo sospeso.. qui ora incolliamo il codice sotto il design..
Di norma è così solo che in questo caso non c’è il codice sotto il design! Quindi niente!
• Per il CSS-Code senza Style Tags. Andare su tuttocss copiare il codice.. andare su it.gg e incollare il codice..
Dopo aver incollato tutti e tre i codici, su it.gg clicchiamo su salva..
Andiamo nel nostro sito.
Risultato:
_________________________________________________
Ma come si creano le pagine? E come si gestiscono?
Per creare le pagine, si fa nello stesso modo di un design normale, cioè andando a modificare pagine.. per creare e modificare le pagine..
Tutto come prima..
L’unica differenza, sta nel fatto che mentre con un design standart le pagine uscivano nel design del sito automaticamente, mentre con il CSS, il nome e il link delle pagine bisogna metterli manualmente nel codice CSS..
Esempio nel nostro caso,
il codice sopra il design è questo:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Live Demo Theme </title>
| Live Demo Theme= nome del sito|quindi quest’area va personalizzata|
<meta name="generator" content="WordPress 2.7.1" /> <!-- leave this for stats -->
<link rel="stylesheet" href="http://www.isoftwarereviews.com/theme-demo/wp-content/themes/glossy-light/style.css" type="text/css" media="screen" />
<link rel="stylesheet" type="text/css" href="http://www.isoftwarereviews.com/theme-demo/wp-content/themes/glossy-light/style.css" media="screen" title="style" />
<link rel="alternate" type="application/rss+xml" title="Live Demo Theme RSS Feed" href="http://www.isoftwarereviews.com/theme-demo/feed/" />
<link rel="pingback" href="http://www.isoftwarereviews.com/theme-demo/xmlrpc.php" />
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://www.isoftwarereviews.com/theme-demo/xmlrpc.php?rsd" />
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://www.isoftwarereviews.com/theme-demo/wp-includes/wlwmanifest.xml" />
<meta name="generator" content="WordPress 2.7.1" />
<script type="text/javascript" src="http://www.isoftwarereviews.com/theme-demo/wp-content/themes/glossy-light/j-script/jquery-1.1.3.1.min.js"></script>
<script type="text/javascript" src="http://www.isoftwarereviews.com/theme-demo/wp-content/themes/glossy-light/j-script/jquery.easing.min.js"></script>
<script type="text/javascript" src="http://www.isoftwarereviews.com/theme-demo/wp-content/themes/glossy-light/j-script/jquery.lavalamp.min.js"></script>
<script type="text/javascript">
$(function() {
$("#nav").lavaLamp({
fx: "backout",
speed: 700,click: function(event, menuItem) {
return menuItem;
}
});
});
</script>
</head>
<body>
<div id="header-bg">
<div id="top-header">
<div id="header">
<div id="headerimg">
<div id="title"><a href="http://www.isoftwarereviews.com/theme-demo/">Live Demo Theme</a></div>
<div class="description">Just another WordPress weblog <form method="get" id="searchform" action="http://www.isoftwarereviews.com/theme-demo/">
<div><input type="text" value="Type and hit enter to search" name="s" id="s" onfocus="if (this.value == 'Type and hit enter to search') {this.value = ''; this.style.color='#333';}" onblur="if (this.value == '') {this.value = 'Type and hit enter to search'; this.style.color='#b0b0b0';}" />
<input type="hidden" id="searchsubmit" value="Search" />
</div>
</form>
</div>
</div>
<div id="menu"><a href="http://www.isoftwarereviews.com/theme-demo/feed/" title="Subscribe To RSS!" class="rss">RSS<span></span></a></div>
<ul id="nav"><li class="current_page_item">
<a href="http://www.isoftwarereviews.com/theme-demo" title="Home">Home</a>
</li><li class="page_item page-item-11">
<a href="http://www.isoftwarereviews.com/theme-demo/my-portfolio/" title="My Portfolio">My Portfolio</a></li>
<li class="page_item page-item-2">
<a href="http://www.isoftwarereviews.com/theme-demo/about/" title="About Me">About Me</a></li>
<li class="page_item page-item-9">
<a href="http://www.isoftwarereviews.com/theme-demo/contact-me/" title="Contact Me">Contact Me</a></li>
<li class="page_item page-item-14">
<a href="http://www.isoftwarereviews.com/theme-demo/resources/" title="Resources">Resources</a></li>
</ul>
</div>
<div id="footer-bottom">
<div id="footer-bg">
<div id="page">
<hr />
<div id="content" class="narrowcolumn">
I link colorati di rosso sono i link delle pagine.. i nomi segnati in blu sono i nomi delle Pagine
Come link delle pagine bisogna inserire il link che genera it.gg una volta che si salva la pagina..
Il link è quello che sta subito dopo “qui puoi osservare la pagina...”
Come nome delle pagine inserite quello che ritenete più opportuno voi!
Quindi sostituiamo i link e i nomi vecchi con quelli nostri..!