Joomla.it Forum
Joomla! 3 => I Template di Joomla! 3 => : ofranco 08 Feb 2016, 15:01:03
-
Grazie alle numerose guide e post esistenti sul forum sto cercando di personalizzare il template Protostar che è installato di default su joomla 3.4.8.
Vorrei utilizzarlo con il layout statico che scorre su un'immagine di sfondo (non scorrevole) che mi occupa il 100% dello schermo.
Confido nel vostro aiuto.
Grazie per le risposte che mi vorrete dare.
Saluti, FC
-
Ciao ofranco, se ho capito cosa intendi realizzare puoi farlo con un modulo o plugin tipo Marco's Parallax (http://extensions.joomla.org/extensions/extension/style-a-design/page-background/marco-s-parallax-background-scroller) altri li trovi nella categoria Page Background (http://extensions.joomla.org/category/style-a-design/page-background), penso che si possa fare anche in css con risultato diverso,ma per quello devi attendere la risposta di qualcuno esperto io non ci arrivo fin là mi dispiace :)
-
Grazie per avermi risposto $Red.
Ho risolto il problema e posto questa breve guida che potrebbe interessare ad altri. Spero sia utile e che faccia piacere.
Scarichi jquery backstretch e lo copi nella cartella: templates/protostar/js/jquery.backstretch.js.
Alla fine del codice .php metti questo:
$doc->addScript('templates/'.$this->template.'/js/jquery.backstretch.js');Fai in modo che si presenti cosi:
{
$doc->addScript('templates/'.$this->template.'/js/jquery.backstretch.js');
}
?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" dir="<?php echo $this->direction; ?>">
<head>Poi, appena dopo l'apertura del tag body:
<body class="site <?php echo $option
. ' view-' . $view
. ($layout ? ' layout-' . $layout : ' no-layout')
. ($task ? ' task-' . $task : ' no-task')
. ($itemid ? ' itemid-' . $itemid : '')
. ($params->get('fluidContainer') ? ' fluid' : '');
inserisci questo codice:
<?php
$doc->addScriptDeclaration('
(function($) {
$(document).ready(function() {
$.backstretch(["templates/protostar/images/tua_immagine.jpg"]);
});
})(jQuery);
');
?>
Fai in modo che si presenti cosi:
<body class="site <?php echo $option
. ' view-' . $view
. ($layout ? ' layout-' . $layout : ' no-layout')
. ($task ? ' task-' . $task : ' no-task')
. ($itemid ? ' itemid-' . $itemid : '')
. ($params->get('fluidContainer') ? ' fluid' : '');
echo ($this->direction == 'rtl' ? ' rtl' : '');
?>">
<?php
$doc->addScriptDeclaration('
(function($) {
$(document).ready(function() {
$.backstretch(["templates/protostar/images/tua_immagine.jpg"]);
});
})(jQuery);
');
?>
<!-- Body -->
<div class="body">
<div class="container<?php echo ($params->get('fluidContainer') ? '-fluid' : ''); ?>">
L'immagine di sfondo deve trovarsi della cartella "images" del template Protostar.
Credo che così non c'è da sbagliarsi.
Se desiderate che il livello superiore (quello che è diventato scorrevole) sia trasparente, aprite il file css del template Protostar (si trova nella catella css) e alla riga 4609 aggiungete la riga "opacity" come ho fatto io:
.carousel-control:focus {
color: #fff;
text-decoration: none;
opacity: 0.9;
filter: alpha(opacity=90);
variando il valore 0.1 - 0.9 varia anche la trasparenza.
Buon lavoro!
Saluti, Franco
-
grazie per aver condiviso la tua soluzione con tutti :)
-
[quote author=ofranco link=topic=257134.msg1194201#msg1194201 date=1455135501]
Scarichi jquery backstretch e copi nella cartella: templates/protostar/js/jquery.backstretch.js.
Alla fine del codice .php:
{
$doc->addScript('templates/'.$this->template.'/js/jquery.backstretch.js');
}
?>
<!DOCTYPE html>
<html xmlns="[url]http://www.w3.org/1999/xhtml[/url]" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" dir="<?php echo $this->direction; ?>">
<head>
Poi al tag body:
<body class="site <?php echo $option
. ' view-' . $view
. ($layout ? ' layout-' . $layout : ' no-layout')
. ($task ? ' task-' . $task : ' no-task')
. ($itemid ? ' itemid-' . $itemid : '')
. ($params->get('fluidContainer') ? ' fluid' : '');
echo ($this->direction == 'rtl' ? ' rtl' : '');
?>">
<?php
$doc->addScriptDeclaration('
(function($) {
$(document).ready(function() {
$.backstretch(["templates/protostar/images/tua_immagine.jpg"]);
});
})(jQuery);
');
?>
<!-- Body -->
<div class="body">
<div class="container<?php echo ($params->get('fluidContainer') ? '-fluid' : ''); ?>">
Ho inserito passo passo il codice, ma la pagina non scorre sull'immagine di fondo. Potrebbe non funzionare con Joomla! 3.6.4?
Ringrazio per l'aiuto.
-
ciao e possibile avere un link del risultato finale