Symbiosi Scarf for those who have Hope!

I know that SMGO’s news has disheartened everyone, but we can’t give up! WB thinks we can’t reach our goal? Well we’ll just have to prove them wrong!

If you agree, and would like to help spread the message that we will continue fighting, put this scarf on your blog to show your support!

You can see how the finished product looks here.

And how to make it below. Be aware this does take a bit of coding, but it’s only copy and paste for the most part.

I modified the tumblr scarf code from Baelor’s original, so credit goes to them.

So first of all, we’re going to go into our blog’s theme customization,and click edit HTML:

image

And if at any time you can’t find something, click on the code block, and hit ctrl + f, or command + f [whether it’s PC or Mac, respectively]

So we’re going to scroll down a bit here, and find the </style> tag

image

Above the style tag [highlighted in green] we’re going to add the string of code there:

/* SCARFCODE1 BEGINS */

scarves{

    position:fixed;

    left:50%;

    right:50%;

    margin-left:-540px;

    margin-top:0px;

}

scarf1{

    width:26px;

    height:150px;

    position:fixed;

    margin-top:-175px;

    transition: all 1s, transform 1s;

-moz-transition: all 1s, -moz-transform 1s;

-webkit-transition: all 1s, -webkit-transform 1s;

-o-transition: all 1s, -o-transform 1s;

opacity:0.4;

}

scarf1:hover{

    margin-top:0px;

    transition: all 1s, transform 1s;

-moz-transition: all 1s, -moz-transform 1s;

-webkit-transition: all 1s, -webkit-transform 1s;

-o-transition: all 1s, -o-transform 1s;

opacity:1.00;

}

/* SCARFCODE1 ENDS */


Next step, we keep scrolling a bit until you hit the <body> tag on the html. It might look a little bit different for some people [like mine]

image

As you can see, my body tag [in green] is really long, and it will probably differ for everyone, but just check that it’s below the </head> tag [see above the green rectangle] and it should be the body tag.

Now we add the second string of code:

<!-- SCARFCODE2 BEGINS -->

<scarves>

<scarf1><a href="http://yjfanvids.tumblr.com/scarf"><img src="http://media.tumblr.com/07e602ff9c95361af3cadcab46a4098b/tumblr_inline_mm8ah8az2u1qz4rgp.png"></a></scarf1>

</scarves>

<!-- SCARFCODE2 ENDS -->

Don’t forget to click save, and then check it out on your blog to see if it works!

Now comes the tricky part.

There are a loooot of different themes, and most of your themes might not get the scarf to align properly. Even I had to do some fiddling around to get it right.

But if you need to shift it from one side to the other, go back to the first string of code, and look for the: 

margin-left:-540px;

code, and just change the number. You might have to mess around with it, I honestly don’t know how to do it properly, but again, Baelor explains it best, so just check out their post here, and if you still need help, feel free to send me an ask, I’ll try to help as best as I can!

blog comments powered by Disqus

175 notes

  1. hana707chan reblogged this from yjfanvids
  2. ship-of-the-fanterns reblogged this from razaya
  3. senjisama reblogged this from yjfanvids
  4. sablecaster reblogged this from youngjusticeaskgreganswers
  5. spitfire1017 reblogged this from yjfanvids
  6. zenalth reblogged this from yjfanvids
  7. foxfireflamequeen reblogged this from yjfanvids
  8. alwaysbewhelmed reblogged this from yjfanvids
  9. avatarflores reblogged this from yjfanvids
  10. sarathebatman reblogged this from dickbabs
  11. baconwitchlizzy reblogged this from razaya
  12. freaksruletheearth reblogged this from blueberryfriday
  13. theravioliyoyo reblogged this from yjfanvids
  14. theravioliyoyo said: This is great! Thank you so much for making this!
  15. becky22yj reblogged this from yjfanvids
  16. hybridanafrost reblogged this from fenrispenris
  17. ladytodd reblogged this from helpsaveourheroes
To Tumblr, Love Pixel Union