Forum:Dot list

How can you change the style of a dot list? For example, this is a normal list: I want it like this (different dot, no first tabulation):
 * Line 1
 * Line 2
 * Line 2.1
 * Line 3

• Line 1

• Line 2

• Line 2.1

• Line 3

And with change style, I mean through MediaWiki.css. Thanx, also if you know how to do the same with an ordered list I'd appreciated.


 * You mean bullets, and if you want to change it i dont know but i think the 2nd bullet list is enabled on source mode. TheBen10Mazter (Talk -Blog -Contribs) 14:47, July 30, 2011 (UTC)


 * I want to change how the wiki rendered the code

in a way that he gets something like this:
 * Line 1
 * Line 2
 * Line 2.1
 * Line 3

• Line 1

• Line 2

• Line 2.1

• Line 3

but basically I want to know how can I can customize the wiki list (also the ordered list with #).


 * Really ben he wants a bit of css,this is not your field so you do not need to commentTama 63  14:53, July 30, 2011 (UTC)


 * According to my best knowledge, you're limited as to what you can customize the easy way, as shown here. The hard way to is to use a an image for the bullet indicator. Additionally you might have difficulties with being able to find a proper css selector to modify the default style. — Sovq 14:59, July 30, 2011 (UTC)

CSS SOLUTION!!

to change to circles!

.. for any image:)...hope that helps:)--


 * The problem with the above code (apart from the fact that ul.a won't cover most of the lists) is that a lot of skin lists use  and if you add a custom style to all lists, your code will override the type:none style and these mentioned lists will start look bugged. — Sovq 15:07, July 30, 2011 (UTC)

Basically are you saying that I can only change the list style using html in the page, not via MediaWiki css? And anybody knows how to remove the first tabulation? I don't like how it's moved on the right, I prefer it attached to the left border like a normal sentence.


 * Hmm!....agree with Sovq..but my code works under "normal" conditions:)


 * You can try to cheat:

.WikiaArticle ul { list-style-type: none; }

.WikiaArticle ul li:before { content: "• "; }
 * No idea if it'll work though. As for the left indent, change the left margin of the list (to something like 1.3em). Edit: seems to work, but may be broken in older browsers. - Tjcool007 (Talk) 15:25, July 30, 2011 (UTC)


 * I would advise to change the bullet list indicators, if needed, on a page to page basis. On the Dead Frontier Wiki, there was an attempt to replace all "regular" bullet list indicators with an image using this code:

ul li { list-style-image: url(http://images.wikia.com/deadfrontier/images/1/13/Grey_Bullet.png); }				/* List Icon - Default */ ul li:hover { list-style-image: url(http://images.wikia.com/deadfrontier/images/0/00/Red_Bullet.png); }				/* List Icon - Hover */ .wikia-menu-button > li:hover  /* Excludes active bullets from My Home Tabs */ .wikia-tabs ul li,		/* Excludes active bullets from My Home Tabs */ .WikiaFooter .toolbar .tools > li   /* Excludes active bullets from Hover Toolbar */ .WikiaHeader ul li,		/* Excludes inactive bullets from Wikia Header */ .WikiaHeader li:hover,		/* Excludes active bullets from Wikia Header */ .WikiaHeader nav ul {		/* Excludes inactive bullets from Wikia Header */ list-style-image: none; }
 * 1) toc ul,			/* Excludes inactive bullets from Table of Contents */
 * 2) toc ul li:hover,		/* Excludes active bullets from Table of Contents */
 * 3) page_controls li,		/* Excludes active bullets from Page Controls */
 * 4) user_masthead li,		/* Excludes active bullets from the User Page Navigation */
 * 5) page_tabs li,			/* Excludes active bullets from Page Tabs */
 * 6) widget_1_content li,
 * 7) widget_2_content li,
 * 8) widget_3_content li,
 * 9) widget_4_content li,
 * 10) widget_5_content li,
 * 11) widget_6_content li,
 * 12) widget_7_content li,
 * 13) widget_8_content li,
 * 14) widget_9_content li,
 * 15) widget_10_content li,		/* Excludes active bullets from Widget Links */
 * 16) wpGoRegister,			/* Excludes active bullets from Login Tabs */
 * 17) myhome-hot-spots li:hover,	/* Excludes active bullets from My Home Hot Spots */


 * But as you see, the list of exclusions that had to be made was quite big and most likely incomplete, so the idea was dropped. — Sovq 15:29, July 30, 2011 (UTC)

But if I simply change from bullet to disc, do I have to do on page to page? Well, I'm happy enough with only reducing the first tab, what's the code for that?

You don't need a long list of exclusions. If you want to only change bulleted lists in articles, use this (example from BioShock Wiki): .WikiaArticle ul { list-style:square outside url("list-style:square outside url("http://images1.wikia.nocookie.net/__cb21711/common/skins/monobook/bullet.gif"); "); } We've used this code on BioShock Wiki since Oasis was first implemented, and it doesn't conflict with anything. Also, you said something about wanting to "remove the first tabulation": if you want to change the indent, then just change the margin by adding  into the style code above. --Gardimuer { ʈalk } 18:43, July 30, 2011 (UTC)


 *  Gardimuer : If I wanted to take your code, which changes the Oasis bullet to the Monobook blue bullet, but I wanted it to be throughout the wiki, anywhere that there is a bulleted list, how would I re-write your code? Thanks! — Spike Toronto  08:35, July 31, 2011 (UTC)


 * There aren't many parts of the Oasis skin that use bulleted lists outside of articles. I suggest you find each instance of that type of list being used, then use FireBug (or a similar tool) to discover what the class/id name of that list is. (Or you can link me to an example of the list, and I can discover the class/id of it.) Then, you would simply add that class/id name into the style code above, separating it from the other class names with a comma. For example, the "Community Corner" module on the Special:WikiActivity page has a specified list style, so you would add its class like so:

 .CommunityCornerModule ul, .WikiaArticle ul { list-style:square outside url("list-style:square outside url("http://images1.wikia.nocookie.net/__cb21711/common/skins/monobook/bullet.gif"); "); }
 * Gardimuer { ʈalk } 16:16, July 31, 2011 (UTC)


 *  Gardimuer : We have bulleted lists in the following namespaces:
 * User:
 * User talk:
 * Project:
 * Project talk:
 * Template:
 * Template talk:
 * MediaWiki:
 * MediaWiki talk:
 * Would an element like    cover everything? Something like this:

 list-style:square outside url("list-style:square outside url("http://images1.wikia.nocookie.net/__cb21711/common/skins/monobook/bullet.gif"); "); }
 * 1) WikiaPage ul {
 * Would that change the bullet created by * to the Monobook blue bullet everywhere throughout? (Please excuse my CSS ignorance … Smiley.png) Thanks! — Spike Toronto  06:56, August 1, 2011 (UTC)

I copied this code: .WikiaArticle ul { list-style:disc; margin-left: 1.5em; } It works, the only problem is that the list in the wiki activity is out of the border (open the link), Do I need to copy the "exclusions" of Sovq?


 * You could add, or you could just use RecentChanges.

.WikiaArticle ul { list-style:disc; margin-left: 1em; } .page-Special_WikiActivity .WikiaArticle ul {list-style:none;} This code doesn't solve the problem... did I type it wrong?
 * Interesting, your wiki is in a different language so the namespace was encoded in your language. I didn't think it would do that. Change  to , and it should work.

I was about to say that even wit with "Speciale" (the namespace in Italian), or ".page-Speciale:WikiActivity" doesn't work... damn edit conflict.

Forget it, I solved using this: .WikiaArticle ul { list-style:disc; margin-left: 1em; } .page-Speciale_WikiActivity .WikiaArticle ul { list-style:none; margin-left: 2em; }