Autore Topic: Sfondo Protostar (Letto 13410 volte)

X-mac · « **il:** 13 Mar 2013, 21:44:59 »

Ciao, vorrei sapere nel template Protostar come fare a sostitituire il colore BIANCO dello sfondo del template con un altro colore da me scelto.

Grazie a tutti per l'aiuto

tonicopi · « **Risposta #1 il:** 18 Mar 2013, 23:17:00 »

Cambi a tuo piacere a riga 6088 del template.css questa regola:

Codice: [Seleziona]

.body .container {
  background-color: #FFFFFF;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 4px 4px 4px 4px;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.05);
  padding: 20px;
}

Ma non è lo sfondo del sito ma del contenitore dei contenuti

X-mac · « **Risposta #2 il:** 19 Mar 2013, 07:23:09 »

Grazie 1000 provo subito

claudio65 · « **Risposta #3 il:** 03 Mag 2013, 16:27:21 »

Ciao a tutti,
nel template in questione sto tentando d'inserire un'immagine di sfondo, senza alcun successo.
Sapete indicarmi la retta via?

Grazie fin d'ora

mau_develop · « **Risposta #4 il:** 03 Mag 2013, 16:59:50 »

scarichi jquery backstretch e lo copi nella cartella del template /js/jquery.backstretch.js, se non c'è creala

tra gli header metti questo:

Codice: [Seleziona]

$doc->addScript('templates/'.$this->template.'/js/jquery.backstretch.js');
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' : '');
-------------------------------------------------------------------------------------

Codice: [Seleziona]

<?php
$doc->addScriptDeclaration('
    (function($) {
    $(document).ready(function() {
        $.backstretch(["templates/protostar/images/tua_immagine.jpg"]);
    });
})(jQuery);
');
?>

--------------------------------------------------------
prima di qs:

<div class="body">

claudio65 · « **Risposta #5 il:** 06 Mag 2013, 01:06:11 »

Molte, molte grazie MWC,
come di consueto i tuoi post mi sono di prezioso aiuto, ho visto che con jquery.backstretch.js posso anche mettere diversi sfondi in dissolvenza il che non guasta

Ringrazio te e tutti i membri del forum che consentono anche alle capre come me

di imparare sempre cose nuove.

mau_develop · « **Risposta #6 il:** 06 Mag 2013, 08:29:29 »

se non dovesse funzionare, così come ogni altro script jquery che si aggiunge, è quasi sempre un problema di Jquery caricato da joomla, o non aggiornato o non corretto perchè vers ui o troppo aggiornato.
Mentre nel b/end diventa un casino, nel f/end spesso conviene proprio caricare un JQuery a parte escludendo quello joomla

claudio65 · « **Risposta #7 il:** 06 Mag 2013, 15:31:20 »

Nel mio caso funziona perfettamente, in quanto al caricamento di jquery in Joomla conosco poco, comunque ho visto che a tale scopo esistono svariati plugin i quali facilitano tale operazioni e che dovrebbero contemplare il noconflict.
Per quanto riguarda b/end e f/end non ho capito quanto da te esposto, ovviamente la mia incomprensione è data dalla scarsissima conoscenza come detto in precedenza

.

mau_develop · « **Risposta #8 il:** 06 Mag 2013, 15:39:46 »

se funziona, bene così!... anche nelle pagine interne o solo nella home?

cmq sarebbe bello per sfruttare al meglio il boostrap e il suo responsive, riuscire a "simulare" la dimensione della pagina con un div e l'immagine darla come sfondo a quello così da poter applicare lo stile hidden-phone che la nasconde alla visualizzazione mobile

claudio65 · « **Risposta #9 il:** 06 Mag 2013, 16:15:08 »

Funziona in tutte le pagine, in merito al div per lo stile hidden-phone lo prendo in seria considerazione anche se visualizzandolo in emulazione IOS e Android lo sfondo non disturba in quanto è un colore unico con svariate sfumature, ovviamente se inserirò in definitiva uno sfondo con immagine, l'hide-phone sarà sicuramente opportuno.

il_kreatore · « **Risposta #10 il:** 21 Set 2013, 16:37:05 »

Chiedo venia se riprendo questo topic..

Il cambio colore del fondo è ok se lo tengo statico come indicato da Toni .. ma pena lo rendo fluido torna bianco...

ooo saltato qualche passaggio?

mau_develop · « **Risposta #11 il:** 21 Set 2013, 22:20:05 »

l'hai reso fluido quindi hai cambiato regola css per lo sfondo la quale non avrà dentro ciò che dice toni
prova a guardare ora come si chiama la classe che usi con firebug e modifichi lo sfondo in quella

il_kreatore · « **Risposta #12 il:** 22 Set 2013, 15:42:24 »

Grazie

dopo aver letto in un sto americano che non era possibile farlo

(o perlomeno con il mio inglese maccheronico ho capito così) ma spulciando ci sono riuscito ...non solo la cornice interna ma anche quella esterna :
per la cornice esterna la troviamo alla riga 6618

Codice: [Seleziona]

body.site.fluid {
   background-color: #0d5133;

mentre alla riga 517 il contenitore dei contenuti

Codice: [Seleziona]

container-fluid {
   padding-right: 20px;
   padding-left: 20px;
      *zoom: 1;

ho aggiunto la riga "background-color: #0d5133;"

il_kreatore · « **Risposta #13 il:** 23 Set 2013, 10:41:23 »

Un'altra informazione, per quanto riguarda il fluido... è possibile impostare una massima larghezza?
grazie

tonicopi · « **Risposta #14 il:** 25 Set 2013, 23:10:25 »

Certo. Devi impostare un max-width al contenitore principale...

il_kreatore · « **Risposta #15 il:** 26 Set 2013, 00:50:34 »

Grazie Toni, mi puoi dire come, non sono un esperto $:-\$
Grazie

tonico · « **Risposta #16 il:** 17 Ott 2013, 10:34:06 »

Ho usato jquery.backstretch ma questo mi adatta l'immagine inserita alla dimensione della finestra, quello che vorrei utilizzare io è il normale comportamento html per le immagini di sfondo ossia il riempimento tipo mattonella senza ridimensionamento. Con backstretch è possibile? oppure devo utilizzare altro?

ofranco · « **Risposta #17 il:** 08 Feb 2016, 20:30:48 »

Sto cercando di inserire l'immagine di sfondo al template protostar, come è stato suggerito qui.
Ho provato in svariati modi e non mi funziona!

Era da tanto che non mi cimentavo con queste cose.

l'index.php, in joomla 3.4, ora è così:

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' : ''); ?>">

Sopra viene detto di inserire tra gli header questo codice:

Codice: [Seleziona]

$doc->addScript('templates/'.$this->template.'/js/jquery.backstretch.js');
L'header del mio index.php è questo:

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' : ''); ?>">
            <!-- Header -->
            <header class="header" role="banner">
           
                <div class="header-inner clearfix">
                    <a class="brand pull-left" href="<?php echo $this->baseurl; ?>/">
                        <?php echo $logo; ?>
                        <?php if ($this->params->get('sitedescription')) : ?>
                            <?php echo '<div class="site-description">' . htmlspecialchars($this->params->get('sitedescription')) . '</div>'; ?>
                        <?php endif; ?>
                    [/url]
                    <div class="header-search pull-right">
                        <jdoc:include type="modules" name="position-0" style="none" />
                    </div>
                </div>
            </header>

Scusatemi ma non riesco proprio a capire come inserire quel codice tra gli header. $:-\$

Sono riuscito, poi, a scaricare il plugin da qui:

https://github.com/srobbin/jquery-backstretch/zipball/master

Vorrei sapere, di tutti quei files e cartelle, cosa dovrei copiare nella directory "/protostar/js"?

Ringrazio anticipatamente per le risposte che mi vorrete dare.

Saluti, Franco

ofranco · « **Risposta #18 il:** 09 Feb 2016, 18:09:20 »

Ciò che mi sta facendo dannare è questa parte:

Citazione

scarichi jquery backstretch e lo copi nella cartella del template /js/jquery.backstretch.js, se non c'è creala

Citazione

tra gli header metti questo:

Codice: [Seleziona]

$doc->addScript('templates/'.$this->template.'/js/jquery.backstretch.js');
Riguardo al primo punto nell'archivio .zip che ho scaricato ho trovato due file JScript: jquery.backstretch.min e jquery.backstretch
per non sbagliare li ho messi tutti e due nella cartella "js" del template.
Per il secondo punto, invece, non riesco a comprendere cosa significa "tra gli header metti questo"
L'header dell'index è questo:

Codice: [Seleziona]

<header class="header" role="banner">            
				<div class="header-inner clearfix">
					<a class="brand pull-left" href="<?php echo $this->baseurl; ?>/">
						<?php echo $logo; ?>
						<?php if ($this->params->get('sitedescription')) : ?>
							<?php echo '<div class="site-description">' . htmlspecialchars($this->params->get('sitedescription')) . '</div>'; ?>
						<?php endif; ?>
					</a>
					<div class="header-search pull-right">
						<jdoc:include type="modules" name="position-0" style="none" />
					</div>
				</div>
			</header>

Possibile che non c'è nessuno in grado di darmi una dritta?

Colgo l'occasione per inviare un saluto a tutti del forum.
FC

tomtomeight · « **Risposta #19 il:** 09 Feb 2016, 20:51:22 »

Mettilo alla fine dopo l'ultimo /div e prima della chiusura dell /header

ofranco · « **Risposta #20 il:** 09 Feb 2016, 21:13:18 »

Ciao tomtomeight,
grazie per avermi risposto.
A dire la verità, proprio in questo momento, sono riuscito a risolvere il problema in questo modo:

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>

Come potrai vedere, l'ho inserito con due parentesi graffe alla fine del codice php.
Poi, per il file JScript (quello giusto) era jquerybackstretch.js
Spero che questa dritta possa essere d'aiuto a qualcuno.
Saluti a tutti, Franco

Autore Topic: Sfondo Protostar (Letto 13410 volte)

mau_develop

mau_develop

mau_develop

mau_develop