Cambiar el fondo de los posts.

Te lo explico en el tema Redux pero lo puedes tomar de base para cualquier otro tema.

Busca con el comando (ctrl + f).

 #wrapper #content .post {

Y debajo veras este código:

background: #fff;

Sustituye fff por el codigo del color que quieras usar como fondo.
En esta pagina puedes ver el codigo de todos los colores: http://html-color-codes.info/codigos-de-colores-hexadecimales/

EJEMPLO:


  #wrapper #content .post {
  font-family: {font:Body};
  background: #20EDFF;
  padding: 10px;
  position: relative;
                }

Inicialmente estaría así:

Tras editarlo se quedaría así:

Si quieres poner una imagen de fondo en vez de un color, pon este código:

 #wrapper #content .post {

 font-family: {font:Body};

 background: url('URL DE IMAGEN ENTRE LAS COMILLAS');

 padding: 10px;

 position: relative;

 }

         

La imagen que pongas también puede ser un gif. 

Colocar bordes.

Te lo explico en el tema Redux pero lo puedes tomar de base para cualquier otro tema.

Puedes añadir los bordes añadiendo este código a cualquier sección:

border-radius: 10px 10px 10px 10px;

border: 4px solid #000; 

box-shadow: 0 0 5px 5px rgba(0,177,223,1);

--La primera línea redondea los bordes, edita los "px", a más "px" más redondo será (tienen que ser las cuatro cifras iguales). Si quieres bordes cuadrados, ponlo todo a 0.  border-radius: 0px 0px 0px 0px;

EJEMPLOS:

#wrapper #sidebar #top {

border-radius: 60px 60px 60px 60px;

         -           -             -            -          -

#wrapper #sidebar #top {

border-radius: 120px 120px 20px 120px;

--La segunda añade un borde negro de 4 px (puedes modificar el tamaño y el color)

--La tercera básicamente añade un borde de 5 px con el color y la opacidad que le pongas. El color tiene que ser en rgba.

(La opacidad va de 0 a 1, escalando de 0.1 en 0.1. Por ejemplo, si quieres que se vea muy transparente usa 0.2)

Para conseguir los colores rgb puedes usar el photoshop (en su paleta de colores) o usar esta página: http://html-color-codes.info/codigos-de-colores-hexadecimales/

Se puede añadir bordes de la página central, menús de la derecha, página actual de la paginación y a las demás paginas (de la paginación).

Busca cada sección con el comando (ctrl + f).

Página central:

#wrapper #content .post {

Menús de la derecha:

#wrapper #sidebar #top {

Página actual de la paginación:

#wrapper #content #navigation.jump_pagination .current_page {

Demás páginas (de la paginación):

#wrapper #content #navigation.jump_pagination a {

Por ejemplo si queremos editar la página central:

Veras un código que inicialmente estaría así:

#wrapper #content .post {

 font-family: {font:Body};

 background: #fff;

 padding: 10px;

 position: relative;

 }

Tras añadir los bordes quedaría así:

#wrapper #content .post {

border-radius: 10px 10px 10px 10px;

 border: 4px solid #000; 

 box-shadow: 0 0 5px 5px rgba(0,1707,2023,10);

 font-family: {font:Body};

 background: #90EDFF;

 padding: 10px;

 position: relative;

 }

Añadir "Ask" y "Submit" (Peguntas y aportes)

Para poder hacer que nos pegunten y aporten a nuestor tumblr, NO TENDREMOS QUE HACER NADA DE CODIGOS HTML.

PASOS:

1.- Ves a: https://www.tumblr.com/settings

2.- Elige el tumblr en el que quieras hacer los cambios (Si tienes 2 o más blogs)

3.- Selecciona las dos casillas, la de "Preguntas" y la de "Colaboraciones".

Una vez aquí también puedes elegir si las opciones de:
Las preguntas: Permitir preguntas anónimas y el titulo.
Las colaboraciones: Titulo, normas, los tipos de publicaciones (texto, fotos, cita, enlaces y videos) y las etiquetas (a elegir entre las que permitas tu ) que saldran directamente en la publicación que te manden.


4.- Guarda los cambios.

A parte en https://www.tumblr.com/settings puedes editar más cosas de tu tumblr.

Botón para que suban aportes a tu tumblr

Puedes colocar este código en un post o en una subpagina de tumblr.

<p><iframe frameborder="0" height="500" id="submit_form" scrolling="no" src="http://www.tumblr.com/submit_form/NOMBRE_DE_TU_TUMBLR.tumblr.com" width="100%"></iframe>&nbsp;</p>
<p><iframe frameborder="0" height="25" id="tumblr_controls" scrolling="no" src="http://assets.tumblr.com/iframe.html?10&amp;src=http%3A%2F%2FNOMBRE_DE_TU_TUMBLR.tumblr.com%2Fsubmit&amp;lang=es_ES&amp;name=NOMBRE_DE_TU_TUMBLR" width="330"></iframe></p>
<!--[if IE]><script type="text/javascript">document.getElementById('tumblr_controls').allowTransparency=true;</script><![endif]-->
<script type="text/javascript">// <![CDATA[
// <![CDATA[
_qoptions={qacct:"p-19UtqE8ngoZbM"};
// ]]]]><![CDATA[>
// ]]></script>
<script src="http://edge.quantserve.com/quant.js" type="text/javascript"></script>

------------------------------------------------------------------------------------------------
Pon el nombre de tu tumblr donde te lo indica.
EJEMPLO: http://lostumblrykenny.tumblr.com/ pondrías: lostumblrykenny

Al poner este código, te saldrá esto:

HE USADO ESTE CÓDIGO:


<p><iframe frameborder="0" height="500" id="submit_form" scrolling="no" src="http://www.tumblr.com/submit_form/lostumblrykenny.tumblr.com" width="100%"></iframe>&nbsp;</p>
<p><iframe frameborder="0" height="25" id="tumblr_controls" scrolling="no" src="http://assets.tumblr.com/iframe.html?10&amp;src=http%3A%2F%2Flostumblrykenny.tumblr.com%2Fsubmit&amp;lang=es_ES&amp;name=lostumblrykenny" width="330"></iframe></p>
<!--[if IE]><script type="text/javascript">document.getElementById('tumblr_controls').allowTransparency=true;</script><![endif]-->
<script type="text/javascript">// <![CDATA[
// <![CDATA[
_qoptions={qacct:"p-19UtqE8ngoZbM"};
// ]]]]><![CDATA[>
// ]]></script>
<script src="http://edge.quantserve.com/quant.js" type="text/javascript"></script>

Imagen que te redireccione a una página (CATEGORÍAS)

<a href="URL_DE_LA_PÁGINA"><img src="IMAGEN_QUE_TE_LLEVA_A_LA_PAGINA" width=220 height=220" /></a>

Solamente rellenar con las datos que te pide. La URL de la página a la que te lleva y la URL de la imagen.

EDITA EL TAMAÑO DE LA IMAGEN:

widht=ANCHO

height=ALTO

--------------------------------------------------------------------------

También puedes usar este código para crear categorías. 

Metodo 1: http://codigoshtmlparatumblr.blogspot.com.es/2012/07/botones-que-cambian-al-pasar-el-raton.html

Metodo 2: 

Puedes crear una categoría en tu tumblr que solamente salgan aportes de un tema especifico. Como hago yo (Gifs, videos, memes...). Con este código puedes crear una:

<a href="http://lostumblrykenny.tumblr.com/tagged/EJ:fotos"><img src="IMAGEN_QUE_TE_LLEVE_A_LA_PAGINA" width=220 height=220" /></a> 

Explico:

Cuando a una publicación le pones una etiqueta se guarda como en una especie de apartado o categoría en la que estan todas las publicaciones con esa etiqueta. EJEMPLO: fotos

Así todas las publicaciones tuyas que tengan las etiqueta "fotos" irán a: 

http://(AQUI NOMBRE DE TU TUMBLR).tumblr.com/tagged/fotos 

Después pones la URL de la imagen que quieras, al clickarla te llevara a esa pagina.

Si quieres que al pasar el ratón por encima de la imagen cambie leete: 

http://codigoshtmlparatumblr.blogspot.com.es/2012/07/botones-que-cambian-al-pasar-el-raton.html

Texto que se mueve de izquierda a derecha y viceversa.

1.- Ves a http://www.tumblr.com/customize, despues haz click en "Editar HTML".


2.- Localiza (Ctrl + f) esto:

  <div id="content">

3.- Pega el siguiente codigo encima de: <div id="content"> . (Al ponerlo aqui te saldra debajo del header) :

</a>

            <center><marquee direction="left" id="ejemplo"><span class="Apple-style-span" style="color: red;font-size: large;">TEXTO</span></marquee> <a href="javascript:void(0);"></a> <a href="javascript:void(0);"></a></center>

        </div>

Clicka a la imagen para verla en grande

EDITALO: 

-Sustituye TEXTO por lo que vayas a poner.

-Para cambiar el color del texto sustituye "red" por el color que quieras (green, blue, white, black, orange...)

-Para cambiar el tamaño del texto sustituye "large" por el tamaño deseado (big, small, medium)

-Para cambiar la direccion de deslizamiento sustituye "left" por "right".

Insertar un "Video destacado"

Para poner un video en tu tumblr, solamente tienes que copiar este codigo y pegarlo en tu tumblr:



<iframe width="227" height="205" src="http://www.youtube.com/embed/CODIGO" frameborder="0" allowfullscreen></iframe>

EXPLICO:

 width="Tamaño de alto"

 height="Tamaño de ancho"

CODIGO son las letras y números que estan entre watch?v= y &feature= en la URL de un  video de youtube.

Ejemplo: http://www.youtube.com/watch?v=7niLK4bapo8&feature=share&list=UU9GGMlCHav48H2NBCaO74Hg

El codigo seria:  7niLK4bapo8

Quedaria asi el codigo:

<iframe width="227" height="205" src="http://www.youtube.com/embed/7niLK4bapo8" frameborder="0" allowfullscreen></iframe>