Mostrando entradas con la etiqueta plantilla travel. Mostrar todas las entradas
Mostrando entradas con la etiqueta plantilla travel. Mostrar todas las entradas

11.8.12

Combinar plantillas Travel y Fantástico S.A.


Combinando algunas características de las plantillas Travel y Fantastico S.A. (Awesomw Inc.) podremos crear un blog con el fondo y la transparencia de la plantilla Travel, y con el cuerpo de las entradas y la sidebar separados.


1.- Vamos a Diseño ► Personalizar ► Diseñador de plantillas, y cambiamos el blog a la plantilla Fantástico S.A. (Awesome).

2.- Vamos a Editar HTML:

Diseño ► Editar HTML ► Click dentro del editor ► Ctrl+f ►

3.- Localizamos el siguiente código, poniendo dentro del rectángulo de búsqueda (search) una línea del mismo:

<Variable name="body.background" description="Body Background" type="background"
       color="$(body.background.color)"
       default="$(color) none repeat scroll top left" value="$(color) url
(//www.blogblog.com/1kt/awesomeinc/body_background_dark.png) repeat scroll top left"/>

...y lo cambiamos por éste:

<Variable name="body.background" description="Body Background" type="background"
       color="$(body.background.color)"
       default="$(color) none repeat scroll top left" value="$(color) url(//themes.googleusercontent.com/image?id=0BwVBOzw_-hbMYTM3ZTRlZTktYzE4ZC00NWU0LWEyMzctOWFlZjVkZTkzNGY4) repeat fixed top center"/>

Con la anterior modificación cambiamos el fondo de la plantilla Fantástico S.A. (Awesome) por el fondo de la plantilla Travel.

4.- Para darle transparencia al fondo de las entradas localizamos el siguiente código:

/* Posts
----------------------------------------------- */
body .main-inner .Blog {
  padding: 0;
  margin-bottom: 1em;

  background-color: transparent;
  border: none;

  -moz-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  -webkit-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  -goog-ms-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  box-shadow: 0 0 0 rgba(0, 0, 0, 0);
}

...y le agregamos, antes de la llave de cierre (}), el siguiente segmento:

-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
filter:alpha(opacity=80);
-moz-opacity:0.8;
opacity: 0.8;
-khtml-opacity: 0.8;

5.- Para darle transparencia a los widgets de la sidebar localizamos el siguiente código:

.sidebar .widget {
  font: $(widget.font);
  color: $(widget.text.color);
}

...y le agregamos, antes de la llave de cierre (}), el mismo segmento que agregamos en el punto cuatro.

6.- para darle transparencia al widget pie de blog ("Con la tecnología de Blogger") localizamos el siguiente código:

.footer-fauxborder-left {
  border-top: 1px solid $(widget.border.color);
  background: $(footer.background.color) $(footer.background.gradient) repeat scroll 0 0;

  -moz-box-shadow: 0 0 $(shadow.spread) rgba(0, 0, 0, .2);
  -webkit-box-shadow: 0 0 $(shadow.spread) rgba(0, 0, 0, .2);
  -goog-ms-box-shadow: 0 0 $(shadow.spread) rgba(0, 0, 0, .2);
  box-shadow: 0 0 $(shadow.spread) rgba(0, 0, 0, .2);

  margin: 0 -$(shadow.spread);
}

...y le agregamos, antes de la llave de cierre (}), el mismo segmento que agregamos en el punto cuatro.

Hasta aquí hemos dado transparencia a cada bloque del blog por separado. Si queremos dejar alguno sin ese efecto omitimos el paso correspondiente.

Para darle transparencia a todo el cuerpo del blog, en conjunto, omitimos todos los pasos anteriores, localizamos el siguiente código:

html body .content-outer {
  min-width: 0;
  max-width: 100%;
  width: 100%;
}

...y le agregamos, antes de la llave de cierre (}), el mismo segmento que agregamos en el punto cuatro.

Por último, si queremos eliminar el pie de página "Con la tecnología de Blogger", nos remitimos a este tutorial.

4 comentarios
Etiquetas: , , , , ,

5.7.12

Ocultar, cambiar fondo sidebar plantilla Travel



El fondo de la sidebar de la plantilla Travel puede ser ocultado y cambiado.

Vamos a Editar HTML:

Diseño ► Plantilla ► Editar HTML ► Click dentro del editor ► Ctrl+f ►

Localizamos el siguiente código, poniendo dentro del rectángulo de búsqueda (search) una línea del mismo:

.main-inner .fauxcolumn-right-outer .fauxcolumn-inner {
  margin-left: $(content.padding);
  background: $(widget.outer.background.color) $(widget.outer.background.gradient) repeat scroll top left;
}

1.- Para ocultar el fondo de la sidebar le agregamos, al anterior código, la siguiente línea:

visibility: hidden;

...debiendo ese código quedar así:

.main-inner .fauxcolumn-right-outer .fauxcolumn-inner {
  margin-left: $(content.padding);
  background: $(widget.outer.background.color) $(widget.outer.background.gradient) repeat scroll top left;
  visibility: hidden;
}

2.- Para cambiar el fondo de la sidebar, en el mismo código indicado en el punto uno:

.main-inner .fauxcolumn-right-outer .fauxcolumn-inner {
  margin-left: $(content.padding);
  background: $(widget.outer.background.color) $(widget.outer.background.gradient) repeat scroll top left;
}

...cambiamos el segmento resaltado por éste:

url("aquí la URL de la imagen")

...debiendo el código quedar así:

.main-inner .fauxcolumn-right-outer .fauxcolumn-inner {
  margin-left: $(content.padding);
  background: url("aquí la URL de la imagen") repeat scroll top left;
}

La imagen deberá tener el mismo ancho de la sidebar (310px).


6 comentarios
Etiquetas: , , , , , ,

14.8.10

Agregar sidebar - Plantilla Travel



La plantilla que vamos a modificar es la Travel, que podemos identificar en el encabezamiento, así:

-----------------------------------------------
Blogger Template Style
Name:     Travel
Designer: Sookhee Lee
URL:      www.plyfly.net
----------------------------------------------- */

Vamos a Edición de HTML:

Página principal ► Diseño ► Plantilla ► Edición de HTML

Sin expandir plantilla de artilugios localizamos los siguientes códigos, y les hacemos las modificaciones indicadas con el resaltado en rojo:

  1. Código original:

        <b:template-skin>
          <b:variable default='930px' name='content.width' type='length' value='860px'/>
          <b:variable default='0' name='main.column.left.width' type='length' value='0px'/>
          <b:variable default='360px' name='main.column.right.width' type='length' value='260px'/>

    Código modificado:

        <b:template-skin>
          <b:variable default='930px' name='content.width' type='length' value='980px'/>
          <b:variable default='360px' name='main.column.left.width' type='length' value='220px'/>
          <b:variable default='360px' name='main.column.right.width' type='length' value='220px'/>


  2. Código original:

    /* Widgets
    ----------------------------------------------- */
    .sidebar .widget {
      border-bottom: 2px solid $(widget.border.bevel.color);
      padding-bottom: 10px;
      margin: 10px 0;
    }

    .sidebar .widget:first-child {
      margin-top: 0;
    }

    .sidebar .widget:last-child {
      border-bottom: none;
      margin-bottom: 0;
      padding-bottom: 0;
    }

    Código modificado:

    /* Widgets
    ----------------------------------------------- */
    .sidebar .widget {
      border-bottom: 2px solid $(widget.border.bevel.color);
      padding-bottom: 10px;
      margin: 10px 0;
    }

    .sidebar .widget:first-child {
      border-bottom: none;
      margin-bottom: 0;
      padding-bottom: 0;
    }

    .sidebar .widget:last-child {
      border-bottom: none;
      margin-bottom: 0;
      padding-bottom: 0;
    }


  3. Código original:

            <div class='column-left-outer'>
            <div class='column-left-inner'>
              <aside>
              <macro:include id='main-column-left-sections' name='sections'>
                <macro:param default='0' name='num' value='0'/>
                <macro:param default='sidebar-left' name='idPrefix'/>
                <macro:param default='sidebar' name='class'/>
                <macro:param default='true' name='includeBottom'/>
              </macro:include>
              </aside>
            </div>
            </div>

    Código modificado:

            <div class='column-left-outer'>
            <div class='column-left-inner'>
              <aside>
              <macro:include id='main-column-left-sections' name='sections'>
                <macro:param default='2' name='num' value='1'/>
                <macro:param default='sidebar-left' name='idPrefix'/>
                <macro:param default='sidebar' name='class'/>
                <macro:param default='true' name='includeBottom'/>
              </macro:include>
              </aside>
            </div>
            </div>


  4. En el siguiente código, al final de la plantilla, eliminamos la parte resaltada:

    <b:section-contents id='sidebar-right-1'>
    <b:widget id='Followers1' locked='false' title='Seguidores' type='Followers'/>
    <b:widget id='BlogArchive1' locked='false' title='Archivo del blog' type='BlogArchive'/>
    <b:widget id='Profile1' locked='false' title='Datos personales' type='Profile'/>
    </b:section-contents><b:section-contents id='footer-1'/><b:section-contents id='footer-2-1'/><b:section-contents id='footer-2-2'/></html>


  5. Inmediatamente encima del anterior código pegamos el siguiente:

    <b:section-contents id='sidebar-left-1'>
    <b:widget id='Profile1' locked='false' title='Datos personales' type='Profile'/>
    </b:section-contents>

    Con los puntos 4 y 5 hemos pasado el perfil a la barra lateral (sidebar) izquierda.

  6. Vista previa y Guardar plantilla

  • Vamos a Diseño ► Diseñador de plantillas ► Diseño ► Ajustar ancho:

    Diseñador de plantillas

    ..y veremos que ya tenemos habilitado el control para la barra lateral izquierda

    El blog original:

    Blog Travel con una barra lateral

    El blog con dos barras laterales:

    Blog Travel con dos barras laterales




    • Índice: Agregar una sidebar
    Para plantillas Herbert
    Para plantillas Minima
    Para plantillas Denim
    Para plantillas Rounders
    Para plantilla Simple
    Para plantilla Picture Window
    Para plantilla Travel
    Para plantilla Awesome
    Agregar sidebar doble
    6 comentarios
    Etiquetas: , , , , , , ,
    Suscribirse a: Entradas ( Atom )