suffisso classe css

[Irene93]

ho seguito le guide
http://www.joomla.it/articoli-community-3x-tab/7374-mini-guida-alla-personalizzazione-del-template-protostar.html
http://www.joomla.it/articoli-della-community/4277-moduli-style-classe-e-suffisso-css.html
La mia domanda ora vi sembrerà stupida, ma in quale file devo modificare il css?
NEll'allegato il modulo che voglio cambiare è l'azienda, l'olio extravergine......, e ho modificato su element.style ma dove devo applicare queste modifiche???

[steganoga]

se leggi bene è scritto nell'immagine che hai postato e ti indica anche la riga a cui trovarlo nel file

[Irene93]

io ho modificato element.style quindi non è indicato dove modificare

[steganoga]

l'element.style credo sia inserito direttamente nell'html, devi modificre la classe del div.
l'html lo trovi nel template del modulo

[Irene93]

modificando quello di sotto e altri si modifica il resto O.O

[giusebos]

confermo che quando vedi scritto element.style si tratta di codice in linea.
Puoi sovrascriverlo ricreando la regola nel tuo css principale e aggiungendo "!important" nelle dichiarazioni da sovrascrivere.
Inserire un suffisso aiuta molto e lo si può inserire lasciando uno spazio prima del nome, di fatto creando una classe o usando una classe già esistente.
Vedi esempio:

Codice: [Seleziona]

.tuosuffisso {
background: #ffcc00;
border:1px solid #cccccc;
color:#2C78D0!important;
}
come noterai nella dichiarazione "color" cè in aggiunta "!important", questo fa si che questa regola sovrascriva la regola in linea.

[Irene93]

non l'ho capito O.o

[giusebos]

cosa non hai capito?

[Irene93]

devo modificare template.css???
e devo scrivere

.tuosuffisso {
background-image: url('/pirroneolio/images/menu.png);
margin-left:375px;
margin-right:375px;
-webkit-box-shadow: 2px 2px 8px #000;
-webkit-border-radius: 2px;
}dove? e .iltuosuffisso cosa ci va invece?
cioè
{
background-image: url('/pirroneolio/images/menu.png);
margin-left:375px;
margin-right:375px;
-webkit-box-shadow: 2px 2px 8px #000;
-webkit-border-radius: 2px;
}
questo è quello che dovrei scrivere per fare diventare il modulo (html personalizzato) come lo voglio
che devo fare 

[$Red]

ciao, non sono un esperto quindi potrei sbagliare ma prova cosi:
- vai a estensioni gestione template sul lato sinistro trovi stili e template clicca su template poi su protostar Dettagli e File
- clicca in alto su nuovo file
- ti si apre una finestra, clicca sul lato sinistro la cartella css seleziona dal menu a tendina "tipo di file" css inserisci il nome custom e clicca crea
- ti si apre la pagina con il campo per inserire il tuo codice e salva (alternativa crei il file in locale con un editor di testo e lo salvi con estensione css poi usi il carica file)
- scarica per backup il file index.php del template
-torna gestione template sul lato sinistro trovi stili e template clicca su template poi su protostar Dettagli e File - sul lato sinistro clicca sul file index.php
- nel campo dove visualizzi il codice cerca

Codice: [Seleziona]

// Add Stylesheets
$doc->addStyleSheet($this->baseurl . '/templates/' . $this->template . '/css/template.css');- aggiungi subito sotto

Codice: [Seleziona]

$doc->addStyleSheet($this->baseurl . '/templates/' . $this->template . '/css/custom.css');
Edit: ho corretto avevo messo il  template hator che è del backend invece di mettere protostar 
Edit 2: L'ho provato a me funziona perfettamente