Sidebar fija para plantillas nuevas

Para fijar la sidebar en plantillas nuevas (Diseñador de plantillas) vamos a utilizar como modelos la Awesome inc. (Fantástico S.A.) y la Simple. Sidebar fija para plantilla Awesome Inc. 1.- Vamos a Editar HTML: Diseño ► Plantilla ► Editar HTML ► Click dentro del editor ► Ctrl+f ► 2.- Localizamos el siguiente código poniendo, dentro del rectángulo de búsqueda (search), una línea del mismo: .main-inner .column-center-inner, .main-inner .column-left-inner, .main-inner .column-right-inner { padding: 0 5px; } ...lo eliminamos y en su lugar pegamos éste: .main-inner .column-center-inner { } .main-inner .column-left-inner { } .main-inner .column-right-inner {   padding: 0 5px;   margin-top: -90px; /*Margen superior*/   width: 310px; /*Ancho de la sidebar*/   position: fixed; /*Para fijar la sidebar*/ } Los comentarios resaltados en rojo son informativos y se pueden eliminar. Con el anterior código, además de fijarla, estamos asignando a la sidebar un margen superior en número negativo para que llegue hasta el tope superior, y un ancho de 310px. Para subir o bajar la sidebar aumentamos o disminuimos el margen superior. 3.- Debido a que la sidebar ahora va a llegar hasta el tope superior, pasará por "encima" de la cabecera (header), tendremos que disminuír el ancho de ésta, así: Localizamos el siguiente código .header-inner .Header .titlewrapper, .header-inner .Header .descriptionwrapper {   padding-left: 0;   padding-right: 0;   margin-bottom: 0; } ...y le agregamos la línea con la que asignamos un ancho a la cabecera (header), debiendo quedar así: .header-inner .Header .titlewrapper, .header-inner .Header .descriptionwrapper {   padding-left: 0;   padding-right: 0;   margin-bottom: 0;   width: 600px; /*Ancho asignado a la cabecera*/ } El comentario resaltado en rojo es informativo y se puede eliminar. 4.- Vista previa y Guardar plantilla Sidebar fija para plantilla Simple 1.- Vamos a Editar HTML: Diseño ► Plantilla ► Editar HTML ► Click dentro del editor ► Ctrl+f ► 2.- Localizamos el siguiente código poniendo, dentro del rectángulo de búsqueda (search), una línea del mismo: .main-inner .column-right-outer {   width: $(main.column.right.width);   margin-right: -$(main.column.right.width); } ...lo eliminamos y, en su lugar, pegamos éste: .main-inner .column-right-inner {   padding: 0 5px;   margin-top: -90px; /*Margen superior*/   width: 310px; /*Ancho de la sidebar*/   position: fixed; /*Para fijar la sidebar*/ } Los comentarios resaltados en rojo son informativos y se pueden eliminar. Con el anterior código, además de fijarla, estamos asignando a la sidebar un margen superior en número negativo para que llegue hasta el tope superior, y un ancho de 310px. Para subir o bajar la sidebar aumentamos o disminuimos el margen superior. 3.- Debido a que la sidebar ahora va a llegar hasta el tope superior, pasará por "encima" de la cabecera (header), tendremos que disminuír el ancho de ésta, así: Localizamos el siguiente código .header-outer {   background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px;   _background-image: none; ...y le agregamos la línea con la que asignamos un ancho a la cabecera (header), debiendo quedar así: .header-outer {   background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px;   _background-image: none; width: 610px; /*Ancho de la cabecera*/ } El comentario resaltado en rojo es informativo y se puede eliminar. 4.- Vista previa y Guardar plantilla Vea: Sidebar fija para plantillas antiguas. Twittear