RISOLTO come creo uno sfondo tipo "foglio"?

[stefen]

da questo sito di riferimento vorrei imitare lo sfondo
quello che mi interessa soprattutto è come fare la pagina bianca su cui si sviluppa tutto il contenuto, quella centrale
immagino che il colore dei bordi esterni sia sulla proprieta body..
poi si mi piacerebbe anche capire come inserire le barre orizzontali, tipo la blu, che immagino sia uno sfondo fatto con immagine, ma non saprei come fare a posizionarlo
un po complicato..per me..
ma voglio cominciare  a poter avere piu controllo sul css/php

il sito è questo

http://www.psicologi-psicoterapeuti.it/

o magari se potete indicarmi dei template/php pronti da poter analizzare e capire come si fa!
grazie

[adottauncane]

Ciao stefan,
per sapere tutto sui css del template del sito postato devi scaricarti Firebug per Firefox.
Qui il video tutorial
http://www.joomla.it/guide-e-video-guide/video-guide/3645-utilizzare-firebug-con-il-proprio-sito-joomla.html
qui un utilissimo articolo di tonicopi
http://www.joomla.it/articoli-della-community/797-tre-moschettieri-al-servizio-di-joomla.html
e qui lo scarichi
https://addons.mozilla.org/it/firefox/search?q=firebug&cat=all&as=1&appid=1&lver=3.6&atype=0&pp=20&pid=3&sort=weeklydownloads&lup=
Potrai provare le modifiche direttamente da Firefox e poi riportarle sul file template.css

Per analizzare il php di un template scaricatene uno che ti piaccia come impostazione/posizioni.

Quello che hai postato non credo sia fatto in Joomla però... (Ma i css li puoi vedere ugualmente).

[stefen]

si grazie--firebug lo conoscevo, il problema è che poi quel sito non è joomla..e mi viene difficile riportare le cose..almeno al momento mi sembra cosi..sto cercando di racapezzarmi..

[adottauncane]

Però di template per Joomla molto simili a quello ce ne sono tantissimi. Non puoi semplicemente prenderne uno simile? Poi lo personalizzi come ti serve...

[stefen]

si forse..ma ormai sto stravolgendo questo...mi servira per capire meglio il css
ora per esempio sto riuscendo a creare i spazi colori dando colori diversi ai diversi moduli
esiste la possibilita di dare un colore al bordo del modulo?
il background intenro magari bianco e il controno una linea sottile blu?

[adottauncane]

Questo quale? 

[stefen]

questo sul mi sito..che sto rimettendo online

Codice: [Seleziona]

body {
margin: 0px;
padding:0px;
background:#1F6BB2;
}
body, td, th {
font-family: Verdana,Arial, Helvetica, sans-serif;
font-size: 14px;
color: #1F6BB2;
line-height: 160%;
}
h1, h4, h5, h6 {
font-size: 12px;
color: #fff;
font-weight: normal;
}
h4 {
font-size: 12px;
font-weight: bold;
margin: 0;
padding: 0;
color: #FF9900;
margin-left: 2px;
}
h2 {
color: #1F6BB2;
font-weight: normal;
font-size: 20px;
         margin:0;
padding:0;
font-family: Verdana, Arial, Helvetica, sans-serif;
line-height: 32px;
}
h3 {
color: #990000;
font-weight: normal;
font-size: 12px;
text-transform: none;
margin-bottom: 10px;
padding-top: 0;
margin-top: 0;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
a {
color: #204b95;
}
a:hover {
color: #10aae3;
}
a:active {
background-color: #E9a616;
}

.container {
width: 950px;
margin: 0 auto;
background: #ffffff;
}

#contentarea {-moz-background-clip:border;-moz-background-inline-policy:continuous;-moz-background-origin:padding;background:#ffffff none repeat scroll 0 0;clear:left;float:left;height:300px;margin-top:0;padding-bottom:20px;width:760px; transparent overflow:auto;}


#top {
width: 100%;
height: 70px;
}
#top-cover {
width: 950px;
margin: 0 auto;
}
#logo {
width: 950px;
float: left;
margin-top: 20px;
margin-left: 00px;
background:#ffffff;
}
#header {
width: 950px;
float: left;
display: inline-block;
margin-bottom: 10px;
}
#content {
width: 705px;
float: left;
margin-top: 0px;
margin-left: 20px;
}
#content2 {
width: 800px;
float: left;
margin-top: 20px;
margin-left: 20px;
}
#right {
width: 255px;
float: right;
padding-bottom: 70px;
margin-top: 20px;
color: #666;
margin-right:15px;
}
#right .moduletable {
margin-bottom: 20px;
}
#bottom {
width: 950px;
clear: left;
float: left;
color: #666;
background:#ffffff;
padding:0 0 20px;
}
#right h3, #bottom h3 {
margin: 0px;
font-weight: bold;
color: #1F6BB2;
font-size: 18px;
font-family: Verdana, "Trebuchet MS", Tahoma, Arial, Helvetica, Sans-serif;
border-bottom:5px solid #242424;
padding:0 0 5px 0;
}

#right_div {
background:#ffffff;
 float: right;
position:relative;left:0px !important;top:0px !important;
font-size: 14px;
 width:190px;
 height:320px;
text-decoration:none;
!margin-right:80;
}

#right_div a {

         font-size: 18px;
         font-weight: bold;
         text-decoration: none;
                   
}
#right_div li {
list-style: none;
list-style-image: none;
text-transform: none;
}

         
a:hover {
color: #10aae3;
}
a:active {
background-color: #E9a616;
}

#user1 {
width: 300px;
         float:left;   
margin-left: 5px;
         
}
#user1 .moduletable {
margin-bottom: 5px;
padding-bottom: 5px;
}
#user1 p {
margin: 0;
padding: 0;
margin-left: 0px;
}
#user1 a {

         font-size: 18px;
         font-weight: bold;
         text-decoration: none;
                   
}
#user1 li {
list-style: none;
list-style-image: none;
text-transform: none;
         line-height: 90px;
      list-style-position: outside;list-style-type: none;width: 285px; <---- aggiungi
        }

#user2 {
width: 120px;
float:left;
margin-left: -30px;
}
#user2 li {
list-style: none;
list-style-image: none;
text-transform: none;
         line-height: 90px;
         list-style-position: outside;
         list-style-type: none;
         width: 2000px; <---- aggiungi

}

#user2 a {
margin-left: 2px;
font-size: 18px;
         font-weight: bold;
         text-decoration: none;
}
#user3 {
width: 285px;
float: right;
margin-right: 120px;
}
#user3 a {
font-size: 18px;
         font-weight: bold;
         text-decoration: none;
}
#user3 li {
list-style: none;
list-style-image: none;
text-transform: none;
         line-height: 90px;
list-style-position: outside;list-style-type: none;width: 285px; <---- aggiungi

}

#footer {
clear: left;
float: left;
width: 950px;
text-align: left;
font-size: 9px;
padding: 10px 0 30px 10px;
color: #666;
}
#footer a {
color: #666;
}
#footer .moduletable {
width: 880px;
margin: 0 auto;
margin-top: 3px;
}
h2.contentheading, h2.componentheading {
margin-bottom: 20px;
margin-top: 10px;
}
.clear {
clear: both;
}
/* COMMON TAGS */
.modifydate {
color: #C0C0C0;
}
.author {
color: #C0C0C0;
}
.createdate {
color: #C0C0C0;
}
.contenttoc {
margin: 5px;
}
ul {
margin: 2px;
padding: 6px;
padding-left: 15px;
}
li {
padding-left: 1px;
line-height: 150%;
}
ul.arrow1 li, ul.arrow2 li {
padding-left: 5px;
padding-bottom: 2px;
padding-top: 2px;
}
.buttons {
float:right;
width:85px;
}
.buttons .buttonheading {
float:left;
}
.buttons img {
border: 0;
}
fieldset {
border: none;
}
textarea, input {
border: solid 1px #ccc;
color: #666;
}
.button {
background: none;
border: solid 1px #ccc;
color: #990000;
}
/* Poll Module Styles */

.poll-radio {
padding:0;
float:left;
clear:left;
text-align:left;
}
.poll-option {
float:left;
padding-bottom:6px;
padding-top: 3px;
width:85%;
margin-left: 2px;
}
.poll h3 {
border:none;
}
.author, .createdate, .modifydate, .buttons {
display:none
}
#topmenu {
float: right;
width:950px;
height: 38px;
margin-top:10px;
margin-right: 220px;
}
#topmenu ul {
list-style: none;
margin: 0;
padding: 0;
margin-left: -11px;
float: right;
}
#topmenu li {
list-style: none;
float: left;
font-weight: bold;
font-size: 20px;
padding-right: 22px;
padding-left: 20px;
padding-top: 2px;
line-height: 26px;
font-family: Verdana, Candara, Arial, Helvetica, sans-serif;
}
#topmenu li a {
display: block;
padding: 0;
font-weight: bold;
text-decoration: none;
color: #FFFFFF;
}
#topmenu li:hover, #topmenu li.hover {
position: static;
}
#topmenu li a:hover, #topmenu li.active a {
color: #10aae3;
background-position: center;
}
html>body #topmenu li a {
width: auto;
}
.spotlight {
padding:7px 0px 0px 7px;
}

img { border:none;}
per esempio vorrei creare un bordo su
#topmenu
o su #right_div

[adottauncane]

Un link al sito è meglio...

[stefen]

http://www.stefanocapasso.net/paganitest/

allora ci sono 3 cose che vorrei chiederti
1) il bordo per esempio del topmenu..lo fare bianco cosi che riprenda il biango del logo e del quadratocentrale
2 sulla destra c'è il right_div con un menu a due voci, è possibile distanziarle che cosi sono attaccate?
3 voglio spostare il contenuto degli articoli in basso e non piu nel riquadro centrale com'era prima.
quindi hi spostato #content sotto il footer..ed effettivamente va..(non l'ho ancora definito come colori e posizioni.pero il problema è che sparisce l'immagine che c'è nella home..io vorrei che rimanesse

Codice: [Seleziona]

<?php
// no direct access
defined( '_JEXEC' ) or die( 'Restricted access' );
$siteName = $this->params->get('siteName');
class tjC {
function isFrontPage(){
return (JRequest::getCmd('option')=='com_content' && !JRequest::getInt('id'));
}
}
$TJ = new tjC($this);
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--
Design by ThemesJoomla.com
http://www.themesjoomla.com
Released for free under a Creative Commons Attribution 2.5 License
-->
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >
<head>
<jdoc:include type="head" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/template_css.css" type="text/css" />
</head>
<body>
<div id="top">
  <div id="top-cover">
    <div id="logo"><a href="<?php echo $this->baseurl ?>" title="<?php echo $siteName; ?>"><img src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/images/logo.png" border="0" alt="<?php echo $siteName; ?>" /></a></div>
    <div id="topmenu">
      <jdoc:include type="modules" name="mymainmenu"  style="xhtmlxtd" />
    </div>
  </div>
</div>
<div class="container">
  <div id="contentarea">
    <?php if(!$TJ->isFrontPage()) { ?>
   
    <div id="right">
      <jdoc:include type="modules" name="myright"  style="xhtml" />
    </div>
    <?php } else { ?>
    <div class="spotlight"><img src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/images/spotlight.jpg" border="0" alt=" " />
      <jdoc:include type="modules" name="myspotlight"  style="xhtmlxtd" />
    </div>
    <?php } ?>
  </div>
<?php /*Aggiungo la nuova posizione modulo */?>                                       
    <?php if ($this->countModules('dxnew')) : ?>
      <div id="right_div">
        <jdoc:include type="modules" name="dxnew" style="xhtml" />
      </div>
   <?php endif; ?>
 



  <div id="bottom">
<p></p>
<p></p>
    <div id="user1">
      <jdoc:include type="modules" name="myuser1"  style="xhtml" />
    </div>
    <div id="user2">
      <jdoc:include type="modules" name="myuser2"  style="xhtml" />
    </div>
    <div id="user3">
      <jdoc:include type="modules" name="myuser3"  style="xhtml" />
    </div>
  </div>
  <div id="footer">
    <jdoc:include type="modules" name="myfooter"  style="xhtml" />
    <p>Copyright &copy; <?php echo $siteName; ?>. All Rights Reserved. <?php echo JText::_('Powered by') ?> <a href="http://www.joomla.org">Joomla!</a>. <?php echo JText::_('Valid') ?> <a href="http://validator.w3.org/check/referer">XHTML</a> <?php echo JText::_('and') ?> <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a>.
      <!-- You CAN NOT remove (or unreadable) those links without permission. Removing the link and template sponsor Please visit themesjoomla.com or contact with e-mail (webmaster@themesjoomla.com) If you don't want to link back to themesjoomla.com, you can always pay a link removal donation. This will allow you to use the template link free on one domain name. Also, kindly send me the site's url so I can include it on my list of verified users . Please read license.txt -->
      <br />
      <a href="http://www.themesjoomla.com" rel="follow">Joomla Themes</a> by <a  rel="follow" href="http://www.themesjoomla.com"><strong>themesjoomla.com</strong></a></p>
  </div>
</div>
<div id="content">
      <jdoc:include type="message" />
      <jdoc:include type="component" style="xhtml"/>
    </div>
<jdoc:include type="modules" name="debug" />
</body>
</html>

Codice: [Seleziona]

body {
margin: 0px;
padding:0px;
background:#1F6BB2;
}
body, td, th {
font-family: Verdana,Arial, Helvetica, sans-serif;
font-size: 14px;
color: #1F6BB2;
line-height: 160%;
}
h1, h4, h5, h6 {
font-size: 12px;
color: #fff;
font-weight: normal;
}
h4 {
font-size: 12px;
font-weight: bold;
margin: 0;
padding: 0;
color: #FF9900;
margin-left: 2px;
}
h2 {
color: #1F6BB2;
font-weight: normal;
font-size: 20px;
         margin:0;
padding:0;
font-family: Verdana, Arial, Helvetica, sans-serif;
line-height: 32px;
}
h3 {
color: #990000;
font-weight: normal;
font-size: 12px;
text-transform: none;
margin-bottom: 10px;
padding-top: 0;
margin-top: 0;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
a {
color: #204b95;
}
a:hover {
color: #10aae3;
}
a:active {
background-color: #E9a616;
}

.container {
width: 950px;
margin: 0 auto;
background: #ffffff;
}

#contentarea {-moz-background-clip:border;-moz-background-inline-policy:continuous;-moz-background-origin:padding;background:#ffffff none repeat scroll 0 0;clear:left;float:left;height:300px;margin-top:0;padding-bottom:20px;width:760px; transparent overflow:auto;}


#top {
width: 100%;
height: 70px;
}
#top-cover {
width: 950px;
margin: 0 auto;
}
#logo {
width: 950px;
float: left;
margin-top: 20px;
margin-left: 00px;
background:#ffffff;
}
#header {
width: 950px;
float: left;
display: inline-block;
margin-bottom: 10px;
}
#content {
width: 705px;
float: left;
margin-top: 0px;
margin-left: 20px;
}
#content2 {
width: 800px;
float: left;
margin-top: 20px;
margin-left: 20px;
}
#right {
width: 255px;
float: right;
padding-bottom: 70px;
margin-top: 20px;
color: #666;
margin-right:15px;
}
#right .moduletable {
margin-bottom: 20px;
}
#bottom {
width: 950px;
clear: left;
float: left;
color: #666;
background:#ffffff;
padding:0 0 20px;
height:107px;
}
#right h3, #bottom h3 {
margin: 0px;
font-weight: bold;
color: #1F6BB2;
font-size: 18px;
font-family: Verdana, "Trebuchet MS", Tahoma, Arial, Helvetica, Sans-serif;
border-bottom:5px solid #242424;
padding:0 0 5px 0;
}

#right_div {
background:#ffffff;
 float: right;
position:relative;left:0px !important;top:0px !important;
font-size: 14px;
 width:190px;
 height:320px;
text-decoration:none;
!margin-right:80;
}

#right_div a {

         font-size: 18px;
         font-weight: bold;
         text-decoration: none;
                   
}
#right_div li {
list-style: none;
list-style-image: none;
text-transform: none;
width: 360px;
line-height:50px;
}

         
a:hover {
color: #10aae3;
}
a:active {
background-color: #E9a616;
}

#user1 {
width: 300px;
         float:left;   
margin-left: 5px;
         
}
#user1 .moduletable {
margin-bottom: 5px;
padding-bottom: 5px;
}
#user1 p {
margin: 0;
padding: 0;
margin-left: 0px;
}
#user1 a {

         font-size: 18px;
         font-weight: bold;
         text-decoration: none;
                   
}
#user1 li {
list-style: none;
list-style-image: none;
text-transform: none;
         line-height: 90px;
      list-style-position: outside;list-style-type: none;width: 285px; <---- aggiungi
        }

#user2 {
width: 120px;
float:left;
margin-left: -30px;
}
#user2 li {
list-style: none;
list-style-image: none;
text-transform: none;
         line-height: 90px;
         list-style-position: outside;
         list-style-type: none;
         width: 2000px; <---- aggiungi

}

#user2 a {
margin-left: 2px;
font-size: 18px;
         font-weight: bold;
         text-decoration: none;
}
#user3 {
width: 285px;
float: right;
margin-right: 120px;
}
#user3 a {
font-size: 18px;
         font-weight: bold;
         text-decoration: none;
}
#user3 li {
list-style: none;
list-style-image: none;
text-transform: none;
         line-height: 90px;
list-style-position: outside;list-style-type: none;width: 285px; <---- aggiungi

}

#footer {
clear: left;
float: left;
width: 950px;
text-align: left;
font-size: 9px;
padding: 10px 0 30px 10px;
color: #666;
}
#footer a {
color: #666;
}
#footer .moduletable {
width: 880px;
margin: 0 auto;
margin-top: 3px;
}
h2.contentheading, h2.componentheading {
margin-bottom: 20px;
margin-top: 10px;
}
.clear {
clear: both;
}
/* COMMON TAGS */
.modifydate {
color: #C0C0C0;
}
.author {
color: #C0C0C0;
}
.createdate {
color: #C0C0C0;
}
.contenttoc {
margin: 5px;
}
ul {
margin: 2px;
padding: 6px;
padding-left: 15px;
}
li {
padding-left: 1px;
line-height: 150%;
}
ul.arrow1 li, ul.arrow2 li {
padding-left: 5px;
padding-bottom: 2px;
padding-top: 2px;
}
.buttons {
float:right;
width:85px;
}
.buttons .buttonheading {
float:left;
}
.buttons img {
border: 0;
}
fieldset {
border: none;
}
textarea, input {
border: solid 1px #ccc;
color: #666;
}
.button {
background: none;
border: solid 1px #ccc;
color: #990000;
}
/* Poll Module Styles */

.poll-radio {
padding:0;
float:left;
clear:left;
text-align:left;
}
.poll-option {
float:left;
padding-bottom:6px;
padding-top: 3px;
width:85%;
margin-left: 2px;
}
.poll h3 {
border:none;
}
.author, .createdate, .modifydate, .buttons {
display:none
}
#topmenu {
float: right;
width:950px;
height: 38px;
margin-top:10px;
margin-right: 220px;
}
#topmenu ul {
list-style: none;
margin: 0;
padding: 0;
margin-left: -11px;
float: right;
}
#topmenu li {
list-style: none;
float: left;
font-weight: bold;
font-size: 20px;
padding-right: 22px;
padding-left: 20px;
padding-top: 2px;
line-height: 26px;
font-family: Verdana, Candara, Arial, Helvetica, sans-serif;
}
#topmenu li a {
display: block;
padding: 0;
font-weight: bold;
text-decoration: none;
color: #FFFFFF;
}
#topmenu li:hover, #topmenu li.hover {
position: static;
}
#topmenu li a:hover, #topmenu li.active a {
color: #10aae3;
background-position: center;
}
html>body #topmenu li a {
width: auto;
}
.spotlight {
padding:7px 0px 0px 7px;
}

img { border:none;}

[stefen]

oh oh..mi sono accorto di un problema
non so xchè ma si crea una barrradi scorrimento orizzontale..il foglio è diventato larghissimo..non capisco come



edit: ho trovato lo 0 in piu..questo problema è a posto!

[adottauncane]

Hai cambiato un po' di cose...  L'unica che è ancora com'era sono i sue menù a lato. Se sono inseriti in una tabella in un modulo HTML personalizzato, inserisci una righa in mezzo con una altezza fissa.

La parte sotto però ha una posizione fissa. Quindi, a seconda della risoluzione, si sposta a destra o isnistra e non rimane incolonnata al resto.

[stefen]

si..cambiamenti!
ho inserito un immagine background, che  occupa mezza pagina, ha il grigio superiore il bianco , la barra blu e ancora dle bianco sotto
ora sto cercando di far coincider ele posizioni dei moduli col background
il problema è che non riesco a spostare in basso il riquadro centrale
#contentarea cambio il parametro margin top..ma non si muove nulla perchè?

non capisco come inserire la riga in mezzo, il modulo si è personalizzato, l'ho creato io #right_div

per la parte sotto si..si sposta come fare?

[stefen]

allora ho risolto qualcosa
rimane una cosa importante
la colonna destra...

Codice: [Seleziona]

#right_div {
background:#ffffff;
 float: right;
position:relative;left:0px !important;top:25px !important;
font-size: 14px;
 width:190px;
 height:320px;
text-decoration:none;
!margin-right:80;
}

#right_div a {

         font-size: 18px;
         font-weight: bold;
         text-decoration: none;
                   
}
#right_div li {
list-style: none;
list-style-image: none;
text-transform: none;
width: 120px;
line-height:50px;
}



Codice: [Seleziona]

<?php /*Aggiungo la nuova posizione modulo */?>                                       
    <?php if ($this->countModules('dxnew')) : ?>
      <div id="right_div">
        <jdoc:include type="modules" name="dxnew" style="xhtml" />
      </div>
   <?php endif; ?>


questo è il codice relativo...


poi rimane un altro problema..quando appaiono le barre di scorrimento verticali,(secondo qui del contenuto di content..sembra spostarsi un po tutto..
infine un altra cosa...
l'immagine di sfondo finisce col grigio..il bianco non c'è..come posso far cambiare colore a quel bianco?
nelle proprieta di body cè settato sia il color che image...ma il color non ha ffetto evidentemente..

a parte questo come ti sembra ora il sito?
non so ancora come impostare la parte grafica del content..vorrei che riprendesse l'immagine di background sopra...ma se la faccio ripetere in verticalemisa che viene fguori un casino

[adottauncane]

Per la colonna di destra ti ho già risposto... i due menù sono inseriti in una tabella? Oppure sono uno sotto l'altro? Nel primo caso aggiungi una riga alla tabella in mezzo e dai un'altezza fissa. Nel secondo forse bastano gli a capo. Per il resto mi sa che hai di nuovo cambiato tutto... Forse conviene che chiudi questo post e ne apri uno per il/i nuovo/i problema/i...

[stefen]

non è una tabella..è un menu con die voci una sotto l'altra, "verticale flat"
dove lo inserisco l'accapo?

cmq non ho cambiato..stavo solo facendo delle prove

pero ne apro un latro meglio

[adottauncane]

No allora no. Prova a inserire questo nel file template.css. Solo che è possibile che canbia anche qualcos'altro...

Codice: [Seleziona]

td {
    padding-top: 35px;
}
Oppure fai l'immagine di sotto più alta, aggiungendo un pezzo di sfondo bianco in testa...

[stefen]

si avevo pensato ad allungare l'immagine
oppure di far eun altra cosa per avere un controllo ancora piu completo
fare un nuovo modulo dove ci inserisco solo quella voce di  menu..
vabbe se non ci sono altre soluzioni faro una delle due

il codice che hai postato tu dov elo metto? in qualsiasi posto?

[adottauncane]

Sì.

[stefen]

ho inserito il td

sembra tutto ok..tranne il footer che ora si va a sovrapporre in alcuni contenuto sul content..si puo risolvere?

[stefen]

ok
ho inserito
margin-top al footer e ora sembra ok!
grazie!