#nav2 | Explore Tumblr posts and blogs

gitanodoescodes · 5 years ago

Text

Tutorial: ¿Cómo hacer skins sin morir en el intento? PT. 2

# Nuestra Barra de Navegación

Aviso previo: Esto no es un tutorial de cómo dar estilo a las cosas, sino una guía de cómo hacer una skin al modo de alguien que definitivamente no es la mejor opción. Para poder seguir este tutorial se deben tener conocimientos previos de HTML y CSS. Si no, esto tardaría mil años.

Seguimos con esta cruzada, ahora un poco más tarde que ayer. He ido de compras en la mañana y el peso me ha dejado lastimada la muñeca, así que escribir me duele un poco. Esta parte será un poquito corta por lo mismo, espero que se comprenda:(.

Entonces, vamos de arriba a abajo. ¿Qué viene primero? Así es, la navbar. Hay muchas formas de hacer una navbar, yo hasta hace unos meses solo usaba la variable del template tal cual y la editaba con JS. Sin embargo, la experiencia administrando me ha enseñado que hay momentos en las que esta suele mostrarse /rara/. Es por esto que hoy vamos a decirle adiós a la base de FA y a crear una desde el principio. ¿Por qué? Porque, ¿para qué hacer algo bien y fácil del comienzo si podemos complicarnos de más? Gracias a @mrd-design (espero que sea su tumblr actual, ops) por enseñarme a romper más aún las cosas.

Ahora, tiren esa cosa y abran el template del overall_header una vez más.

Mentira, vamos a usarla para algo igual, así que cortenla y péguenla por ahí, porfi, porfito. Es super importante que la corten, no la copien, porque si no les saldrá dos veces y adivinen quién estuvo media hora dando vueltas porque no entendía porque salía duplicado-

Vamos a empezar nuestra navbar de cero.

Para esto hay varias opciones. Puedes hacer la navbar e ir cortando los links según si pueden verlo o no los invitados, o puedes hacer dos navbars distintas. Yo me voy más por la segunda opción, principalmente porque en algunos skins, como en el de la preview de mi última comisión, quiero que cierto link quede al medio y se me hace mucho más cómodo.

Los links que nunca deben faltar en la navbar son los del índice, perfil, conexión, mensajería y registro. A mí me gusta incluir igual la lista de miembros y, si el foro que están armando tiene una página html con información extra, también es una buena idea incluirla aquí dentro.

Los por defecto que tenemos son los siguientes:

/{U_INDEX} - Índice del foro

/calendar - Calendario

/faq - Preguntas Frecuentes

/search - Búsquedas

/memberlist - Lista de Miembros

/groups - Lista de Grupos

/profile?mode=editprofile - Editar Perfil

/privmsg?folder=inbox - Mensajería

/login?logout=1 - Desconectar

/login - Conectar

/register - Registrar

Entonces, crearemos un enlace con cada uno de ellos, utilizando el típico <a href=“link”>contenido</a> para personalizarlos individualmente. A mí, al menos, me gusta además agregar el “title” en cada enlace, esto más que nada porque suelo utilizar muchos iconos y es la forma más segura de que no hayan confusiones para los usuarios.

En esta ocasión no daré un orden demasiado rebuscado a los links, así que solo haré una lista y la separaré por visivilidad. A mí me ha quedado algo así.

Los rojos son visibles a todos, los azules solo a los usuarios conectados y los verdes solo a los invitados. Los más atentos, igual, se habrán dado cuenta que hay un pequeño detalle en el grupo de los que pueden ver los usuarios conectados. Así es, nuestro link a los mensajes privados no tiene title, y en su lugar tiene adjuntada una clase. ¿Para qué es esto? Para lo mismo por lo que les he dicho que dejaran a un lado la navbar default de Foroactivo.

Vamos a tomar nuestro #nv-bar y vamos a abrir dos elementos nuevo dentro. El primero sera #mv-bar, donde colocaremos nuestra navbar personalizada, y el segundo #no-bar, donde meteremos la navbar por default. Tendría que verse algo así.

¿Para qué me haces hacer una navbar personalizada si igual vas a meter la navbar default? El motivo es simple: que feo es no poder recibir las notificaciones cuando tienes los pinches iconitos, ¿cierto? Mi método, que es bruto, de seguro tiene mejores opciones. Así que sí, además de hacerlos poner la navbar dos veces, ahora los haré esconder la default con un simple #no-bar, #mv-bar a img {display: none;} (El segundo es para borrar una imagen que aparecerá pronto, mejor lo borramos enseguida y nos ahorramos hacerlo después).

Vamos a guardar los cambios del template. Abriremos el CSS y también la pestaña de los js, para agregar el siguiente a nuestro listado de “Todas las páginas”.

¿Qué hará esto? Pues que cuando vayamos a ver nuestra navbar, y nos llegue un mensaje, aparezca el texto de “tienes un nuevo mensaje” al lado. Podemos editar esto hasta hacerlo lucir como un contador o reemplazarlo por un pequeño ícono de aviso.

Vamos a ignorarlo momentáneamente, al menos lo suficiente para poner el resto de nuestro código bonito. Entonces, cuando no tengamos un mensaje nuestro código se verá así:

y cuando lo tengamos, se verá... así.

Ahora, es sumamente importante que nuestros links tengan el position relative dentro de sus estilos, ya que así nos aseguraremos de que podemos mover la notificación sin afectar al resto del link.

Al elemento .new-message le aplicaremos entonces un position absolute, para que no afecte el tamaño de su contenedor. Además, como yo voy a poner solo un icono de aviso y no un contador, también agregaré un font-size: 0px. Agregaremos el icono de aviso a través de un pseudo-elemento :before de .new-message, el cual quedará del siguiente modo:

Ahora, realmente quería hacer la parte de la navegación por foros también en este mismo post, pero tendrá que esperar porque la muñeca me mata. Gracias por leerme hoy también, nos vemos en los siguientes días para seguir con este paso a paso. Muchas gracias por sus comentarios y buenos deseos, sois los mejores <3.

++ UPDATE ++

Ahora que ya tengo bien mi muñeca de nuevo, vengo con la segunda parte de esta parte (valga la redundancia). Como es cortita, no veo conveniente hacer toooodo un post nuevo para ella, así que comenzaré desde aquí para que no se pierda.

Para que nuestra navegación sea más cómoda todavía, vamos a agregar los botones rápidos para movernos en foro > categoría > subforo. Esto podemos obtenerlo con el siguiente código, el cual, como siempre, voy a reconstruir para armarlo a mi gusto. Recuerden siempre encargarse de removerlo en otros templates para que no les salga repetido.

Pasaremos de esto:

A esto:

Ya sé que no es un gran cambio, pero habrán visto el nav2 en lugar del nav a secas y ya entenderán el por qué.

Para dar el estilo a esta zona tendremos que jugar un poco, porque la sección viene pre-fabricada por foroactivo y no permite que editemos los enlaces uno por uno. Por eso cambio la clase del contenedor de {L_INDEX}, ya que así me permitirá que el link del indice se vea distinto a los links de categoría y foro.

#low-bar {tiene que tener un font-size: 0px para que no se vean los puntos externos a los links} #low-bar a {debe tener el tamaño de la fuente, para que las letras} #low-bar .nav2 {es entonces la que cambia el enlace del índice. Si la hubiesemos dejado como .nav, nos cambiaría toooodos los enlaces}

Teniendo esto armado, ya podemos proceder con el estilo. Luego de azotar la cabeza contra el teclado por segunda vez consecutiva, podemos obtener algo como esto:

Ahora sí, muchas gracias por leer hasta acá, ¡nos vemos en la siguiente parte!

#tutorial #tutorial-skin

84 notes · View notes

testedocuraswqasa · 8 years ago

Text

<!-- THEME: LAURER

DESIGN DESENVOLVIDO POR DOCISMO(http://docismo.tumblr.com)

NOTIFICAÇÕES:

• Não retire os créditos;

• NÃ0 pegue "detalhes" SEM CREDITAR;

• Modificações são permitidas apenas para uso próprio, com a permanência dos créditos;

• Em caso de desconfiguração, reinstale o theme, não havendo solução entre em contato;

• A transparência de skins para Wikplayer e Scm Music Player em alguns casos perde sua eficiência, mas nada impede a funcionalidade do player;

• Respeite o direito autoral. -->

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<title>{title}</title>

<script type="text/javascript" src="http://static.tumblr.com/5u1fog0/XsWngduiz/lsmoothscroll.js"></script>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>

(function($){

$(document).ready(function(){

$("a[title]").style_my_tooltips({

tip_follows_cursor:true,

tip_delay_time:90,

tip_fade_speed:600,

attribute:"title"

});

})(jQuery);

</script>

<link rel="stylesheet" type="text/css" href="http://static.tumblr.com/5u1fog0/Jbxnhk8nn/lcredit.css">

</script>

/* BOTÃOS DE CONTROLS DOCISMO */ .tmblr-iframe, iframe#tumblr_controls { white-space: nowrap; -webkit-filter: invert(100%); -moz-filter: invert(100%); -o-filter: invert(100%); -ms-filter: invert(100%); filter: invert(100%); position: fixed; margin-top: 0px; margin-right:75px; opacity: 0.4;} /* BOTÃOS DE CONTROLS DOCISMO */

/* POR LIRIADAS & MUNDOHTML */ .lcredit.icon.theme {position:fixed!important; -webkit-filter:invert(100%); opacity:.4; top:3px;margin-right:2px;} /* POR LIRIADAS & MUNDOHTML */

/* SISTEMA */ {block:IfMinimalistCursor} html{cursor:url('http://static.tumblr.com/5u1fog0/aaEn06fxx/cursor.png'), auto;} a,a:hover{cursor:url("http://static.tumblr.com/5u1fog0/zJbn06fy8/cursor_hover.gif"), auto } {/block:IfMinimalistCursor}

a:link, a:active, a:visited{ color:{color:links}; text-decoration: none;}

a:hover { color:{color:hover}; text-decoration: none;}

#s-m-t-tooltip { padding:3px; height:auto; background-color:{color:Background}; font-weight:none; letter-spacing:1px; display: none; text-transform:uppercase; font-size:9px; text-align: center; margin-top:-25px; margin-left:20px; line-height: 11px; letter-spacing: 1px; z-index: 999999999999; color:{color:link}; font-family:pt sans;}

::-webkit-scrollbar { width:6px;height:auto; background:{color:Background}; border-bottom:none;} ::-webkit-scrollbar-button:vertical { height:2px;display:block;} ::-webkit-scrollbar-thumb:vertical { background-color:{color:scroll};}

p, ul, li, ol, b {margin: 0px 0px 0px 0px;}

blockquote{font-size:10px; padding-left:8px;line-height:12px; border-left: 2px solid {color:blockquote};} /* SISTEMA */

/* ESTRUTURA */ body{ margin:0px; line-height:20px; color:{color:text};

{block:IfJustifiedAlignment} text-align:justify; {/block:IfJustifiedAlignment}

{block:IfNotJustifiedAlignment} text-align:left; {/block:IfNotJustifiedAlignment}

font-family:{font:body}; font-size:{text:font size}; background-color: {color:Background}; background-image:url({image:Background}); background-attachment:fixed; background-repeat:no-repeat; background-position:left; -o-background-size:cover; -webkit-background-size:cover; -webkit-animation:fadeIn 5s; -moz-animation:fadeIn 5s; -o-animation:fadeIn 5s;}

.center { margin-left:auto; margin-right:auto; width:1100px; margin-top:0px;}

.posts { margin-top:30px; margin-left:auto; margin-right:auto; overflow:hidden; width:430px; float:center;}

.post { float:left; line-height:14px; letter-spacing:.-15px; position:relative; width:280px; margin:10px} /* ESTRUTURA */

/* SIDEBAR */ .lcoluna {overflow:hidden; display:inline-block; width:200px;}

#dmsidebar img {z-index:999999999999999999999; height:90px; width:80px; margin:3px 0px 0px -150px;}

#dm1 {background-color:{color:border}; position:absolute; top:0px; height:150px; left:30px; width:1px;}

#dm2 {background-color:{color:border}; position:absolute; top:30px; height:1px; left:0px; width:150px;}

#dm3 {background-color:{color:borders}; position:absolute; bottom:0px; height:150px; right:30px; width:1px;}

#dm4 {background-color:{color:border}; position:absolute; bottom:30px; height:1px; right:0px; width:150px;}

#dmsidebar2 { top:20%; padding:0px; position:fixed; margin-left:650px; width:324px;}

#dmsidebar { text-align:center; top:20%; padding:0px; position:fixed; margin-left:20px; width:324px;}

#dmdescri {

line-height:16px; font-family:{font:body}; font-size:{text:font size}; letter-spacing:.5px; text-align:justify; margin:20px 45px 5px 55px;}

#dmtitleblog{ {block:IfTitleStyle2} font-weight:600; font-family:'Open Sans',Helvetica,Arial,sans-serif; {/block:IfTitleStyle2}

{block:IfTitleStyle1} font-weight:300; letter-spacing:.5px; font-family: 'Homemade Apple', cursive; {/block:IfTitleStyle1}

{block:IfTitleStyle3} letter-spacing:.5px; font-family:'Give You Glory'; {/block:IfTitleStyle3}

font-size:{text:Title Blog size}; color:{color:Title blog}; line-height:12px; margin:55px 5px 5px 55px; width:220px; text-align:left;} #dmtitleblog a{ color:{color:Title blog};}

#dmtitles{ {block:IfTitleStyle2} font-weight:600; letter-spacing:-.3px; font-family:'Open Sans',Helvetica,Arial,sans-serif; {/block:IfTitleStyle2}

margin-left:0px; text-transform:none; font-size:{text:subtitles size}; color:{color:Title blog}; line-height:12px; margin-top:15px; text-align:left; padding-bottom:5px;}

#dmtitles a{ color:{color:text};}

#dmsobre {text-transform:none; letter-spacing:0px; font-family:{font:body}; font-size:{text:font size}; text-align:left; margin-left:0px;}

.nav1{margin-top:10px; margin:12px 55px 49px 55px; text-transform:uppercase; font-weight:300; font-family:'Open Sans',Helvetica,Arial,sans-serif; letter-spacing:1.2px; font-size:{text:links menu size}; text-align:right;}

.nav1 a{-webkit-transition: all 0.5s linear; display:inline-block; color:{color:links menu}; border-bottom:1px solid transparent; padding:0px 1.5px;}

.nav1 a:hover {-webkit-transition: all 0.5s linear;color:{color:menu hover};}

.nav2{color:#aaa;letter-spacing:.5px; margin:55px 55px 49px 55px; text-align:left;}

.nav2 a{-webkit-transition: all 0.5s linear; display:inline-block; text-transform:uppercase; font-weight:300; font-family:'Open Sans',Helvetica,Arial,sans-serif; letter-spacing:1.2px; font-size:{text:links menu size}; color:{color:links menu}; border-bottom:1px solid transparent; padding:0px 1.5px;}

.nav2 a:hover {-webkit-transition: all 0.5s linear;color:{color:menu hover};} /* FINAL SIDEBAR */

/* NOTES E PERMA */ .post .dmtxt {padding:1px; margin-top:0px; font-size:9px; position:absolute; text-align:center; width:280px; font-family:'Open Sans',Helvetica,Arial,sans-serif; letter-spacing:1px; opacity:0; text-shadow:1px 1px 1px #eee; color:{color:description}; text-transform:uppercase; -webkit-transition: all 1.5s linear; -webkit-transition: all 1.5s linear; -moz-transition: all 1.5s linear; transition: all 1.5s linear;}

.post:hover .dmtxt{ opacity:1; -webkit-transition: all 1.5s linear; -webkit-transition: all 1.5s linear; -moz-transition: all 1.5s linear; transition: all 1.5s linear; z-index:999999999999999999999;} .post .dmtxt a {color:{color:text};}

/* NOTES E PERMA */ .post .dmbase{ position:absolute; bottom:17px; left:10px; width:328px; opacity:0; height:auto; background: rgba(255, 255, 255, .1); transition:all 0.5s ease;} .post:hover .dmbase{ opacity:1; transition:all 0.5s ease;}

.post .dmpnotes{ position:relative; margin:15px; text-align:left; width:320px; color:#fff; opacity:0; -webkit-transition: all 1.5s linear; -webkit-transition: all 1.5s linear; -moz-transition: all 1.5s linear; transition: all 1.5s linear; font-size:8.2px;}

.post:hover .dmpnotes{ opacity:1; -webkit-transition: all 1.5s linear; -webkit-transition: all 1.5s linear; -moz-transition: all 1.5s linear; transition: all 1.5s linear; z-index:999999999999999999999;} .post .dmpnotes a {color:{color:background};}

#permalink{ margin:15px; font-weight:300; font-family:'Open Sans',Helvetica,Arial,sans-serif; letter-spacing:.5px; font-size:12.5px; text-align:left; width:320px;}

ol.notes { padding-left:10px; margin:auto; list-style-type: none;}

ol.notes a {text-decoration: none;}

ol.notes li.note { display: inline-block; margin:0; padding: 0;}

ol.notes li.note img.avatar { width:31px; height:31px; margin-bottom:-4px; padding:5px;}

aside.permalink_page {margin-top:20px; margin-bottom: 60px;} span.action {display:none;} ol.notes li.note:hover span.action {display:none;} ol.notes li.note blockquote {display:none;} ol.notes li.note:hover blockquote{display:none;}

span.action { position:absolute; width: 1px; margin-left: -60px; margin-top: -6px; padding: 5px; text-align: center; z-index: 4;}

ol.notes li.note blockquote { position:absolute; width: 1px; z-index: 1; padding: 40px 5px 5px 5px; margin-left: -60px; border:0; }

ol.notes li.note.more_notes_link_container { display:block; margin-top: 10px; text-align: center;}

ol.notes li.note.more_notes_link_container a { color:{color:tex}; letter-spacing:.5px; text-transform:uppercase; font-weight:300; font-family:'Open Sans',Helvetica,Arial,sans-serif; font-size:9px;}

/* DETALHES */ .dmtextos { {block:IndexPage} padding:15px; {/block:IndexPage} background:{color:background};}

#dmtitlepost{text-transform:uppercase; font-family:'Open Sans',Helvetica,Arial,sans-serif; letter-spacing:1px; line-height:18px; padding-bottom:8px; text-align:left; color:{color:Title Post}; font-size:{text:Title Post size};}

{block:IfBackToTop} #scrollToTop:link,#scrollToTop:visited { color:transparent; background-color:transparent; display:none; position:fixed; opacity:.6; bottom:40px; right:30px;} {/block:IfBackToTop}

#dmcap {text-align:left; position:absolute;}

.dms { margin-top:0px; font-size:9px; opacity:1; position:relative; text-align:left; letter-spacing:1px; text-transform:uppercase; font-family:'Open Sans',Helvetica,Arial,sans-serif;}

/* DETALHES */

/* ASK */ .dmquestion { padding-bottom:10px;}

.dmasker { padding:10px; text-align:center; text-transform:uppercase; font-family:'Open Sans',Helvetica,Arial,sans-serif; letter-spacing:1px; font-size:9px; border-top:1px solid {color:borders}; border-bottom:1px solid {color:borders};}

.dmanswer { padding-top:10px;}

.post .dmask { padding:10px; margin-top:1px; font-size:9px; text-align:center; font-family:'Open Sans',Helvetica,Arial,sans-serif; letter-spacing:1px; opacity:0; width:330px; margin-left:0px; position:absolute; background:{color:background}; text-transform:uppercase; -webkit-transition: all 1.0s linear; -webkit-transition: all 1.0s linear; -moz-transition: all 1.0s linear; transition: all 1.0s linear;}

.post:hover .dmask{ opacity:1; -webkit-transition: all 1.0s linear; -webkit-transition: all 1.0s linear; -moz-transition: all 1.0s linear; transition: all 1.0s linear; z-index:100;} .dmask a {color:{color:text};} /* ASK */

/* MUSIC */ iframe.spotify_audio_player {height:80px!important;display:block;} .soundcloud_audio_player{height:80px!important;display:block;} .bandcamp_audio_player{height:105px!important;display:block;} .youtube_audio_player{height:250px!important;display:block;}

.tumblr_audio_player {width:100%;margin-top:12px;}

.player { width:50px; height:50px; padding:9px; overflow:hidden; background:#fff; margin:0; display:block; float:left;}

.dmaudio {background:#fff;}

.audioinfo { color:#888; margin:0 0 0 79px; display:block; padding:20px; height:auto; text-align:left; font-size:10px; line-height:14px; letter-spacing:1.5px; text-transform:none; font-weight:300; font-family:'Typewriter FS', serif; width:calc({select:Post Size}px - 133px); background:#fff;} /* MUSIC */

/* CHATS */ .dmchat{ margin: 0px 0px 0 0px; line-height:20px;} .post .dmlines{ margin-left: 0px;} .post .dmlines .dmline{ color:{color:Text}; transition:all 0.0s ease;} .post .dmlines .dmline.even{ transition:all 0.0s ease;} /* CHATS */

/* VIDEO */ .video embed, .video object, .video iframe { width:280px!important; display:block;margin:auto;} /* VIDEO */

.lcoluna {overflow:hidden; display:inline-block; width:100px;margin:9px;height:auto;margin-top:0px;}

.lheartt {text-align:left; transition:all 1s ease;letter-spacing:.5px;color:#aaa;}

.lheart {font-size:9px; letter-spacing:1.2px; text-transform:uppercase; text-align:left; color:#000; transition:all 1s ease;font-family:'Open Sans',Helvetica,Arial,sans-serif;font-weight:300;}

.lheart a {color:{color:Text};}

.lheart:hover {color:{color:links menu};} </style>

{block:IfBackToTop} <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script><script src="http://static.tumblr.com/ikeq9mi/DfYl6o46t/scrolltotop.min.js"></script><a href="javascript:;" id="scrollToTop"><img src="http://static.tumblr.com/cfe2f28/05Anrch85/white.png"></a> {/block:IfBackToTop}

{block:IndexPage} <script src="http://static.tumblr.com/twte3d7/H8Glm663z/masonry.js"></script> <script src="http://static.tumblr.com/cfe2f28/lranw7ueg/dmrolagem.js"></script>

</head> <body onkeydown="return false">

<a class="lcredit icon theme" title="Install" href="http://docismo.tumblr.com/">Theme</a>

{block:IfLeftSidebar} <div id="dmsidebar2">  <div class="nav2"> <div id="dm1"></div> <div id="dm2"></div> <div id="dm3"></div> <div id="dm4"></div>

<div id="dmtitles">Sobre</div> {text:Sobre}<br>

<div id="dmtitles">Adicionais</div> <a href="{text:Link1Extra Url}">{text:Link1Extra Title}</a><br> <a href="{text:Link2Extra Url}">{text:Link2Extra Title}</a><br> <a href="{text:Link3Extra Url}">{text:Link3Extra Title}</a><br> <a href="{text:Link4Extra Url}">{text:Link4Extra Title}</a>

</div></div> {/block:IfLeftSidebar}

<div id="dmsidebar">

<div id="dmtitleblog"> <a href="/">{text:Title Blog}</a></div>

<div id="dmdescri"> {block:Description}{Description}{/block:Description}</div>

<div class="nav1"> <a href="{text:Link1 Url}">{text:Link1 Title}</a> <a href="{text:Link2 Url}">{text:Link2 Title}</a> <a href="{text:Link3 Url}">{text:Link3 Title}</a> <a href="{text:Link4 Url}">{text:Link4 Title}</a> </div>

</div>

{block:Posts}

{block:Text} <div class="post"> {block:Title}<div id="dmtitlepost">{Title}</div>{/block:Title} {Body} {block:IndexPage} <div class="dmtxt"> <a href="{permalink}">Com {NoteCount} notes</a> ⋰ <a href="{ReblogURL}" target="_blank">Compartilhar</a> </div> {/block:IndexPage} </div> {/block:Text}

{block:Photo} <div class="post"> {block:IndexPage} <div class="dmbase"> <div class="dmpnotes"> <font style=" text-align:left; color:#fff;letter-spacing:.5px;font-weight:600; font-family:'Open Sans',Helvetica,Arial,sans-serif; font-size:15px;text-shadow:1px 1px 1px #444;">{DayOfMonth} de {ShortMonth} ás {24Hour}:{Minutes}</font><p>

<font style="font-size:9px;letter-spacing:1px; font-family:'Open Sans',Helvetica,Arial,sans-serif;text-transform:uppercase;text-shadow:1px 1px 1px #222; "> <a href="{permalink}">{NoteCount} notes</a> <a href="{ReblogURL}" target="_blank">⋰ Reblog</a><br> </font>

<font style="font-size:10px;text-shadow:1px 1px 1px #222;"> {block:IfCaption} {block:Caption}{Caption}{/block:Caption} {/block:IfCaption} </font> </div> </div>

{/block:IndexPage}

{block:PermalinkPage} <img src="{PhotoURL-500}" alt="{PhotoAlt}"width=280px/></a> {/block:PermalinkPage} </div> {/block:Photo}

{block:Photoset} <div class="post">

{block:IfNotCustomPhotoset}

{block:IndexPage} <center>{Photoset-250}</center>

{block:IfCaption} {block:Caption}{Caption}{/block:Caption} {/block:IfCaption}

{/block:IndexPage}

{block:IndexPage} <div class="dmtxt"> <a href="{permalink}">{NoteCount} notes</a> ? <a href="{ReblogURL}" target="_blank">reblogar</a> </div> {/block:IndexPage} {/block:IfNotCustomPhotoset}

{block:IfCustomPhotoset} {block:IndexPage} <div class="dmbase"> <div class="dmpnotes"> <font style=" text-align:left; color:#fff;letter-spacing:.5px;font-weight:600; font-family:'Open Sans',Helvetica,Arial,sans-serif; font-size:15px;text-shadow:1px 1px 1px #444;">{DayOfMonth} de {ShortMonth} ás {24Hour}:{Minutes}</font><p>

<font style="font-size:10px;text-shadow:1px 1px 1px #222;"> {block:IfCaption} {block:Caption}{Caption}{/block:Caption} {/block:IfCaption} </font> </div> </div> {/block:IndexPage}

{block:IndexPage} {block:Photos} <img src="{PhotoURL-500}" width="280" /> {/block:Photos}

{/block:IndexPage}

{/block:IfCustomPhotoset}

{block:PermalinkPage} {block:IfCustomPhotoset} {block:Photos} <img src="{PhotoURL-500}" width="280" /> {/block:Photos} {/block:IfCustomPhotoset}

{block:IfNotCustomPhotoset} <center> {Photoset-250} </center> {/block:IfNotCustomPhotoset} {block:Caption}{Caption}{/block:Caption} {/block:PermalinkPage} </div> {/block:Photoset}

{block:Quote} <div class="post"> {Quote} {block:Source}<div class="dms">— {Source}</div>{/block:Source}

{block:IndexPage} <div class="dmtxt"> <a href="{permalink}">{NoteCount} notes</a> ⋰ <a href="{ReblogURL}" target="_blank">REBLOG</a> </div> {/block:IndexPage} </div> {/block:Quote}

{block:link} <div class="post">

<a href="{URL}"><div id="dmtitlepost">{Title}</div> <a href="{permalink}"> {block:Description}{Description}{/block:Description}</a>

{block:IndexPage} <div class="dmtxt"> <a href="{permalink}">{NoteCount} notes</a> ⋰ <a href="{ReblogURL}" target="_blank">reblog</a> </div> {/block:IndexPage} </div> {/block:link}

{block:Chat} <div class="post">

<div class="dmchat"> <div class="dmlines"> {block:Lines} <div class="dmline {Alt}">{block:Label}<font style="font-family:pt sans;font-size:9.5px;letter-spacing:.5px;text-transform:uppercase;">{Label}</font>{/block:Label} {Line}</div> {/block:Lines} </div></div> {block:IndexPage} <div class="dmtxt"> <a href="{permalink}">{NoteCount} notes</a> ⋰ <a href="{ReblogURL}" target="_blank">reblog</a> </div> {/block:IndexPage} </div> {/block:Chat}

{block:Video} <div class="post"> <div class="video"> {Video-250}</div>

{block:IfCaption} {block:Caption}{Caption}{/block:Caption} {/block:IfCaption}

{block:IndexPage} <div class="dmtxt"> <a href="{permalink}">{NoteCount} notes</a> ⋰ <a href="{ReblogURL}" target="_blank">reblog</a> </div> {/block:IndexPage} </div> {/block:Video}

{block:Audio} <div class="post">

<div class="dmaudio" style="border:1px solid {color:borders};"> {block:AlbumArt}{/block:AlbumArt} <div class="player">{AudioPlayerWhite}</div> <div class="audioinfo"> {block:TrackName}<b>{TrackName}</b>{/block:TrackName}{block:Artist}<br>{Artist}{/block:Artist}</div></div>

{block:IfCaption} {block:Caption}{Caption}{/block:Caption} {/block:IfCaption}

{block:IndexPage} <div class="dmtxt"> <a href="{permalink}">{NoteCount} notes</a> ⋰ <a href="{ReblogURL}" target="_blank">reblog</a> </div> {/block:IndexPage} </div> {/block:Audio}

{block:Answer} <div class="post"> <div class="dmquestion">{Question}</div>

{block:IndexPage} <div class="dmask"> <a href="{permalink}">{NoteCount} notes</a> ⋰ <a href="{ReblogURL}" target="_blank">Reblog</a> </div> {/block:IndexPage}

<div class="dmasker">questionado por {Asker} </div>

<div class="dmanswer">{Answer}</div></div> {/block:Answer}

{block:PostNotes} {block:NoteCount}<div id="permalink"> {NoteCount} Likes e reblogs{/block:NoteCount} {block:RebloggedFrom} <p>Reblogado de <a href="{ReblogParentURL}" target="_blank">{ReblogParentName}</a>{/block:RebloggedFrom} {block:HasTags} <p>Etiquetas: {block:Tags} <a href="{TagURL}">{Tag}, </a>{/block:Tags}{/block:HasTags} {block:Date} <p>Publicado em: {DayOfMonth} de <n>{Month}</n> de {Year}{/block:Date} {block:ContentSource} <p>Original de <a href="{SourceURL}">{SourceTitle}</a> {/block:ContentSource} </div> <section class="postnotes"> {PostNotes-64} </section> {/block:PostNotes} {/block:Posts}

</div> </div> <div class="navigation"> {block:Pagination}{block:NextPage}<p id="page_nav"><a style="float:right" href="{NextPage}" id="next"></a>{/block:NextPage} {block:PreviousPage}<a style="float:left" href="{PreviousPage}"></a></p>{/block:PreviousPage}{/block:Pagination} </div> </body>

</html>

0 notes