HOME | DD | Gallery | Favourites | RSS

| deviantCSS

deviantCSS [6268119] [2007-12-24 18:45:56 +0000 UTC] "deviantART XHTML & CSS Ref"

# Statistics

Watchers: 3081; Pageviews: 292739

# Group admins

# About me

deviantCSS is a full CSS and HTML resource/guide regarding available places on deviantART that you can use codes into it (e.g. Devious Journal, Custom Module, Artist's Comment, News Article, dAmn Chat, etc)


# Comments

Comments: 1587

neurotype-on-discord In reply to ??? [2012-12-10 21:20:13 +0000 UTC]

I'm out of ideas, sorry D:

👍: 0 ⏩: 1

Koto-wari In reply to neurotype-on-discord [2012-12-10 22:13:12 +0000 UTC]

Thanks for everything you've done, though~
Do you know anywhere else I might ask for help?

👍: 0 ⏩: 1

neurotype-on-discord In reply to Koto-wari [2012-12-10 22:31:33 +0000 UTC]

Goooogle? Or see if someone else here responds, or try seeing if you can fix the journal by doing something ridiculous like making the overall width 1000px or whatever. Basically you need to troubleshoot and see if you can find what the problem is

👍: 0 ⏩: 1

Koto-wari In reply to neurotype-on-discord [2012-12-19 11:14:02 +0000 UTC]

That's probably what I'll be doing. Trying to see if Google has something to offer. In the mean time, I'll put a small note on my profile so random passers-by might see it.

Thanks again, though~

👍: 0 ⏩: 1

neurotype-on-discord In reply to Koto-wari [2012-12-19 21:01:36 +0000 UTC]

Good luck!

👍: 0 ⏩: 2

Koto-wari In reply to neurotype-on-discord [2012-12-21 15:36:03 +0000 UTC]

In case you were wondering, I found a way to do fix the positioning. By using position: abolute; top: XXpx; left: XXpx; I basically locked all of the elements in place. Only the footer acts a little weird, but the padding fixes that as well.

Found it here: [link] in case you'd like to know.

👍: 0 ⏩: 1

neurotype-on-discord In reply to Koto-wari [2012-12-24 05:07:11 +0000 UTC]

👍: 0 ⏩: 0

Koto-wari In reply to neurotype-on-discord [2012-12-19 21:46:22 +0000 UTC]

Thank you. : >

👍: 0 ⏩: 0

ChaiLife In reply to ??? [2012-11-18 01:45:17 +0000 UTC]

Does anyone think they can help me create my own Journal Skin? I would really appreciate the help ^^

Ive read a bunch of Tutorials but I still don't really understand it.

👍: 0 ⏩: 1

gillianivyart In reply to ChaiLife [2012-11-21 02:34:23 +0000 UTC]

I'm sorry, I do not have time to help all the way, but I can answer a few questions. Ask away.

👍: 0 ⏩: 1

ChaiLife In reply to gillianivyart [2012-11-21 23:35:55 +0000 UTC]

Would something like this be possible to make? [link]

👍: 0 ⏩: 1

gillianivyart In reply to ChaiLife [2012-11-22 01:10:01 +0000 UTC]

The thing that deviantART has is a javascript, I think. Not available to us to use on our journals. It might be possible to make a fake one, but I would not know how.

The rest of the journal would work just fine. The red and blue texts in the main area would stand out better as brighter colors. The black text might become hard to read, the transparent white does help to alleviate difficulty reading it, however the black lines in the bg would still be distracting from the text a bit. Especially since the text would be much smaller on the journal if you use the standards 11-14px font sizes.

👍: 0 ⏩: 1

ChaiLife In reply to gillianivyart [2012-11-22 01:13:53 +0000 UTC]

Yeah, it's possible by using the 'add to favourites' url, and then showing a fav count. I've seen it used in someone else's journal, forget who.

Ok, I may adjust the font while doing the coding. Glad to see this will work out.


Now just how to code it.... lol xD

👍: 0 ⏩: 1

gillianivyart In reply to ChaiLife [2012-11-22 17:42:19 +0000 UTC]

`ginkgografix has a few tutorials on navigation menus. Since you have two. It would be best to place one in the header and the other in the footer. You would likely need to use absolute positioning for the top one to put it above the title.

If you come across the snippet, please do share the info ;D Happy Thanksgiving!

👍: 0 ⏩: 2

ChaiLife In reply to gillianivyart [2012-11-23 00:49:04 +0000 UTC]

Found it!

[link]

👍: 0 ⏩: 1

gillianivyart In reply to ChaiLife [2012-11-23 01:38:37 +0000 UTC]

Looks like it is out of date. The site is there but wouldn't load anything for me when I clicked generate.

👍: 0 ⏩: 1

ChaiLife In reply to gillianivyart [2012-11-23 13:13:19 +0000 UTC]

Ah... Okay, I guess I can leave that feature out.

👍: 0 ⏩: 1

gillianivyart In reply to ChaiLife [2012-11-23 21:53:38 +0000 UTC]

Maybe someone will comeup with a new version. But guess it is irrelevant now with being able to fave journals.

👍: 0 ⏩: 1

ChaiLife In reply to gillianivyart [2012-11-23 23:40:51 +0000 UTC]

Yeah, I asked if its possible to make it to show the journal faving. hasent replied yet

👍: 0 ⏩: 0

ChaiLife In reply to gillianivyart [2012-11-23 00:22:03 +0000 UTC]

I think it was called custom favebox, but I can't really find it again.

👍: 0 ⏩: 0

MasterAki In reply to ??? [2012-11-17 06:27:04 +0000 UTC]

ahahaha..................I've been searching everywhere on google, and I can't seem to find the right ones to have thumbnails on my JOURNAL skin.............

Can ANYBODY help please? I don't undestand coding that much, and I've done as much as I can, and I am kinda satisfied with what I have, but it will be better if I can get some thumnails onto my journal skin too...........can anybody help PLEASE????

👍: 0 ⏩: 1

Drake1 In reply to MasterAki [2012-11-17 15:04:04 +0000 UTC]

Hello!
What you want is to use thumbnails on your journal entries?
If they are from deviantart, you can just go to the deviation page, and search on the right column, the white box that says "Thumbnail". You copy and paste that into your entry and that's it!

But if you want to insert an image into your entry and make it small so it looks like a thumbnail, you have to put this code:


And there you would have your image. If you wanted, for example, a thumbnail of this image, with a width of 250px, you'd put:


You could also make them clickable, so it takes you to another page, or to the bigger version of the thumbnail. The code is this one:


If you look closely, you'll see that we took the first code, and wrapped it inside a link html tag, .... Let's say we want the same thumbnail from above, and when you click it, you can see its bigger version. We should put the direct link to the image where it says LINK HERE and where it says DIRECT LINK TO THE IMAGE, because with the first one, we're telling the browser that we want to go to the original image, and with the second one, we're putting the original image there, but we're also modifying its width.
Be careful not to use lots of images this way, because the thumbnail is actually the full image, and its weight does not decrease, even if we make it 1px width.
So the ending code should be:
Click to see the bigger version!

The "alt" part is optional to fill, there you can put text that appears when you hover the image, or when the original image cannot be shown.

So that's it, I hope I could help you! I tried to make it super detailed

👍: 0 ⏩: 1

MasterAki In reply to Drake1 [2012-11-18 05:01:16 +0000 UTC]

this REALLY REALLY helps alot!!! thanks for replying!!!! I now understand how to do it now!!!! ahaha YAY!!! sooo thanks alot AGAIN!!! ahaha XDDDD

👍: 0 ⏩: 1

Drake1 In reply to MasterAki [2012-11-18 05:15:31 +0000 UTC]

You're very welcome! I'm glad to help

👍: 0 ⏩: 1

MasterAki In reply to Drake1 [2012-11-25 08:04:04 +0000 UTC]

okay, so I now I need help with like putting thumbnails next to eachother~ :C

👍: 0 ⏩: 1

Drake1 In reply to MasterAki [2012-11-25 16:12:32 +0000 UTC]

You just have to put the codes next to each other and that's it! But if the thumbnails are too big, they obviously won't fit into that space and they will appear below

👍: 0 ⏩: 1

MasterAki In reply to Drake1 [2012-11-26 04:38:11 +0000 UTC]

ohhhh I see~ I guess that's logical~ lolllll I will try that~ cuz I want to make like a custom box filled with people on DA that I admire~ and I've tried one of the codes you gave me with the clickable thumbnail~ it worked~ but the second always goes to the bottom even though the avatars are reallly small. What I did was use the same code a few rows down. I'll try to put that code closer together to see what happens then~ D

👍: 0 ⏩: 0

AkaSunshine In reply to ??? [2012-11-16 01:28:10 +0000 UTC]

I'm looking for an installable Christmas or winter gallery CSS.. The only ones I have found are for the older small thumbs.. I don't know how to change the thumbs or adjust the old gallery codes.. Can anyone help me?

👍: 0 ⏩: 2

gillianivyart In reply to AkaSunshine [2012-11-16 04:51:37 +0000 UTC]

Hiya Sunshine! I can help fix thumbs. Is it the bg thing where it loooks whitish green behind the image?

.tt-bb{
background:none!important;
}
.wrap, a.lit{
background-image:none!important;
background:transparent;
border:none;
}


You may have a look through my Gallery Template to see codes and notes I have on different sections. When I add something new, I put it in bold: [link]

👍: 0 ⏩: 1

AkaSunshine In reply to gillianivyart [2012-11-17 19:35:28 +0000 UTC]

Hey Gilly!!
This is the issue I'm having.. It's an installable CSS from a couple of years ago.. So doesn't have any of the new stuff in it.. Here is the link to the gallery.. [link]
I have put in two random devs for now.. Just so you can see what is happening.. I would love ANY Christmas or winter holiday gallery skin that is usable.. This was the only Christmas Gallery CSS I could find.. Is there a way to shrink the new thumbs? IDK.. lol
Thank you for any help you can offer.. I didn't want to bother you with it.. haha.. I am always asking you questions..
*hugs*

👍: 0 ⏩: 1

gillianivyart In reply to AkaSunshine [2012-11-18 00:58:15 +0000 UTC]

So you want to make them back to regular sized thumbs? Perhaps set the height to something like 150px and the width to auto (or vice versa). It won't look good for emote sized things and stamps, so would only work if not featuring those in a gallery. Auto does awesome things.

👍: 0 ⏩: 1

AkaSunshine In reply to gillianivyart [2012-11-18 19:59:52 +0000 UTC]

You see the small thumb hovers in red? Can I make them the new size somehow? What would you suggest?

👍: 0 ⏩: 1

gillianivyart In reply to AkaSunshine [2012-11-18 21:25:38 +0000 UTC]

It looks like the .shadow a{} is set to display as table-cell. Which I am really bad at tables... I only ever use block/inline/inline-block, and have rarely used the table elements. I don't know if that interferes with anything at all. I did notice that the bg image appears tiling. Also, I don't see any size specifications on .shadow img{} so, try setting the display to inline-block, the bg to no-repeat and put a size limit on the .shadow img... And format the lit thumbs a.lit{}, q{}, q strong{}, .wrap{}, img.lit{}, and .lit-bkmrk{}.

Good luck!

👍: 0 ⏩: 1

AkaSunshine In reply to gillianivyart [2012-11-25 19:22:14 +0000 UTC]

I am sorry I didn't reply sooner.. I haven't had a chance to try to mess with the .shadow and see if I can get rid of the table-cell.. I must say.. I have no clue how to format the other things you mentioned.. I only know how to change sizes, colors, fonts etc.. I will note you as soon as I can get a chance to try to fix the one up.. I have been hoping someone else would create a Christmas gallery skin.. I am surprised there aren't more..
On another note.. I have been having an issue with firefox.. I cannot edit anything on any page or group.. none of the boxes, layouts, or widgets.. I also cannot click on the "add to a group" thing on the right of a dev page.. I get a blank pop-up instead of the groups box.. same thing when I try to edit a page layout.. eveything is whited out.. have tried everything.. nothting works.. just curious if you have ever heard anything like that.. since you use firefox too..
Thank you for always trying to help..

👍: 0 ⏩: 1

gillianivyart In reply to AkaSunshine [2012-11-26 00:22:02 +0000 UTC]

Is that consistent when you try other browsers or groups? This may be something you need to report to #devBUG . Try turning off Beta testing then try. If that fixes it, then it is a Beta problem and would need to be reported. Try any other browser you can, take screenshots and be very specific and detailed about issues. Try turning off and on each add-on you have to see if there is a conflict there.

Well, the CSS Calendar is coming up soon. Maybe some will release matching galleries. I think right now, everyone is shying away from gallery coding until someone comes up with an updated walkthrough that deals with all the new problems.

👍: 0 ⏩: 1

AkaSunshine In reply to gillianivyart [2012-12-03 02:34:43 +0000 UTC]

Hey Gilly..
It happens with Firefox.. Not IE.. I did report it to the devBUG.. along with a bunch of screenshots.. they then said they needed more screenshots.. idk what more i could have sent.. I sent every instance that I have an issue now.. and I did turn off Beta.. I also turned off all the add-ons.. I even tried in Safe Mode.. nothing helps.. I think this all started around the time they came out with the "More like this" stuff..

Oh.. I ended up using the gallery you made for us and just changed out the bg for the Christmas folder.. That other one was doing my head in.. I really wish they would stop changing everything.. I liked the galleries before..

👍: 0 ⏩: 1

gillianivyart In reply to AkaSunshine [2012-12-03 18:24:25 +0000 UTC]

Well, I'm glad something worked out for you. I like the new gallery thumbs, but I do not like all the mess it's made... good luck with the bug problem.

👍: 0 ⏩: 0

AkaSunshine In reply to AkaSunshine [2012-11-16 01:28:55 +0000 UTC]

Oh, btw.. I need this for a Group gallery.. Not a personal one..

👍: 0 ⏩: 0

Astrikos In reply to ??? [2012-10-30 00:05:04 +0000 UTC]


Featured here

#deviantARTcommunity

👍: 0 ⏩: 0

CyberLogic In reply to ??? [2012-10-14 00:00:53 +0000 UTC]

So I've been asking around and I'm hoping someone from here might be able to help me. I've setup a custom box on my profile page to display a wide image but I need for that image to resize with the browser window whilst maintaining its aspect ratio. It would basically look like the Deviation Widget or Webcam Widget but with my own custom title and some other code.

I've tried using the code:

but nothing changed.

So I've tried using the code:

but the image does not fill out the custom box.

You can see examples of this on my profile page HERE (the boxes on the left side of that page).

I've received all sorts of suggestions but no information on how to actually implement them. One suggestion was to make the image into a background image so that it resizes according to the browser window, but I don't know how to do that. A Google search hasn't helped much either as much of the code suggested doesn't seem to work in the custom boxes here on dA.

But anyway, I'd appreciate some help on this. Thanks.

👍: 0 ⏩: 1

Kjherstin In reply to CyberLogic [2012-10-24 08:33:43 +0000 UTC]

The best thing to do to ensure you have a large enough image for your custom box is to make it a repeated seamless image.

👍: 0 ⏩: 1

CyberLogic In reply to Kjherstin [2012-10-26 04:49:12 +0000 UTC]

Hi. Thanks for the reply. The image that I'm trying to display is 900px wide, but the issue that I'm having is that it does not use the full width of the custom boxes. Someone pointed out that dA limits the width within the custom boxes to 386px, and changing this to "width: 100%;" should work perfectly when the code within the custom boxes is except that this is a change that would need to be made from withing dA. So I'm looking for a workaround in the meantime.

I took these screenshots to show what's happening:

width: 386px;
width: 100%;

👍: 0 ⏩: 2

Kjherstin In reply to CyberLogic [2012-10-26 08:14:28 +0000 UTC]

Oh wait! I found what you need: "Get Wider Widgets" [link]

👍: 0 ⏩: 1

CyberLogic In reply to Kjherstin [2012-10-26 09:29:36 +0000 UTC]

I think that I have not been explaining myself very well. It has not been easy to explain what I want. -_-

The code provided in that link uses fixed widths, like 450 pixels, etc. What I want to use is a width percentage because only than will it resize according to the browser window size. Also, changing the height to "0" causes nothing to appear in the custom box.

For instance, if you take the URL of THIS IMAGE (which is 900 pixels wide) and add it to the Webcam Widget on your profile page and than resize the width of the browser window, the image within the Webcam Widget will also resize accordingly without losing its shape. But if you take that same image and apply it in a custom box using the code than the image will appear cut off or overflow to the right whenever you make the browser window thinner than the image within the custom box.

But if I use my original code, which I've tested in other sites and it does work correctly there, than the image will appear less wide than the custom box as I've shown HERE . And again, this is because deviantART has limited the width within custom boxes to 386 pixels.

So I've been trying to figure out a way that I can force an image to use the full width of the custom box (with the usual padding ans spacing that is also applied to the Webcam Widget) while still allowing it to resize the image whenever the browser window is resized. Using a fixed width just won't work as the image would not resize whenever the browser window is resized.

Thanks again for the reply.

👍: 0 ⏩: 0

Kjherstin In reply to CyberLogic [2012-10-26 08:08:41 +0000 UTC]

Then the best bet is to talk to an admin from this group #CommanderLuminaire and try and ask them or try and ask for commanderluminaire's new account. I don't know what his new username is as he deactivated his old one.

👍: 0 ⏩: 2

CyberLogic In reply to Kjherstin [2012-10-26 08:49:59 +0000 UTC]

Okay. I'll check out that group. Thanks.

👍: 0 ⏩: 0

Kjherstin In reply to Kjherstin [2012-10-26 08:12:46 +0000 UTC]

Oh wait! I found what you need [link]

👍: 0 ⏩: 0

MidNightsCastedAngel In reply to ??? [2012-09-27 21:35:04 +0000 UTC]

Hello! Wondering if anyone knew how the thumbs in #kamenoko-university works. Specifically, the settings/apply/rules , links. Because you can drag them like thumbs into your collection, but it also links to the journal. It's really weird! I'm familiar with how to customize my dA, so no links to the FAQ will help me.

👍: 0 ⏩: 3

gillianivyart In reply to MidNightsCastedAngel [2012-10-07 16:39:22 +0000 UTC]

I had noticed that lately that some journal links have the "Drag & collect" above them. No clue why or how.

👍: 0 ⏩: 0

OrchidsInRuin In reply to MidNightsCastedAngel [2012-10-01 19:00:31 +0000 UTC]

Sorry forgot some characters. The code is supposed to look like this:

👍: 0 ⏩: 0


<= Prev | | Next =>