Back to top

Autore Topic: [RISOLTO] Protostar - pagina scorrevole su immagine di sfondo  (Letto 4025 volte)

Offline ofranco

  • Appassionato
  • ***
  • Post: 215
  • Sesso: Maschio
    • Mostra profilo
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
« Ultima modifica: 10 Feb 2016, 21:21:27 da ofranco »
Finché abbiamo dei ricordi, il passato dura.
Finché abbiamo delle speranze, il futuro ci attende.
Finché abbiamo degli amici, il presente vale la pena di essere vissuto.

Offline $Red

  • Moderator
  • Instancabile
  • *****
  • Post: 5351
  • "Bastard Inside"
    • Mostra profilo
Re:Protostar - pagina scorrevole su immagine di sfondo
« Risposta #1 il: 10 Feb 2016, 18:18:23 »
Ciao ofranco, se ho capito cosa intendi realizzare puoi farlo con un modulo o plugin tipo Marco's Parallax altri li trovi nella categoria 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  :)

Offline ofranco

  • Appassionato
  • ***
  • Post: 215
  • Sesso: Maschio
    • Mostra profilo
Re:Protostar - pagina scorrevole su immagine di sfondo
« Risposta #2 il: 10 Feb 2016, 21:18:21 »
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:
Codice: [Seleziona]
$doc->addScript('templates/'.$this->template.'/js/jquery.backstretch.js');Fai in modo che si presenti cosi:
Codice: [Seleziona]
{
    $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:
Citazione
<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:
Codice: [Seleziona]
<?php
$doc
->addScriptDeclaration('
    (function($) {
    $(document).ready(function() {
        $.backstretch(["templates/protostar/images/tua_immagine.jpg"]);
    });
})(jQuery);
'
);
?>

Fai in modo che si presenti cosi:
Codice: [Seleziona]
<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:

Codice: [Seleziona]
.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
Finché abbiamo dei ricordi, il passato dura.
Finché abbiamo delle speranze, il futuro ci attende.
Finché abbiamo degli amici, il presente vale la pena di essere vissuto.

Offline $Red

  • Moderator
  • Instancabile
  • *****
  • Post: 5351
  • "Bastard Inside"
    • Mostra profilo
Re:[RISOLTO] Protostar - pagina scorrevole su immagine di sfondo
« Risposta #3 il: 10 Feb 2016, 21:29:53 »
grazie per aver condiviso la tua soluzione con tutti  :)

Offline darkshadow

  • Nuovo arrivato
  • *
  • Post: 1
    • Mostra profilo
Re:Protostar - pagina scorrevole su immagine di sfondo
« Risposta #4 il: 17 Dic 2016, 23:25:18 »
Codice: [Seleziona]
[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.

Offline conti1

  • Global Moderator
  • Instancabile
  • ********
  • Post: 9075
  • Sesso: Maschio
    • Mostra profilo
Re:[RISOLTO] Protostar - pagina scorrevole su immagine di sfondo
« Risposta #5 il: 18 Dic 2016, 23:33:48 »
ciao e possibile avere un link del risultato finale
se possibile postare il link  x risolvere al meglio il problema grazie
evitare nomi commerciali grazie

 



Web Design Bolzano Kreatif