HOME | DD
Suncut — Social Media Buttons (Journal CSS) Tutorial
Published: 2013-10-29 17:14:22 +0000 UTC; Views: 3449; Favourites: 77; Downloads: 113
Redirect to original
Description
I had such a hard time making the buttons for my journal I thought I'd pass the knowledge along so no one else has to suffer through that!
Just download the pdf, and copy the relevant code to the right places, following the notes.
Warning: Images not provided. If you want to make your own most sites provide their logo in a large format that's easy to use as a base for custom icons. There are many free icon sets floating around the web too, easy to find.
Confused? Lost? Let me know if my instructions aren't clear or if you have any questions!
Visit my blog to see what I'm up to! www.jaanaheiska.com/blog/
Related content
Comments: 17
This is brilliant 
however i had a little problem - i kept on getting an error called Forbidden Property: http
since i'm a total n00b in CSS and only manage by copying codes and knowing the very basics, i just couldn't figure out what the problem was. and i somehow, after a while of torture, realized that the hover button code looks like this:
.twitter_button:hover {*TWITTER HOVER
IMAGE ADDRESS*);
}
and that i needed to change it to this:
.twitter_button:hover{
background-image:url(*TWITTER HOVER
IMAGE ADDRESS*);
the journal skin saved successfully and the button displayed 
.twitter_button:hover{
background-image:url(*TWITTER HOVER
IMAGE ADDRESS*);
cursor: pointer;
}
once again, this is brilliant, thanks a bunch
👍: 0 ⏩: 1
Ah, you're right! How did I manage to miscopy code, that's shouldn't even be possible! I corrected the tutorial file to have the right code, thanks so much for pointing that out!
👍: 0 ⏩: 1
When i execute your instructions, the icon section in the journal always come out blank....any ideas why?
👍: 0 ⏩: 1
Can you get one mouseover button to appear when you do the first part? Does it disappear when you add more buttons? Try to describe in what step the the problem happens, it's easier to find the cause.
👍: 0 ⏩: 1
I got it fixed... i did not properly copied the URL of the image .
check out my profile page... its not as great as yours but i think I'm getting there lol
👍: 0 ⏩: 1
That's great, congratulations! Looks nice too
👍: 0 ⏩: 1
thanks!! in regard to the buttons, i have no idear how to change the colors...lol
i m amaze i was even able to follow your instructions . anyways , thanks
👍: 0 ⏩: 1
No, I meant in in the graphics! You have a white background in them, right? If you don't you can just add a background color to them, and change that, super easy, no coding required!
👍: 0 ⏩: 0
Sucut, I am forever grateful that you posted this very intuitive tutorial.... you have no idea how long I search the web for a way to customize my journal
WITH social media icons embed in it .....
thank you!!!
👍: 0 ⏩: 1
Glad you like it 
👍: 0 ⏩: 1
I was wondering: does CSS work without a Premium subscription ?
👍: 0 ⏩: 1
No, unfortunately I don't think it does 
👍: 0 ⏩: 1
Ah crap :c
Though if it takes HTML it should be able to handle CSS too... Except I don't know if it handles anything other than the standard Sta.sh formatting...
👍: 0 ⏩: 1
Honestly I think the limitations are really confusing, I could never figure out what exactly I could do with the normal subscription and just gave up. I admit I mostly upgraded to premium to customize my journal!
👍: 0 ⏩: 0