Joomla.it Forum
Joomla! 1.5.x (versione con supporto terminato) => Joomla! 1.5 => I Template di Joomla 1.5.x => : Razzo 27 Jan 2009, 15:20:09
-
vorrei inserire i pulsanti per settare la dimensione dei caratteri come c'è nel template ja_purity...
Come fare?
-
il mio sito è www.razzo.org
i link per aumentare e diminuire il testo sono quelli in fondo alla pagina, quelli con il testo...
-
idee?
se qualcuno sa spiegarmi come fare in qualunque altro modo a me va bene, è che non capisco proprio come fare...
-
Ciao Razzo,
guarda qui e troverai quello che cerchi
http://extensions.joomla.org/extensions/style-&-design/typography
-
ora provo a vedere se riesco a integrarli nel template ;)
-
allora ho risolto, sono riuscito ad integrare la funzione nel template, ora vi spèiego come fare per gli altri niubbi come me:
MINI GUIDA INSERIMENTO PULSANTI DIMENSIONE CARATTERE NEL TEMPLATE
1) modificare il file index.php:
- tra i tag <head> e </head> inserite:
<script type="text/javascript" src="<?php echo $this->baseurl; ?>/templates/<?php echo $this->template?>/js/text_dim.js"></script>
- dove volete all'interno del body inserite:
<div id="fontsize">
<a href="#" onclick="changeFontSize(1); return false;" class="larger"><img style="margin:0 padding:0;" src="templates/<?php echo $this->template ?>/images/resizer_01.jpg" alt="+" /></a>
<a href="#" onclick="changeFontSize(-1); return false;" class="smaller"><img style="margin:0 padding:0;" src="templates/<?php echo $this->template ?>/images/resizer_02.jpg" alt="-" /></a>
<a href="#" onclick="revertStyles(); return false;" class="reset"><img style="margin:0 padding:0;" src="templates/<?php echo $this->template ?>/images/resizer_03.jpg" alt="reset" /></a>
</div>
2) Caricamento dello script:
- create la cartella (se già non esiste) js all'interno della cartella del template
- dentro di essa ci metterete il file text_dim.js che ora creiamo...
- aprite il blocco note del vostro pc e copiateci il testo sottostante:
//Simple Font Resizer Javascript//
/**
* Simple Font Resizer Javascript
* @package Joomla 1.5
* @copyright Copyright (C) 2008 UnDesign. All rights reserved.
* @license http://www.gnu.org/copyleft/gpl.html GNU/GPL
* This program is free software; you can redistribute it and/or
* modify it under the terms of the GNU General Public License
* as published by the Free Software Foundation; either version 2
* of the License, or (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*/
var defaultSize = 70;
var prefsLoaded = false;
var defaultFontSize = defaultSize;
var currentFontSize = defaultFontSize;
function revertStyles(){
currentFontSize = defaultFontSize;
changeFontSize(0);
}
function changeFontSize(sizeDifference){
currentFontSize = parseInt(currentFontSize) + parseInt(sizeDifference * 10);
if(currentFontSize > 150){
currentFontSize = 150;
}else if(currentFontSize < 20){
currentFontSize = 20;
}
setFontSize(currentFontSize);
};
function setFontSize(fontSize){
var stObj = (document.getElementById) ? document.getElementById('content_area') : document.all('content_area');
document.body.style.fontSize = fontSize + '%';
//alert (document.body.style.fontSize);
};
function createCookie(name,value,days) {
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
}
else expires = "";
document.cookie = name+"="+value+expires+"; path=/";
};
function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
};
window.onload = setUserOptions;
function setUserOptions(){
if(!prefsLoaded){
cookie = readCookie("fontSize");
currentFontSize = cookie ? cookie : defaultFontSize;
setFontSize(currentFontSize);
prefsLoaded = true;
}
}
window.onunload = saveSettings;
function saveSettings()
{
createCookie("fontSize", currentFontSize, 365);
}
- salvate come text_dim.js e caricatelo sul server come precedentemente descritto..
3) Immagini dei pulsanti
- create la images (se già non esiste) js all'interno della cartella del template
- create le immagini:
resizer_01.jpg (aumento carattere)
resizer_02.jpg (diminuzione carattere)
resizer_03.jpg (reset)
- caricate le immagini:
4) Il CSS
- modificate il css del vostro template in modo che i pulsanti stiano dove volete voi...
io ho messo questo, provate se vi piace:
#fontsize {
position: fixed;
right: 5px;
top: 2px;
z-index: 10;
display: block;
}
Ultime mote per spiegare un paio di cose:
nel mio css c'è:
body {
color: white;
font-size: 70%;
font-family: Verdana, Arial, Helvetica, sans-serif;
}quel font-size: 70%; implica che nel text_dim.js ci sia la variabile defaultSize impostata a 70 ( var defaultSize = 70; ).
Voi modificate di conseguenza la vostra impostazione.
Se non avete un font-size nel vostro template mettete 100 come valore di defaultSize.
p.s. un moderatore può modificare ti titolo del topic (io non posso più) con [risoclto][miniguida]pulsanti dimensione caratteri e togliere i codici che ho postato prima che non funzionano e con si capisce nulla ne se no
grazie
-
Ecco fatto. Tolta un pò di confusione e modificato il titolo.
Non ti dispiace se quando ho tempo ne faccio una miniguida nel wiki? ;)
-
Perfetto, bravi!
-
si nessun problem, sono anzi felicissimo della cosa perchè il wiki non lo so proprio utilizzare se non per cercare le cose :P
se vuoi ti allego anche le immagini dei pulsanti
-
Ecco fatto:
http://wiki.joomla.it/index.php?title=Pulsanti_per_ridimensionare_i_caratteri
Vedi se va bene ;)
-
yeah!!! fantastico!
altra aggiunta però:
if(currentFontSize > 150){
currentFontSize = 150;
}else if(currentFontSize < 20){
currentFontSize = 20;
150 è la percentuale massima oltre il quale il testo non verrà ridimensionato
e 20 quella minima sotto il quale non scenderà
p.s=spam: ventus85 e tonicopi avete esattamente lo stesso numero di post XD
-
come si fa per implementare anche il pulsante contrasto?
in questo sito un esempio: http://www.comune.polinago.mo.it/
ho aperto anche un post sul problea che ho, in quanto (pur seguendo questa guida) la dimensione dei caratteri negli articoli non aumenta.
Suggerimenti?
-
come si fa per implementare anche il pulsante contrasto?
in questo sito un esempio: http://www.comune.polinago.mo.it/
ho aperto anche un post sul problea che ho, in quanto (pur seguendo questa guida) la dimensione dei caratteri negli articoli non aumenta.
Suggerimenti?
C'è una discussione apposta sull'accessibilità
http://forum.joomla.it/index.php/board,23.0.html
-
Bravissimi, ottima pensata a tutti e due!
Perchè non scrivete anche un articolo in merito qui su joomla.it?
-
Scusate se riapro la discussione, ma a me non funziona.
Ho seguito tutto alla lettera e, quando clicco su uno dei 3 pulsanti, non accade nulla.
Nel mio template.css ho impostato il font principale in px (12px).
Sarà per questo motivo che non mi funziona?
-
non funziona nel senso che non ti cambia nulla o che li cambia a caso?
-
Nel senso che non cambia nulla.
Se, però, lo clicco più volte ecco che mi spagina le colonne, ma il carattere rimane sempre lo stesso.
-
prova a darmi il link del sito che guardo se capisco qualcosa...
(non hai degli important nel css?)
-
http://thewebcreation.altervista.org/ anche se è un po spaginato, l'importante è che si veda com'è.
-
Ho riletto la guida, ma proprio non ne vengo a capo. E se usassi un modulo già pronto? Come mai nel template JaPurity funziona?
-
dal tuo template:
<script type="text/javascript" src="/templates/pwc-music/fonts/text_dim.js"></script>
non è come è descritto nella guida...
-
Non capisco cosa c'è che non va. Nel file index.php del mio template noto la presenza corretta del codice
<script type="text/javascript" src="<?php echo $this->baseurl; ?>/templates/<?php echo $this->template?>/fonts/text_dim.js"></script>
Mi sfugge qualcosa?
-
1) modificare il file index.php:
- tra i tag <head> e </head> inserite:
<script type="text/javascript" src="<?php echo $this->baseurl; ?>/templates/<?php echo $this->template?>/js/text_dim.js"></script>
tu hai messo fonts/text_dim.js e non js/text_dim.js
-
Ma scusami, Razzo, il codice non va a cercare nella cartella root_printipale/templates/template_in_uso/directory_scelta ? Io ho messo fonts ma perchè ho creato la cartella fonts invece di creare la cartella js.
-
si il tuo ragionamento funge se ci hai messo dentro il file...
in ogni caso secondo me prova prima come dice la guida pari pari e vedi se funziona, se funziona bene, prova a spostarlo dove vuoi e vedi se funziona ancora
se non funziona almeno cerco/cerchiamo (perchè non è detto che io sappia risolvere il problema) di capire il perchè, ma almeno escludiamo la possibilità che tu l'abbia messo una cartella che non esiste...
poi ora provo a vedere se capisco qualcos'altro...
-
beh in teoria se provi a scrivere l'indirizzo completo del sito che ti ho dato+nome template + fonts dovresi arrivare al file js.
-
è qualcosa nel CSS...
disattivato funziona correttamente lo script
prova a cambiare tutti i font-size in percentuale...
se è quello il problema dimmelo che provo a modificare lo script
-
Scusami Razzo ma non ho capito una cosa.
Se, per esempio, ho 20 dichiarazioni di tipo "font-size" con valori tutti diversi tra loro. Cosa metto? Cioè metto "%" al posto di "px" o devo cambiare proprio la misura? Perchè è chiaro che 20px != 20%.
-
ho provato a cambiare tutti i font-size in percentuale e funziana...anche se devo scegliere bene le %.....però non mi cambia il font-size degli articoli.....
graie
-
Infatti è quelloc he mi riferivo. Cioè dovrei convertire le misure px in percentuale. Basta una semplicd proporzione matematica o mi sfugge qualche proprietà dei css?
-
basta una semplice proporzione....ma a me non cambia il font degli articoli
-
allora appena ho tempo provo a modificare il JS in modo che modifichi anche i px e non solo le percentuali...
a me modifiche il testo degli articoli...
guarda se hai un:
body {
font-size: 70%;
}o una percentuale sul body insomma...
-
per quanto mi riguarda non ho alcuna percentuale nel mio css.
-
eh se non hai percentuali allora non funzionerà mi sa...
o si prova a modificare il js in modo perché prenda anche i px e li incrementi o boh...
come detto prima appena ho tempo provo a modificare il js, ma ultimamente sono un po' preso dall'uni...
-
Ok,
quanto meno potresti dirmi a quanto equivale 1px in percentuale? In modo da poter riscrivere tutti i pixels e metterli in proporzione.
Grazie.
-
Scusatemi ma non mi è chiara una cosa...questo metodo permette di ingrandire anche il font di pagine wrapper?
I moduli che ho provato fino ad ora non mi permettevano di farlo, ingrandivano solo le pagine articolo, blog, il template e altro che fosse diverso da "wrapper"...
-
1PX non so a quanto corrisponda in percentuale... posso soli dirti di fare delle prove...
posso dirti che da me 12px corrispondono al 110%, ma secondo me dipende dalle impostazioni che dai nel body e dalla risoluzione dello schermo etc..
no per ora sui wrapper nulla, mettto tra le cose da fare se riesco...
anche se penso che anche li dipenda da se è dichiarato in percentuale o in px
-
ciao Razzo,
volevo chiederti se ci sono novità sulla possibilità di far cambiare anche i px
ciao
-
ok ci sono riuscito,
è possibile inserire un altro pulsantino che fa cambiare il css?
praticamente io ho due css (template.css e tempalte1.css) cliccando sul nuovo pulsantino cambia questi css
grazie
ti allego i due file( index.php e .js) di joolmafap in modo se riesci di integrare anche gli accesskey:
[allegato eliminato da un amministratore perchè più vecchio di 365 giorni]
-
grande perchè io avevo provato ma senza risultati...
domani (o in settimana) ho un esame, poi mi dedico a integrarlo se riesco ;) )