Wikia

Community Central

Format code / preformatted CSS?

86,776pages on
this wiki

Forum page

Revision as of 15:43, October 5, 2010 by ArmAIIholic (wall | contribs)

This Forum has been archived

Visit the new Forums
Forums: Index Community Central Forum Format code / preformatted CSS?
Wikia'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 1297 days. It is considered archived - the discussion is over. Do not add to unless it really needs a response.

I am trying to find how to format code / preformatted text in CSS... And I have no luck with searching the forum... Basically my page looks like this sample where I have blocks with coding that I want to make larger and in a box like this here. By the way, my CSS knowledge is modest, but I noticed that some things are different. I tried searching other Monaco.css from other site, but no one has something like that. The final solution is making a template, but I would like to do it via CSS.

-- ArmAIIholic 16:41, October 4, 2010 (UTC)

So you want code/pre text to show in a box with rounded edges and a shadow that will expand when the viewer hovers over it with the cursor? You could do that by placing this in your wiki's MediaWiki:Monaco.css and/or MediaWiki:Wikia.css:
pre, code {
	border-radius:4px;
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
	box-shadow:2px 3px 2px #888888;
	-moz-box-shadow:2px 3px 2px #888888;
	-webkit-box-shadow:2px 3px 2px #888888;
}

pre:hover, code:hover {
	width: 953px;
}
The "border-radius" parts gives rounded edges in various browsers, "box-shadow" parts give a shadow outside of the box in various browsers. The parts with ":hover" give the style for when the viewer rests their cursor over the box.
~ Gardimuer { ʈalk } 00:01, October 5, 2010 (UTC)
Marvelous :) thanx many times! Just to repeat one part of the question -- where can I find the pre, code, html, body, body,td,th and all other sorts of "commands" to improve Monaco.css. Everything I've found is based on "learning from example", but I didn't find all-in-one tutorial that describes Monaco.css editing....
Thanx again ArmAIIholic 13:32, October 5, 2010 (UTC)

Now I have one more problem with this example -- it shows ok when I am logged in, but when I log out, delete cache and history and start browser again, it seams it doesn't load these settings and I configured both MediaWiki:Monaco.css and MediaWiki:Wikia.css. Is it due to recent changes at Wikia? ArmAIIholic 15:43, October 5, 2010 (UTC)

Around Wikia's network

Random Wiki