Shop Mobile More Submit  Join Login
×

Featured in Collections

:dA_customization by el-L-eN

custom by Pencil-Stencil


More from DeviantArt



Details

Submitted on
October 29, 2013
File Size
3.7 MB
Link
Thumb
Embed

Stats

Views
1,205
Favourites
59 (who?)
Comments
17
Downloads
63
×
Social Media Buttons (Journal CSS) Tutorial by Suncut Social Media Buttons (Journal CSS) Tutorial by Suncut

It appears you don't have PDF support in this web browser. Download PDF

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/
Add a Comment:
 
:iconpencil-stencil:
Pencil-Stencil Featured By Owner Nov 6, 2013  Hobbyist Traditional Artist
This is brilliant :heart: thank you SO much!!

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 :D also, for anyone who wants to add a different cursor when they hover the button they should do this:

.twitter_button:hover{
background-image:url(*TWITTER HOVER
IMAGE ADDRESS*);
cursor: pointer;
}



once again, this is brilliant, thanks a bunch :iconyesyoucanplz:
Reply
:iconsuncut:
Suncut Featured By Owner Nov 6, 2013  Professional Digital Artist
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!
Reply
:iconpencil-stencil:
Pencil-Stencil Featured By Owner Nov 6, 2013  Hobbyist Traditional Artist
glad that helped :D
Reply
:iconkomodovis:
komodovis Featured By Owner Nov 5, 2013
When i execute your instructions, the icon section in the journal always come out blank....any ideas why?
Reply
:iconsuncut:
Suncut Featured By Owner Nov 5, 2013  Professional Digital Artist
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.
Reply
:iconkomodovis:
komodovis Featured By Owner Nov 6, 2013
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
Reply
:iconsuncut:
Suncut Featured By Owner Nov 6, 2013  Professional Digital Artist
That's great, congratulations! Looks nice too :D. Maybe you could make the button backgrounds the same color as your journal for a more blended in effect? Nice job either way, and I'm relieved there weren't too many problems with the tutorial!
Reply
:iconkomodovis:
komodovis Featured By Owner Nov 6, 2013
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

Reply
:iconsuncut:
Suncut Featured By Owner Nov 6, 2013  Professional Digital Artist
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! :D Well except you'll need to re-enter the new graphics to the code, but otherwise!
Reply
Add a Comment: