Creacion de una pagina personalizada con Joomla 3, baner en el homepage sin usar plugins

Ahora mostraré una forma sencilla de personalizar una pagina personalizada en Joomla 3, agregando un slideshow en javascript, sin usar plugin instalable. Una personalización a partir de la plantilla por defecto protostar.

Instalación

La instalación de Joomla es sumamente fácil en cualquier hosting ya que todos poseen script instaladores. Todo se hace con sólo un click así que éste paso es muy sencillo salvo que sea en un servidor propio


Configuración de Idioma

Si su sitio web queda instalado en español omita este paso.

Caso contrario dirigirse a
Extension -> Language  Manager
Install language

Ubicar el idioma español y dar click Instalar

Una vez instalado 

Elegir tanto para Installed Site y para Installed Administrator el español





Creación de artículos

Cree unos 2 o 3 artículos para la realización de pruebas
Contenido -> Gestor de Artículos -> Añadir nuevo artículo
En ésta etapa sube el texto e imágenes que desee



Subir imágenes para slideshow

Previa a la adición de slideshow puede subir las imágenes para el slideshow
Ir a Panel de Control
Gestor Multimedia
Ir a carpeta banner
Opción Subir

Y allí suba 3 o 4 imágenes grandes más o menos de 950px de ancho por 300 350 píxeles de alto


Copia de plantilla protostar a nueva plantilla personalizada

Extensiones -> Gestor de Plantillas
En el extremo izquierdo puede apreciar dos opciones:
  • Estilos
  • Plantillas

Seleccionar la opción Plantillas

Una vez allí verá las plantillas disponibles.

Dentro de esas plantillas esta la de Protostar
Detalles y archivos de la plantilla Protostar

Seleccione esta plantilla

Se abre otro menú y elegir la opción
Copiar plantilla
Asigne un nombre a esta nueva plantilla

En mi caso como ejemplo le puse Plusvela




Una vez hecho esto automáticamente se crea la plantilla llamada plusvela que es una copia exacta de protostar

Selecciona la opción izquierda
Estilos
Y allí asignar como sitio Predeterminado plusvela

Para verificar que el cambio ha sido realizado abre la pagina web y mire el código fuente

En la zona de template verá que ya está plusvela.

Ahora a personalizar.


Eliminar estilo inline 


Para tener total libertad de personalización mediante css y html debemos eliminar el estilo inline que se desarrolla cuando se elige colores desde el Panel de control. Para dicho fin comentaremos como si se tratase de html en la plantilla.

Extensión -> Gestor de plantillas

Opción izquierda plantillas

Selecciona la plantilla creada para éste caso particular plusvela

Aparece el árbol de archivos o ficheros html, css, etc.

Lo primero es abrir el archivo index.php

Ubica éste texto
   <?php // Template color ?>
  <?php if ($this->params->get('templateColor')) : ?>
    <style type="text/css">
        body.site
        {
            border-top: 3px solid <?php echo $this->params->get('templateColor'); ?>;
            background-color: <?php echo $this->params->get('templateBackgroundColor'); ?>
        }
        a
        {
            color: <?php echo $this->params->get('templateColor'); ?>;
        }
        .navbar-inner, .nav-list > .active > a, .nav-list > .active > a:hover, .dropdown-menu li > a:hover, .dropdown-menu .active > a, .dropdown-menu .active > a:hover, .nav-pills > .active > a, .nav-pills > .active > a:hover,
        .btn-primary
        {
            background: <?php echo $this->params->get('templateColor'); ?>;
        }
        .navbar-inner
        {
            -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .25), inset 0 -1px 0 rgba(0, 0, 0, .1), inset 0 30px 10px rgba(0, 0, 0, .2);
            -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .25), inset 0 -1px 0 rgba(0, 0, 0, .1), inset 0 30px 10px rgba(0, 0, 0, .2);
            box-shadow: 0 1px 3px rgba(0, 0, 0, .25), inset 0 -1px 0 rgba(0, 0, 0, .1), inset 0 30px 10px rgba(0, 0, 0, .2);
        }
    </style>
    <?php endif; ?>

y agrégale al principio <!-- y al final --> quedando así como un comentario

<!--
    <?php // Template color ?>
  <?php if ($this->params->get('templateColor')) : ?>
    <style type="text/css">
        body.site
        {
            border-top: 3px solid <?php echo $this->params->get('templateColor'); ?>;
            background-color: <?php echo $this->params->get('templateBackgroundColor'); ?>
        }
        a
        {
            color: <?php echo $this->params->get('templateColor'); ?>;
        }
        .navbar-inner, .nav-list > .active > a, .nav-list > .active > a:hover, .dropdown-menu li > a:hover, .dropdown-menu .active > a, .dropdown-menu .active > a:hover, .nav-pills > .active > a, .nav-pills > .active > a:hover,
        .btn-primary
        {
            background: <?php echo $this->params->get('templateColor'); ?>;
        }
        .navbar-inner
        {
            -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .25), inset 0 -1px 0 rgba(0, 0, 0, .1), inset 0 30px 10px rgba(0, 0, 0, .2);
            -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .25), inset 0 -1px 0 rgba(0, 0, 0, .1), inset 0 30px 10px rgba(0, 0, 0, .2);
            box-shadow: 0 1px 3px rgba(0, 0, 0, .25), inset 0 -1px 0 rgba(0, 0, 0, .1), inset 0 30px 10px rgba(0, 0, 0, .2);
        }
    </style>
    <?php endif; ?>
 -->

Una vez hecho esto guarda los cambios: Guardar

Personalizar CSS


Ir a la carpeta css y abrir el archivo template.css

Aproximadamente en la linea 6974 está la zona de edición css del body.site, para ayuda usa firefox o google chrome que poseen muy buenos inspectores de código fuente.

Para este ejemplo quitare el fondo grisáceo y el borde superior azul y el padding de 20px

quedando así:
body {
    background-color: #ffffff;
}
body.site {
    padding: 0;
    background-color: #ffffff;
}

Dejando de ésta manera un fondo blanco sin padding el body

Y para el container eliminaré las esquinas redondeadas y el borde así como la sombra de la caja o contenedor.

Quedando algo como ésto:
.body .container {
    background-color: #fff;
}

Agregar javascript, css y html para el baner y que se active solo en el  home o frontpage


Para esto me he servido del aporte en la pagina

http://codepen.io/zuraizm/pen/vGDHl

Agregaré por separado:
  • El css a template.css
  • El código javascript al index.php antes de cerrar el head.
  • El código html en el cuerpo luego de la zona Header y añadidura del respectivo código para que sólo se muestre en el homepage o frontpage

CSS a agregar al final del template.css

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,600);   

html {
  border-top: 5px solid #fff;
  background: #58DDAF;
  color: #2a2a2a;
}

html, body {
  margin: 0;
  padding: 0;
  font-family: 'Open Sans';
}

h1 {
  color: #fff;
  text-align: center;
  font-weight: 300;
}

#slider {
  position: relative;
  overflow: hidden;
  margin: 20px auto 0 auto;
  border-radius: 4px;
}

#slider ul {
  position: relative;
  margin: 0;
  padding: 0;
  height: 200px;
  list-style: none;
}

#slider ul li {
  position: relative;
  display: block;
  float: left;
  margin: 0;
  padding: 0;
  width: 500px;
  height: 300px;
  background: #ccc;
  text-align: center;
  line-height: 300px;
}

a.control_prev, a.control_next {
  position: absolute;
  top: 40%;
  z-index: 999;
  display: block;
  padding: 4% 3%;
  width: auto;
  height: auto;
  background: #2a2a2a;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  font-size: 18px;
  opacity: 0.8;
  cursor: pointer;
}

a.control_prev:hover, a.control_next:hover {
  opacity: 1;
  -webkit-transition: all 0.2s ease;
}

a.control_prev {
  border-radius: 0 2px 2px 0;
}

a.control_next {
  right: 0;
  border-radius: 2px 0 0 2px;
}

.slider_option {
  position: relative;
  margin: 10px auto;
  width: 160px;
  font-size: 18px;
}

Código javascript a agregar antes de cerrar el Head

jQuery(document).ready(function ($) {

  $('#checkbox').change(function(){
    setInterval(function () {
        moveRight();
    }, 3000);
  });
 
    var slideCount = $('#slider ul li').length;
    var slideWidth = $('#slider ul li').width();
    var slideHeight = $('#slider ul li').height();
    var sliderUlWidth = slideCount * slideWidth;
   
    $('#slider').css({ width: slideWidth, height: slideHeight });
   
    $('#slider ul').css({ width: sliderUlWidth, marginLeft: - slideWidth });
   
    $('#slider ul li:last-child').prependTo('#slider ul');

    function moveLeft() {
        $('#slider ul').animate({
            left: + slideWidth
        }, 200, function () {
            $('#slider ul li:last-child').prependTo('#slider ul');
            $('#slider ul').css('left', '');
        });
    };

    function moveRight() {
        $('#slider ul').animate({
            left: - slideWidth
        }, 200, function () {
            $('#slider ul li:first-child').appendTo('#slider ul');
            $('#slider ul').css('left', '');
        });
    };

    $('a.control_prev').click(function () {
        moveLeft();
    });

    $('a.control_next').click(function () {
        moveRight();
    });

});    

Código html a agregar

<div id="slider">
  <a href="#" class="control_next">>></a>
  <a href="#" class="control_prev"><</a>
  <ul>
    <li>SLIDE 1</li>
    <li style="background: #aaa;">SLIDE 2</li>
    <li>SLIDE 3</li>
    <li style="background: #aaa;">SLIDE 4</li>
  </ul> 
</div>

<div class="slider_option">
  <input type="checkbox" id="checkbox">
  <label for="checkbox">Autoplay Slider</label>
</div>
Pero si se coloca así se repetirá en todas las paginas. hay que indicarle que sólo se debe ejecutar en el homepage
<?php $app = JFactory::getApplication();
$menu = $app->getMenu();
if ($menu->getActive() == $menu->getDefault()) { ?>
          <div class="slider">
<div id="slider">
  <a href="#" class="control_next">>></a>
  <a href="#" class="control_prev"><</a>
  <ul>
    <li>SLIDE 1</li>
    <li style="background: #aaa;">SLIDE 2</li>
    <li>SLIDE 3</li>
    <li style="background: #aaa;">SLIDE 4</li>
  </ul>
</div>

<div class="slider_option">
  <input type="checkbox" id="checkbox">
  <label for="checkbox">Autoplay Slider</label>
</div>
          </div>
<?php } ?>
De ésta manera las tres primeras líneas indican que ese trozo de código sólo se ejecutará en el homepage


Y ya está agregado sólo en la pagina de inicio en las demás páginas no las verás.



Comentarios