HOME | DD

foundsoundfunny โ€” Vintage CSS - easy install. by-nc

Published: 2009-05-05 23:27:36 +0000 UTC; Views: 91016; Favourites: 1704; Downloads: 20636
Redirect to original
Description LIVE PREVIEW | View stock images used

Want to customize the photo? You can! The instructions are after the boring instructions

INSTRUCTIONS: To edit the pop-out sidebar, click the 'edit skin' link on the upper left of the journal edit page. Then, in the lower text box you'll find <SUP> tags. Anything you put between them will show up in the sidebar. You can edit the two links and the message, or erase it all and put stamps, plz-emotes... anything.

There isn't any HTML you need to remember, but if you like:
  • Use two bold tags to make a heading, or three bold tags for a bigger heading with an underline.
  • Wrap your thumbs in <div class="feature">...</div> to have them formatted differently.
  • <blockquote> gets a little dotted border on the left


Changing the photo is easily done -
  • grab the template and overlap the man with your own images.
    When you paste your images into the template, you don't have to be super accurate - just make sure to get it centred over the sample photos. The photo frame will crop the extra bits out for you.
  • Save the file and upload it to the net so you can link directly to it in the CSS.
    You could submit it to your scraps, but make sure to get the URL of the actual image, and not just what's in the address bar when you view your deviation.
  • In the CSS, find the line beginning with .photo_ (it's near the top) and replace the URL in the background property with a link to your replacement image.
  • ???
  • ...PROFITEROLE!





  • update, 27th May '09 deviantART now replaces any links to my userpage/gallery/etc with YOUR username, which is cool, but broke the link that pointed to the stock images. I've fixed that by using an URL shortener.

    update, 18th May '09 fixed the alignment in the attribution and stock footer text, fixed skin so that moods list works top and bottom, and added support for Internet Exploder - though the hover effects can't be fixed because IE sucks.

    update, 6th May '09 styled the attribution footer, added background colour to the photo, so if background (man) doesn't load (when people change it) it's not transparent.
    Related content
    Comments: 528

    foundsoundfunny In reply to ??? [2012-10-11 08:11:10 +0000 UTC]

    Putting backgrounds (or 'skins') on our journals is something deviantart only allows if you have a premium membership.

    My skin free for everyone to use; you can use it right now - but first you need a membership.

    ๐Ÿ‘: 0 โฉ: 1

    jo-jo999freak In reply to foundsoundfunny [2012-10-11 14:52:32 +0000 UTC]

    How do I get a membership

    ๐Ÿ‘: 0 โฉ: 1

    foundsoundfunny In reply to jo-jo999freak [2012-10-13 15:04:39 +0000 UTC]

    [link]

    ^ That link should take you to the exact page.

    ๐Ÿ‘: 0 โฉ: 0

    rockstarcrossing [2016-01-06 23:33:03 +0000 UTC]

    Yeah but now CORE is blocking us from using journal skins.

    ๐Ÿ‘: 0 โฉ: 1

    foundsoundfunny In reply to rockstarcrossing [2016-01-07 11:52:10 +0000 UTC]

    Wat.

    Journal CSS was always a premium/core subscriber feature.

    ๐Ÿ‘: 0 โฉ: 1

    rockstarcrossing In reply to foundsoundfunny [2016-01-07 16:02:01 +0000 UTC]

    No it wasn't. I've been on DeviantArt since 2011 and it hasn't always been that way.

    ๐Ÿ‘: 0 โฉ: 1

    foundsoundfunny In reply to rockstarcrossing [2016-01-07 21:48:49 +0000 UTC]

    You're mistaken. Outside of any promotions where they temporarily gave everyone the chance to use journal skins, it's always been a paid feature.

    ๐Ÿ‘: 0 โฉ: 0

    Mitch-el [2015-11-19 17:19:45 +0000 UTC]

    Lovely journal skin. Might end up using this. Thanks!

    ๐Ÿ‘: 0 โฉ: 0

    Vincent-A-Silence [2015-05-15 09:34:30 +0000 UTC]

    Very nice!

    ๐Ÿ‘: 0 โฉ: 0

    RovingIrishman [2014-04-07 14:28:02 +0000 UTC]

    This is great!

    ๐Ÿ‘: 0 โฉ: 0

    Teennala [2014-04-07 11:33:12 +0000 UTC]

    Thank you for your great generosity!!!i would love to use this!

    ๐Ÿ‘: 0 โฉ: 0

    Shishimiii [2014-02-03 21:57:10 +0000 UTC]

    I love this!

    Totally using it! Thank you for your amazing creation

    ๐Ÿ‘: 0 โฉ: 0

    SiZNArt [2014-01-28 06:13:59 +0000 UTC]

    OHMYGOT



    BEST SKIN EVAR

    ๐Ÿ‘: 0 โฉ: 1

    foundsoundfunny In reply to SiZNArt [2014-08-05 16:29:18 +0000 UTC]



    I don't know about that, but thanks

    ๐Ÿ‘: 0 โฉ: 0

    Fellefan [2013-11-19 13:55:25 +0000 UTC]

    I used it! :'D fav.me/d6utoys

    it's asum, thank you for making it! ;u; <3

    ๐Ÿ‘: 0 โฉ: 0

    lionkingforever12 [2013-09-04 16:23:36 +0000 UTC]

    can i use

    ๐Ÿ‘: 0 โฉ: 1

    foundsoundfunny In reply to lionkingforever12 [2013-09-04 20:01:55 +0000 UTC]

    You need a deviantart premium membership to use journal skins.

    ๐Ÿ‘: 0 โฉ: 1

    lionkingforever12 In reply to foundsoundfunny [2013-09-04 21:05:24 +0000 UTC]

    ย Oh

    ๐Ÿ‘: 0 โฉ: 1

    foundsoundfunny In reply to lionkingforever12 [2013-09-05 01:06:23 +0000 UTC]

    ๐Ÿ‘: 0 โฉ: 0

    IiminaI [2013-07-16 17:38:36 +0000 UTC]

    ;w; i cant find the sup tags..i feel so dumb, but where are they?

    ๐Ÿ‘: 0 โฉ: 1

    foundsoundfunny In reply to IiminaI [2013-07-17 04:17:27 +0000 UTC]

    Click the 'edit skin' link in the sidebar, and you'll find the sup tags in the footer.

    ๐Ÿ‘: 0 โฉ: 1

    IiminaI In reply to foundsoundfunny [2013-07-17 04:28:46 +0000 UTC]

    thank you!

    ๐Ÿ‘: 0 โฉ: 0

    BrokenEye3 [2013-06-02 07:34:45 +0000 UTC]

    Also also: The "other options" (eating, drinking, watching, reading, mood, etc.) get cut off at the bottom.

    ๐Ÿ‘: 0 โฉ: 1

    foundsoundfunny In reply to BrokenEye3 [2013-06-02 15:44:39 +0000 UTC]

    For the list, add padding-bottom:100px to .list{...} in the CSS. Adjust the padding to your liking.

    As for your other requests, understand that the skin wasn't constructed with that in mind. If you take the photo away there is no corner graphic behind it. The yellow tab is a similar problem, it's part of the right half of the header - [link] - if you want the tab gone you've got to remove the whole thing.

    With both images removed the top of the journal looks cropped because it's just the background tile, if you're cool with that, I'm not going to stop you

    So to remove the rest of the header (I see you've figured out how to remove the photo) you need to change some more CSS. The second line/chunk, starting with .journaltop{... is what you need to change - replace url( ... ) top right with transparent.

    ๐Ÿ‘: 0 โฉ: 1

    BrokenEye3 In reply to foundsoundfunny [2013-06-02 16:24:09 +0000 UTC]

    Maybe instead of removing the side tab entirely just prevent it from doing the mouseover thing

    ๐Ÿ‘: 0 โฉ: 0

    BrokenEye3 [2013-06-02 07:29:59 +0000 UTC]

    Also, how do I keep the yellow tab thing from popping up on the side?

    ๐Ÿ‘: 0 โฉ: 0

    BrokenEye3 [2013-06-02 07:25:28 +0000 UTC]

    Is there a way to remove the photo altogether?

    ๐Ÿ‘: 0 โฉ: 0

    sinamonsperling [2013-05-25 20:53:11 +0000 UTC]

    Thank you so much for this!

    ๐Ÿ‘: 0 โฉ: 0

    TraceofHatred [2013-04-23 08:06:49 +0000 UTC]

    Thank you so much! This is seriously exactly what I was looking for! I've made a journal to credit you made it and whatnot and hopefully more people will see this magnificent journal skin!

    ๐Ÿ‘: 0 โฉ: 1

    foundsoundfunny In reply to TraceofHatred [2013-05-03 03:42:11 +0000 UTC]

    Thanks, glad you like it. Looks like you're taking good care of it too - custom photo, you've updated the tab, even the journals themselves have some effort put into the formatting. RESPEKT!

    ๐Ÿ‘: 0 โฉ: 1

    TraceofHatred In reply to foundsoundfunny [2013-05-03 04:56:45 +0000 UTC]

    Hey! Thanks man! It wouldn't have been possible without such an awesome skin to begin with though. x'3
    I really love it! Haha, I have a huge fandom over anything that's retro looking like that, even considered keeping the old man because he looked pretty badass.

    But I thought a self-photo might be better for a personal journal. I'm gonna keep playing with it to see what i can do though. :3 Thanks again for making this! 5/5!

    ๐Ÿ‘: 0 โฉ: 0

    assureastheskyisblue [2013-04-15 11:04:28 +0000 UTC]

    this is so awesome! you are incredible :3

    ๐Ÿ‘: 0 โฉ: 0

    Dark-Nights-Phantom [2013-03-08 17:15:28 +0000 UTC]

    Like many people I'm having issues changing the picture, this is what I have in the css

    .photo_{background:url([link] ) top #222osition:absolute;top:0;left:0}}
    .photo_:hover{background-position:top}
    .photo_ i{display:block;width:205px;height:227px;background:url([link] )}

    ๐Ÿ‘: 0 โฉ: 1

    foundsoundfunny In reply to Dark-Nights-Phantom [2013-03-08 17:42:39 +0000 UTC]

    You need the direct URL for the image, not the page it's on.

    Right click the picture and choose 'copy image location' to get the URL, or if you don't have that choose 'view image' and copy the address from the address bar.

    ๐Ÿ‘: 0 โฉ: 1

    Dark-Nights-Phantom In reply to foundsoundfunny [2013-03-08 19:20:01 +0000 UTC]

    ah, Thanks!

    ๐Ÿ‘: 0 โฉ: 0

    YumiTsuzuki-Chan [2013-03-06 09:22:42 +0000 UTC]

    Pretty cool journal skin! I had been needing a new journal skin for a long time and this one's fascinating.

    ๐Ÿ‘: 0 โฉ: 0

    NixKat [2013-03-05 14:01:40 +0000 UTC]

    Very nice.

    ๐Ÿ‘: 0 โฉ: 0

    Doomertron [2013-02-18 19:38:22 +0000 UTC]

    Very cool!. Unique. A little ยซOld Arkham Asylumยป feel in it. Im twitching the image and i will use it for my own deviantPage...not without saying that you did it of course!

    ๐Ÿ‘: 0 โฉ: 0

    anriart [2013-01-26 03:12:16 +0000 UTC]

    cool and charming...
    thank you..

    ๐Ÿ‘: 0 โฉ: 0

    Peipp [2012-12-29 15:40:36 +0000 UTC]

    wow, awesome!

    ๐Ÿ‘: 0 โฉ: 0

    louvreangel [2012-12-22 21:41:30 +0000 UTC]

    I am using this RIGHT AWAY! This is totally awesome!! One of the greatest journal skins on deviantart. Great job <3
    Thanks for the instructions and the awesome explaining too <3 (:

    ๐Ÿ‘: 0 โฉ: 0

    KarinaMacGill [2012-12-16 13:17:32 +0000 UTC]

    I'm using it, thatnk you very much, elegant but not to much, fun, and not every day design. I'm usually a bit slow with stuff like ccs and whaaat, so I have no experience in that, but your description helped me trought! I managed to change the picture and the content of the tab!

    This is the best journal out there!

    ๐Ÿ‘: 0 โฉ: 1

    KarinaMacGill In reply to KarinaMacGill [2012-12-16 13:18:25 +0000 UTC]

    Should I write a critique? I'd write mostly this, but I'd gater some more thoughts and would elaborate what I exactly think about it.

    ๐Ÿ‘: 0 โฉ: 0

    moka-asaki [2012-12-07 03:37:26 +0000 UTC]

    how do you fucking get it to WWWWWWWWOOOOOOOOOOOOOOOOOOORRRRRRRRRRRRRRRRRKKKKKKKKKKKKKKKKKKKKKKKKKK!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

    ๐Ÿ‘: 0 โฉ: 1

    foundsoundfunny In reply to moka-asaki [2012-12-07 11:21:13 +0000 UTC]

    The workaround is explained in the description, right at the top. If you're still having problems you'll have to be more specific.

    ๐Ÿ‘: 0 โฉ: 1

    moka-asaki In reply to foundsoundfunny [2012-12-07 13:29:53 +0000 UTC]

    Ya I read that. I went to the link and I don't know what a CSS is......

    ๐Ÿ‘: 0 โฉ: 1

    foundsoundfunny In reply to moka-asaki [2012-12-10 09:06:44 +0000 UTC]

    CSS is short for Cascading Style Sheet - it's the language that describes how websites look, their design and colours etc. I kinda forget that some people have never heard of it

    Anyhow, go here [link] for *just* the CSS, so you can just select the whole page and copy. Then follow the instructions from there.

    ๐Ÿ‘: 0 โฉ: 1

    moka-asaki In reply to foundsoundfunny [2012-12-10 12:57:15 +0000 UTC]

    thank you T^T

    ๐Ÿ‘: 0 โฉ: 0

    OtterAndTerrier [2012-11-24 23:19:59 +0000 UTC]

    Can you please describe how to use it for group journals, since they are different? I tried to figure it out, but the picture (which I changed and uploaded to my Stash) doesn't show, the photograph frame doesn't show either and the pop-out sidebar doesn't work.
    Also, how to change the colour when you hover over links?
    I'd really love to use it in my group. Thank you!!

    ๐Ÿ‘: 0 โฉ: 1

    foundsoundfunny In reply to OtterAndTerrier [2012-11-26 07:29:20 +0000 UTC]

    It sounds like you haven't included the HTML, just the CSS. Grab the HTML from [link] and put it in the footer box, remember to edit the sidebar stuff, and then you're good to go!

    For changing the link colour on hover, look for a:hover{color:#f00} in the CSS and change it to what you like.

    ๐Ÿ‘: 0 โฉ: 1


    | Next =>