Autore Topic: Pagina OFFLINE come Landing Page (Letto 3144 volte)

wakeup · « **il:** 14 Mar 2012, 12:00:59 »

Salve a tutti, vado subito al dunque:
avrei il bisogno di costruire una Landing Page ma non avendo le possibilità, cercando nel web ho trovato questo link che spiega come modificare la pagina del sito OFFLINE inserendo un modulo (credo), una iscrizione alla News Letter ed altro, usandola quindi come Landing Page.
Beh, a me interesserebbe proprio questo, inserire nella pagina la News Letter oltre all'accesso, ma li è spiegato solo come inserire il countdown che a me interessa relativamente poco.
Quindi avrei necessità che qualcuno mi dicesse o consigliasse come fare.
Uso la v. 2.5.
Grazie!

maicolstaip · « **Risposta #1 il:** 14 Mar 2012, 12:25:33 »

Ciao wakeup,
il procedimento è identico.
Cosa non ti è chiaro?

wakeup · « **Risposta #2 il:** 15 Mar 2012, 09:03:59 »

Forse non avevo letto bene la guida. Ora ci provo

wakeup · « **Risposta #3 il:** 25 Mar 2012, 17:29:39 »

Allora, io vorrei inserire

un'immagine di sfondo,

eliminare se possibile la linea del riquadro che racchiude il Login con il nome del sito ed il messaggio

e sapere come posizionare i vari moduli (es: in basso, a destra o sinistra della pagina).

come faccio?
Grazie

maicolstaip · « **Risposta #4 il:** 25 Mar 2012, 17:56:25 »

Come ti ho scritto, il procedimento è identico.
Per l'immagine di sfondo:
apri il file offline.css e qui metti l'immagine, in questo caso si chiama "alpi.jpg"

Codice: [Seleziona]

body {
    background-color: #333333;
    background-image:url("../images/alpi.jpg");
    min-height: 600px;
    min-width: 980px;
    text-align: left;
}

Questo è il codice completo del file offline.php già depurato dalla maschera di login e dal nome del sito come da esempio

Codice: [Seleziona]

<?php
/**
 * @package        Joomla.Site
 * @copyright    Copyright (C) 2005 - 2012 Open Source Matters, Inc. All rights reserved.
 * @license        GNU General Public License version 2 or later; see LICENSE.txt
 */

defined('_JEXEC') or die;
$app = JFactory::getApplication();
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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>
    <jdoc:include type="head" />
    <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/beez_20/css/offline.css" type="text/css" />
    <?php if ($this->direction == 'rtl') : ?>
    <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/offline_rtl.css" type="text/css" />
    <?php endif; ?>
    <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/general.css" type="text/css" />
</head>
<body>
<jdoc:include type="message" />
<div class="bx-overlay"></div>
<div class="middle" id="wrp"> 
<div class="middle" id="inner">
 <div id="box-center">
 <jdoc:include type="modules" name="XXX" />
 </div>
 </div>
  </div>
  </div>
<div class="clear"></div>
        <?php if ($app->getCfg('offline_image')) : ?>
        <img src="<?php echo $app->getCfg('offline_image'); ?>" alt="<?php echo $app->getCfg('sitename'); ?>" />
        <?php endif; ?>

</body>
</html>

La parte che visualizza la posizione centrale, quella nera è questa

Codice: [Seleziona]

 <div id="box-center">
 <jdoc:include type="modules" name="XXX" />
 </div>

che viene posizionata con una regola nel file offline.css che è questa:

Codice: [Seleziona]

#box-center {
    background-color: #181818;
    box-shadow: 0 0 10px #111111;
    margin-left: auto;
    margin-right: auto;
    padding: 40px;
    position: relative;
    width: 700px;
    z-index: 30;
}

Ovviamente dovrai giocare con il file offline.php per aggiungere eventuali nuove posizioni e con il file offline.css per posizionare quelle posizioni modulo(in basso/ a destra / a sinistra).

Ciao!

wakeup · « **Risposta #5 il:** 25 Mar 2012, 19:17:04 »

Grazie davvero per la spiegazione dettagliata,
ma ti volevo chiedere: il codice per l'immagine di sfondo dove devo metterlo, perchè se lo posiziono dopo il <body> già presente, viene visualizzata sulla pagina il codice così com'è scritto nel file .php.
E poi il file .jpg da me scelto per lo sfondo in quale cartella devo inserirlo?

maicolstaip · « **Risposta #6 il:** 25 Mar 2012, 19:23:34 »

Ciao,
il codice dell'immagine, quello che inizia con
body { etc etc

devi metterlo nel file offline.css

Il file .jpg devi metterlo nella cartella images del template

wakeup · « **Risposta #7 il:** 25 Mar 2012, 19:29:21 »

L'ho inserito così, ma è ovvio che sbaglio qualcosa
...

Codice: [Seleziona]

    <jdoc:include type="head" />
    <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/beez_20/css/offline.css" type="text/css" />
    <?php if ($this->direction == 'rtl') : ?>
    <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/offline_rtl.css" type="text/css" />
    <?php endif; ?>
    <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/general.css" type="text/css" />
</head>
<body>
 {
    background-color: #333333;
    background-image:url("../images/alpi.jpg");
    min-height: 600px;
    min-width: 980px;
    text-align: left;
}
<jdoc:include type="message" />
<div class="bx-overlay"></div>
<div class="middle" id="wrp"> 
<div class="middle" id="inner">
 <div id="box-center">
 <jdoc:include type="modules" name="XXX" />
 </div>
 </div>
  </div>
  </div>
<div class="clear"></div>

...

maicolstaip · « **Risposta #8 il:** 25 Mar 2012, 19:34:05 »

devi metterlo nel file offline.css

wakeup · « **Risposta #9 il:** 25 Mar 2012, 19:40:25 »

oops! e dove lo trovo?

wakeup · « **Risposta #10 il:** 25 Mar 2012, 19:43:54 »

Ok! il peggio è risolto

Ora mancano le rifiniture, per esempio: io lavoro con un 13" risoluzione 1280x800, ed una volta caricata la pagina in questione, l'immagine di sfondo viene visualizzata "affiancata".
Io ho creato una immagine con le dimensioni che mi hai proposto tu,
min-height: 600px;min-width: 980px;
Posso risolvere anche questo in qualche modo o devo ingrandire l'immagine?
ma se la ingrandisco poi come verrà visualizzata su altri schermi più piccoli o più grandi?

Ed ancora, ho scaricato un modulo per news letter che mi permette di scrivere, prima o dopo, un testo che però risulta spostato a sinistra. è possibile modificarlo?
Grazie

wakeup · « **Risposta #11 il:** 31 Mar 2012, 09:59:31 »

non abbandonarmi qui Maicol!!

come faccio a centrare l'immagine di sfondo senza averne altre uguali affiancate e posizionare i moduli anche in basso?

wakeup · « **Risposta #12 il:** 06 Apr 2012, 11:43:15 »

Ho risolto il problema per il posizionamento dello sfondo, e non solo, grazie all'aiuto di questo link

http://it.html.net/tutorials/css/lesson3.php

nel caso potesse servire a qualcuno...

wakeup · « **Risposta #13 il:** 16 Apr 2012, 19:33:31 »

Vorrei un consiglio, e poichè riguarda la Landing page che sto facendo come descritto in questo post, continuo qui.
Diciamo che la pagina è pronta, ma c'è un piccolo problemino. Ho inserito al suo interno il modulo per le News Letter in cui c'è anche il link Privacy e termini d'uso a cui naturalmente devo assegnare una pagina omonima per il contenuto. Il problema è che pur assegnandola, (tramite ID), quando clicco sul link, viene visualizzato il popup che però come contenuto mostra la stessa Landing page.
Non vorrei che dato che il sito risulta Offline non è possibile visualizzare altre pagine all'infuori di quella!

Autore Topic: Pagina OFFLINE come Landing Page (Letto 3144 volte)

wakeup

Pagina OFFLINE come Landing Page

maicolstaip

Re:Pagina OFFLINE come Landing Page

wakeup

Re:Pagina OFFLINE come Landing Page

wakeup

Re:Pagina OFFLINE come Landing Page

maicolstaip

Re:Pagina OFFLINE come Landing Page

wakeup

Re:Pagina OFFLINE come Landing Page

maicolstaip

Re:Pagina OFFLINE come Landing Page

wakeup

Re:Pagina OFFLINE come Landing Page

maicolstaip

Re:Pagina OFFLINE come Landing Page

wakeup

Re:Pagina OFFLINE come Landing Page

wakeup

Re:Pagina OFFLINE come Landing Page

wakeup

Re:Pagina OFFLINE come Landing Page

wakeup

Re:Pagina OFFLINE come Landing Page

wakeup

Re:Pagina OFFLINE come Landing Page