Autore Topic: Cambiare Logo e Sfondo (RISOLTO) (Letto 8563 volte)

Spains · « **il:** 19 Apr 2009, 22:52:20 »

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 · « **Risposta #1 il:** 19 Apr 2009, 23:21:01 »

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 · « **Risposta #2 il:** 19 Apr 2009, 23:34:30 »

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 · « **Risposta #3 il:** 19 Apr 2009, 23:40:09 »

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 · « **Risposta #4 il:** 20 Apr 2009, 00:34:40 »

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

Francesco Blangiforti · « **Risposta #5 il:** 20 Apr 2009, 11:49:15 »

ma perche' non cerchi i file di grafica

Spains · « **Risposta #6 il:** 20 Apr 2009, 15:14:30 »

Citazione da: Francesco Blangiforti - 20 Apr 2009, 11:49:15

ma perche' non cerchi i file di grafica

Cioè?

sudoku · « **Risposta #7 il:** 20 Apr 2009, 15:19:50 »

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 · « **Risposta #8 il:** 20 Apr 2009, 15:21:05 »

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 · « **Risposta #9 il:** 20 Apr 2009, 15:50:59 »

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

sudoku · « **Risposta #10 il:** 20 Apr 2009, 17:31:26 »

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 · « **Risposta #11 il:** 20 Apr 2009, 19:02:35 »

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

otto9due · « **Risposta #12 il:** 20 Apr 2009, 21:01:13 »

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 · « **Risposta #13 il:** 20 Apr 2009, 22:57:57 »

Citazione da: otto9due - 20 Apr 2009, 21:01:13

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 · « **Risposta #14 il:** 20 Apr 2009, 23:00:56 »

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 · « **Risposta #15 il:** 20 Apr 2009, 23:05:44 »

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 · « **Risposta #16 il:** 20 Apr 2009, 23:11:57 »

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

sudoku · « **Risposta #17 il:** 20 Apr 2009, 23:23:07 »

nessun problema

Spains · « **Risposta #18 il:** 20 Apr 2009, 23:38:03 »

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

sudoku · « **Risposta #19 il:** 20 Apr 2009, 23:48:15 »

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.