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,282 (3 today)
Favourites
64 (who?)
Comments
17
Downloads
67
×
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
:iconkomodovis:
komodovis Featured By Owner Nov 1, 2013
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!!!
Reply
:iconsuncut:
Suncut Featured By Owner Nov 1, 2013  Professional Digital Artist
Glad you like it :) Let me know if anything is unclear or you run into problems using it!

Reply
:iconkomodovis:
komodovis Featured By Owner Nov 1, 2013
definitely!
Reply
:iconwioel:
Wioel Featured By Owner Oct 29, 2013  Student Digital Artist
I was wondering: does CSS work without a Premium subscription ?
Reply
:iconsuncut:
Suncut Featured By Owner Oct 29, 2013  Professional Digital Artist
No, unfortunately I don't think it does :(.
Reply
:iconwioel:
Wioel Featured By Owner Oct 29, 2013  Student Digital Artist
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...
Reply
:iconsuncut:
Suncut Featured By Owner Oct 29, 2013  Professional Digital Artist
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!
Reply
Add a Comment: