Warning: Creating default object from empty value in /www/subeta.net/forums/index.php on line 49 Subeta CSS Compendium - Subeta
Subeta CSS Compendium
#1 :: May 11th, 2011 @ 5:12 PM
Hongske
Tongue Wagger

User Avatar: 367347
1,632 Posts
402 Achievements

0



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.

Last Edit by: Hongske 2/08/12 - 4:26:21 pm

-♥-
Subeta CSS Compendium

ON HIATUS


#2 :: May 11th, 2011 @ 5:17 PM
Renaissance
is a Time Lord

User Avatar: 222381
16,467 Posts
583 Achievements

0





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


#3 :: May 11th, 2011 @ 5:27 PM
Hongske
Tongue Wagger

User Avatar: 367347
1,632 Posts
402 Achievements

0



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

-♥-
Subeta CSS Compendium

ON HIATUS


#4 :: May 11th, 2011 @ 5:38 PM
Smoke
Gossiper

User Avatar: 287165
1,312 Posts
796 Achievements

0




@Hongske
You my dear are awesome!



#5 :: May 11th, 2011 @ 5:45 PM
Hongske
Tongue Wagger

User Avatar: 367347
1,632 Posts
402 Achievements

0



@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).

Last Edit by: Hongske 5/11/11 - 7:23:02 pm

-♥-
Subeta CSS Compendium

ON HIATUS


#6 :: May 16th, 2011 @ 4:15 PM
Pinto
is shady

User Avatar: 473201
6,164 Posts
625 Achievements

0




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



#7 :: May 16th, 2011 @ 4:45 PM
Hongske
Tongue Wagger

User Avatar: 367347
1,632 Posts
402 Achievements

0



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

-♥-
Subeta CSS Compendium

ON HIATUS


#8 :: May 16th, 2011 @ 4:49 PM
Major
Lypsyl

User Avatar: 124125
10,139 Posts
1,507 Achievements

0



@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.


#9 :: May 16th, 2011 @ 4:58 PM
Organ Donor
Ringo

User Avatar: 302996
4,068 Posts
1,251 Achievements

0





@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?


Forumset by me - art by Toki_chan


#10 :: May 16th, 2011 @ 5:19 PM
Hongske
Tongue Wagger

User Avatar: 367347
1,632 Posts
402 Achievements

0



@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


#11 :: May 16th, 2011 @ 5:39 PM
Organ Donor
Ringo

User Avatar: 302996
4,068 Posts
1,251 Achievements

0





@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. ^_^


Forumset by me - art by Toki_chan


#12 :: May 16th, 2011 @ 5:49 PM
Hongske
Tongue Wagger

User Avatar: 367347
1,632 Posts
402 Achievements

0



@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


#13 :: May 16th, 2011 @ 7:42 PM
MishieMoo
is lonely

User Avatar: 291437
446 Posts
303 Achievements

0




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 =)


#14 :: May 16th, 2011 @ 7:44 PM
Organ Donor
Ringo

User Avatar: 302996
4,068 Posts
1,251 Achievements

0





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


Forumset by me - art by Toki_chan


#15 :: May 16th, 2011 @ 8:41 PM
The Beanbag Collector
Virtual

User Avatar: 416922
2,580 Posts
831 Achievements

0







@ 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? :)


Unique ~ Flight Rising ~ last.fm ~ deviantArt

Last Edit by: Virtual 5/16/11 - 11:39:04 pm



#16 :: May 16th, 2011 @ 9:45 PM
Mekiko
Tongue Wagger

User Avatar: 183414
1,563 Posts
476 Achievements

0






*@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!♥




#17 :: May 16th, 2011 @ 11:28 PM
Yizzle-Poo
gets around

User Avatar: 309019
2,027 Posts
625 Achievements

0



@Hongske

This was so helpful! Thank you so much!!

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


#18 :: May 17th, 2011 @ 6:07 AM
Hongske
Tongue Wagger

User Avatar: 367347
1,632 Posts
402 Achievements

0



@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! :]

Last Edit by: Hongske 5/17/11 - 6:26:42 am

-♥-
Subeta CSS Compendium

ON HIATUS


#19 :: May 17th, 2011 @ 8:09 AM
Mekiko
Tongue Wagger

User Avatar: 183414
1,563 Posts
476 Achievements

0






*@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 :)♥




Last Edit by: Mekiko 5/17/11 - 8:10:15 am


#20 :: May 17th, 2011 @ 10:37 AM
Hongske
Tongue Wagger

User Avatar: 367347
1,632 Posts
402 Achievements

0



@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... :/

Last Edit by: Hongske 5/17/11 - 10:45:28 am

-♥-
Subeta CSS Compendium

ON HIATUS


#21 :: May 17th, 2011 @ 1:20 PM
Hanner
is Melody's Little Helper

User Avatar: 272163
1,592 Posts
498 Achievements

0





@Hongske
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!




DEVIANTART:pie:
BUYING MKBs! PLEASE COMMENT/SMAIL!


#22 :: May 17th, 2011 @ 2:31 PM
mucha
made a huge mistake

User Avatar: 87878
1,484 Posts
336 Achievements

0



≧◉◡◉≦
@Hongske

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?



#23 :: May 17th, 2011 @ 3:26 PM
JENNEEVA
is a mall rat

User Avatar: 302577
4,474 Posts
656 Achievements

0



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


#24 :: May 17th, 2011 @ 5:27 PM
Hongske
Tongue Wagger

User Avatar: 367347
1,632 Posts
402 Achievements

0



@Hanner:
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).

@viticus:
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! :]

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

-♥-
Subeta CSS Compendium

ON HIATUS


#25 :: May 17th, 2011 @ 5:36 PM
Organ Donor
Ringo

User Avatar: 302996
4,068 Posts
1,251 Achievements

0





@Hongske

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

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

Code:

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

#mail a:hover img, #wish a:hover img, #commission a:hover img {filter: alpha(opacity=100); -moz-opacity: 1; opacity: 1;cursor:crosshair;}
#mail img, #commission img, #wish 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:

Code:

<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!


Forumset by me - art by Toki_chan


#26 :: May 17th, 2011 @ 8:04 PM
Tilcara
is a sun worshipper

User Avatar: 519739
1,979 Posts
693 Achievements

0




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


#27 :: May 17th, 2011 @ 8:20 PM
MishieMoo
is lonely

User Avatar: 291437
446 Posts
303 Achievements

0




@Hongske
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 MariMoon 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...


#28 :: May 18th, 2011 @ 8:25 AM
Hongske
Tongue Wagger

User Avatar: 367347
1,632 Posts
402 Achievements

0



@Ringo:
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. :/

@Tilcara:
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?


@MishieMoo:
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

-♥-
Subeta CSS Compendium

ON HIATUS


#29 :: May 18th, 2011 @ 11:47 AM
Organ Donor
Ringo

User Avatar: 302996
4,068 Posts
1,251 Achievements

0





@Hongske

Now I have to think! XD

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

Code:

#column2 {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. ^^



Last Edit by: Ringo 5/18/11 - 11:47:51 am

Forumset by me - art by Toki_chan


#30 :: May 18th, 2011 @ 2:11 PM
TiMESoNG
is a tomb raider

User Avatar: 282858
1,420 Posts
473 Achievements

0



@Hongske
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 #pet_info 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 #pet_desc section, so I'm not sure if there's a specific way to code for a second scrollbox.


Amazing art by Cliodna.



#31 :: May 18th, 2011 @ 4:01 PM
Hongske
Tongue Wagger

User Avatar: 367347
1,632 Posts
402 Achievements

0



@Ringo:
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.

@TiMESoNG:
You're very welcome! I'm really glad that people find some use in this! :]
Actually, the white part is a combination of your #page and #content containers, your #pet_info doesn't seem to have a colour set to it. You can make the #page & content transparent, the #pet_info white and less wide with this:
Code:
#page, #content {background: transparent;}
#pet_info {background: #FFF; 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:
Code:
#page {background: transparent;}
#content {background: #FFF; 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:
Code:
<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:
Code:
#boxname {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:

-♥-
Subeta CSS Compendium

ON HIATUS


#32 :: May 18th, 2011 @ 4:32 PM
TiMESoNG
is a tomb raider

User Avatar: 282858
1,420 Posts
473 Achievements

0



@Hongske
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?


Amazing art by Cliodna.



Last Edit by: TiMESoNG 5/18/11 - 9:12:29 pm


#33 :: May 18th, 2011 @ 5:31 PM
Organ Donor
Ringo

User Avatar: 302996
4,068 Posts
1,251 Achievements

0





@Hongske - 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


Forumset by me - art by Toki_chan


#34 :: May 18th, 2011 @ 6:26 PM
Tilcara
is a sun worshipper

User Avatar: 519739
1,979 Posts
693 Achievements

0




@Hongske

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 :

Code:

<div id="playlist">
<center>
[spoiler]
• <a href="http://www.youtube.com/watch?v=SXpnI52cLEc">[O'Death]</a>
• <a href="http://www.youtube.com/watch?v=ZoLn7B5f_Es">[Ease My Pain]</a>
• <a href="http://www.youtube.com/watch?v=ZAr1RuvyHbQ">[Vampire]</a>
• <a href="http://www.youtube.com/watch?v=yDHRRoMFD2o">[True]</a>
• <a href="http://www.youtube.com/watch?v=bT63PZ6zF9g">[For Whom the Bell Tolls]</a>
[/spoiler]
</center>
</div>


css :
Code:

#playlist .spoiler{width:200px;} /*define the width of your spoiler bar*/
#playlist .spoiler div{margin:0;padding:0;} /*if you didn't use the resetting code earlier*/
#playlist .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 #61554a; /*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*/

#playlist .spoiler_text {width: 168px; /*define the width of the text box if you want it to be wider or not*/
border: 2px solid #2d0404; /*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*/

Last Edit by: Tilcara 5/22/11 - 6:44:55 am


#35 :: May 18th, 2011 @ 8:22 PM
Hope
is a survivor

User Avatar: 165834
15,940 Posts
1,194 Achievements

0





@Hongske
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!


#36 :: May 18th, 2011 @ 8:50 PM
MishieMoo
is lonely

User Avatar: 291437
446 Posts
303 Achievements

0




@Hongske

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.


#37 :: May 19th, 2011 @ 12:36 AM
Eco
Tongue Wagger

User Avatar: 459298
1,700 Posts
191 Achievements

0





@Hongske

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 Charm. 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

Code:
#tag {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

Code:
#tag:hover {opacity: 1; filter:alpha(opacity=100);}

Pretty self-explanatory, I think, and it should work as long as there's no space between #tag 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


Last Edit by: Eco 5/19/11 - 9:43:57 pm


by phobia



#38 :: May 21st, 2011 @ 4:28 PM
Hongske
Tongue Wagger

User Avatar: 367347
1,632 Posts
402 Achievements

0



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


@TiMESoNG:
You're very welcome!

And I took a look at your code. Apparently, because you used "position:absolute" on containers within #page & #content, 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 #pet_info thing a bit wider and taller so that its background covers all the info (including the TC):
code

(Also fixed your code a bit. There were a lot of contradictory properties.)


@Ringo:
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! :]


@Tilcara:
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!


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


@MishieMoo:
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)


@Eco:
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! :]

-♥-
Subeta CSS Compendium

ON HIATUS


#39 :: May 21st, 2011 @ 5:03 PM
TiMESoNG
is a tomb raider

User Avatar: 282858
1,420 Posts
473 Achievements

0



@Hongske
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?


Amazing art by Cliodna.



#40 :: May 21st, 2011 @ 5:58 PM
MishieMoo
is lonely

User Avatar: 291437
446 Posts
303 Achievements

0




@Hongske
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