Break down the CSS tags? in Off Topic

ID:181632
 
Jan 8 2010, 1:20 pm
Are there any tools out there that will let you break down the BYOND member sites into just the CSS tags? It would be nice to be able to get an overview of how the CSS tags are laid out on the sites so that when you design some CSS, you don't have to pick your way through the source code to try and figure out how everything is put together.
#1 Jan 8 2010, 2:09 pm
If you use Firefox the Web Developer addon has several tools that can help you pick through the CSS objects.
#2 Jan 8 2010, 2:12 pm
In response to Danial.Beta (#1)
That's being kind of vague...
#3 Jan 8 2010, 2:25 pm
I use the Firebug plugin with Firefox, and that lets me inspect any element of the page I want to. (Word of warning: There's a bug in the way Firebug and Greasemonkey interact in Firefox 3.5, so until the next upgrade to Firebug you should turn off Greasemonkey when using most parts of BYOND.)

Lummox JR
#4 Jan 8 2010, 3:08 pm
I'm going to second Lummox JR and D.B's posts: use Firebug and the Web Developer Toolbar in Firefox.
#5 Jan 8 2010, 3:26 pm
In response to Airjoe (#4)
Yeah, I'm using that now and I'm picking apart the CSS and turning it into little diagrams on paper.
#6 Jan 8 2010, 5:53 pm
In response to Foomer (#2)
Install the Web Developer addon, start looking through the menus. There are lots of ways to show all kinds of CSS information on a page. There is even an option to open a CSS editing toolbar so you can monkey around with the CSS in real time. I'm not on Firefox right now so I can't remember any specifics of what the menu items are called, but it is all clearly labeled.
#7 Jan 10 2010, 12:12 am
I agree with Scoob, the Web Developer add-on is handy.

One of the simplest ways of navigating the stylesheets of a page is to simply right click the page and go to "Web Developer > CSS > View Style Information" (Ctrl+Shift+Y). Then you can select a part of the page---it highlights the portion you're hovering, so you know what's getting selected---and click on it to display the styles applied to that element. For example, the sidebar boxes over there ("Thanks for being a Member..." and "Top Benefactors") turns up the following for me:
http://www.byond.com/rsc/members2.css

#new_left_sidebar (line 963)

{

color: white;

}

div#new_left_sidebar (line 965)

{

width: 200px;

color: white;

margin-top: 10px;

}

---and I can click on the individual elements to determine finer levels of detail (say, for each box, or even for each line of text).

There are of course other features regarding CSS including the live-edit already mentioned. That, and a ton of other features for other aspects of Web Development uses.
#8 Jan 10 2010, 2:37 am
In response to Kuraudo (#7)
I've got both Web Developer and FireBug now and I feel that Firebug does a better job of breaking down the CSS as a whole, although I find the web developer addons to be useful for finding the name of specific CSS classes quickly.
#9 Jan 12 2010, 2:28 pm
In response to Kuraudo (#7)
Kuraudo wrote:
I agree with Scoob,

I'm a big fan of that.