HOME | DD

foundsoundfunny — Vintage CSS - easy install. by-nc

Published: 2009-05-05 23:27:36 +0000 UTC; Views: 91025; 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

    Elphaba16 In reply to ??? [2009-05-22 03:29:38 +0000 UTC]

    this is crazy awesome! i especially like the photo part, but i dont quite understand how to change it? can you help, please?

    (btw...fantastic job!)

    👍: 0 ⏩: 1

    foundsoundfunny In reply to Elphaba16 [2009-05-23 00:23:15 +0000 UTC]

    It wont make a difference if you don't have a subscription, you need one to use CSS.

    👍: 0 ⏩: 1

    Elphaba16 In reply to foundsoundfunny [2009-05-24 03:20:00 +0000 UTC]

    ah, makes sense. thanks again!

    👍: 0 ⏩: 0

    chris10belgium [2009-05-18 11:17:22 +0000 UTC]

    I don't have the courage to try. I'm not good at these things.. Is it free and can it be used for unlimited time ?

    👍: 0 ⏩: 1

    foundsoundfunny In reply to chris10belgium [2009-05-18 11:25:21 +0000 UTC]

    Yes, free to use, and for as long as you like

    👍: 0 ⏩: 1

    chris10belgium In reply to foundsoundfunny [2009-05-18 20:06:35 +0000 UTC]

    i installed it, but the photo in the left corner on top stays black, because i pasted a link and it doesn't work. i have to get a picture from photobucket or some site like that ?

    👍: 0 ⏩: 1

    foundsoundfunny In reply to chris10belgium [2009-05-18 21:29:14 +0000 UTC]

    What image are you trying to use? - can you show me?

    👍: 0 ⏩: 1

    chris10belgium In reply to foundsoundfunny [2009-05-19 09:01:46 +0000 UTC]

    Just my ID : [link]
    Thanks!

    👍: 0 ⏩: 1

    foundsoundfunny In reply to chris10belgium [2009-05-19 23:03:32 +0000 UTC]

    I guess it was black because you weren't using the true address of the image, if you were using that link you gave me, that's the link to the page - that wont work

    Anyhow, take the CSS below, and replace the CSS in your journal:

    .photo_{background:url([link] ) top #222;position:absolute;top:0;left:0}

    and REMOVE the line .photo_:hover{background-position:top}

    That should do the trick

    👍: 0 ⏩: 1

    chris10belgium In reply to foundsoundfunny [2009-05-22 10:06:32 +0000 UTC]

    Aha ! Thanks very much !
    Then i have one more question:
    "Put your content inside the SUP tags. " What is that ?
    Sorry ...

    👍: 0 ⏩: 1

    foundsoundfunny In reply to chris10belgium [2009-05-23 00:15:44 +0000 UTC]

    That is a note, on how to use the popup sidebar. The SUP tags are <sup> and </sup>, you just need to put your stuff between them - you can replace that message

    👍: 0 ⏩: 1

    chris10belgium In reply to foundsoundfunny [2009-05-23 22:10:07 +0000 UTC]

    aha okay ! thanks a lot for helping me out and for the use of you nice css !

    👍: 0 ⏩: 0

    ElClubdelaPalabra In reply to ??? [2009-05-18 10:54:22 +0000 UTC]

    I love this skin, but when I put the small image is moved, as if more than one.

    I did this:


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

    I do something else to be quiet?

    Thanks! ^^

    👍: 0 ⏩: 1

    foundsoundfunny In reply to ElClubdelaPalabra [2009-05-18 11:12:17 +0000 UTC]

    Replace the code above, with the following:

    .photo_{background:url(http://i90.photobucket.com/albums/k258/Kamy_Mery/Club%20de%20la%20Palabra/libros.gif) 34px 60px #222;position:absolute;top:0;left:0}
    .photo_ i{display:block;width:205px;height:227px;background:url(http://fc04.deviantart.com/fs42/o/2009/125/b/b/121579817_65753_photo.png)}

    It will position the image correctly, and also remove the :hover effect that makes the image change.

    👍: 0 ⏩: 1

    ElClubdelaPalabra In reply to foundsoundfunny [2009-05-18 11:24:55 +0000 UTC]

    Oh!! Thanks!! Perfect!! ^^

    And now I have another problem.

    In the middle of the journal, I have some lines, with the code



  • These lines appear larger with this skin, what is the problem? The code is correctly.

    Sorry for all
  • 👍: 0 ⏩: 1

    foundsoundfunny In reply to ElClubdelaPalabra [2009-05-18 11:37:43 +0000 UTC]

    I'm not sure. Could you give me a link to the journal in action so I can check?

    👍: 0 ⏩: 2

    ElClubdelaPalabra In reply to foundsoundfunny [2009-05-18 11:46:29 +0000 UTC]

    I gave you a fav with my other account =kamy-ska in gratitude

    👍: 0 ⏩: 0

    ElClubdelaPalabra In reply to foundsoundfunny [2009-05-18 11:40:48 +0000 UTC]

    already got it!! ^^

    Thanks for all

    👍: 0 ⏩: 0

    Kjherstin In reply to ??? [2009-05-18 09:28:56 +0000 UTC]

    How are you able to update the text file? It won't let me. I have to delete a new deviation and create a new one

    👍: 0 ⏩: 1

    foundsoundfunny In reply to Kjherstin [2009-05-18 09:38:38 +0000 UTC]

    Is it giving you an error about the file names? If it is, you need to use your original file names, not the ones dA replaces them with.

    When it was in beta, it was the other way around, and they fixed it by reversing it. Now this is causing problems for me too, because I edit the CSS on deviantart using their URLs, so when I go to edit the deviation I have to go through it and change the URLs back.

    And today, after I updated it for IE support, I broke something in Firefox, and it took like 5 edits before I got it right. That was a lot of typing to fix the URLs!

    👍: 0 ⏩: 1

    Kjherstin In reply to foundsoundfunny [2009-05-18 10:49:06 +0000 UTC]

    Yes it's that error. But I don't know how to do that. How do I change the ones DA replaces them with?

    👍: 0 ⏩: 1

    foundsoundfunny In reply to Kjherstin [2009-05-18 11:02:41 +0000 UTC]

    When you first submitted the skin, the image URLs pointed to your site or something, right? And then after you uploaded the images to dA, it changes the paths. You need to swap the new dA paths with your old ones, by hand.

    👍: 0 ⏩: 1

    Kjherstin In reply to foundsoundfunny [2009-05-19 20:55:44 +0000 UTC]

    Oh I was able to change add a text file for the code without any problems now. wow. Maybe something changed on DA. Something that bugs me on the journals still is that the comments and previous comments jumps down below the skin and the moods icon once you choose it you can't remove it. There should be an easy option for none. Or is it just me?...so strange. I do love how the credits show up automatically now with the easy install. This whole new feature on DA is cool

    👍: 0 ⏩: 0

    OLOluvzZutara In reply to ??? [2009-05-18 02:07:59 +0000 UTC]

    ...dw about the mood and everything... that was my fault lol I thought I selected it to be 'at the top' but I didn't...

    👍: 0 ⏩: 1

    foundsoundfunny In reply to OLOluvzZutara [2009-05-18 03:16:44 +0000 UTC]

    👍: 0 ⏩: 0

    OLOluvzZutara In reply to ??? [2009-05-18 01:43:38 +0000 UTC]

    Also, how do you get the 'mood, eating, drinking' thing to be up the top! lol

    👍: 0 ⏩: 0

    OLOluvzZutara In reply to ??? [2009-05-18 01:03:30 +0000 UTC]

    What size does the photo have to be for it to work?

    👍: 0 ⏩: 1

    foundsoundfunny In reply to OLOluvzZutara [2009-05-18 03:16:26 +0000 UTC]

    You'll need to follow the template - [link] - that's the image I used by default in the skin. Just overlap the current photos and you'll be right.

    👍: 0 ⏩: 1

    OLOluvzZutara In reply to foundsoundfunny [2009-05-18 03:32:37 +0000 UTC]

    Thanks I think I got it XDD

    👍: 0 ⏩: 0

    Vawn-O-the-Dawn In reply to ??? [2009-05-17 19:03:30 +0000 UTC]

    what size does the picture need to be in order to fit?

    👍: 0 ⏩: 1

    foundsoundfunny In reply to Vawn-O-the-Dawn [2009-05-18 02:59:56 +0000 UTC]

    Follow the template - [link] - and you'll be fine.

    👍: 0 ⏩: 1

    Vawn-O-the-Dawn In reply to foundsoundfunny [2009-05-18 03:24:41 +0000 UTC]

    thank you.

    👍: 0 ⏩: 0

    Teen-Robot In reply to ??? [2009-05-17 16:52:17 +0000 UTC]

    i used it in my journal,but somehow the picture won't show up
    can you help?

    👍: 0 ⏩: 1

    foundsoundfunny In reply to Teen-Robot [2009-05-18 03:13:56 +0000 UTC]

    You done broke eet!



    In the CSS, you only need to change the URL on .photo_{...} - not .photo_ i{...}, so change that back. The second problem is you took out the brackets. It should look like background:url(http://...);

    Fix those two things, and you'll be right

    👍: 0 ⏩: 2

    Teen-Robot In reply to foundsoundfunny [2009-05-18 05:18:28 +0000 UTC]

    I replaced the link from ; .photo_{background:url since that was the link but somehow it just won't workD=
    i know i sound dumb
    but it just won't work , i didn't delete any brackets,so that's not the problem

    👍: 0 ⏩: 1

    foundsoundfunny In reply to Teen-Robot [2009-05-18 06:04:07 +0000 UTC]

    Are you using IE?

    👍: 0 ⏩: 2

    Teen-Robot In reply to foundsoundfunny [2009-05-18 17:43:09 +0000 UTC]

    Oh wait,i am pretty much dumbshit
    yes i am using Internet explorer

    👍: 0 ⏩: 0

    Teen-Robot In reply to foundsoundfunny [2009-05-18 17:40:52 +0000 UTC]

    IE?

    👍: 0 ⏩: 1

    foundsoundfunny In reply to Teen-Robot [2009-05-18 17:41:59 +0000 UTC]

    Internet Explorer.

    What browser are you using?

    👍: 0 ⏩: 1

    Teen-Robot In reply to foundsoundfunny [2009-05-18 17:43:40 +0000 UTC]

    Internet explorersorry for being so dumb

    👍: 0 ⏩: 1

    foundsoundfunny In reply to Teen-Robot [2009-05-18 17:46:13 +0000 UTC]

    Yeah, originally I wrote some code to hide the photo etc in IE, because it didn't work, but this morning I fixed it. Install the skin again and it will work now

    👍: 0 ⏩: 1

    Teen-Robot In reply to foundsoundfunny [2009-05-18 18:48:25 +0000 UTC]

    Okay

    👍: 0 ⏩: 0

    Teen-Robot In reply to foundsoundfunny [2009-05-18 05:07:59 +0000 UTC]

    Okay i'll try

    👍: 0 ⏩: 0

    Robinu-wolf In reply to ??? [2009-05-17 03:28:16 +0000 UTC]

    Hm... what degree is the photo tilted at?

    👍: 0 ⏩: 1

    foundsoundfunny In reply to Robinu-wolf [2009-05-17 04:00:25 +0000 UTC]

    Interesting question!

    I never thought to remember, but after some investigation my best estimation is -3.2 degrees. You should make your photos a little bigger than the hole though, so that even if you're off by a pixel people wont be able to tell.

    👍: 0 ⏩: 1

    Robinu-wolf In reply to foundsoundfunny [2009-05-17 04:14:32 +0000 UTC]

    Thanks for the tip! I look forward to posting on my journal with this CSS.~

    👍: 0 ⏩: 0

    jadefyres-freedom In reply to ??? [2009-05-16 22:40:22 +0000 UTC]

    I like it but the photo won't show up for me.

    👍: 0 ⏩: 1

    foundsoundfunny In reply to jadefyres-freedom [2009-05-17 01:32:12 +0000 UTC]

    It looks like you've done something to the HTML in the footer that's broken in. Can you note me with the content of your Footer area? I'll see what's going wrong

    👍: 0 ⏩: 1

    jadefyres-freedom In reply to foundsoundfunny [2009-05-17 01:56:58 +0000 UTC]

    Ooh, I think I may have accidentally deleted something out of there. And I can't remember what. Sure thing, the note will be over in just a moment. Thanks!

    👍: 0 ⏩: 0

    pnpmario In reply to ??? [2009-05-16 19:46:56 +0000 UTC]

    This is awesome! I'm planning a survival horror roleplaying game, and this fits the mood perfectly.

    👍: 0 ⏩: 1


    <= Prev | | Next =>