Subeta CSS Compendium


#9275 Posted on: 05/11/11 at 5:12pm
Hongske


Hover
Avatar
Post (0)

402
1,632

INTRODUCTION
Since I often see the same questions repeated all over again (and the current coding guides don't seem to really update themselves), I figured I'd make my own guide! As the title insinuates, this thread focuses mainly on CSS, but there are notions of HTML as well. The topic is divided into multiple sections: General purpose, pet profile & user profile codes (eventually I'll also add shop, journal, custom CSS & maybe cult codes). For your viewing ease, all subsections are hidden between spoiler tags. There are 2 difficulties, basic & advanced, which are noted in each spoiler tag. If you have any questions or comments, feel free to ping me!


GENERAL

BASIC -- First time profile making

BASIC -- Selectors!

BASIC -- Hover tricks (hover sections, scrollbars and images)

BASIC -- New text areas

BASIC -- What not to do

BASIC -- The !important tag

ADVANCED -- More on selectors

ADVANCED -- Tooltips

ADVANCED -- Scrollbar overlays

ADVANCED -- Anchor links

ADVANCED -- CSS3 Transitions


PET PROFILES
BASIC -- Resetting

BASIC -- Styling your pet profile

BASIC -- Pet & minion overlays

BASIC -- Sample Pet Profiles (in progress)

ADVANCED -- sCode tricks in Pet Profiles


USER PROFILES
BASIC -- Resetting

BASIC -- Pet headshot overlays


CUSTOM CSS
BASIC -- Pet Overlay image


HANDY TOOLS
Firefox
- Here's a link to the web-developer toolbar, a handy tool which not only enables you to view an element's CSS, but also to edit your CSS in real-time.
- An alternative to Web Developer is the Firebug add-on. The benefit of Firebug is that you can not only edit your CSS in real-time, but also your HTML.
- There are 2 colour-pickers (tools to get the colour of a specific pixel) that I recommend, you can pick any of the two: ColorZilla and Rainbow Color Tools. ColorZilla gives a bit more options, but if all you'll ever do with it is picking colours and getting the code of it, then Rainbow is a bit simpler to use.

Chrome
- Chrome has a handy build-in element inspector. Right click on anything and pick "inspect element" to see information about it's HTML & CSS code! :]
- There's a great colour-picker tool for Chrome, called Eye Dropper.

Links
- W3Schools keeps statistics of the most used browsers and screen resolutions, which is handy to know when you're making a layout.
- Pinto has a great thread on designing tips for your profile. I'm not much of a designer (more a coder, really) so this has helped me out a few times.

MANY THANKS TO:
Pinto, Lypsyl, Ringo, Virtual, Mekiko, Tilcara and every commenter for the help & support!

---

PS: This guide is still a work in progress.


-♥-
Subeta CSS Compendium

ON HIATUS


#9426 Posted on: 05/11/11 at 5:17pm
Renaissance
is a Time Lord


Hover
Avatar
Post (0)

583
16,468

@Hongske
I knew that it was only a matter of time before you made this thread. :D



#9429 Posted on: 05/11/11 at 5:27pm
Hongske


Hover
Avatar
Post (0)

402
1,632

@Renaissance:
Haha, I'm that predictable eh? There's a lot to be added though. xD


-♥-
Subeta CSS Compendium

ON HIATUS


#9431 Posted on: 05/11/11 at 5:38pm
Smoke


Hover
Avatar
Post (0)

796
1,312

@Hongske
You my dear are awesome!



#9279 Posted on: 05/11/11 at 5:45pm
Hongske


Hover
Avatar
Post (0)

402
1,632

@Zombiefriedchicken:
Thank you. :]

I'm going to add some more to the advanced selector section and then will continue the rest tomorrow.

Edit:
Finished the advanced selector section, added the reset codes for user profile and fixed some small things (like commas and stuff).


-♥-
Subeta CSS Compendium

ON HIATUS


#10038 Posted on: 05/16/11 at 4:15pm
Pinto
is shady


Hover
Avatar
Post (0)

626
6,231

@Hongske
you might want to direct people who use firefox are new to CSS to this toolbar. It makes everything 100 times easier.



#9433 Posted on: 05/16/11 at 4:45pm
Hongske


Hover
Avatar
Post (0)

402
1,632

@Pinto:
Thanks! I use that one too, but I completely forgot about linking it. Added the link now though.
:]


-♥-
Subeta CSS Compendium

ON HIATUS


#10039 Posted on: 05/16/11 at 4:49pm
Lypsyl
is stumped


Hover
Avatar
Post (0)

1,539
10,428

@Hongske
This is looking great so far. I love the way you 'talk' to the reader :).

One thing I would add is a complete simple sample code. I starting playing around with coding with absolutely no knowledge and while outside tutorials and snippets of code are extremely helpful, there were times where I simply didn't know where to put the code. I learned enough to make a simple HTML page with CSS styling, but with no idea how to integrate that into Subeta.

Perhaps a section on stuff that is unique to Subeta? Like being unable to add text areas to user profiles, but they can be added to pet profiles, or that you can change font, size and decoration, but can't change the words "Pet Treasure" - and show ways to get around the restrictions.




#10041 Posted on: 05/16/11 at 4:58pm
Organ Donor
Ringo


Hover
Avatar
Post (0)

1,259
4,073

@Hongske - It's a good start! :D The descriptions on positioning are really great and seem to be one of the areas people have the most problem with.

So what to do next... maybe more on pet pages since they are such a big thing? And often difficult and diversified... lol! I've seen some great profiles that are mostly CSS and very light on the graphics, like maybe just a background tile. Those kinds are great for people who don't have graphics programs or just aren't very skilled in that area but want to still make their own profiles.

Do you want any help?


:green_apple:Im a Granny Smiths Fan!:green_apple:

#9437 Posted on: 05/16/11 at 5:19pm
Hongske


Hover
Avatar
Post (0)

402
1,632

@Lypsyl:
Thanks!

And that's a great idea, I hadn't thought of adding a complete sample code yet, but it would indeed be very handy for starters. And the unique-to-Subeta stuff is kind of what I was planning to add. I started it with the "Basic -- Styling your pet profile" section, but I'll add a new one with some tips and tricks!


@Ringo:
Thank you! :]

Good idea, I'll add some more on backgrounds and things you can do with CSS that you don't need a program for. I was wondering wether I should add CSS3 codes though? They do a lot design-wise, but when you use them a lot in your design then it tends to look bad in non-compatible browsers...

As for help, I appreciate any tips or hints you can spare (considering that there's a lot to be said)!
:D


-♥-
Subeta CSS Compendium

ON HIATUS


#9439 Posted on: 05/16/11 at 5:39pm
Organ Donor
Ringo


Hover
Avatar
Post (0)

1,259
4,073

@Hongske - CSS3, I wouldn't. That's getting too difficult when most people who are looking at these guides for help only have a really basic knowledge of any kind of coding.

I want to try out making an uber "graphics free" pet profile now! I think that'll be my goal for the week. lol! I'll send you the code to post when I do. ^_^


:green_apple:Im a Granny Smiths Fan!:green_apple:

#9282 Posted on: 05/16/11 at 5:49pm
Hongske


Hover
Avatar
Post (0)

402
1,632

@Ringo:
True, but the little things like rounded borders or shadowed text do make for nice "graphics free" profiles. :P

That sounds awesome! Now I feel like making one too. xD


-♥-
Subeta CSS Compendium

ON HIATUS


#10043 Posted on: 05/16/11 at 7:42pm
MishieMoo
is lonely


Hover
Avatar
Post (0)

326
461

Would you consider a "best practices" section for this? That would be really useful for people looking to get a profile coded, as they'd know what to ask for. I'd be glad to help =)



#9441 Posted on: 05/16/11 at 7:44pm
Organ Donor
Ringo


Hover
Avatar
Post (0)

1,259
4,073

@Hongske - Forgot that included rounded corners. XD Those are my favorites! ;)


:green_apple:Im a Granny Smiths Fan!:green_apple:

#9285 Posted on: 05/16/11 at 8:41pm
The Beanbag Collector
Virtual


Hover
Avatar
Post (0)

838
2,616

@ Hongske

Eee! I love the "sample profile" even if it is progress XD You can steal any pet code of mine if it would help out at all. I think the best way to learn is to start playing with other's profile code and figure out what the heck it is doing. If you think of any of my pet profile (like profit's) would help for a basic profile I'd be happy to comment the hell out of it, same with user profiles. Great job :)

Edit: And I know designing is my weakness XD but I love code!

Edit2: I see you mention the web-dev toolbar, awesome! I also use Firebug for Firefox, or Chrome's builtin Inspect Element. I also love Colorzilla, it's a color picker you can use in the browser! ^^

Edit3: It's so awesomely descriptive--would the "important!" tag be worthy of mention? :)




#9287 Posted on: 05/16/11 at 9:45pm
Mekiko


Hover
Avatar
Post (0)

476
1,564

@Hongske

What about adding a section on how to do buttons? They're so simple, but I've received a lot of questions about how they work/how to code them. Also, what about adding how to hide scrollbars? I know you've already covered scrollbar overlays, but I've noticed that a lot of people just want their bars to appear on hover. In the pet profile section, maybe add a small note about how the bigger divs that sections are in are important? I'm not sure if this is too trivial or not, but for example, sometimes people will hide column 3, and wonder why they can't get their stats to appear. Ooh, or why !importants are important sometimes ;)

Annnndd, another extension that I find very useful is "MeasureIt", a pixel ruler. Just some suggestions! Other than that though, a very very great job :) I'm looking forward to seeing it when it's all done!



#9443 Posted on: 05/16/11 at 11:28pm
Gandalf
gets around


Hover
Avatar
Post (0)

627
2,055

@Hongske

This was so helpful! Thank you so much!!


------------------------------------------
The Optimist Project

#9289 Posted on: 05/17/11 at 6:07am
Hongske


Hover
Avatar
Post (0)

402
1,632

@MishieMoo:
I'm not sure what you mean with "best practices"? And any help is appreciated!

@Ringo:
Those are mine too! They're so simple yet can add so much to a layout! :D

@Virtual:
Thanks for the tips! I probably won't take your code (since I'm such a nitpicky person and like to write my own codes), but thanks for the offer! Also, I'll add that about Firebug/Inspect Element. As for the colour picker, there's also Rainbow Color Tools (which is what I use), so I'll add all of those to the list! :]

And as for the !important tag, that's a good idea too. I'll put that on the list as well. :D


@Mekiko:
What do you mean with buttons? Image buttons or button buttons? And I'll add the scrollbar thing. :D And I'll also add that warning to the hiding section. And Virtual also suggested the important tag, so I'll definitely add it.

Ah, I used that one in the past as well, but as Web Developer has a pixel ruler as well it's maybe a bit redundant?

Edit:

Added everything! :]


@yizzle-poo:
You're welcome, I'm glad to have been of service! :D
If you've got any questions, feel free to ping me! :]


-♥-
Subeta CSS Compendium

ON HIATUS


#9294 Posted on: 05/17/11 at 8:09am
Mekiko


Hover
Avatar
Post (0)

476
1,564

@Hongske

Whoops, sorry, I meant image buttons that possibly change on hover? They've become really popular! Things like "mail" "trades" "friend me". For example, the image buttons/links on Destiny's profile or Luscious's profile. Does that make any sense? X:

Edit:// Ohh, I use Chrome now so I no longer have the Web Developer toolbar.. so that's why I use MeasureIt :)



#10045 Posted on: 05/17/11 at 10:37am
Hongske


Hover
Avatar
Post (0)

402
1,632

@Mekiko:
Ah, that! I'll add about those too. :D

And I seeeeee... I'll add MeasureIt for Chrome then.

Edit:

I only found 1 MeasureIt for Chrome extension, but it has access to your cookies & web history... :/


-♥-
Subeta CSS Compendium

ON HIATUS