FANDOM


wikipedia swatch

rule name: .wikipedia_swatch

author: User:Tatwell

added: 11 Sep 2006

I created this swatch as a container for Wikipedia contributors who might want to independently publish their contributions on their own website or blog.

It is supposed to include the Wikipedia logo as a watermark in the lower right hand corner. However efforts to display this in the sample below using inline style settings have failed, apparently as a result of excisions made by the MediaWiki parser. See notes below for more information.

SyntaxEdit

Declaration blockEdit

/* swatch outer block */ 
.wikipedia_swatch 
{ 
 width:auto; margin:.5em; padding:1em;
 font:1em/1.4em Georgia,serif;
 color:#330909;
 border:1px solid #eee;
 background-image:url('http://css.wikia.com/images/3/37/Wikipedia_lite.png'); 
 background-color:#f9f9f3;
 background-repeat:no-repeat;
 background-position:bottom right;
} 

/* swatch header */
.wikipedia_swatch_h2
{ 
 display:block;
 margin:0;
 font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;
 font-weight:normal;
 font-size:1.8em;
}


InlineEdit

/* swatch outer block */
style="width:auto; margin:.5em; padding:1em; font:1em/1.4em Georgia,serif; color:#330909; border:1px solid #eee; background-image:url('http://css.wikia.com/images/3/37/Wikipedia_lite.png'); background-color:#f9f9f3; background-repeat:no-repeat; background-position:bottom right;"

/* swatch header -- apply inline to span or div tag */
style="display:block; margin:0; font-family:'Palatino Linotype', 'Book Antiqua', Palatino, serif; font-weight:normal; font-size:1.8em;"

SampleEdit

note: inline background setting background-image:url('images/3/37/Wikipedia_lite.png'); removed -- see notes below

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

For sample of swatch rendered as intended using inline style settings, click here

NotesEdit

Unable to apply background-image:url('http://css.wikia.com/images/3/37/Wikipedia_lite.png') inline, though the code itself should work according to tests here.

It appears MediaWiki's parser removes any inline code when it detects a background image setting. I've been unable to verify this anywhere in the MediaWiki documentation.

This is how the parser renders the sample with inline code above:

<div> <p><span style="display:block; margin:0; font-family:'Palatino Linotype', 'Book Antiqua', Palatino, serif; font-weight:normal; font-size:1.8em;">Lorem Ipsum</span> </p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> </div>

This is the image:

Wikipedia lite

Ad blocker interference detected!


Wikia is a free-to-use site that makes money from advertising. We have a modified experience for viewers using ad blockers

Wikia is not accessible if you’ve made further modifications. Remove the custom ad blocker rule(s) and the page will load as expected.