Admin Forum:What is the CSS used for...

Forums: Admin Central Index → General Questions → What is the CSS used for...

Central's forums are a place for the community to help other members.
To contact staff directly or to report bugs, please use Special:Contact.

Note: This topic has been unedited for 4374 days. It is considered archived - the discussion is over. Do not add to unless it really needs a response.

Do you know the css for the parts circled in red on this image (the little containers is just for one only; if you do not understand, please reply):

Sam Wang (talk) 05:02, April 27, 2012 (UTC)

Please provide a link to the page where you saw this. --Gardimuer ^{ ʈalk } 05:18, April 27, 2012 (UTC)

www.wikia.com Sam Wang (talk) 05:29, April 27, 2012 (UTC)

There are many, many CSS styles that affect those elements. I could copy them all down, but it would take a long time and would be of dubious use anyway. I really suggest that you get a utility like Firebug so that you can examine the CSS of a page yourself when you need it. --Gardimuer ^{ ʈalk } 07:56, April 27, 2012 (UTC)

I don't really understand how to use it. Can you copy it to me please? I don't feel it would be of dubious use, so can you copy it for me please? Sam Wang (talk) 08:30, April 27, 2012 (UTC)

Right click -> Inspect element, on the part you want to see. It won't always work, so you may have to move up, or down the list to find the right bit, but it will glow brown when you've got it. The CSS is in the menu to the right, or you can see the code for the page through a link above that CSS. I prefer to open it in a new tab for easier reading. User:Cåm/Signature 10:01, April 27, 2012 (UTC)

(Reset indent) I'm sorry, but I don't quite know how to use Inspect element Sam Wang (talk) 01:09, April 28, 2012 (UTC)

Read these Firebug information pages if you haven't already:

• http://getfirebug.com/html
• http://getfirebug.com/css

Firebug isn't the only tool that allows you to inspect the css styling used in a page. The latest version of Firefox has something like Firebug already included with the browser. All you have to do is right click on an element and then choose "Inspect Element (Q)" from the menu that pops up. This will cause a bar to appear at the bottom of the page, and if you click on the "Style" button in that bar, a sidebar will appear which shows the CSS styles affecting the element that you chose to inspect.

Google Chrome has something similar. Right click on an element, click on "Inspect element" in the menu popup, and a bar will appear at the bottom of the page to display the html source and the css styles affecting it.

Internet Explorer has the "developer tools" popup which basically works the same way. To access it, click the F12 button on your keyboard while you are viewing a page in Internet Explorer.

Safari also has developer tools which you can access by clicking "Show Web Inspector" in the Developer menu (after you have enabled it in your preferences).

--Gardimuer ^{ ʈalk } 02:21, April 28, 2012 (UTC)

Gardimuer has covered far more browsers than I (I usually use chrome), but if it's any help I made a quick guide here. I figured I'd put it on my test wiki to stop Central getting cluttered with unnecessary files, but hopefully it helps. User:Cåm/Signature 02:29, April 28, 2012 (UTC)

You are actually wasting time teaching me how to do it myself. It could have taken much less time if you just copied it straight from it Sam Wang (talk) 03:17, April 28, 2012 (UTC)

I appreciate the time you put into helping me, but it wasn't what I needed Sam Wang (talk) 03:22, April 28, 2012 (UTC)

I was going for the teach-a-man-how-to-fish-and-he'll-feed-himself-for-a-lifetime approach. Also it's not just a few lines of code - this is the code for the page. What I did was show you how to isolate what you wanted from it. I'm not going to lie, copying the code for those boxes in particular probably won't work straight off. At a guess, they'll be dependant on something else, so it's easier in the long run to teach you rather than you bombard us with lots of extra questions that can be avoided. As Gardimuer said above, giving just those bits of code woul be of "dubious use anyway". How is showing you how to do something, and thus allowing you to do more of this sort of thing in the future, wasting time? User:Cåm/Signature 11:09, April 28, 2012 (UTC)