Jump to content

Logo sopra la barra superiore

bestricambi

By bestricambi
in Report sui Bug

 Share

Recommended Posts

bestricambi Newbie

bestricambi

Posted
Posted

Ciao.

Dopo aver caricato il logo del negozio, invece di abbassare tutto il layout della pagina, il logo rimane giustamente in alto a sinistra ma copre parte della barra superiore nera (dove di solito ci sono i link "contattaci","consegna" etc.).

Come posso far shiftare tutta la grafica del sito (tranne il logo) verso il basso ?

Grazie

Link to comment
Share on other sites
  • 3 weeks later...
tuxinside Newbie

tuxinside

Posted
Posted (edited)

@BestRicambi: cercando 5 secondi su internet ho trovato il tuo sito... ti posto qui sotto le modifiche da fare per rendere l'header come dici tu:

/modules/blockuserinfo/blockuserinfo.css riga 3

#header_right #header_user {
    clear: both;
    float: right;
    margin-bottom: 35px;
    margin-top: 8px;
}


/themes/default/css/global.css riga 11

#header_logo {
    left: 0;
    position: absolute;
    top: 0;
    z-index: 1;
}


/themes/default/css/global.css riga 554
#header_right {
    float: right;
    margin-bottom: 15px;
    position: relative;
}

@TomaCalzature: mi sembra che hai il problema opposto. Tra la sommità della pagina ed il logo c'è un sacco di spazio bianco. Io lo toglierei dando un brutale:

.logo {
    margin-top: -70px;
}

PS: molto carino il tuo sito TomaCalzature. Quel blocco laterale di ricerca che usi, una vera figata, come si chiama?

Edited by tuxinside (see edit history)
  • Like 1
Link to comment
Share on other sites
tuxinside Newbie

tuxinside

Posted
Posted

@BestRicambi: il file blockuserinfo.css è stato modificato correttamente, l'altro aveva dei problemi di sintassi che non so se siano nati prima o dopo le tue modifiche. Direi quindi di lasciare il blockuserinfo.css cosi com'è (che va bene), mentre di sostituire il global.css con quello che ho modificato qui sotto.

 

Purtroppo non so come si fa ad allegare un file qui sul forum, anzi se qualche buon anima me lo spiega gli sono in debito. L'ho caricato sul mio server, quando l'hai scaricato fammi un fischio che lo cancello. SCARICA QUI.

 

Quando avrai caricato il nuovo files (per sicurezza fatti una copia di quello attuale), torna sul browser e premi CONTROL - F5, cosi da obbligare il browser a ricaricare i css.

 

Fammi sapere se hai problemi.

  • Like 1
Link to comment
Share on other sites
bestricambi Newbie

bestricambi

Posted
  • Author
Posted

Ciao.

Grazie mille, mi hai risolto il problema.

Te ne sono molto grato.

 

Per allegare il file io sono andato sull'ftp e ho cliccato direttamente sopra il nome del file e mi ha chiesto dove volevo salvare il file.

L'ho salvato in una cartella sul pc e poi l'ho allegato al post con il pulsante dedicato.

 

Grazie ancora.

Link to comment
Share on other sites
  • 2 weeks later...
limpido Newbie

limpido

Posted
Posted

anche io ho avuto lo stesso problema e' l'ho risolto, ti volevo chiedere un ulteriore informazione, e possibile sfruttare tutto lo spazio orizzontale per il logo senza che si va a sovrapporre a destra?

 

Vorrei che il logo vada sotto l'altro menu a destra e non sopra..

 

Ti invio un file per farti comprendere meglio..

Graziee

post-711317-0-36749700-1383694136_thumb.jpg

Link to comment
Share on other sites
tuxinside Newbie

tuxinside

Posted
Posted

@limpido: come ti avevo accennato, eviterei di usare il logo per fargli fare da immagine di sfondo dell'header. La soluzione più immediata che mi viene in mente è:

 

In global riga 546 modifica quelche c'è nella definizione di header con questo:

#header {
    background-image: url("/shop/negozioA/img/logo-2.jpg?1383693359");
    height: 200px;
    position: relative;
}

l'url fornito è quello del logo di adesso, ti consiglio di spostare il file del logo su una cartella del tuo sito e modificare il link di conseguenza.


Sempre nello stesso file (global.css), da qualche parte, aggiungi questo:

.sf-contener.clearfix {
    background: none repeat scroll 0 0 #FFFFFF;
}

Poi scegli un logo che sia rappresentativo del tuo negozio e lo sostituisci.

Questa non è la soluzione migliore ne la più "pulita", e potrebbe dare noie se fai molte modifiche al tema grafico rispetto al tema standard...

 

 

Purtroppo non posso spiegarti come ho fatto, sarebbe più lungo di fare le modifiche personalmente: studiati un po di CSS e vedrai che diventa semplice lavorare con i fogli di stile!!

Link to comment
Share on other sites
limpido Newbie

limpido

Posted
Posted

Grazie mille diciamo che sto raggiungendo il mio scopo.. :)  :) :)  :)  :)  :)  

 

mi servirebbe un altro piccolo aiuto, adesso vorrei far scomparire il logo "your logo here"  ho seguito qualche guida stesso sul forum ma forse fanno riferimento a versioni vecchie, e non trovo il codice

 

Poi volevo chiederti secondo te come posso capire quanti pixel in lunghezza e' l'immagine che dovrei utilizzare in questo tema? quella che ho creato blu per farti comprendere...?

Link to comment
Share on other sites
tuxinside Newbie

tuxinside

Posted
Posted

@Limpido: dai un occhiata al file header.tpl nella directory del tuo tema. Dovresti trovare qualcosa del tipo:
 

<a id="header_logo" href="{$base_dir}" title="{$shop_name|escape:'htmlall':'UTF-8'}">
    <img class="logo" src="{$logo_url}" alt="{$shop_name|escape:'htmlall':'UTF-8'}"  />
</a>

semplicemente cancella questo pezzo di codice. (Personalmente uso un tema diverso da quello standard su tutti i miei ecommerce, quindi non so bene se sul tema predenifito il codice sia esattamente questo).

Il div che contiene l'header è definito nel css come largo 980px, quindi l'immagine dovrebbe avere questa misura.


Se già non lo stai facendo, per semplificarti la vita più di un pò, installa l'estensione firebug per mozilla firefox, ed impara ad usarla. Secondo me (senza voler far nascere inutili e sterili discussioni sul miglior browser!!) è in assoluto l'accoppiata migliore per lavorare sulle pagine web.

  • Like 1
Link to comment
Share on other sites
limpido Newbie

limpido

Posted
Posted

Ti ringrazio ancora per la disponibilita' e ho installato il componente che mi hai detto su firefox, vediamo un po di imparare :-)

 

Ti volevo chiedere un'altra delucidazione se ti e' possibile darmela, i Tab dove stanno scritti categorie, fornitori, etcc si possono cambiare con delle immagini? ho notato che tale modifica deve essere apportata sempre in global.css, ma posso solo cambiare i colori ma non ho capito bene come posso piazzare un immagine dentro al tab e non il colore.

 

Poi ho notato che se cambio colore cambia anche il colore del tab centrale quello con la scritta "Prodotti in vetrina", quindi se anche riesco ad inserire un immagine uguale per i tab a sx e a dx dello schermo poi avro' il problema del tab centrale poiché e molto piu' lungo e avrei un immagine distorta.

 

La mia domanda e' la seguente posso solo inserire un immagine al posto del colore dei tab che si trovano a sx (es: categorie, fornitori etcc.) e a destra (cerca, speciali etcc) e NON cambiare nulla nel tab centrale "Prodotti in vetrina" oppure scegliere un immagine diversa in questo tab centrale?

TI allego un immagine per farti comprendere meglio

 

 

 

 

post-711317-0-80907200-1383992395_thumb.jpg

Link to comment
Share on other sites
tuxinside Newbie

tuxinside

Posted
Posted (edited)

@limpido: se po fa, se po fa... ed è pure semplice. La pappa pronta è questa:

Aggiungi a global.css:

#left_column .title_block {
    background-image: url("INDIRIZZO_DELL_IMMAGINE"); 
}

Il discorso però è che se vuoi modificarti il template senza nessuna conoscenza di css o per ogni modifichetta chiedi sul forum, ammesso e non concesso che ti venga risposto sempre, o impari almeno le basi dei fogli di stile e solo per le cose complesse chiedi qua.

 

Ti consiglio caldamente di lasciar perdere il sito per oggi, e di leggerti la guida a questa pagina: http://www.html.it/guide/guida-css-di-base

 

Mi sono permesso di dare un occhio alle lezioni fondamentali per scremarti il lavoro, e sono queste (a mio avviso):

1 - 2 - 3 - 4 - 7 - 9 - 10- 11 - 12 - 14 - 15 - 16 - 17 - 18 - 19 - 20 - 21 - 22 - 23 - 24 - 26 - 27 - 28 - 29

 

L'altro strumento che ti ho consigliato, Firebug, assieme alle tue nuove conoscenze dovrebbe renderti la vita più semplice coi CSS almeno del 90%.

 

Lo so che all'inizio può spaventare non sapere da che parte rifarsi, ma ti assicuro che i CSS sono semplici rispetto ad altre emenità con le quali devi fare i conti per personalizzare il sito, sempre che ti interessi fare un lavoro ben fatto che porti a maggiori conversioni e quindi a vendite.

 

In ogni caso, se può esserti d'aiuto, ti posso dire questo: prestashop è un casino all'inizio, sembra impostato in modo estremamente confusionario e i file che servono per generare una singola pagina sono sparsi tra 5/7 cartelle. Capirci qualcosa è dura... poi ci lavori ogni giorno e ti rendi conto che per fortuna è stato tutto ben diviso per sezioni logiche che rendono la vita del programmatore quasi semplice.

 

A grandi linee posso dirti che finchè lavori solo sul tema grafico, dovrai modificare:

- i CSS che si limitano a modificare le apparenze della pagina (quindi colori, caratteri, dimensioni...)

- i file TPL che creano la pagina HTML

- Solo per grosse modifiche dovrai toccare i file PHP ed eventualmente i JS del tuo tema. (se non conosci questi linguaggi, comprati un bel libro!!)

 

PS: Un ultimo consiglio: tieni duro e non mollare! Se hai bisogno di aiuto, siamo qua sul forum per aiutarti... però almeno le basi di HTML, CSS e un infarinatura di PHP e MYSQL sono necessarie se vuoi fare ecommerce gestendolo in autonomia... O paghi profumatamente qualcuno per fare un sito che spesso non vende... ;)

Edited by tuxinside (see edit history)
Link to comment
Share on other sites
limpido Newbie

limpido

Posted
Posted

ti do perfettamente ragione, il problema e che devo fare un portale per gennaio 2013 e lo dovrei consegnare a me va bene il sito di default pero' vorrei solo fare delle piccole modifiche stutturali per poi partire con la grafica al suo interno.

 

Ho gia' inserito il file per tab a sx e dx e come immaginavo nella parte centrale del sito tale immagine risulta replicata, mi puoi consigliare un codice per bloccarla? oppure vi e' un modo per poter selezionare un'altra immagine solo nella parte centrale del sito? (sempre il tab dove vi e' la scritta "Prodotti in vetrina"

Link to comment
Share on other sites
tuxinside Newbie

tuxinside

Posted
Posted

Tu hai dichiarato:

.block .title_block, .block h4 {
    background-image: url("/shop/negozioA/img/logo-2-tab.png");
    color: #FFFFFF;
    font-size: 12px;
    font-weight: bold;
    padding: 6px 11px;
    text-shadow: 0 1px 0 #000000;
    text-transform: uppercase;
}

ed ovviamente le immagini vengono replicate...

come ti avevo detto non è li che devi dichiarare la regola. Quindi cancella background-image: url("/shop/negozioA/img/logo-2-tab.png"); dalla definizione di sopra e aggiungi le 2 nuove regole:


#left_column .title_block {
    background-image: url("/shop/negozioA/img/logo-2-tab.png");
}

#right_column .title_block {
    background-image: url("/shop/negozioA/img/logo-2-tab.png");
}

Link to comment
Share on other sites
limpido Newbie

limpido

Posted
Posted

una piccola delucidazione vorrei cambiare lo sfondo a dx e a sx dello schermo se vado a modificare questa parte

 

body{
 font:normal 11px/14px Arial, Verdana, sans-serif;
 color:#222;
 background:#fff      

 

la voce background mi modifica tutto lo sfondo e possibile modificare il colore a sx o a dx dello schermo? cioe' far prendere il colore o l'immagine indicata solo all'estero e non all'interno come accade nella foto che vi allego.

 

 

post-711317-0-46680300-1384016427_thumb.jpg

Link to comment
Share on other sites
tuxinside Newbie

tuxinside

Posted
Posted

Credo ci siano almeno 10 modi di risolvere l'inghippo, la soluzione più rapida è lasciare il body del colore che vuoi, esempio il verde marcio attuale (oddio, magari no, spero sia solo per test :P) ed aggiungere la regola:

 

#columns {
    background: none repeat scroll 0 0 #FFFFFF;
}
 
sempre in global.css
Link to comment
Share on other sites
limpido Newbie

limpido

Posted
Posted

Mi serve ancora un piccolo aiutino sto anche utilizzando il componente per firefox ma non riesco a capire a volte su quali file devo interagire per procedere a dei cambiamenti di colore/stile etc...

 

il mio problema adesso si pone sulla barra del menu centrale, che voglio far diventare trasparente e cambiare colore al carattare per intergrarla all'interno del sito..

 

L'unica cosa e che non riesco a capire quali file devo modificare...

 

mi potete dare un aiuto? vi allego anche un file per farvi comprendere...

post-711317-0-46112600-1384343527_thumb.jpg

Link to comment
Share on other sites
tuxinside Newbie

tuxinside

Posted
Posted

@Limpido: ho dato un occhiata al sito ma ho visto che hai tolto il menu, quindi aiutarti è un pochino più complesso, comunque la barra ha alcune proprietà css definite in global.css ed altre (buona parte) dentro i vari css di /modules/blocktopmenu.

 

Se usi un tema modificato, è probabile che dentro /themes/nometema/modules/blocktopmenu ci siano altri file css. In questo caso le modifiche devi farle ai css contenuti nel tema, che "sovrascrivono" (override) quelli nella cartella dei moduli.

 

Comunque il nome del file da modificare (finche si parla di solo css) te lo suggerisce firebug. In caso di 2 css con le stesse proprietà ti segnala quale sta usando (gli altri attributi che vede ma che non usa te li barra).

Link to comment
Share on other sites
  • 1 month later...
TOMACALZATURE Newbie

TOMACALZATURE

Posted
Posted

@TomaCalzature: mi sembra che hai il problema opposto. Tra la sommità della pagina ed il logo c'è un sacco di spazio bianco. Io lo toglierei dando un brutale:

.logo {
margin-top: -70px;
}

PS: molto carino il tuo sito TomaCalzature. Quel blocco laterale di ricerca che usi, una vera figata, come si chiama?

 

 

 

Ciao TUXINSIDE,
 
scusami se ti rispondo solo oggi........il blocco si chiamo "BLOCCO NAVIGAZIONE A STRATI"

 

 

 

  TOMA calzature

    scarpe nero giardini e café noir

Link to comment
Share on other sites
  • 2 weeks later...
  • 4 years later...
Excalibur81 Newbie

Excalibur81

Posted
Posted

Ciao a tutti, anch'io sto impazzendo con il logo. Nel tema che sto usando è decisamente troppo piccolo, ma se provo ad aumentare le dimensioni si "inguia" tutta la parte sopra della pagina... il menu va a capo invece di essere accanto al logo, ecc.

Ho provato a studiare un po i CSS con questa guida https://www.mrwebmaster.it/css/guida-css/

La guida è fatta molto bene e ho iniziato a capirci qualcosa: credo che il problema sia legato al FLOAT ma non capisco perchè se i due elementi (LOGO e MENU) hanno una dimensione che si somma fa 100% uno dei due vada ugualmente a capo... mi spiego meglio: il design ha una ampiezza di 980 pixel, il logo lo vorrei portare a 360 pixel, mentre il menu a 620 pixel... totale 980... ma perchè il menu continua ad andare a capo? Se riporto il logo a 240 pixel (dimensione originale) tutto va a posto... ma è troppo piccolo!

 

Qualcuno ha qualche idea? Grazie a tutti

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...