Ah, love this thread! I've scoured the threads looking for css guides and templates. This is great, many thanks!

Also I want to add that Google Chrome has an awesome color-picker extension called Eyedropper. I use it all the time!

This is so excellent :) Thank you for making this and for all of the help you gave me with my profile issues so far. I've known enough about CSS/HTML to be able to tinker with my profiles and make them work (though it was usually through the most complicated coding, hah), but I stopped coding anything for years and since then CSS3 and HTML5 and all kinds of stuff have come out that has blown my mind. Plus I never really sat down and tried to educate myself, it was more or less me looking at people's codes and figuring out what each element was through trial and error.

I do have a question, though. You've pointed out that you can't create new divs on a user profile, and from browsing the forums I've seen you mention to people who want to get that effect without the divs to make a blank section in an empty column and put the coding there. Can you explain how that works? I mean, how does we circumvent the fact that we can't make new divs? And do we just put the code in the blank section or do we put the actual information that we want (for example, navigation links) in there as well and then re-position the column?

This has to be one of the more easily understandable profile coding threads recently made, thank you very much!

: You're very welcome! I'm glad to be able to be of service. :] And I added Eye Dropper to the list (plus installed it on Chrome as well).

: Thank you! I'm happy that I could help you and that you learned something from it. Also, I just added a new section about that, hope it helps you! :]

: You're very welcome! Happy to have been of service! :]

This might help some more with question for specifically navigation buttons.

This is the code I add within my main profile code:

{position: absolute; top: 408px; left: 382px; height: 35px; padding: 0px; margin: 0px;} {position: absolute; top: 469px; left: 382px; height: 39px; padding: 0px; margin: 0px;} {position: absolute; top: 523px; left: 382px; height: 49px; padding: 0px; margin: 0px;}

a:hover img, a:hover img, a:hover img {filter: alpha(opacity=100); -moz-opacity: 1; opacity: 1;cursor:crosshair;} img, img, img {filter: alpha(opacity=0); -moz-opacity: .0; opacity: .0;cursor:crosshair;}

That shows one way of doing the hover buttons as well. Then in a column that is not being used as my main column I put the image links into a blank section using the assigned div id's like this:

<div id="mail"><a href="http://www.subeta.net/mail.php?act=new&to=Ringo"><img src="http://img.photobucket.com/albums/v247/bowserbabe/subeta/profiles/nav_01-1.png" border="0"></a></div> <div id="wish"><a href="http://www.subeta.net/wishlists.php?act=view&user=302996"><img src="http://img.photobucket.com/albums/v247/bowserbabe/subeta/profiles/nav_03-1.png" border="0"></a></div> <div id="commission"><a href="http://www.subeta.net/journals/entry/65081"><img src="http://img.photobucket.com/albums/v247/bowserbabe/subeta/profiles/nav_05-1.png" border="0"></div>

Hope that helps!

I saw you pinged me but I don't see your ping, that's strange. Anyway, this is amazing ! And very well explained !

Just some really basic things, like don't put background images in the html selector, when absolute positioning is appropriate, what !important really does and when to use it etc. Also, I think something needs to be said about non-absolutely positioned layouts. They can be really awesome if done right (I took the extra time to keep mine all in the flow!), and it helps with repeating background images.

In most of the profiles I see, the big, non-repetitive image (that may want to repeat somehow) is always the bg. Like the problem was having. There are definitely ways around having to layer background images. Each column has a filler li element that can be used for that purpose, or an empty column can be repurposed instead. Doing this would cut down on the huge images that people have to make to compensate for different screen and content sizes.

So, in summary, kind of a basic how-to for slicing/laying things out for people who don't know how to code and are trying, or are getting someone else to.

Let me know if that makes sense at all. I'm not always the best at explaining things...

: How do you make those divs work? Whenever try to add one of those to a user profile, it fails to work as a selector. :/

: Sorry, I removed it after people started replying. xD Thank you for the comment though. I pinged you because I wanted to ask whether you had any suggestions for the thread?

: First of all, happy birthday! :D

Second, why wouldn't you put background images in the html selector? And I've already added that about absolute positioning and !important (unless it wasn't enough, lol). Do you mean fluid layouts with non-absolutely positioned layouts? Like those that stretch across the screen and stuff?

I'm not so sure what you mean with that. What I always do is have the body background set to a pattern and the columns or main containers to a big image background... And I also advice always aiming for 1024x768 as a screen size.

I'm not always the best at explaining things either... xD

Now I have to think! XD

Well... For the column that I am using for the buttons this is the code:

{background-image: none; padding: 0px; margin: 0px; border:0px;}

And don't add in that opacity because that could be why they aren't showing up as well. ^^

Well, this is perhaps the easiest-to-understand Subeta CSS guide I've been able to find yet. Thanks so much for making it!

I do have a question, though. On my pet Cnidocyte's page, I've been using a combination of things you've shown here with other snippets of CSS from a profile that was made for me (the maker of the profile gave me permission to tweak the codes). There is a rather large chunk of white in the backdrop that I'm looking to alter. I know that it's the section, because I specifically set the background color of that section to white. I guess my question is whether or not I would be able to change the size of that white patch, or if I should just cover it up with a background image instead.

Also, do you know how I could possibly get a second text box on the page? The one that's up right now is from the section, so I'm not sure if there's a specific way to code for a second scrollbox.

: No, I meant the divs in the sections... xD They show up but I can't use them as a selector. For example, if I add a new div and want to use it as a scrollbar overlay, it refuses to show up.

: You're very welcome! I'm really glad that people find some use in this! :] Actually, the white part is a combination of your and containers, your doesn't seem to have a colour set to it. You can make the & content transparent, the white and less wide with this: , {background: transparent;} {background: ; width: 600px;} Just replace the width value with yours. Though I don't really recommend this code since half of your pet profile won't have that white patch either. If you want all information to have that white patch, use this instead: {background: transparent;} {background: ; width: 600px;} And again replace the width value with yours.

Also, I feel stupid for not having added that to the pet section yet (I'll do that tomorrow), but to have a new text area and style it, just use this: <div id="boxname">text</div> Replace "boxname" with the name you want and "text" with your content. Then, to style it, use the name as a selector, like this: {property: value;} Just replace the boxname with the name you added in the div id above.

My apologies for not having explained that yet! D:

It's been extremely helpful! Thank you for taking the time to make it!

I tried the second code, and no matter what I set the width value as, nothing changed on the page. (It's currently set to a very extreme value, just because I wanted to see if I wasn't tweaking the numbers enough, but....) I tried clearing my cache, though I doubt that was the issue, and it still looks the same. Is it something wrong with my computer, or did I somehow explode it?

- Those would be for your one blank section in a column that isn't the main. I usually will put nav buttons, the comment box, and sometimes the HA in one column (all hover effects) and have no problems. Would you like me to smail you the whole code? I've always done buttons like that so I guess I'm not understanding what's wrong. I've never tried doing other div id's along with the buttons in the same column. Is that the problem? Really not understanding. Sorry! XD

Seing all those spoilers tag made me think of a little trick. You can use scode in profiles. One application is to use the spoiler tag to hide text or to make a playlist, or a nice menu. I used this on Samella's profile but it seems Ceph is working on it so you go here if you want to see how it looks ^^

html :

<div id="playlist"> <center>

css : .spoiler{width:200px;} /define the width of your spoiler bar/ .spoiler div{margin:0;padding:0;} /if you didn't use the resetting code earlier/ .spoiler_click {width:200px; height:30px; /define the width and height of the top of the spoiler bar (the one with "click to toggle" on it)/ border: 0px solid ; /define the border of the spoiler top bar. First is the "thickness" in px, then the style (solid, dashed, dotted) and then the color/ text-indent: -9999px; /this is to hide the text "spoiler (click to toggle)"/ background-color:transparent;background-repeat:no-repeat;background-image:url(http://i19.photobucket.com/albums/b173/tarynmiriel/Comissions/Samella/playlist_button.png);} /This is where you put an image to make a custom spoiler bar/

.spoiler_text {width: 168px; /define the width of the text box if you want it to be wider or not/ border: 2px solid ; /define the border around the text box, same as earlier/ border-top-style:none; /that is because I didn't want to have the top border./ text-align:left;} /that's to align the text in the box on the left while keeping the playlist itself centered/

This is gorgeous, very well done! Can't believe how much work you've put into this, but it looks extremely helpful, I'm always looking back on this forum for references now and then. Definitely bookmarking this!

Thanks!

As for the backgrounds in html elements, it's just really bad practice. The W3C advises against it, plus with older browsers they may not render correctly.

I'm mainly talking about non-absolutely positioned layouts. For the standard big-image-with-one-column layout, it's super easy do not absolute position. As absolute positioning is really frowned upon for most layouts these days, I think educating users a little would be a good idea.

Haha, I'm glad you did this. o3o It must've taken a lot of work though. lD

I think you could also add some part in the User profiles about how to change the pet headshots to overlays, you know, the 100x100 ones? (: I've seen people do it, and I guess other people would want to do it too, so it'll be nice to have that code. C:

I can give you the code if you'd like. xD I have the thread bookmarked. o3o

Also, maybe something about hover comments for user profiles? :D

Oh, and for pet profiles, it's nice to have the code in order to change the pet overlay and the minion overlay. C: (I figured I'd just post it so you wouldn't have to type it all. lD) You don't have to though, you can just link it to the Pet Overlay FAQ thread made by . c:

There's also the question about opacities. :) I remember you teaching me about it, and I still remember the code. lD I think it's permanently stuck to my brain. lD

{opacity: 0.7; filter:alpha(opacity=70);} I think you told me that the first opacity code's for IE, the second is for the rest, I think. :3

:hover {opacity: 1; filter:alpha(opacity=100);} Pretty self-explanatory, I think, and it should work as long as there's no space between and :hover. :)

Lastly, maybe the code for two backgrounds? o3o Like, one for the header image, and one that repeats horizontally or vertically? :) I'm pretty sure you know the code for that, but I can type it here for you if you'd like. :D

I can help if you want. :) Thanks so much, and I hope these codes helped! :D

Good grief, you guys reply fast! Thanks for that, and my apologies for the wait but I had to work this weekend. xD

: You're very welcome!

And I took a look at your code. Apparently, because you used "position:absolute" on containers within & , it moves the containers out of them. So setting the width wouldn't really do a thing. Instead, I changed your code and made the thing a bit wider and taller so that its background covers all the info (including the TC):

: Yes, smailing me the code would be very helpful (seeing as how my attempts at putting divs in user profiles usually fail). Maybe it only works with filled divs and not with empty ones, I don't know. I'll see that once I got your code, I guess! :]

: That's a really neat trick (one that I'll simply have to use in a pet profile) and I'll put that in the guide, thanks!

: Thank you! I'm glad that this helps someone! :]

: Ah, I see. I never thought of that. I usually don't use the html element, except on Subeta because it gives me an extra selector to work with. xD Now I'm not sure what you mean with non-absolutely positioned layouts though... And why are they frowned upon? (sorry, they didn't really cover that in my classes)

: Haha, I'm to addicted to coding stuff not to do this. xD

And those are good ideas, I'll add them in! Thank you for the codes, it does make things a lot easier for me. :] Actually, the first is for most browsers while the latter is for IE pre version 9. Thank you for your help and the codes did help, I'll add them in ASAP! :]

Oh God..... Thank you so much! <3 That.... That's honestly amazing. -scampers off to fix code and also add a credit line- I'll be tooling around with a few things, but thank you so much for helping me get it to work.

I'm curious, though. What sort of conflicting properties did I have?

It's just really, really difficult to scale, both for screen sizes and adding new components. In my experience, absolutely positioned layouts are for pixel-perfection, which is frankly very difficult to do and not always the best (see here for a bit of fun). As soon as you start adding to them they tend to get problematic. For a profile, it's probably okay because the content doesn't change, but for larger websites its just considered bad practice. It's more of just letting people know that if they want to continue to learn about css and styling, that the way that things are done here aren't always the best, and are definitely not representative of most websites. That and I always advocate for cutting down on the bad styling in the world. I have had to fix far too much of it o.O