Premesso che sono a zero ... ma con tanta voglia di imparare
nel tempo libero stò cercando di fare qualche customizzazione del tema Bartik
se non ho capito male devo modificare il file style.css presente nella cartella temi ... devo ancora capire come copiare il tutto nella cartella sites e poi modificare questo (credo sarebbe meglio anche se ho un singolo sito su cui lavorare)
Ho spostato i link principali (main menu) sulla destra (ma me li ha messi in ordine inverso ... ma non è un problema)
ora vorrei far diventare il carattere dei link in bold ma dopo varie prove non ci sono riuscito e, seconda cosa vorrei mettere una immagine come sfondo nella header ma anche inserendo:
background-image: url(http.../sites/default/files/pictures/titolo.jpg); - ho tagliato l'url qui, nelle mie prove è ovviamente completo
background-repeat: repeat-x;
background-position: top;
non riesco a vederlo
mi date qualche dritta su cui lavorare ?
grazie
1)copia il tema nella cartella sites/all/themes, altrimenti al primo aggiornamento perdi tutto
2)invece di modificare styles.css modifica il file .info aggiungendo un tuo foglio di stile e fai tutto su quello
3)usa firebug per scoprire come fare
http://www.chromeos.eu
ho copiato bartik nella cartella sites/all/themes praticamente adesso ho:
sites/all/themes/s_bartik
ma come faccio a decidere di usare questo ? non me lo vede dal menù appearance ... lo inserire come se stessi installando da un URL ?
ps. se volessi seguire la strada più corretta e facessi una cartella in SITES con il nome del mio SITO, cosa dovrei copiarci dentro (dalle cartelle attuali) per non perdere il lavoro fatto fino ad ora ?
http://scriptors.info/
quella strada credo non esista nemmeno, i temi di default dovrebbero avere tutto il necessario per funzionare, solitamente gli creo da zero e non mi faccio questi problemi. Hai eliminato la cache da drupal?
http://www.chromeos.eu
Caches cleared ma in Appearance mi fa vedere sempre i soliti Bartik e Seven 7.0 .... e come inattivi Garland e Stark 7.0
Per quanto riguarda il discorso di creare una cartella in SITES con il nome del sito ... lo leggevo su di un libro 'Foundation Drupal 7'
EDIT: trovato l'inghippo, ho rinominato il /sites/all/themes/s_bartik/bartik.info in /sites/all/themes/s_bartik/s_bartik.info e, nel suo interno, gli ho cambiato il nome con (sempre) s_Bartik: name = s_Bartik
ed ecco visualizzato il nuovo theme
http://scriptors.info/
ma mi da questi errori:
mentre lasciando tutto come Bartik e rimoninando la cartella (Bartik) in /themes come old_Bartik sembra essere tutto a posto anche se mi ha dato questi errori iniziali:
ps. per essere certo ho eliminato la cartella Bartik da /themes (dopo aver fatto il backup) ed in effetti sembra essere tutto ok, il tema Bartik selezionato è quello presente in /sites
http://scriptors.info/
mi sono dimenticato di dirti che dovevi cambiare nome al tema, nel file .info, quello risolveva il problema
http://www.chromeos.eu
Ho messo su Firebug ma non riesco a capire come fare per inserire una immagine sul Header
firebug sulla destra mi fa vedere questo:
riesco a cambiare qualche colore ma nulla di più ... il background-image: url ecc. dove lo metto ?
http://scriptors.info/
Prendi una guida di html e css di base, poi riesci a capire come inserirla, i metodi sono tanti e dipende da cosa vuoi fare esattamente, vuoi mettere un'immagine statica, potresti farlo sia modificando page.tpl.php e mettendo il tag img sia con il background-image oppure crei una nuova regione e metti il blocco li. Dipende da cosa vuoi fare.
http://www.chromeos.eu
Voglio mettere una semplice immagine di sfondo nella zona header (diciamo 1920 x 100) in modo che, a prescindere della dimensione della finestra del browser prensa dempre l'intera larghezza dello schermo.
Poi su questa immagine ci sarà il logo, il titolo e gli altri eventuali campi.
Il comando CSS l'ho trovato su varie parti in rete ma non funziona (non capisco cosa sbaglio), ma devo provare a fare altre prove ... probabilmente faccio prima a creare un nuovo 'body' e piazzarlo nel campo header, magari il logo ed il titolo lo metto direttamente sull'immagine ...
grazie per la pazienza ;-)
in color.css (da quello che mi dice firebug) ho trovato dove inserire l'immagine
#header {background-color: #48a9e4;
background-image: url("/sites/default/files/pictures/titolo.jpg");
/* background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0779bf), to(#48a9e4));
/* background-image: -moz-linear-gradient(-90deg, #0779bf, #48a9e4);
}
se inserisco background-image: url('/sites/default/files/pictures/titolo.jpg'); l'immagine appare a schermo (in firebug ed usano l'apice singolo: '
quando do l'OK l'apice diventa doppio ... messo la linea in color.css ma l'immagine non viene a schermo
http://scriptors.info/
fare queste cose è motlo più difficile se non si ha una base di html e css, ti ripeto che ti conviene studiartelo e non andare a tentativi.
Ad esempio sbagli percorso, il file css si trova all'interno di themes/bartik/css per cui prima devi ritornare nella root con ../../../ e poi andare a recuperare l'immagine con il codice da te inserito.
#header {
background-color: #48a9e4;
background-image: url("../../../sites/default/files/pictures/titolo.jpg");
}
http://www.chromeos.eu
Ho fatto una decina di prova, anche mettendo l'immagine nella cartella css ... ma non sono riuscito a combinare nulla, secondo me faccio qualche errore di grammatica ... ma non so quale ... sigh
http://scriptors.info/
Studiati prima una guida di html e css, così è impossibile da fare
http://www.chromeos.eu
Fermo restando che i comandi sono quelli e c'è poco da discutere (non c'è nessuna polemica .. non si sa mai ;-)).
La sostanza è questa:
background-image: url(immagine.jpg);background-repeat: no-repeat;
background-position: center;
e fin qui la cosa diciamo che funziona, sono riuscito nell'intento.
Il problema è che Bartik combina un po di cosa apparentemente (per me) strane:
normalmente, usando il tema di default -> Appearence -> Blue Lagoon, il file incriminato dovrebbe essere
/sites/all/themes/s_bartik/css/color.cssmentre se si cambia qualcosa il tutto va a finire nel color.css presente però a questo indirizzo
/sites/default/files/color/bartik-48739ff3variando il nome della cartella per ogni volta che si modifica qualcosa, quindi se si usa il tema colori custom si deve andare a modificare il css relativo e si perde tutto ogni volta che si modifica qualche colore dalle Appearance.
ps. se si riselezione il tema colo di defaut dalla cartella /sites/default/files/color/bartik-48739ff3 sparisce il contenuto.
Se ne capisco di più aggiungo un promemoria al topic
http://scriptors.info/
infatti solitamente si crea un proprio file css per ovviare a questi problemi, lo puoi aggiungere dal .info. Oltretutto conviene copiarsi il tema e modificarne il nome in sites/all/themes, dato che se non hai l'accortezza di salvare tutto al successivo aggiornamento perdi le tue modifiche.
http://www.chromeos.eu
Quello di spostare il tema l'ho giò fatto
quello di crearsi il proprio file css è una buona idea in quanto potrei indirizzare ogni singolo elemento al proprio css (cosa che drupal 7.0 permette da quanto vedo)
approfittando della tua pazienza potresti farmi un piccolo esempio in modo poi da procedere da solo ?
in pratica cosa devo aggiungere al .info e come definisco la classe css ?
ad esempio voglio associare ad un menu ILLUMINAZIONE la classe css illuminazione
grazie
ps. stavo cercando sul forum e forse ho trovato la risposta, mi basta vedere se funziona
es.nel file .info:
stylesheets[all][] = illuminazione.css
stylesheets[all][] = prova2.css
stylesheets[all][] = test.css
nella cartella del tema (sempre la stessa):
illuminazione.css
prova2.css
test.css
quindi imparo meglio il css divertendomi con illuminazione.css ed associando 'illuminazione.css' al menu ILLUMINAZIONE
... se non ho capito male ... giusto ?
http://scriptors.info/
esatto per i css per i menu o lo fai da tema o con qualche modulo, solitamente io lo faccio da tema o prendo l'id da firebug
http://www.chromeos.eu
Mi sono fatto il file: illuminazione.css (nella cartella dei CSS) facendo un copia/incolla della sezione che mi serviva da style.css:
/* $Id: illuminazione.css,v 1.53 2011/01/04 06:23:29 dries Exp $ *//* ------------------ Sidebar ----------------- */
.sidebar .section {
padding-top: 10px;
}
.sidebar .block {
background-color: #DDFFDD;
border: 2px solid;
color: #004400;
background-color: #
padding: 15px 20px;
margin: 0 0 20px;
}
.sidebar h2 {
border-bottom: 1px solid #110000;
color: #0F0F0F;
font-weight: bold;
margin: 0 0 0.5em;
padding-bottom: 5px;
text-shadow: 1px 1px 1px #000000;
}
.sidebar .block .content {
font-size: 0.914em;
line-height: 1.4;
}
.sidebar tbody {
border: none;
}
.sidebar tr.even,
.sidebar tr.odd {
background: none;
border-bottom: 1px solid #d6d6d6;
}
Il problema, e credo sia normale, è che mi cambia lo stile di tutti i blocchi-menu e non sono del blocco-menu 'illuminazione' a cui ho associato (come css) il file illuminazione.css
da admin/structure/block/manage/menu/menu-articoli/configure -> Skinr block settings -> CSS classes -> illuminazione
Credo dovrei modificare il termine .sidebar con qualcosa di specifico e indicativo del singolo blocco-menu illuminazione ... come si fa ? (domanda da 10 milioni di dollari ... mi metto alla ricerca ma se qualcuno ha già la risposta benvenga ;-))
ps. le modifiche fatte funzionano solo con Firefox, con IE non cambia nulla
EDIT:
dovrei definire il singolo blocco, nel mio caso quindi (da firebug):
#block-menu-menu-articoli{overflow:hidden;}
http://scriptors.info/
con firebug ti prendi l'id in modo da modificare solo quel blocco
http://www.chromeos.eu
Fino ad ieri funzionava ma oggi ha deciso di riprendersi il css da style.css ... e non da illuminazione.css
ps. quando vado a configurare il blocco (Home » Administration » Structure » Blocks) mi da questo errore:
Notice: Undefined index: _options in skinr_ui_form_alter() (line 422 of /home/content/70/7233670/html/modules/skinr/skinr_ui.module).Comunque mi stavo incasinando anche io visto che non avevo detto di avere il modulo Skinr
http://scriptors.info/
Per il momento ho disabilitato Skinr e, nel tempo libero, ho iniziato a leggere qualcosa di css .. però mi piace fare prove pratiche altrimenti mi annoio ... :-(
discriminando un po le cose diciamo che per prima cosa dovrei definire:
#mioblocco {proprietà e valori} separandolo da .sidebar . block {proprietà e valori} anzi, in realtà basterebbe semplicemente capire come identificare ed inserire il #mioblocco {proprietà e valori} in quanto avrebbe specificità superiore essendo specifica (in pratica dovrebbe avere il sopravvento anche su eventuali dichiarazioni identiche).
il blocco in questione è identificato da Firebug come:
<div id="block-menu-menu-articoli" class="block block-menu contextual-links-region">un aiutino ?
http://scriptors.info/
#block-menu-menu-articoli {valori}
http://www.chromeos.eu
In effetti (magari avrei preferito la 'pappa' più pronta ... ma devo darti ragione del tuo ermetismo ... scherzo un po) ero io che mi facevo troppe pippe mentali volendo complicare cose che complicate non sono ... con il senno di poi.
quello che volevo modificare era:
.sidebar .section {padding-top: 10px;
}
.sidebar .block {
background-color: #DDFFDD;
background-image: url(illuminazione2.jpg);
background-repeat: no-repeat;
background-position: center;
border: 2px solid;
color: #004400;
padding: 15px 20px;
margin: 0 0 20px;
}
mentre in effetti il .sidebar - .section - .block non centrano nulla, basta prendere i soli comandi (facili da apprendere e/o trovare in rete) e fare
#block-menu-menu-articoli{padding-top: 10px;
background-color: #DDFFDD;
background-image: url(illuminazione2.jpg);
background-repeat: no-repeat;
background-position: center;
border: 2px solid;
}
e la cosa funziona egregiamente ... ho tagliato un po e sicuramente è da raffinare, ma la sostanza è questa.
Mi impappinavo nel voler modificare .sidebar che in effetti è una classe e, modificando questa (ammesso che sia l'ultima in ordine di lettura del browser) modificavo tutte le cose associate.
Mi sono dilungato ma si spera che per un eventuale 'cerca' sia di utilità ;-)
Ora ho da divertirmi parecchio
ps. poi ho riabilitato Skinr ed in effetti è lui che permette di associare la classe al singolo blocco ... decisamente comodo
http://scriptors.info/
Un altra cosa: senza entrare nel tema e modificarne qualcosa (che per altro non trovo), volevo fare una pagina inserendo una tabella ma lo sfondo della tabella diventa più scuro (credo che sia una convenzione standard).
Cosa posso inserire, se possibile, nel HTML della pagina (la tabella la creo in HTML) in modo che lo sfondo resti trasparente ?
http://scriptors.info/
basta che aggiungi i css necessari direttamente nella tabella.
http://www.chromeos.eu
Fatto, il problema è che mi cambia la formattazione di altre tabelle, ad esempio il layout del modulo degli ultimi aggiornamenti che nulla centra con la pagina in questione. Probabilmente devo capire come 'settare' le classi solo per questa pagina e/o eliminare la formattazione a fine pagina.
<style type="text/css">table {
border: 0;
border-spacing: 0;
font-size: 0.857em;
margin: 10px 0;
width: 100%;
}
table table {
font-size: 1em;
}
#footer-wrapper table {
font-size: 1em;
}
table tr th {
background: #ffffff;
/* background: rgba(0, 0, 0, 0.51); */
border-bottom-style: none;
}
table tr th,
table tr th a,
table tr th a:hover {
color: #FFF;
font-weight: bold;
}
table tbody tr th {
vertical-align: top;
}
tr td,
tr th {
padding: 4px 9px;
border: 0px none #fdd;
text-align: left; /* LTR */
}
#footer-wrapper tr td,
#footer-wrapper tr th {
border-color: #fff;
border-color: rgba(255, 255, 255, 0.18);
}
tr.odd {
background: none;
/* background: rgba(0, 0, 0, 0.105); */
}
tr,
tr.even {
background: none;
/* background: rgba(0, 0, 0, 0.063); */
}
table ul.links {
margin: 0;
padding: 0;
font-size: 1em;
}
table ul.links li {
padding: 0 1em 0 0;
}</style>
<table border="0" cellpadding="0" cellspacing="0" width="700">
<tbody>
<tr>
<td width="0">
<p class="rtejustify" style="margin: 0px; padding: 0px;">
... bla bla...bla bla .... il testo della tabella ...
ps. al di la che imparare qualcosa è sempre positivo, direi che la motivazione (mia personale) per utilizzare la tabella è che posso mettere, annidando altre tabelle, immagini e testo in maniera più personale, in pratica immagine sulla sinistra (ma spostata di 100px rispetto alla sinistra di inizio testo) e testo relativo all'immagine centrato rispetto l'immagine (normalmente mi inizia sulla stessa linea in basso)
Poi se devo inserire nella pagina anche (e capita spesso) delle informazioni che siano formattate ed allineate la tabella credo sia il sistema più semplice ed immediato.
... o si potrebbe risolvere ancora più facilmente in CSS ???
http://scriptors.info/
diciamo che per fare questo si usa cck + view, in modo che una volta fatto ti basta riempire i campi e si arrangia (scelta consigliata anche per il futuro e perchè Drupal serve proprio a semplificare il lavoro).
Per il problema di adesso basta che assegni alla tabella una classe del tipo:
<table class="tabmia">e il css lo personalizzi del tipo:
.tabmia tdhttp://www.chromeos.eu
Per i blocchi menù + Skinr + CSS ad hoc non c'è problema ...
per i moduli preesistenti o preconfigurati non riesco a combinare nulla ... sigh
ho (da firebug):
<div class="block block-node contextual-links-region novita" id="block-node-recent">ed il relativo css:
#contextual-links-region novita{overflow:hidden;}#contextual-links-region novita{
font: 14px arial;
font-weight: bold;
font-color: #000000;
padding-top: 10px;
background-color: #f0f0f0;
border: 1px solid;
filter:alpha(opacity=60);
opacity:0.6;
}
in questo caso ho provato a mettere altro, normalmente dovrebbe funzionare con
#block-node-recent{overflow:hidden;}#block-node-recent{ ecc ecc
ma non funziona
come mai ???
http://scriptors.info/
in teoria dovrebbe funzionare, forse c' è qualche altro codice css che nasconde il tuo....
http://www.chromeos.eu
ti ho mandato un messaggio, se potresti dare uno sguardo con firebug, io riesco solo a vedere quanto scritto in alto
grazie
http://scriptors.info/
In che file lo hai messo il css?
Hai svuotato cache e simili
http://www.chromeos.eu
Il file si trova dove si trovano tutti gli altri che funzionano correttamente:
/sites/all/themes/s_bartik/css(s_bartik è il nome che ho dato al tema)La cache l'ho svuotata più volte, in ogni caso modificando il CSS dei vari blocchi menu le modifiche funzionano subito, basta un refresh del browser
http://scriptors.info/
certo che con le "TABLE" c'è da smanettarci parecchio per eliminare qualsiasi bordo, hanno messo persino cose dentro CSS della cartella /modules/system
ps. nello specifico un top-border ad 1 pixel
http://scriptors.info/
#main-menu-links li.active-trail a {background: url("sfondo_gocce_buono.jpg");
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center center;
}
Perchè con IE 6 l'immagine di sfondo non resta fissa ? (eppure ha funzionato per una giornata e non ho toccato nulla)
http://scriptors.info/
salve ragazzi, sto cercando di realizzare un template responsive partendo da Responsive Bartik, cosi dopo averlo installato e fatto una copia in sites/all/themes e modificato il file .info, mi ritrovo con questo errore
ed altri accodati:
Notice: Undefined variable: hide_site_name in include() (linea 117 di /var/www/drupal/sites/all/themes/custom/templates/page.tpl.php).
e le impostazioni es. globali tipo nome sito = no non impostate
manca qualcosa?
grazie mille!!!