Tumblr skin

1) The profile picture. This one must be a square (I'm using 200x200 px), with the image being cut as a circle and with transparent background.

(If it's not cut like a circle I think it's pretty easy to do it with the style, but I never tried. Tho I'm pretty sure that you have to add boder-radious: 50%; to the style img.pfp)

Example:

2) The reblog profile picture. This one is the same, but with the green reblog circle. I'm using a 220x200 px image, adding this reblog of 100x100 px (that you can download from here I guess):

What I do is put this image in the right bottom corner of a 220 x 200 image, put the profile against the left, and delete a circle around the green circle to make it transparent:

3) The dash. If you're using the same sizes than me, this images should be 800x480 px. If you're using different sizes, just make everything escalated.

I cheat a bit in this part, so first of all, you have to choose the background of the pop up. Because you have to put it in the image.

In this case, the background is #ffffb3;.

So, you put the profile picture (in the right size) in the middle, against the bottom. Then a background image. And then you add a colored line at the bottom (about 1/3 of the pfp) and around the pfp. It must look something like this:

2nd part: style

This is the style (you can just copy it, it has some notes but they have /* */ so the code should ignore them):

(Sorry in advance if you want to analyze it: most of the style names are in Spanish)

#workskin .back {
background: rgba(0,25,53,1);
padding-top: 20px;
padding-bottom: 20px;
padding-left: 1%;
padding-right: 1%;
margin: 0px;
}

#workskin .tumblr {
margin: auto;
margin-top: 50px;
margin-bottom: 50px;
max-width: 500px;
display: flex;
flex-direction: column;
border-radius: 10px;
background: #ffffff;
padding: 0px;
font-size: 0.9em;
color: #000000;
}

#workskin .cabeza {
display: flex;
flex-direction: row;
padding: 0.2em;
height: 76px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
justify-content: flex-start;
align-content: center;
font-size: 0.9em;
}

#workskin .cabezarb {
display: flex;
flex-direction: row;
padding: 0.2em;
height: 76px;
justify-content: flex-start;
align-content: center;
border-top-style: solid;
border-top-width: 2px;
border-top-color: rgba(222,222,222,1);
font-size: 0.9em;
}

#workskin .cabeza:hover {
background: rgba(242,243,245,1);
}

#workskin .cabezarb:hover {
background: rgba(242,243,245,1);
}

#workskin .icono {
padding: 0px;
margin-left: 0.5em;
margin-right: 0.5em;
margin-top: 13px;
margin-bottom: 13px;
}

#workskin .nyf {
display: flex;
flex-direction: column;
align-content: flex-start;
padding: 0px;
margin-top: 0.8em;
margin-left: 0.2em;
}

#workskin .espvacio {
flex-grow: 2;
}

#workskin .nombre {
padding: 0px;
font-weight: bold;
margin-top: 0.2em;
margin-bottom: 0.1em;
font-size: 1.15em;
text-overflow: ellipsis;
overflow: hidden;
}

#workskin .nombree {
padding: 0px;
font-weight: bold;
margin-top: 0.2em;
font-size: 1.15em;
max-width: 220px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}

#workskin .tfecha {
padding: 0px;
color: rgba(76,94,114,1);
font-size: 0.9em;
}

#workskin .segypunt {
flex-direction: row;
align-self: flex-end;
align-items: center;
margin-left: 0.5em;
margin-top: 0px;
margin-bottom: 0.7em;
margin-right: 0.5em;
display: flex;
height: 50px;
padding: 0.2em;
}

#workskin .puntos {
color: rgba(76,94,114,1);
font-weight: bold;
font-size: 1.3em;
border-radius: 50px;
padding-left: 0.3em;
padding-right: 0.3em;
padding-top: 0.3em;
padding-bottom: 0.3em;
margin-left: 0.5em;
margin-bottom: 0.3em;
}

#workskin .puntos:hover {
border-radius: 50px;
padding-left: 0.3em;
padding-right: 0.3em;
padding-top: 0.3em;
padding-bottom: 0.3em;
background: rgba(230,232,235,1);
}

#workskin .content {
margin: 0px;
margin-right: 20px;
margin-left: 20px;
font-size: 1em;
}

#workskin .hashtags {
color: rgba(89,89,89,1);
font-size: 0.95em;
}

#workskin .hashtags:hover {
color: rgba(89,89,89,1);
text-decoration: underline;
}

#workskin .nombre:hover {
display: inline;
}

#workskin .nombre:hover + .hidedashdash {
display: block;
}

#workskin .hidedash {
display: none;
position: absolute;
}

#workskin .dashdiv:hover + .hidedash {
display: block;
z-index: 2;
position: absolute;
}

#workskin .seguir {
border-radius: 27px;
padding: 0.7em;
font-weight: bold;
background: rgba(230,232,235,1);
font-size: 1em;
margin-bottom: 0.7em;
}

#workskin .seguir:hover {
border-radius: 27px;
padding: 0.7em;
font-weight: bold;
background: rgba(217,221,225,1);
font-size: 1em;
}

#workskin .seguir:active {
visibility: hidden;
}

#workskin p {
margin: 0px;
}

#workskin .tx {
margin-top: 15px;
color: #000000;
}

#workskin .tx:last-child {
margin-top: 15px;
margin-bottom: 20px;
color: #000000;
}

#workskin .perfil {
width: 300px;
margin: 0px;
padding: 0px;
border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px;
}

#workskin .fondo {
margin: 0px;
}

#workskin .fondo > img {
margin: 0px;
}

#workskin .blanc {
margin: 10px;
color: white;
text-align: center;
font-size: 1em;
font-weight: normal;
}

#workskin .neg {
margin: 10px;
text-align: center;
color: #0d0d0d;
font-size: 1em;
font-weight: normal;
}

#workskin .chico {
font-size: 0.9em;
}

#workskin .cuadritosbox {
display: flex;
flex-direction: row;
padding: 5px;
}

#workskin .cuadritos {
background: white;
width: 85px;
height: 85px;
margin: 5px;
padding: 5px;
border-radius: 7px;
overflow: hidden;
}

#workskin .cuadritosimg {
background: white;
width: 85px;
height: 85px;
margin: 5px;
padding: 0px;
border-radius: 7px;
overflow: hidden;
}

#workskin .cuadritos > p {
background: -webkit-linear-gradient(#333, #eee);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-size: 0.9em;
}

#workskin .cuadritosimg > img {
margin: -5px;
width: 85px;
height: 85px;
border-radius: 7px;
}

#workskin img.cuad {
margin: 0px;
border-radius: 7px;
height: 150px;
width: 150px;
}

#workskin img.pfp {
width: 50px;
height: 50px;
}

#workskin img.pfprb {
width: 55px;
height: 50px;
}

#workskin img.dash {
width: 300px;
height: 180px;
}

#workskin .tag {
text-decoration: underline;
}

#workskin .notag {
text-decoration: none;
}

#workskin .sobreimg {
z-index: 5;
display: flex;
flex-direction: row;
justify-content: flex-start;
align-content: center;
margin-top: -170px;
margin-bottom: 140px;
}

#workskin .sobrenom {
color: white;
margin-left: 15px;
margin-top: 5px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
font-weight: bold;
font-size: 1em;
}

#workskin .sobreseg {
margin-right: 15px;
background: white;
padding-right: 1em;
padding-left: 1em;
padding-top: 0.5em;
padding-bottom: 0.5em;
font-size: 0.9em;
border-radius: 0.2em;
font-weight: bold;
}

#workskin .sobretool {
margin-right: 15px;
margin-top: -10px;
padding: 0px;
font-size: 2em;
font-weight: bold;
color: white;
font-variant-emoji: text;
}

#workskin .partedeabajo {
display: flex;
flex-direction: row;
padding: 15px;
height: 60px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
justify-content: flex-start;
align-content: center;
}

#workskin .partedeabajoyo {
display: flex;
flex-direction: column;
padding: 5px;
height: 60px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-style: solid;
border-bottom-width: 1px;
border-bottom-color: rgba(222,222,222,1);
}

#workskin .basedit {
align-self: flex-end;
font-size: 1.5em;
color: rgb(76,94,114);
margin-right: 20px;
}

#workskin .like {
color: rgb(76,94,114);
padding: auto;
height: 50px;
width: 100px;
justify-content: center;
vertical-align: middle;
text-align: center;
border-radius: 50px;
display: flex;
flex-direction: row;
}

#workskin .like:hover {
color: rgb(255,93,70);
background: rgb(255,236,234);
padding: auto;
height: 50px;
width: 100px;
justify-content: center;
vertical-align: middle;
text-align: center;
border-radius: 50px;
}

#workskin .simbolo {
font-size: 2em;
margin: 0px;
margin-bottom: 0.3em;
font-weight: bold;
margin-right: 0.2em;
margin-left: 0.2em;
margin-top: auto;
font-variant-emoji: text;
}

#workskin .cant {
font-size: 1.15em;
font-weight: bold;
margin: 0px;
margin-left: 0.2em;
margin-right: 0.2em;
margin-top: 1em;
margin-bottom: 0.5em;
}

#workskin .comentario {
color: rgb(76,94,114);
display: flex;
flex-direction: row;
padding: auto;
height: 50px;
width: 100px;
justify-content: center;
vertical-align: middle;
text-align: center;
border-radius: 50px;
}

#workskin .comentario:hover {
color: rgb(5,185,255);
background: rgb(229,248,255);
padding: auto;
height: 50px;
width: 100px;
justify-content: center;
vertical-align: middle;
text-align: center;
border-radius: 50px;
}

#workskin .liked {
color: rgb(255,93,70);
padding: auto;
height: 50px;
width: 100px;
justify-content: center;
vertical-align: middle;
text-align: center;
border-radius: 50px;
display: flex;
flex-direction: row;
}

#workskin .liked:hover {
color: rgb(255,93,70);
background: rgb(255,236,234);
padding: auto;
height: 50px;
width: 100px;
justify-content: center;
vertical-align: middle;
text-align: center;
border-radius: 50px;
}

#workskin .reblog {
color: rgb(76,94,114);
padding: auto;
height: 50px;
width: 100px;
justify-content: center;
vertical-align: middle;
text-align: center;
border-radius: 50px;
display: flex;
flex-direction: row;
}

#workskin .reblog:hover {
color: rgb(1,207,53);
background: rgb(229,250,234);
padding: auto;
height: 50px;
width: 100px;
justify-content: center;
vertical-align: middle;
text-align: center;
border-radius: 50px;
}

#workskin .compartir {
color: rgb(76,94,114);
padding: auto;
height: 50px;
width: 50px;
justify-content: center;
vertical-align: middle;
text-align: center;
border-radius: 50px;
display: flex;
flex-direction: row;
margin-right: 10px;
}

#workskin .compartir:hover {
color: rgb(124,92,255);
background: rgb(242,238,255);
padding: auto;
height: 50px;
width: 50px;
justify-content: center;
vertical-align: middle;
text-align: center;
border-radius: 50px;
margin-right: 10px;
}

/*Now, this 2 parts have to be copied multiple times, with different names, one per each of the users you're going to use */

#workskin .tUser1 {
background: #ffffb3; /* <-This has to have the same color than the line in the dashboard image */
}

#workskin .tUser2 {
background: #660066; /*<-This has to have the same color than a different image; in this case, I choose a dark color that would need white letters */
}

#workskin .gradUser1 {
background: -webkit-linear-gradient(#333, #ffffb3); /*<-This one has first #333, which is corresponding to black letters, and second the background of the User1 */
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

#workskin .gradUser2 {
background: -webkit-linear-gradient(#eee, #660066); /*<-This one has first #eee, which is corresponding to white letters, and second the background of the User1 */
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

3rd part: html

Now the hard part.

Let's start with a simple post.

username

⚙

Title

Here goes the description
that goes transparent if it's long

You can also not use images here

time

···

Here goes the content

Which can be pretty long

#and even #have hashtags

🗑 ✎

🗩

⇆

200

♡

332

↥

The code for this is:

</div>

<p class="nombree">username</p>

</div>

<p class="sobrenom">username</p>

</div>

</div>

<p class="neg"><b>Title</b></p>

<p class="neg chico">Here goes the description<br/> 
<span class="gradUser1">that goes transparent if it's long</span></p>

</div>

</div>

<p>write here</p>

</div>

</div>

</div>

</div>

</div>

</div>

<p class="tx">First line of content</p>

<p class="tx">Second line of content</p>

<p class="tx"><span class="hashtags">#hashtag 1</span>   <span class="hashtags">#hashtag 2</span></p>

</div>

</div>

<p class="cant">amount of comments</p>

</div>

</div>

<p class="cant">amount of reblogs</p>

</div>

</div>

<p class="cant">amount of likes</p>

</div>

</div>

</div>

</div>

</div>

Okay, another post, this one with reblogs, and also with all the follows.

username2

username

Title

Here goes the description
that goes transparent if it's long

You can also not use images here

Rebbloged · time

···

username

Title

Here goes the description
that goes transparent if it's long

You can also not use images here

time

···

Here goes the content

Which can be pretty long

username2

username

Title

Here goes the description
that goes transparent if it's long

You can also not use images here

time

···

Here goes the content

Which can be pretty long

#and even #have hashtags

🗩

⇆

200

♥

332

↥

The code for this is:

</div>

<p class="nombree">username</p>

</div>

<p class="sobrenom">username</p>

</div>

<p class="sobreseg">Follow</p>

</div>

<p class="blanc"><b>Title</b></p>

<p class="blanc chico">Here goes the description<br/> 
<span class="gradUser2">that goes transparent if it's long</span></p>

</div>

</div>

<p>write here</p>

</div>

</div>

</div>

<p>Reblog · time</p>

</div>

</div>

<p>Follow</p>

</div>

</div>

</div>

<p class="nombree">username</p>

</div>

<p class="sobrenom">username</p>

</div>

</div>

<p class="neg"><b>Title</b></p>

</div>

</div>

<p>write here</p>

</div>

</div>

</div>

</div>

</div>

</div>

<p class="tx">First line of content</p>

<p class="tx">Second line of content</p>

</div>

</div>

<p class="nombree">username</p>

</div>

<p class="sobrenom">username</p>

</div>

<p class="sobreseg">Follow</p>

</div>

<p class="blanc"><b>Title</b></p>

</div>

</div>

<p>write here</p>

</div>

</div>

</div>

</div>

</div>

</div>

<p class="tx">First line of content</p>

<p class="tx">Second line of content</p>

</div>

<p class="cant">amount of comments</p>

</div>

</div>

<p class="cant">amount of reblogs</p>

</div>

</div>

<p class="cant">amount of likes</p>

</div>

</div>

</div>

</div>

</div>

username

⚙

Title

Here goes the description
that goes transparent if it's long

You can also not use images here

time

···

You can also tag people

Hello @username2

username

Title

Here goes the description
that goes transparent if it's long

You can also not use images here

🗩

⇆

200

♡

332

↥

The code goes the same, except the content:

<p class="tx">You can also tag people</p>

<p class="tx">Hello <span class="tag">@username2</span></p>

</div>

<p class="sobrenom">username</p>

</div>

<p class="sobreseg">Follow</p>

</div>

<p class="blanc"><b>Title</b></p>

</div>

</div>

<p>write here</p>

</div>

</div>

</div>

Series this work belongs to:

← Previous Work Part 4 of SGS and extras

Actions

Kudos

Mxroseart, Pecane31, MoonlitChalice, Suzanalivia, Akari_Uzu, Muse_of_Alchemy, FrozenGhillies, lookatthe_stars, RedactedLurker, Netii, A_Fools_Errand, entropy_muffin, Charles_Rockafellor, magicalfrog, TheyHeartDee, loveliest_Leaf, Mewzebub, Yullenpyon, munnworm, AsteriskEmily, Neakaeri, Hadir, Lukamodric10, Fantasilka, Sage_YR, and toxiicstars as well as 2 guests left kudos on this work!

Comments

Sorry, this work doesn't allow non-Archive users to comment. You can however still leave Kudos!

Archive of Our Own

Actions

Work Header

Tumblr skin

Arbol_13

Summary:

Notes:

Work Text:

1st part: images

2nd part: style

3rd part: html

Series this work belongs to:

Actions

Kudos

Comments

Footer

About the Archive

Contact Us

Development