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)


 * Didn’t work. Shows how little I know! — Spike Toronto  16:38, 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; }

I solved a problem and another one showed up: I'm using the code above and there is a conflict with the "read more" section, (the footer where there are the suggestion to other articles), basically a dot is added before the images. How can I exclude that section? I didn't really get the post of Gardimuer... and since we are at it, did you notice that the bloglist now have dots? I think it's very ugly, so I wish to exclude that element too. Thank you.


 * Like I said, there are a couple of blocks on the wikis, which use no list styling by default - so you break that when adding bullet styling. You can try to do exclusions by specifying the css selector more precisely (like using  or  ) but it will only get you so far. There is no one selector for just the bullet lists input 'by hand' (at least not to my knowledge). There is always the chance that another block Wikia introduces will be in conflict with your modifications.


 * As for the problem in question; this should be put BELOW the code that you added previously for the lists:

.RelatedPagesModule ul {none outside none;}


 * — Sovq 13:40, August 1, 2011 (UTC)


 * Blogs would be, and I believe Sovq meant.


 * Oops, my bad, thanks. — Sovq 13:47, August 1, 2011 (UTC)

Ok thank you all, I fixed the related pages module with this code: .RelatedPagesModule ul {list-style:none outside none; margin-left: .5em;} I had to add the margin left otherwise the images would have been broke on two rows. The blog code doesn't work though... well whatever.