Darle estilo a las cajas de descargas de Jimdo

 

¡Que tal amigos Jimderos :-)!... En ésta oportunidad les traemos en exclusivo la forma de cómo cambiar el aspecto del "Download Box", "Contenedor de Descargas" o cómo lo quieran llamar.

Mucha gente me lo ha pedido por emal ya que están aburridos del estilo tán simple que por default tiene. Pero no digo más, vean el tutorial.


Vista Previa

1° Estilo:

APPLE IOS

Clic para ampliar

Éste estilo sirve para aquellas páginas que se dedican dar información sobre apple. Ó incluso a los amantes de la manzana.

IR AL CÓDIGO >>


2° Estilo:

ANDROID

Clic para ampliar

Éste estilo es muy útil para las páginas que se dedican a dar información sobre Android. Ó incluso para los amantes del verde robot.

IR AL CÓDIGO >>


3° Estilo:

GTA: SAN ANDREAS

Clic para ampliar

Éste estilo está dedicado a las páginas que publican contenido acerca de juegos ó los amantes del GTA.

IR AL CÓDIGO >>


Códigos


<style type="text/css">
/*<![CDATA[*/
/* CirtDesign_Codes */
img.cc-png-fix {
border: 2px solid #80a4bf;
box-shadow: 1px 1px 7px gray;
padding: 3px;
border-radius: 2px;
background-color: #517E9F;
border-bottom: 4px solid #80a4bf;
}

div.rightDownload {
border-left: 5px solid #ffffff;
background: #D8E8B7 url('http://cirtdesign-host.blogcindario.com/ficheros/download_box_2013_style_apple_ios/background.jpg') repeat-x;
font-family: source-sans-pro, sans-serif;
border: 2px solid #80a4bf;
border-bottom: 4px solid #80a4bf;
box-shadow: 1px 1px 10px #ffffff inset;
text-shadow: 1px 1px 5px #ffffff;
font-size: 14px;
}

div.rightDownload strong {
font-size: 15px;
font-family: source-sans-pro, sans-serif;
}

div.rightDownload a {
background-color: #517E9F;
color: #ffffff;
padding: 3px;
font-size: 13px;
-moz-transition: all 0.2s ease 0s;
-webkit-transition: all 0.2s ease 0s;
-o-transition: all 0.2s ease 0s;
text-decoration: none !important;
border-left: 3px solid #80a4bf;
}

div.rightDownload a:hover {
background: #517E9F;
color: #ffffff;
padding: 3px;
font-size: 15px;
font-weight: bold;
box-shadow: 1px 1px 10px #6abcf7 inset;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
}
/*]]>*/
</style>

<script src="//use.edgefonts.net/source-sans-pro:n2,i2.js" type="text/javascript"></script>

<style type="text/css">
/*<![CDATA[*/
/* CirtDesign_Codes */
img.cc-png-fix {
border: 2px solid #b7a1a1;
box-shadow: 1px 1px 7px gray;
padding: 3px;
border-radius: 2px;
background-color: #A4C739;
border-bottom: 4px solid #b7a1a1;
box-shadow: 1px 1px 10px #d3c9c9 inset;
}

div.rightDownload {
border-left: 5px solid white;
background: #A4C739 url('http://cirtdesign-host.blogcindario.com/ficheros/download_box_2013_style_google_android/background.jpg') repeat-x;
font-family: krona-one, sans-serif;
border: 2px solid #b7a1a1;
border-bottom: 4px solid #b7a1a1;
box-shadow: 1px 1px 35px #d3c9c9 inset;
text-shadow: 1px 1px 5px #ede3e3;
font-size: 10px;
}

div.rightDownload strong {
font-size: 25px;
font-family: league-gothic, sans-serif;
font-weight: normal !important;
}

div.rightDownload a {
background-color: #b7a1a1;
color: #ffffff;
padding: 3px;
font-size: 13px;
-moz-transition: all 0.2s ease 0s;
-webkit-transition: all 0.2s ease 0s;
-o-transition: all 0.2s ease 0s;
text-decoration: none !important;
text-shadow: none !important;
border-left: 3px solid #d3c2c2;
}

div.rightDownload a:hover {
background: #a2bc95;
color: #ffffff;
padding: 3px;
font-size: 13px;
font-weight: bold;
box-shadow: 1px 1px 10px #329e07 inset;
border-top-left-radius:10px;
border-top-right-radius:10px;
border-bottom-left-radius:0px;
border-bottom-right-radius:0px;
}
/*]]>*/
</style>

<script src="//use.edgefonts.net/krona-one:n4;league-gothic.js" type="text/javascript"></script>

<style type="text/css">
/*<![CDATA[*/
/* CirtDesign_Codes */
img.cc-png-fix { /*Códigos de la Extensión Ej. RAR */
border: 2px solid #B3CEA5; /* Borde */
box-shadow: 1px 1px 7px gray; /* Sombra */
padding: 3px; /* Agregar tamaño al fondo */
border-radius: 2px; /* Redondeo */
background-color: #D8E8B7; /* Color fondo */
border-bottom: 4px solid #B3CEA5; /* borde linea inferior */
}

div.rightDownload { /* Estilos del contenido */
border-left: 5px solid white; /* Borde de la izquierda */
background: #D8E8B7 url('http://cirtdesign-host.blogcindario.com/ficheros/download_box_2013_style_gta_san_andreas/background.jpg') repeat-x; /* Imagen de Fondo */
font-family: architects-daughter, sans-serif; /* Fuente/Letra */
border: 2px solid #B3CEA5; /* Borde */
border-bottom: 4px solid #B3CEA5; /* Borde Inferior */
box-shadow: 1px 1px 10px #B3CEA5 inset; /* Sombra interior */
text-shadow: 1px 1px 5px #B3CEA5; /* Sombra del texto */
}

div.rightDownload strong { /* Estilos del titulo de la descarga */
font-size: 15px; /* tamaño de la fuente/letra */
font-family: berkshire-swash, cursive; /* Estilo de la fuente/letra */
}

div.rightDownload a { /* Estilos del botón "Descargar" */
background-color: #B4CFA6; /* color de fondo */
color: #ffffff; /* color de la fuente/letra */
padding: 3px; /* tamaño del centro del recuadro */
font-size: 13px; /* tamaño de la fuente */
-moz-transition: all 0.2s ease 0s; /* efectos de transición */
-webkit-transition: all 0.2s ease 0s; /* // */
-o-transition: all 0.2s ease 0s; /* // */
text-decoration: none !important; /* eliminación de la decoración del enlace */
border-left: 3px solid #fcf7f7; /* borde de la izquierda */
}

div.rightDownload a:hover { /* Efectos al pasar el mouse por el enlace */
background: #a2bc95; /* color de fondo */
color: #ffffff; /* color de la fuente/letra */
padding: 3px; /* tamaño del centro del recuadro */
font-size: 15px; /* tamaño de la fuente/letra */
font-weight: bold; /* fuente en negrita */
box-shadow: 1px 1px 10px #B3CEA5 inset; /* sombra interior del recuadro */
border-top-left-radius:10px; /* redondeo */
border-top-right-radius:10px; /* // */
border-bottom-left-radius:0px; /* // */
border-bottom-right-radius:0px; /* // */
}
/*]]>*/
</style>

<script src="//use.edgefonts.net/architects-daughter;berkshire-swash.js" type="text/javascript"></script>

Si quieres quitarle la Extensión (el recuadro que indica en qué formato está el archivo a descargar)

Pega el siguiente código en el Head de tu web:


<style type="text/css">
/*<![CDATA[*/
img.cc-png-fix, div.leftDownload {
display: none !important;
}
/*]]>*/
</style>

INFO:
Si quieres crear tu propio Contenedor de Descargas, sigue el ejemplo del GTA San Andreas, ya que tiene las etiquetas informativas

Escribir comentario

Comentarios: 0