HOME | DD
Shimaira β CSS coding for custom widgets
Published: 2011-05-28 18:10:15 +0000 UTC; Views: 20066; Favourites: 137; Downloads: 22
Redirect to original
Description
Stamp CSS (see my profile) - Use with [custom] widget---
< div class="popup2-moremenu">< br>< br>< br>< br>< br>< br>< br>< br>< br>< br>< br>< br>< br>< br>< br>< br>< br>< br>< br>< br>< br>< br>< br>< br>< br>< br>< br>< br>< br>< br>< br>< br>< br>< br>< br>< br>< br>< br>< br>< br>< br>< br>< br>< br>< br>< br>< br>< br>< br>< br>< br>< br>< div class="floaty-boat">< small>< br>< br>< img align="center" src="background_image_here.jpg "/>< /div>< /div>< div class="popup2-moremenu">< div class="floaty-boat">< div align="center">< br>
4 (or whatever you want) thumbs per line
< /div>< div align="right">< small>Background: credit_here < /div>< /div>< /div>
Note: The amount of < br> at the start is what makes the box longer (or shorter). You'll have to play around with the number of < br>'s versus the amount of stamps. If you have so many stamps that they exceed the height of your background, simply do the following:
< img align="center" src="background_image_here.jpg "/>< br>< img align="center" src="background_image_here.jpg "/>
To-do list (see my profile) - Use with [custom] widget
---
< div class="popup2-moremenu">< div class="floaty-boat">< small>< br>< br>< img src="background_image_here.jpg ">< /div>< br>< div class="gr-box gr-genericbox">< div align="center" class="ch-ctrl indifade">< div align="left">< div class="pp">List here< br>< /div>< /div>< div align="right">< small>Background: credit_here < /div>< /div>< /div>
Deviation box edit (see my profile) - Use with [featured deviation] or [gallery folder] widget (will most likely also work with the favourites)
---
< div class="popup2-moremenu">< div class="floaty-boat">< small>< br>< br>< img align="center" src="background_image_here.jpg "/>< /div>< /div>< div class="popup2-moremenu">< div class="floaty-boat">< br>< br>< br>< div class="pp">< div align="center" class="ch-ctrl boing">< br>< a href="deviation_link_here ">< img src="thumbnail_picture_here.jpg "/>< /a>< br>< br>< /div>< /div>< /div>< br>
< div align="center" class="ch-ctrl g-errors">< div class="pp">Text here< /div>< /div>
< div align="center" class="ch-ctrl g-errors">< div class="pp">Second text box, for example a disclaimer.< /div>< /div>
Related content
Comments: 79
Well, I put the coding into the custon text box, saved, but on my page, it just shows the code as text. The code has no effect on the box.
π: 0 β©: 1
Did you remove the spaces?
I would suggest using this one as you can easily copy-paste
shimaira.deviantart.com/art/CSβ¦
π: 0 β©: 1
Hey, take a look at my page please... I tried the custom box coding, and It still isnt working... The custom box is titled "HELP! Thanks!" and shouldnt be that far down the page...
Thanks for helping me!
π: 0 β©: 1
You need to remove the spaces 
>>>Β shimaira.deviantart.com/art/CSβ¦
Has the code without spaces, so ready to copy-paste (you just need to modify the image links and such)
Basically, text should state < div > but no spaces (I can't even type it out because wattpad will turn it invisible)
π: 0 β©: 1
OH
OH OH OH
I GET IT NOW
Okay thanks! I will consult you if I have any more trouble, THANKS!!!!!
π: 0 β©: 1
This tutorial is the most useful I've seen in DA ! thank you so much ! thanks to you I've got a cool profile now
However, I've got a few questions :Β
are there other codes for other colours tan indifade, g-errors,Β boing andΒ gr-wonkwonk Β ?
I found a working code for a red box (i don't remember where I found it) , but I don't know how I can find other colours. do you know?
here is the code :
< div class="commissions-purchase modal-node popup2-clear">< div class="g-errors" align="center">< div class="devlinkzone" >text here^^
< div align="center">< em class="issue_new">
π: 0 β©: 1
My pleasure <3
And as listed in the description, this person ziinyu has all the colours at the bottom of their page
π: 0 β©: 1
izoaneizbvizhdbv !!!! so many cool boxes ! I'm gonna TRY THEM ALL !!!!Β Β
Yay ! I'm glad there are people like you on DA !Β
π: 0 β©: 1
=^_^= glad to have helped <3
π: 0 β©: 1
I try to feature your a tutorial in my group, sorry if you've seen more than one request, I'm having trouble with managing all the group features ^^
π: 0 β©: 1
I had two but that's no problem 
π: 0 β©: 0
I have a question. I know if you use
you can make the boxes longer Β so the pics fit, but is there a way to make them wider? Or... rather make them able to carry images wider out to the sides? I dont get how it work because when I put in one pic in a custom box it can go all the way out to the sides (wide-sides) and even beyond the edges, but when I put in more pics than one the box seem to have a margin of 5 cm on each side! So if I want to have 2-3 pics beside eachoter then they need to be super small to fit, even if there is a 5cm margin to each side! It drives me nuts, I dont need so much margin on both sides! So I wonder if there is a way to change this?
π: 0 β©: 1
Ah, I have the same question. Can I know too? ^^"
π: 0 β©: 1
Kinda depends on what the issue is if it's the same answer
Could you please send me a PM and explain a bit the issue you are having? Maybe some screenshots?Β
At any rate, easiest solution, should it be that you want 3 pics next to each other and dA only "allows" 2, to just make the 3 into 1 yourself and put that in (dA can't split up a picture
π: 0 β©: 0
Ah, never mind my last comment hun, I have done it <3
π: 0 β©: 1
Hi there~ Is there a way to somehow change the back box in the last code?Β
π: 0 β©: 0
Do you know if you can put a scroll box on a profile?
π: 0 β©: 1
Good question... It should be possible IF there is an existing "box" that has a set height and scrollbox on (overflow: auto). However I don't know if such a box exists 
π: 0 β©: 1
Well thank you for getting back to me dear, I really appreciate it.
Also since I'm here, would you know how to make pictures\icon into links for like Facebook ect?
π: 0 β©: 1
I always try to answer posts
Just too bad I didnt have much of an answer
However this one you ask now is rather easy, you can use the standard html code for that
< _ _ _ _ a href="your link here to FB" _ _ _ _ >< _ _ _ _ img src="your icon here"/ _ _ _ _ >< _ _ _ _ /a>
Just remove the "_ _ _ _" and fill in your link & icon url
π: 0 β©: 1
Oh my goodness!
Thank you so very much
It was frustrating me so bad
π: 0 β©: 1
Can you customize your Deviantart ID area?
π: 0 β©: 1
Well, with the old one yes. With the current "new" one you can do some stuff, I don't know to what extent as I kinda fucked it up when I tried to put my old CSS code there...
So yeah you can do stuff there
π: 0 β©: 0
Hello! I was wondering how to change the font colour for the custom box, I can't seem to find any html coding in the FAQ but I'm sure it must be possible to change it >.< I've looked at a few examples and it doesn't seem like any of them are writing anything like etc. If you can help it would be much appreciated! π: 0 β©: 1
As far as I know you can't use such codes
π: 0 β©: 1
Oh man that sucks so badly!
π: 0 β©: 1
You could if you were to write your own class, but that's the thing that dA doesn't allow in custom widgets
If you find a way please let me know
π: 0 β©: 1
Aw man don't understand why they wouldn't let us do that
π: 0 β©: 1
Yeah it's a shame
π: 0 β©: 1
Thank you very much! I have some ideas, so hopefully will be great soon
π: 0 β©: 0
I tried this. But all I got was a small box with a x in it. :/ Is there something I am doing wrong?
π: 0 β©: 1
sounds like the background image path isn't correct, I'd check that if I were you (or note me)
π: 0 β©: 1
Well it may be just my computer... Comes to turn out my Journal skin had a hiden image of a wolf and I didn't know since on the journal it too showed a box with a x. I'll try again.
π: 0 β©: 1
Okay O_o weird... were you able to fix it?
π: 0 β©: 0
i got a question i got my journal almost fully ready just figuring out on the part where the text comes.
i want a white transparant background (i kinda found it but my black text is going transparant too)
i only want the text background to be white transparant so my background of the journal is still visible
i tried opactiy: 0.6 and 0.80 and it kinda works but the text goes transparant too so do i need to add something so the text itself doesn't go transparant ?
i got this atm :
.journalbox .journaltext {
position: relative;
top: 280px;
left: 100px;
background-color: #ffffff;
opacity:0.6;
height: 470px;
width: 500px;
overflow: auto;
text-align: left;
padding: 10px;
font-size: 12px;
font-weight: bolder;
color: #000000;
}
π: 0 β©: 1
To be honest, the way I use the code in my own journal skins I also make the text background partially transparent in the same way you're doing it, and the text indeed also goes a little transparent
The only alternative I found out was instead of making a transparent background, giving the text a shadow (text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black; ) depending on the background image you're using this can sometimes be enough to make the text pop out and be readable...
π: 0 β©: 0
Errr... I'm copy-pasting code and nothing is happening, but I have a PM.
What?
π: 0 β©: 1
You're copy pasting? Did you remove all the added spaces?
π: 0 β©: 0
can someone just do it for me ? jk... i am good with computers till it comes to different codes
π: 0 β©: 1
If you send me a note I'll be glad to help you out
π: 0 β©: 0
Where are you getting stuck?
π: 0 β©: 1
i don't know... i copied the code pasted it replaced the url with one of my own but it doesn't work...
π: 0 β©: 1
| Next =>