I had some complaints that the header image got cut up by the advertisement. I forgot to check how that was, since I don't have those advertisements. I didn't want to hide them, since they are an income for dA, so I tried to switch them with the headermenu. So far that worked. I also made a little extention for the chatroom. I hope you like it.



The "tutorial" below has no more use since the codes are changed.





I really like the new dA available for testers. Allthough they stay with the grayish greens too much (I would have liked it a bit better with slightly lighter reading backgrounds, but that's something we can fix later on if needed).

Today I needed a break from painting and decided to have a bit fun with the new sleek and the designstables stable you can see in my journal and my site. Ofcourse, this is only for those who are subscribers and/or betatesters. You'll need to turn on the supersecretv6mode before you can see any changes. If you're not betatester or subscriber, you can still do this, but you won't be able to see any changes untill v6 is released.


This is fun stuff. Open up this image in Photoshop or whatever software you use. You can change the width of the image if you want to, as long as you don't change the height. Make sure the whole image is filled with this background. It's ok to use my images I upload here.




Do whatever you want to do with it. Keep in mind that there are still a navigation next to it, so don't go completely nuts on this. Best and easiest way is to make a gradient or whatever. Make something nice and easy like I did below.




If you allready have Stylish, you can skip this step obviously. Anyhow, for those that doesn't have it: Find Stylish here.


Click on the in the status bar (lower right) and click 'Manage Styles'. Click 'Write' and give the style a name. I named mine: New dA header. (Gosh, I'm original).

Now we'll need to fill in some code. dA keeps on making a [link] from the namespace url. So, remove the space in the url.


To keep a long story short, we'll update the top bar first. You don't need to make a new image for it, we can use our header image for that. What I added is in red now. It's easy to update.


No much words for this, just see what I've changed.


This state is something you will only see when you hover the image to click it. What you need to do is add 73px to the height. That is the size of the header without the bar above it. You can do that by going to Image - Canvas size. Then hit the 'relative' checkbox and switch to Pixels. There fill in the 73 for height and before you hit the enter button, click on the arrow that points upwards. I just copied my header and dragged it down. Then I dragged that layer beneath the normal state layer and changed the image like this:


Again, I don't mind if you use this image for your header.




When I checked around to see if the code is working properly, I discovered that the statusbar in the chatrooms is updated as well. But in the code for dAmn, the code for that image is disabled, so we won't see it. Allthough, the margins and widths we gave to the topLeft area is still used by it. Therefor we need to fix things a bit. We can do that by adding this to our code:

There, that should fix things again. I hope you liked this tutorial a bit. I liked it, and I'm using it at the moment. I don't mind if you use my images at all. Now go ahead and test it.


If there are things I haven't thought about or maybe bugs, let me know. If you design your own header, make a screenshot and post it. It would be nice to see what you made. It would also be nice if you credit me with a link back.