modifiche tema Corporate Clean
Inviato da scristini il 19 agosto, 2017 - 09:11.
Buon giorno,
sono un utente poco esperta di drupal 7 ed ho creato un sito per la scuola con il tema Corporate Clean.
Sono riuscita a modificare modificare la dimensione delle due barre aggiungendo al file style.css del tema :
#sidebar-first {
width: 25%; /* - set float width left bar */
margin-left: 0px;
}
#sidebar-second {
width: 25%; /*- set float width right bar */
margin-left: 200px;
margin-right: 0px;
}
il sito è www.iisalessandrini.gov.it
ma non riesco a modificare la dimensione della "barra" centrale, cioè del contenuto.
Ringrazio chiunque mi possa aiutare.
Simonetta
simonetta cristini
Risposte
Ciao, trattandosi di un tema
Ciao, trattandosi di un tema basato su una griglia responsive credo che il miglior modo per interagire con le dimensioni degli elementi sia sfruttare la classi predefinite. Aprendo il file page.tpl.php all'interno del tema dovresti trovare questo codice:
...
<!-- #content -->
<div id="content">
<!-- #content-inside -->
<div id="content-inside" class="container_12 clearfix">
<?php if ($page['sidebar_first']) :?>
<!-- #sidebar-first -->
<div id="sidebar-first" class="grid_4">
<?php print render($page['sidebar_first']); ?>
</div><!-- EOF: #sidebar-first -->
<?php endif; ?>
<?php if ($page['sidebar_first'] && $page['sidebar_second']) { ?>
<div class="grid_4">
<?php } elseif ($page['sidebar_first'] || $page['sidebar_second']) { ?>
<div id="main" class="grid_8">
<?php } else { ?>
<div id="main" class="grid_12">
<?php } ?>
<?php if (theme_get_setting('breadcrumb_display','corporateclean')): print $breadcrumb; endif; ?>
<?php if ($page['highlighted']): ?><div id="highlighted"><?php print render($page['highlighted']); ?></div><?php endif; ?>
<?php if ($messages): ?>
<div id="console" class="clearfix">
<?php print $messages; ?>
</div>
<?php endif; ?>
<?php if ($page['help']): ?>
<div id="help">
<?php print render($page['help']); ?>
</div>
<?php endif; ?>
<?php if ($action_links): ?>
<ul class="action-links">
<?php print render($action_links); ?>
</ul>
<?php endif; ?>
<?php print render($title_prefix); ?>
<?php if ($title): ?>
<h1><?php print $title ?></h1>
<?php endif; ?>
<?php print render($title_suffix); ?>
<?php if ($tabs): ?><?php print render($tabs); ?><?php endif; ?>
<?php print render($page['content']); ?>
<?php print $feed_icons; ?>
</div><!-- EOF: #main -->
<?php if ($page['sidebar_second']) :?>
<!-- #sidebar-second -->
<div id="sidebar-second" class="grid_4">
<?php print render($page['sidebar_second']); ?>
</div><!-- EOF: #sidebar-second -->
<?php endif; ?>
</div><!-- EOF: #content-inside -->
</div><!-- EOF: #content -->
...
modificando questa selezione ad esempio con
...
<!-- #content -->
<div id="content">
<!-- #content-inside -->
<div id="content-inside" class="container_12 clearfix">
<?php if ($page['sidebar_first']) :?>
<!-- #sidebar-first -->
<div id="sidebar-first" class="grid_3">
<?php print render($page['sidebar_first']); ?>
</div><!-- EOF: #sidebar-first -->
<?php endif; ?>
<?php if ($page['sidebar_first'] && $page['sidebar_second']) { ?>
<div class="grid_6">
<?php } elseif ($page['sidebar_first'] || $page['sidebar_second']) { ?>
<div id="main" class="grid_9">
<?php } else { ?>
<div id="main" class="grid_12">
<?php } ?>
<?php if (theme_get_setting('breadcrumb_display','corporateclean')): print $breadcrumb; endif; ?>
<?php if ($page['highlighted']): ?><div id="highlighted"><?php print render($page['highlighted']); ?></div><?php endif; ?>
<?php if ($messages): ?>
<div id="console" class="clearfix">
<?php print $messages; ?>
</div>
<?php endif; ?>
<?php if ($page['help']): ?>
<div id="help">
<?php print render($page['help']); ?>
</div>
<?php endif; ?>
<?php if ($action_links): ?>
<ul class="action-links">
<?php print render($action_links); ?>
</ul>
<?php endif; ?>
<?php print render($title_prefix); ?>
<?php if ($title): ?>
<h1><?php print $title ?></h1>
<?php endif; ?>
<?php print render($title_suffix); ?>
<?php if ($tabs): ?><?php print render($tabs); ?><?php endif; ?>
<?php print render($page['content']); ?>
<?php print $feed_icons; ?>
</div><!-- EOF: #main -->
<?php if ($page['sidebar_second']) :?>
<!-- #sidebar-second -->
<div id="sidebar-second" class="grid_3">
<?php print render($page['sidebar_second']); ?>
</div><!-- EOF: #sidebar-second -->
<?php endif; ?>
</div><!-- EOF: #content-inside -->
</div><!-- EOF: #content -->
...
dovresti ottenere il layout 25% - 50% - 25% (se tre colonne) e 25% - 75% / 75% - 25% (se due colonne).
In generale la griglia è a 12 elementi e "grid_X" è la classe che identifica quante porzioni di questa griglia occupa l'elemento.
Molte grazie, ora provo
Molte grazie, ora provo
Salve @scristini mi permetto
Salve @scristini
mi permetto di farle notare che il sito non è il linea con le direttive normative sui siti della PA e le relative direttive di design dell'AGID (agenzia pubblica italiana per il digitale).
Qui troverà la documentazione tecnica (esatta) per la costruzione via codice dell'interfaccia utente: https://design-italia.readthedocs.io/it/stable/doc/introduzione-linee-guida-design.html
Va da se che i margini discrezionali sono pochi. Visto che la documentazione è stabile e al momento univoca. Le consiglio, per non incorrere in problemi, di adeguare l'UI a quanto sopra.
Saluti.
Ti ringrazio moltissimo per
Ti ringrazio moltissimo per l'avviso.
Ero a conoscenza del problema ed un pò alla volta, mi sto adeguando.
In relatà sono una semplice insegnante per cui fatico non poco a tenere aggiornato, secondo le varie normative, il sito della scuola.
grazie comunque.
@scristini, mmm, ma chi ti
@scristini,
mmm, ma chi ti ha affidato i lavori non si preoccupa del fatto che il sito possa non rispettare i requisiti normativi di contenuto e design previsti per i siti della Pubblica amministrazione? Fossi in te, io non mi prenderei nessuna responsabilità in merito, e non ci metterei la firma (visto che da quello che sto capendo fai l'insegnante e non la front-end developer).
Ad ogni modo provo ad aiutarti con un esempio concreto. Prendi come punto di partenza la relativa interfaccia grafica del sito del governo italiano: http://www.governo.it (e procedi in tal senso integrando codice e restante normativa per i siti della scuola/pa alle linee di design -componenti, bottoni, palette, ecc- vedi link sopra).
Crea in testa:
link al Ministero dell'Istruzione, dell'Università e della Ricerca (alto sx),
menu Hamburger (in linea)
bottore Area riservata/servizi online (alto dx)
social icone (alto dx-sotto)
barra ricerca (alto dx-sotto)
menu top: Offerta formativa, Organizzazione, Registro Elettronico (obbligatorio!), Contatti
e vai così, dropmenu e altre sezioni ecc, leggendo la documentazione e creando l'interfaccia secondo i requisiti normativi di contenuto e di design, fino ad arrivare al footer. Finita la homepage procedi con lo stesso criterio per le restanti pagine.
Spero di esserti stato d'aiuto.
Buon lavoro.
Grazie , mi hai aiutato
Grazie , mi hai aiutato molto.
Il fine settimana lo dedicherò a questo lavoro.
Grazie ancora.
Un link di
Un link di riferimento:
https://developers.italia.it/it/design
purtroppo su github si trova poco che sia subito funzionante per Drupal. Il forum è comunque attivo.
Sarebbe bello poter contribuire in qualche modo o aprire una discussione sull'argomento, molte amministrazioni e istituti italiani hanno adottato questo cms da tempo, c'è attività e interesse verso questa realtà opensource.