Back to top

Autore Topic: Modificare CSS  (Letto 2606 volte)

Offline elj

  • Esploratore
  • **
  • Post: 175
    • Mostra profilo
Modificare CSS
« il: 21 Lug 2008, 01:17:38 »
IL template è GO-VISTA.
Mi sto dannando a fare prove e ricerche ma non riesco a capire come:

1) cambiare i colori dei titoli dei contenuti (cioè i titoli degli articoli che si vedono in HOMEPAGE)
2) aumentare la grandezza del font dell'header, il titolo della home che dà il titolo, levandogli anche l’inclinatura italicus.
3)Vorrei anche aggiungere un effetto hover, per dare un colore fisso a tutti i link del sito (indifferentemente da dove sono) e un altro colore quando ci passa sopra il mouse.
Vorrei farlo inserendo una classe al template,che ora fa restare dello stesso colore anche con hover.
Mi aiutate a capire i punti del CSS in cui inserire i nuovi tag?
O a capire quali si modificano.
Ad es. i titoli degli articoli, avevo letto .contentheading, invece nulla...
Allego il template_css.CSS.
Sono noiosa lo so ma evidentemente non basta impegnarmi..


[allegato eliminato da un amministratore - Il file era vecchio]

Offline carlodamo

  • Global Moderator
  • Instancabile
  • ********
  • Post: 3817
  • Sesso: Maschio
    • Mostra profilo
Re: Modificare CSS
« Risposta #1 il: 21 Lug 2008, 08:27:04 »
usi firefox? installa firebug. con questo plugin riesci ad identificare precisamente la voce del css dove anadare ad operare. Usa il comando html - inspect...

ciao
Evisole Web agency a Vicenza

Offline gagarin77

  • Appassionato
  • ***
  • Post: 469
  • Sesso: Maschio
    • Mostra profilo
Re: Modificare CSS
« Risposta #2 il: 21 Lug 2008, 20:22:01 »
ciao,

il file allegato ha qualche problema di visualizzazione


per i link,
devi distinguere il caso hover e visited che nel tuo template
sono con le stesse caratteristiche..:

a:link, a:visited, h3, .contentheading,.blog_more div strong {



color:black;


a:hover
{
   color:  #tuo colore1;
   }
a:visited {
   color:  #tuo colore2;
   }

sostituire tuo colore1 e 2 con codice coore in esadecimale preferitoes. #FFFFFF ecc.


per i titoli degli articoli
devi modificare td.contentheading

per il resto dal file css che io non riesco a visualizzare correttaemente non so dirti dovresti o provare a ricaricare il file css o inserire il link dl tuo sito se on-line

E' meglio sbagliarsi in fretta che aver ragione troppo tardi

Offline elj

  • Esploratore
  • **
  • Post: 175
    • Mostra profilo
Re: Modificare CSS
« Risposta #3 il: 22 Lug 2008, 05:11:32 »
Grazie mille a entrambi, carlodamo mi hai dato un suggerimento prezioso, il programma per una come me è utilissimo,e gagarin 77 inserisco qui il CSS, sperando di non fare una cosa vietata, ma ho problemi a allegarlo correttamente.
Ho risolto intanto un po' di modifiche perchè comincio a capire il concetto di classe nel CSS.

1)non sono riuscita ancora a capire da dove modificare nel CSS il font della scritta dell'header, che si trova in alto a sinistra accanto a un banner swf, mi hanno detto(allego fotina del template per farvi intuire la struttura).

2)Non so se ho capito bene cosa devo fare per dare l'effetto di un altro colore quando passa il mouse sul link.
A me serve di impostare UGUALE PER TUTTI I LINK DEL SITO:
a:link (uguale ad a:visited)e a:hover, il primo ad es. nero e il secondo blu.
Devo inserire questi comandi per ogni classe presente nel CSS?
O si fa una volta sola per tutti visto che mi serve un tipo di link e hover unico?
Se mi indicate il punto esatto dove inserire le righe sarei felice!
Non mi si modificano soprattutto i link presenti nei contenuti centrali in home page con le prove fatte.
Ho abusato della vostra gentilezza, ora chiudo.
Ringrazio ancora di cuore.
 
Per imparare io devo fare il percorso a ritroso, decifrare il CSS mano mano che capisco di più, e invece sul web stranamente ho trovato pochissimo in questo senso, solo dalla teoria in poi, senza "esercitazioni" per es. su un CSS.
Comunque magari sono lenta io..
Ecco il CSS:
-----------------------------------------------------------------

.readon {

border-bottom:1px dotted black;

border-left:1px dotted black;

}

td {font-size:12px;}

a:link, a:visited, h3, .contentheading,.blog_more div strong {

color:black;

font-weight: bold;

}

 

.introtext, .fulltext {

color:black;

}

 

html {

   overflow-x:hidden;

}



div {

   margin:0;

}



body {

   font-family:Verdana, Arial, Helvetica, sans-serif;

   color:black;

   line-height:175%;

   text-align:justify;

   height:100%;

   font-size: 12px;

   margin:0px;

   padding:0px;

   background-image:url(../images/backgroundgardient.jpg);

   background-repeat:repeat-x;

}



h1,h2,h3,h4,h5,h6 {

   margin:0;

   padding:0;

}



ul {

   margin:0;

   padding:0;

   margin-left:15px;

}



a {

   text-decoration:none;

   font-weight:bold;

}



ul li a, .pagenavcounter {

   font-weight:bold;

}



ul#mainlevel-nav {

   margin:0px;

   padding:0;

   height:33px;

}



ul#mainlevel-nav li {

   list-style: none;

   display:inline;

   height:33px;

   width:122px;

}



ul#mainlevel-nav li a {

   font-size:11px;

   color:white;

   font-weight:bold;

   text-align:center;

   background:url(../images/buttontop_normal.jpg) no-repeat;

   line-height:33px;

   height:33px;

   width:122px;

   display: block;

        float:left;

}



ul#mainlevel-nav li a:hover {

   color:#6699FF;

   font-size:11px;

   font-weight:bold;

   text-align:center;

   background:url(../images/buttontop_over.jpg) no-repeat;

   line-height:33px;

   height:33px;

   width:122px;

   display: block;

        float:left;

}



h3 {

   margin-bottom:10px;

}



.contentheading, .blog_more div strong {

   font-weight:bold;

}



.blog_more a {

   font-weight:bold;

   color:#33FFFF;

}



.componentheading {

   color:white;

   padding-bottom:10px;

   margin-bottom:20px;

}



.vistaleft a.mainlevel:link, .vistaleft a.mainlevel:visited {

   color:white;

   font-size:12px;

        font-weight:bold;

   display:block;

   margin-left:-5px;

   padding-left:14px;

   line-height:34px;

   height:42px;

   background:url(../images/button_normal.jpg) no-repeat;

}

.vistaleft a.mainlevel:hover {

        color:white;

        font-size:13px;

        font-weight:bold;

   background:url(../images/button_over.jpg) no-repeat;

}

.vistaleft a.mainlevel#active_menu:link, .vistaleft a.mainlevel#active_menu:hover, .vistaleft a.mainlevel#active_menu:visited {

   color:white;

   font-size:13px;

        font-weight:bold;

   display:block;

   margin-left:-5px;

   padding-left:14px;

   line-height:34px;

   height:42px;

   background:url(../images/button_activated.jpg) no-repeat;

}



.vistaright a.mainlevel:link, .vistaright a.mainlevel:visited {

   color:#3366FF;

   margin-right:-5px;

   text-align:right;

   font-size:12px;

   display:block;

   padding-right:20px;

   line-height:34px;

   height:42px;

   background:url(../images/buttonright_normal.jpg) no-repeat;

   background-position:top right;

        font-size:13px;

   font-weight:bold;

}

.vistaright a.mainlevel:hover {

   background:url(../images/buttonright_over.jpg) no-repeat;

        color:#0000ff;

   background-position:top right;

        font-weight:bold;

}

.vistaright a.mainlevel#active_menu:link, .vistaright a.mainlevel#active_menu:hover, .vistaright a.mainlevel#active_menu:visited {

   color:#3366FF;

   text-align:right;

   margin-right:-5px;

   font-size:12px;

   display:block;

   padding-right:20px;

   line-height:34px;

   height:42px;

   background:url(../images/buttonright_activated.jpg) no-repeat;

   background-position:top right;

   font-weight:bold;

}



.vistaleft a.sublevel:link, .module a.sublevel:visited {

   color:white;

   margin-left:-5px;

   font-size:12px;

        font-weight:bold;

   display:block;

   padding-left:20px;

   line-height:34px;

   height:42px;

   background:url(../images/button_subnormal.jpg) no-repeat;

   font-weight:normal;

}

.vistaleft a.sublevel:hover {

   background:url(../images/button_subover.jpg) no-repeat;

}

a.vistaleft .sublevel#active_menu:link, .vistaleft a.sublevel#active_menu:hover, .vistaleft a.sublevel#active_menu:visited {

   color:white;

   font-size:12px;

        font-weight:bold;

   margin-left:-5px;

   display:block;

   padding-left:20px;

   line-height:34px;

   height:42px;

   background:url(../images/button_subactivated.jpg) no-repeat;

   font-weight:normal;

}



.vistaright a.sublevel:link, .vistaright a.sublevel:visited {

   color:white;

   text-align:right;

   margin-right:-5px;

   font-size:12px;

   display:block;

   padding-right:20px;

   line-height:34px;

   height:42px;

   background:url(../images/buttonright_subnormal.jpg) no-repeat;

   background-position:top right;

   font-weight:normal;

}

.vistaright a.sublevel:hover {

   background:url(../images/buttonright_subover.jpg) no-repeat;

   background-position:top right;

}

.vistaright a.sublevel#active_menu:link, .vistaright a.sublevel#active_menu:hover, .vistaright a.sublevel#active_menu:visited {

   color:white;

   text-align:right;

   margin-right:-5px;

   font-size:12px;

   display:block;

   padding-right:20px;

   line-height:34px;

   height:42px;

   background:url(../images/buttonright_subactivated.jpg) no-repeat;

   background-position:top right;

   font-weight:normal;

}

.vistaleft {padding:5px;}

.vistamain {padding:5px;}

.vistaright {text-align:center;padding:5px;}

.vistafooter {color:white;font-size:10px;background-repeat:no-repeat;background-color:black;}

.vistafooter a:link, .vistafooter a:visited {font-weight:bold;color:gray;font-size:11px;}

.module {

   margin:0;

   padding-bottom:10px;

   color:#0033CC;

}

.moduletable td {

   padding-left:5px;

   padding-right:5px;

}



.vistaleft .module h3 {

   padding-left:25px;

   margin:-5 0 0 -5;

   color:white;

   line-height:34px;

   height:43px;

   font-size:14px;

   background:url(../images/titlebuttonleft.jpg) no-repeat;

}



.vistaright .module h3 {

   margin:-5px;

   padding-right:25px;

   text-align:right;

   color:white;

   line-height:34px;

   height:43px;

   font-size:14px;

   background:url(../images/titlebuttonright.jpg) no-repeat;

   background-position:top right;

}





.small {

   color:#666666;

}



.createdate, .modifydate {

   color:#999999;

}



#mod_login_username, #mod_login_password {

   width:150px;

   background-color:#FFFFFF;

   border:1px solid #CCCCCC;

   padding:2px;

   color:black;

}



.inputbox {

   background-color:#FFFFFF;

   border:1px solid #CCCCCC;

   padding:2px;

   color:black;

}



.readon {

   padding-left:5px;

}



.contenttoc {

   margin:10px;

   border:1px solid #CCCCCC;

}



.contenttoc td {

   text-align:left;

   padding-left:5px;

   padding-right:5px;

}



.contenttoc th {

   text-align:left;

   background-color:#DEDEDE;

   padding-left:5px;

   padding-right:5px;

}



.label {

   text-align:left;

}



.mosimage {

   border:1px solid #CCCCCC;

   margin:5px;

}



.mosimage_caption {

   background-color:#DEDEDE;

}



.sectiontableheader {

   font-weight: bold;

}



.sectiontableentry2 label {

   text-align:left;

}



.sectiontableentry2 {

   background-color:#FFFFFF;

}



.sectiontableentry1 {

   background-color:#F5F5F5;

}



.sectiontableentry1 td div a, .sectiontableentry2 td div a {

   font-weight:bold;

   border:none;

}



.div_bfree {

   visibility:hidden;

   overflow:hidden;

   height:0px;

}



h3, .contentheading {

   /*font-size:140%;*/

   font-size:14px;

   font-weight:bold;

}



.componentheading {

   /*font-size:160%;*/

   font-size:14px;

   font-weight:bold;

   letter-spacing: 2px;

   text-transform:uppercase;

}



img {

   border:none;

}



.contentpane

{color:black;}

.contentpaneopen {

border: 1px dotted #CCCCCC;

background-color:#fafafa;

color:black;

}



.vistauser1, .vistauser2 {

margin:2px;

border: 1px dotted #CCCCCC;

background-color:#fafafa;

color:black;

}

/* The following code is taken from rhuk - template: rhuk_solarflare_ii. */



.button {

  color: black;

  font-family: Verdana, Arial, Helvetica, sans-serif;

  text-align: center;

  font-size: 11px;

  font-weight: bold;

  border: 3px double #0033CC;

  background:none;

  width: auto;

  padding: 0px 5px;

  line-height: 18px !important;

  line-height: 16px;

  height: 26px !important;

  height: 24px;

  margin: 1px;

}





.back_button {

     color: black;

     font-family: Arial, Helvetica, sans-serif;

     text-align: center;

     font-size: 11px;

     font-weight: bold;

     border: 3px double #cccccc;

   background:none;

     width: 50px;

     padding: 0px 5px;

     line-height: 18px !important;

     line-height: 16px;

     height: 19px !important;

     height: 19px;

     margin: 1px;

}



.pagenav_next {

     color: black;

     font-family: Arial, Helvetica, sans-serif;

     text-align: center;

     font-size: 11px;

     font-weight: bold;

     border: 3px double #cccccc;

   background:none;

     width: 50px;

     padding: 0px 5px;

     line-height: 18px !important;

     line-height: 16px;

     height: 19px !important;

     height: 19px;

     margin: 1px;

   

}



.pagenav_prev {

     color: black;

     font-family: Arial, Helvetica, sans-serif;

     text-align: center;

     font-size: 11px;

     font-weight: bold;

     border: 3px double #cccccc;

   background:none;

     width: 50px;

     padding: 0px 5px;

     line-height: 18px !important;

     line-height: 16px;

     height: 19px !important;

     height: 19px;

     margin: 1px;

}



.pagenav {

     text-align: center;

     font-size: 11px;

     font-weight: bold;

     border: 3px double #cccccc;

   background:none;

     width: auto;

     padding: 0px 10px;

     line-height: 20px;

     margin: 1px;

}



.pagenavbar {

   margin-right: 10px;

   float: right;

}

 @media print{

.vistaleft, .vistauser1user1, .vistaright, .vistatop, .vistauser3, .noprint {display:none;}

.print {width:100%;}

body, .vistamain{background:none;}

}

[allegato eliminato da un amministratore - Il file era vecchio]

 



Web Design Bolzano Kreatif