Cambiare Logo e Sfondo (RISOLTO)

[Spains]

salve a tutti, piacere Angelo! allora io ho creato il mio sito con altervista, e ho installato Joomla 1.0 quì: www.srrfactory.altervista.org
A me piace la template di default ma vorrei cambiare quel grande logo nero con il mio personale e lo sfondo (mettere un immagine)...

Come faccio? Non riesco proprio a capire da dove cambiare quel logo...

Grazie dell'aiuto...

[sudoku]

Benvenuto Angelo.
Per sostituire un logo o un header nella sezione Guide troverai tutte le risposti che cerchi.
Utilizza la ricerca (a destra) e ne troverai ancora di più.
Se utilizzi firefox (chiunque costruisca un sito dovrebbe utilizzare più browser per non avere brutte sorprese) scarica l'estensione Firebug: è uno strumento quasi indispensabile che ti aiuterà a capire che immagine e dove sta quella che vuoi sostituire.

[Spains]

Si infatti ho trovato una risposta interessante:


Crea il tuo logo in formato .png con dimensioni 298 x 75 px.
Chiamalo mw_joomla_logo.png ed uploadalo nella cartella templates/rhuk_milkyway/images/

Con queste operazioni sovrascrivi il logo originale con il tuo.
Ci sono anche altri sistemi ma implicano una conoscenza un po' più approfondita di .css, html etc etc
Questo è un metodo semplice, veloce ed un po'rustico ma come primo passo penso ti possa soddisfare.

[otto9due]

per modificare il logo vedi questo post: http://forum.joomla.it/index.php/topic,61508.0.html per modificare lo sfondo, vai nel tuo template dall'ftp, apri template/nometuotemplate/images/page-bg.jpg(solitamente si chiama cosi) se hai più stili di visualizzazione del sito cerca l'immagine nello stile che stai usando cioè es: sempre in images/style1/page-bg.jpg, e la sostituisci con un'altra immagine, se non vedi il risultato cabia il nome sia dell'immagine es: page-bg1.jpg, e cambialo anche nel relativo foglio css.

[Spains]

S' ho capito adesso come cambiare il logo, ma per l'immagine di sfondo?

[Francesco Blangiforti]

ma perche' non cerchi i file di grafica

[Spains]

ma perche' non cerchi i file di grafica

Cioè?

[sudoku]

cioè: entri nella cartella "templates" scelgi quello che stai usando (o che vorrai cambiare ed usare) cerchi le immagini da mofdificare. Modifichi le immagini che vuoi rispettando estensione e dimensione e sovrascrivi quelle originali. Apri il browser e ti godi la scena

[otto9due]

Guarda in linea di massima devi sostituire l'immagine page-bg.jpg che trovi in images tramite ftp, devi anche sostituire il nome di questa nuova immagine che hai messo nel file css..mettendo quello della nuova immagine.. cmq dai anche un'occhiata qui...  "http://forum.joomla.it/index.php/topic,64997.0/topicseen.html"
 

[Spains]

il fatto è che lo sfondo è bianco quello della template rhuk_solarflare_ii e quindi non sò come si chiama nella cartella...

[sudoku]

template_css.css
}
body {
background:#FFFFFF none repeat scroll 0 0; <---questo è il colore bianco, prova a giocare con questo
color:#333333;
font-family:Arial,Helvetica,Sans Serif;
font-size:11px;
height:100%;
line-height:120%;
margin:15px;
padding:0;
}

[Spains]

1. Non riesco a trovare quel codice nella Mod.CSS
2. Non devo giocare sul colore ma devo mettere una immagine.

[otto9due]

fai un'immagine di dimensione 1600 x l'altezza quanro vuoi, cercando di sfumarla sotto verso il bianco visto che lo sfondo è bianco o verso il nero se cambi colore allo sfondo, e sostituiscila a page-bg.jpg io più di questo non so che dirti, cmq se proprio non riesci mandami il css o il tempale intero che te lo modifico io...più di questo!!e ti metto i file che devi mettere nelle cartelle..mandami anche l'immagine che devi mettere.. o meglio copia la cartella del tuotemplate che hai sull'ftp e mandami quella cosi ti basterà sostituirla.

[Spains]

fai un'immagine di dimensione 1600 x l'altezza quanro vuoi, cercando di sfumarla sotto verso il bianco visto che lo sfondo è bianco o verso il nero se cambi colore allo sfondo, e sostituiscila a page-bg.jpg io più di questo non so che dirti, cmq se proprio non riesci mandami il css o il tempale intero che te lo modifico io...più di questo!!e ti metto i file che devi mettere nelle cartelle..mandami anche l'immagine che devi mettere.. o meglio copia la cartella del tuotemplate che hai sull'ftp e mandami quella cosi ti basterà sostituirla.

Scusa ma cosa dici? Perchè sfumare o chissà che? Cambiare direttamente l'immagine no scusa?

Ecco l'immagine (1440px × 900px)


Ed ecco la Template Mod CSS:
/* CSS Document */

html {
   height: 100%;
}

body {
   height: 100%;
   margin-bottom: 1px;
}

.clr {
   clear: both;
}


.outline {
  border: 1px solid #cccccc;
  background: #FFFFFF;
  padding: 2px;}




#buttons_outer {
   width: 635px;
     margin-bottom: 2px;
   margin-right: 2px;
   float: left;

}

#buttons_inner {
   border: 1px solid #cccccc;
   height: 21px !important;
   height: 23px;
}

#pathway_text {
  overflow: hidden;
   display: block;
   height: 25px;
   line-height: 25px !important;
   line-height: 22px;
   padding-left: 4px;
   border: 1px solid #ccc;
   margin-bottom: 2px;
}

#pathway_text img {
   margin-left: 5px;
   margin-right: 5px;
   margin-top: 6px;
}

#buttons {
   float: left;
   margin: 0px;
   padding: 0px;
   width: auto;
}


ul#mainlevel-nav
{
   list-style: none;
   padding: 0;
   margin: 0;
   font-size: 0.8em;
}

ul#mainlevel-nav li
{
   background-image: none;
   padding-left: 0px;
   padding-right: 0px;
   float: left;
   margin: 0;
   font-size: 11px;
   line-height: 21px;
   white-space: nowrap;
   border-right: 1px solid #cccccc;
}

ul#mainlevel-nav li a
{
   display: block;
   padding-left: 15px;
   padding-right: 15px;
   text-decoration: none;
   color: #333333;
   background: transparent;
}

#buttons>ul#mainlevel-nav li a { width: auto; }

   ul#mainlevel-nav li a:hover
{
   color: #fff;
   background: #c64934;
}


#search_outer {
   float: left;
   width: 165px;
}

#search_inner {
  border: 1px solid #cccccc;
   padding: 0px;
  height: 21px !important;
  height: 23px;
  overflow: hidden;
}

#search_inner form {
  padding: 0;
  margin: 0;
}

#search_inner .inputbox {
   border: 0px;
   padding: 3px 3px 3px 5px;
   font-family: arial, helvetica, sans-serif;
   font-size: 11px;
   color: #c64934;
}

#header_outer {
   text-align: left;
   border: 0px;
   margin: 0px;
}

#header {
   float: left;
   padding: 0px;
   margin-right: 2px;
   width: 635px;
   height: 150px;
   background: url(../images/header_short.jpg) no-repeat;
}

#top_outer{
   float: left;
   width: 165px;
}

#top_inner {
  border: 1px solid #cccccc;
   padding: 2px;
  height: 144px !important;
  height: 150px;
  overflow: hidden;
  float: none !important;
  float: left;
}

#left_outer {
  float: left;
   margin-top: 2px;
   width: 165px;
}

#left_inner {
  border: 1px solid #cccccc;
   padding: 2px;
  float: none !important;
  float: left;
}

#content_outer {
   padding: 0px;
   margin-top: 0px;
   margin-left: 2px;
   /** border: 1px solid #cccccc; **/
   float: left;
   width: 635px;
}

#content_inner{
  float: none !important;
  float: left;
  padding: 0;
  padding-top: 2px;
  margin: 0;
}

table.content_table {
  width: 100%;
   padding: 0px;
   margin: 0px;
}

table.content_table td {
   padding: 0px;
   margin: 0px;
}


#banner_inner {
   float: left;
   padding: 0px;
   height: 70px;
}

#poweredby_inner {
   float: right;
   padding: 0px;
   margin-left: 0px;
   height: 70px;
}

#right_outer {
   margin-left: 2px;
   width: 165px;
}

#right_inner {
  float: none !important;
  float: left;
  border: 1px solid #cccccc;
  padding: 2px;
}


.user1_inner {
   border: 1px solid #cccccc;
  float: none !important;
  float: left;
   margin: 0px;
   padding: 2px;
}

.user2_inner {
   border: 1px solid #cccccc;
  float: none !important;
  float: left;
   margin: 0px;
   padding: 2px;
}

table td.body_outer {
   padding: 2px;
   border: 1px solid #cccccc;
}

.maintitle {
   color: #ffffff;
   font-size: 40px;
   padding-left: 15px;
   padding-top: 20px;
}

.error {
  font-style: italic;
  text-transform: uppercase;
  padding: 5px;
  color: #cccccc;
  font-size: 14px;
  font-weight: bold;
}

/** old stuff **/

.back_button {
   float: left;
  text-align: center;
  font-size: 11px;
  font-weight: bold;
  border: 3px double #cccccc;
  width: auto;
  background: url(../images/button_bg.png) repeat-x;
  padding: 0px 10px;
  line-height: 20px;
  margin: 1px;
}

.pagenav {
  text-align: center;
  font-size: 11px;
  font-weight: bold;
  border: 3px double #cccccc;
  width: auto;
  background: url(../images/button_bg.png) repeat-x;
  padding: 0px 10px;
  line-height: 20px;
  margin: 1px;
}

.pagenavbar {
   margin-right: 10px;
   float: right;
}

#footer {
   text-align: center;
   padding: 3px;
}

ul
{
margin: 0;
padding: 0;
list-style: none;
}

li
{
line-height: 15px;
padding-left: 15px;
padding-top: 0px;
background-image: url(../images/arrow.png);
background-repeat: no-repeat;
background-position: 0px 2px;
}


td {
   text-align: left;
   font-size: 11px;
}



body {
   margin: 15px;
   height: 100%;
   padding: 0px;
   font-family: Arial, Helvetica, Sans Serif;
   line-height: 120%;
   font-size: 11px;
   color: #333333;
   background: #ffffff;
}

/* Joomla core stuff */
a:link, a:visited {
   color: #c64934; text-decoration: none;
   font-weight: bold;
}

a:hover {
   color: #900;   text-decoration: none;
   font-weight: bold;
}

table.contentpaneopen {
  width: 100%;
   padding: 0px;
   border-collapse: collapse;
   border-spacing: 0px;
   margin: 0px;
}

table.contentpaneopen td {
   padding-right: 5px;
}

table.contentpaneopen td.componentheading {
   padding-left: 4px;
}



table.contentpane {
  width: 100%;
   padding: 0px;
   border-collapse: collapse;
   border-spacing: 0px;
   margin: 0px;
}

table.contentpane td {
   margin: 0px;
   padding: 0px;
}

table.contentpane td.componentheading {
   padding-left: 4px;
}

table.contentpaneopen fieldset {
   border: 0px;
   border-bottom: 1px solid #eee;
}

.button {
  color: #c64934;
  font-family: Arial, Hevlvetica, sans-serif;
  text-align: center;
  font-size: 11px;
  font-weight: bold;
  border: 3px double #cccccc;
  width: auto;
  background: url(../images/button_bg.png) repeat-x;
  padding: 0px 5px;
  line-height: 18px !important;
  line-height: 16px;
  height: 26px !important;
  height: 24px;
  margin: 1px;
}

.inputbox {
   padding: 2px;
   border:solid 1px #cccccc;
   background-color: #ffffff;
}

.componentheading {
   background: url(../images/subhead_bg.png) repeat-x;
   color: #666666;
   text-align: left;
   padding-top: 4px;
   padding-left: 4px;
   height: 21px;
   font-weight: bold;
   font-size: 10px;
   text-transform: uppercase;

}

.contentcolumn {
   padding-right: 5px;
}

.contentheading {
   height: 30px;

   color: #c64934;
   font-weight: bold;
   font-size: 14px;
   white-space: nowrap;
}



.contentpagetitle {
   font-size: 13px;
   font-weight: bold;
   color: #cccccc;
   text-align:left;
}

table.searchinto {
   width: 100%;
}

table.searchintro td {
   font-weight: bold;
}

table.moduletable {
   width: 100%;
   margin-bottom: 5px;
   padding: 0px;
   border-spacing: 0px;
   border-collapse: collapse;
}

div.moduletable {
   padding: 0;
   margin-bottom: 2px;
}

table.moduletable th, div.moduletable h3 {
   background: url(../images/subhead_bg.png) repeat-x;
   color: #666666;
   text-align: left;
   padding-left: 4px;
   height: 21px;
   line-height: 21px;
   font-weight: bold;
   font-size: 10px;
   text-transform: uppercase;
   margin: 0 0 2px 0;
}

table.moduletable td {
   font-size: 11px;
   padding: 0px;
   margin: 0px;
   font-weight: normal;
}

table.pollstableborder td {
  padding: 2px;
}

.sectiontableheader {
  font-weight: bold;
  background: #f0f0f0;
  padding: 4px;
}

.sectiontablefooter {

}

.sectiontableentry1 {
   background-color : #ffffff;
}

.sectiontableentry2 {
   background-color : #f9f9f9;
}

.small {
   color: #999999;
   font-size: 11px;
}

.createdate {
   height: 15px;
   padding-bottom: 10px;
   color: #999999;
   font-size: 11px;
}

.modifydate {
   height: 15px;
   padding-top: 10px;
   color: #999999;
   font-size: 11px;
}

table.contenttoc {
  border: 1px solid #cccccc;
  padding: 2px;
  margin-left: 2px;
  margin-bottom: 2px;
}

table.contenttoc td {
  padding: 2px;
}

table.contenttoc th {
  background: url(../images/subhead_bg.png) repeat-x;
  color: #666666;
   text-align: left;
   padding-top: 2px;
   padding-left: 4px;
   height: 21px;
   font-weight: bold;
   font-size: 10px;
   text-transform: uppercase;
}

a.mainlevel:link, a.mainlevel:visited {
   display: block;
   background: url(../images/menu_bg.png) no-repeat;
   vertical-align: middle;
   font-size: 11px;
   font-weight: bold;
   color: #ccc;
   text-align: left;
   padding-top: 5px;
   padding-left: 18px;
   height: 20px !important;
   height: 25px;
   width: 100%;
   text-decoration: none;
}

a.mainlevel:hover {
   background-position: 0px -25px;
   text-decoration: none;
   color: #fff;
}

a.mainlevel#active_menu {
   color:#fff;
   font-weight: bold;
}

a.mainlevel#active_menu:hover {
   color: #fff;
}

a.sublevel:link, a.sublevel:visited {
   padding-left: 1px;
   vertical-align: middle;
   font-size: 11px;
   font-weight: bold;
   color: #c64934;
   text-align: left;
}

a.sublevel:hover {
   color: #900;
   text-decoration: none;
}

a.sublevel#active_menu {
   color: #333;
}

.highlight {
   background-color: Yellow;
   color: Blue;
   padding: 0;
}
.code {
   background-color: #ddd;
   border: 1px solid #bbb;
}

form {
/* removes space below form elements */
   margin: 0;
    padding: 0;
}

div.mosimage {
  border: 1px solid #ccc;
}

.mosimage {
  border: 1px solid #cccccc;
  margin: 5px
}

.mosimage_caption {
  margin-top: 2px;
  background: #efefef;
  padding: 1px 2px;
  color: #666;
  font-size: 10px;
  border-top: 1px solid #cccccc;
}

span.article_seperator {
   display: block;
   height: 1.5em;
}

[otto9due]

allora guarda devi  modificare il nome dell'immagine qui:

li
{
line-height: 15px;
padding-left: 15px;
padding-top: 0px;
background-image: url(../images/arrow.png); <---arrow.png lo cancelli e ci scrivi sfondoforumuk1.jpg cioè guarda l'esempio sotto...
background-repeat: no-repeat;
background-position: 0px 2px;
}


esempio:
li
{
line-height: 15px;
padding-left: 15px;
padding-top: 0px;
background-image: url(../images/sfondoforumuk1.jpg);
background-repeat: no-repeat;
background-position: 0px 2px;
}
ovviamente poi devi mettere nella cartella images la foto che mi hai postato..

[sudoku]

i PM sarebbero da evitarsi in una discussione pubblica. Considerate che il problema di spains potrebbe essere quello di altri e quindi nello spirito di questo forum sarebbe bene condividere le esperienze. Grazie.

[otto9due]

Scusa hai perfettamente ragione, infatti ho provato a rispondere su.. scusa ancora!!

[sudoku]

nessun problema 

[Spains]

Non è cambiato nulla, guarda quà:
http://srrfactory.altervista.org/
(L'immagine si vede nelle tabelle "I più letti" e "Ultime notizie".)

[sudoku]

per modificare uno sfondo colorato con una immagine nel template che indichi tu devi agire qui:

come perlatro qualche post fa ti avevo suggerito (ma tu avevi preferito rispondere che non dovevi giocare)

{template_css.css (riga 327)

body background:#FFFFFF none repeat scroll 0 0;
color:#333333;
font-family:Arial,Helvetica,Sans Serif;
font-size:11px;
height:100%;
line-height:120%;
margin:15px;
padding:0;
}

prendi quella riga e la sostituisci con

background: url(percorso_del_file_sfondo.xyz);

cosa vuol dire?

devi costruirti un'immagine che chiamerai sfondo.jpg/png l'estensione la decidi tu. Se la metti nella cartella images del sito basterà mettere url(images/sfondo.xyz)

considera però che: a) un'immagine ha una dimensione fissa mentre il tuo template è costruito per adattarsi in verticale ai contenuti, e b) considera che sopra l'immagine devi farci leggere anche del testo e può non essere semplice.

[Spains]

per modificare uno sfondo colorato con una immagine nel template che indichi tu devi agire qui:

come perlatro qualche post fa ti avevo suggerito (ma tu avevi preferito rispondere che non dovevi giocare)

{template_css.css (riga 327)

body background:#FFFFFF none repeat scroll 0 0;
color:#333333;
font-family:Arial,Helvetica,Sans Serif;
font-size:11px;
height:100%;
line-height:120%;
margin:15px;
padding:0;
}

prendi quella riga e la sostituisci con

background: url(percorso_del_file_sfondo.xyz);

cosa vuol dire?

devi costruirti un'immagine che chiamerai sfondo.jpg/png l'estensione la decidi tu. Se la metti nella cartella images del sito basterà mettere url(images/sfondo.xyz)

considera però che: a) un'immagine ha una dimensione fissa mentre il tuo template è costruito per adattarsi in verticale ai contenuti, e b) considera che sopra l'immagine devi farci leggere anche del testo e può non essere semplice.

Scusa, forse ti farò arrabbiare ma capiscimi...
Comunque non riesco a trovare questa parte...almenocchè non è questa:

body {
   margin: 15px;
   height: 100%;
   padding: 0px;
   font-family: Arial, Helvetica, Sans Serif;
   line-height: 120%;
   font-size: 11px;
   color: #333333;
   background: #ffffff;

[sudoku]

background: #ffffff;

  non è quello che ti ho scritto prima?

andiamo per gradi: capisco che ognuno di noi parta dal primo passo e quindi nessun problema...ma dovresti mettere un pochino d attenzione.

Scarica un programma per la gestione dei file .css (io uso topstyle lite) ce ne sono molti in giro.

Scarica un plugin per firefox  che si chiama "firebug" questo ti aiuterà a evidenziare le "zone" del sito che cerchi di modificare.

Utilizzando questi due accorgimenti potrai a) conoscere la posizione all'interno del file css della modifica da fare e b) come modificarla. Oltre a molte altra cose che esulano per adesso dalla discussione.

[otto9due]

e prova a modificare cosi:

invece di:

body background:#FFFFFF none repeat scroll 0 0 ;
font-family:Arial,Helvetica,Sans Serif;
font-size:11px;
height:100%;
line-height:120%;
margin:15px;
padding:0;
}

cosi:

body background: url(../images/sfondoforumuk1.jpg) 50% -85px repeat-x;
color:#333333;
font-family:Arial,Helvetica,Sans Serif;
font-size:11px;
height:100%;
line-height:120%;
margin:15px;
padding:0;
}

La parte in arancio non so se devi toglierla..cmq prova, ovviamente, prima di fare le prove tieni sempre una copia di backup al massimo risostituisci con l'originale.
E scusa per prima ho sbagliato a postarti il codice!! 

[Spains]

e prova a modificare cosi:

invece di:

body background:#FFFFFF none repeat scroll 0 0 ;
font-family:Arial,Helvetica,Sans Serif;
font-size:11px;
height:100%;
line-height:120%;
margin:15px;
padding:0;
}

cosi:

body background: url(../images/sfondoforumuk1.jpg) 50% -85px repeat-x;
color:#333333;
font-family:Arial,Helvetica,Sans Serif;
font-size:11px;
height:100%;
line-height:120%;
margin:15px;
padding:0;
}

La parte in arancio non so se devi toglierla..cmq prova, ovviamente, prima di fare le prove tieni sempre una copia di backup al massimo risostituisci con l'originale.
E scusa per prima ho sbagliato a postarti il codice!! 

Funziona otto3due...
Grazie mille...guardate: www.srrfactory.altervista.org
Devo solo rimpicciolirla per farla entrare tutta bene! Che dimensioni dovrei farla purchè si veda bene?

[otto9due]

Sono contento che sei riuscito a risolvere il problema cmq calcola che le dimensioni devono essere valide per tutti, devi calcolare tutte le dimensioni possibili degli utenti, il massimo solitamente è 1600 di larghezza. ma sono pochi comunque che lo utilizzano, cmq le dimensioni che devi calcolare sono quelle dello schermo.
Quindi alla fine hai tolto quel codice arancio e hai sostituito come ti avevo detto? bene bene, scrivi (RISOLTO) prima del titolo del primo post!! 

[Spains]

c'è un problema, guarda:


L'immagine non copre tutto...che devo farE?

[otto9due]

era quello che ti dicevo quando ti ho detto di fare la sfumatura all'immagine... se tu metti un'immagine di una certa grandezza se poi scendi troppo inserendo contenuti, è ovvio che ad un certo punto l'immagine finisce e si rivede lo sfondo che in questo caso è bianco, 2 le soluzioni: sai utilizzare photoshop?
1) Crei un'immagine di queste moto, ritagliando le moto e ti fai un'immagine personalizzata con sfondo bianco.
2) Cambi il colore dello sfondo a nero e sfumi l'immagine attuale verso il nero cosi alla fine sembrerà che continua sul nero.

[Spains]

era quello che ti dicevo quando ti ho detto di fare la sfumatura all'immagine... se tu metti un'immagine di una certa grandezza se poi scendi troppo inserendo contenuti, è ovvio che ad un certo punto l'immagine finisce e si rivede lo sfondo che in questo caso è bianco, 2 le soluzioni: sai utilizzare photoshop?
1) Crei un'immagine di queste moto, ritagliando le moto e ti fai un'immagine personalizzata con sfondo bianco.
2) Cambi il colore dello sfondo a nero e sfumi l'immagine attuale verso il nero cosi alla fine sembrerà che continua sul nero.

Ma per fare questo casino non si può bloccare?
Perchè sul forum, http://srrefactorytuningclub.forumfree.net/ l'immagine è fissa!

[otto9due]

ho capito cosa intendi ma questo non lo so fare..per quanto riguarda l'immagine, photoshop ti può aiutare..

[Spains]

Sì ma non lo sò usare bene...
Mi è venuta un idea...
al posto di avere lo sfondo nero lo metto bianco...

[otto9due]

Al momento mi sembra che tu ce l'hai bianco...

[Spains]

No dico, se vedi l'immagine ci sono gli SR con lo sfondo nero...
ora lo faccio bianco...