User:SwiftSys

Many, many years experience as a web developer, specialise in CSS, JavaScript and php, though recently turned to Mediawiki and currently learning the code's etc. At present I am reproducing some of my own designs into Mediawiki code, the plan is to reproduce a skin I'm using at my website (without the core hacks), a JavaScript based MegaFolio Image Gallery as well as the MegaMenu extension I'm working on at the moment.

I'm a real people person, I like to help people and when it's in my power to help I never refuse. I'm happy to chat, though I usually find because I'm a geek most people shun me (or yawn a lot), so generally I just ask questions and listen.

= MegaMenu =

While I'm in the process of creating the MegaMenu extension the following is a tutorial on how to hack the core code to achieve the same result;

CSS
Add the following to common.css located at [yourwikiurl]/index.php/MediaWiki:Common.css

.megamenu_container {	background-color:rgba(255,255,255,0.6); border:1px solid #eee; border-radius:2px; box-shadow:0 0 .5em #999; color:inherit; height:44px; margin-bottom:10px; margin-left:21px; position:relative; width:940px; z-index:2; }

.megamenu_fixed {	-moz-border-radius:0 0 3px 3px; -moz-box-shadow:0 2px 3px #ccc; -o-box-shadow:0 2px 3px #ccc; -webkit-border-radius:0 0 3px 3px; -webkit-box-shadow:0 2px 3px #ccc; background-color:#3d3d3d; background-image:url(../images/bg.png); border:solid 1px #434343; border-radius:0 0 3px 3px; box-shadow:0 2px 3px #ccc; height:44px; left:50%; margin:0 auto 0 -480px; position:fixed; top:0; width:960px; z-index:2; }

.megamenu {	font-family:alef; font-size:13px; list-style:none; margin:0; padding:0; }

.megamenu >li {	-moz-transition:background-color .4s ease-out; -ms-transition:background-color .4s ease-out; -o-transition:background-color .4s ease-out; -webkit-transition:background-color .4s ease-out; background-color:transparent; border:none; display:inline; margin:0; padding:14px 0 15px 10px; transition:background-color .4s ease-out; }

.megamenu_fixed .megamenu >li {	padding:15px 0 15px 10px; }

.megamenu >li:hover {	background-color:#202020; }

.megamenu >li.active,.megamenu >li.active:hover {	background-color:#131313; }

.megamenu_container .megamenu >li:first-child {	-moz-border-radius:3px 0 0 3px; -webkit-border-radius:3px 0 0 3px; border-left:none; border-radius:3px 0 0 3px; }

.megamenu_fixed .megamenu >li:first-child,.megamenu_carousel .megamenu >li:first-child {	-moz-border-radius:0 0 0 3px; -webkit-border-radius:0 0 0 3px; border-left:none; border-radius:0 0 0 3px; }

.megamenu >li:last-child {	-moz-box-shadow:none; -o-box-shadow:none; -webkit-box-shadow:none; box-shadow:none; }

.megamenu >li a { color:#bbb; text-decoration:none; }

.megamenu >li a:hover {	color:#efefef; }

.megamenu >li span a { color:#080; }

.megamenu >li a:focus {	outline:none; }

.megamenu >li .drop,.megamenu >li .nodrop {	color:#080; font-size:12px; line-height:44px; outline:0; text-decoration:none; text-shadow:none; text-transform:uppercase; }

.megamenu >li .drop {	background:url(../images/down.png) no-repeat right 18px; padding:14px 20px 20px 0; }

.megamenu >li .nodrop {	padding:14px 5px 20px 0; }

.megamenu >li .drop:hover,.megamenu >li .nodrop:hover {	cursor:pointer; }

{	-moz-border-radius:0 0 3px 3px; -webkit-border-radius:0 0 3px 3px; background:url(../images/button_up.png) right no-repeat #121212; border-radius:0 0 3px 3px; display:block; height:46px; left:50%; margin:0 auto 0 510px; position:fixed; top:0; width:35px; z-index:2; }
 * 1) megamenu_trigger

{	background:url(../images/button_down.png) right no-repeat #121212; }
 * 1) megamenu_trigger.active

.megamenu_carousel_prev,.megamenu_carousel_next {	display:block; height:30px; margin:-15px 0 0; padding:0; position:absolute; top:50%; width:15px; }

.megamenu_carousel_prev:hover,.megamenu_carousel_next:hover {	cursor:pointer; }

.megamenu_carousel_prev {	background:url(../images/previous.png) no-repeat; left:-15px; }

.megamenu_carousel_next {	background:url(../images/next.png) no-repeat; right:-15px; }

.megamenu .dropdownspacer {	display:block; float:left; height:5px; width:100%; }

.megamenu >li .megamenu_fullwidth {	background-color:#F5E3CB; border:1px solid #eee; border-radius:2px; border-top:none; box-shadow:0 0 .5em #999; float:left; left:-9999em; margin:0 0 40px -1px; padding:18px 0; position:absolute; top:49px; width:960px; z-index:9998; }

.megamenu_push .megamenu >li .megamenu_fullwidth {	position:relative; top:5px; }

.megamenu >li:hover .megamenu_fullwidth {	left:0; }

.megamenu >li .megamenu_scrollbars {	height:540px; width:980px; }

.megamenu_scrollbars .megamenu_scroller_container {	height:100%; overflow:hidden; position:relative; width:100%; }

.megamenu_scrollbars .megamenu_scroller_container .megamenu_scroll_area {	bottom:0; left:0; overflow:scroll; overflow-x:hidden; position:absolute; right:0; top:0; }

.megamenu_scrollbars .megamenu_scroller_container .pane {	-moz-border-radius:3px; -moz-box-shadow:0 1px 1px #000; -o-box-shadow:0 1px 1px #000; -webkit-border-radius:3px; -webkit-box-shadow:0 1px 1px #000; background:#F4F4F4; border-radius:3px; bottom:0; box-shadow:0 1px 1px #000; position:absolute; right:8px; top:0; width:1px; }

.megamenu_scrollbars .megamenu_scroller_container .pane .slider {	-moz-border-radius:3px; -webkit-border-radius:3px; background:#CCC; border-radius:3px; margin-left:-2px; position:relative; width:5px; }

.megamenu_scrollbars .megamenu_scroller_container .pane .slider:hover {	cursor:pointer; }

.megamenu_scrollbars .megamenu_scroller_container:hover .pane,.megamenu_scrollbars .pane.active {	visibility:visible; }

.megamenu .col_1,.megamenu .col_2,.megamenu .col_3,.megamenu .col_4,.megamenu .col_5,.megamenu .col_6,.megamenu .col_7,.megamenu .col_8,.megamenu .col_9,.megamenu .col_10,.megamenu .col_11,.megamenu .col_12 {	float:left; margin-left:15px; margin-right:15px; position:relative; }

.megamenu .col_1 {	width:50px; }

.megamenu .col_2 {	width:280px; }

.megamenu .col_3 {	width:210px; }

.megamenu .col_4 {	width:290px; }

.megamenu .col_5 {	width:370px; }

.megamenu .col_6 {	width:450px; }

.megamenu .col_7 {	width:530px; }

.megamenu .col_8 {	width:610px; }

.megamenu .col_9 {	width:690px; }

.megamenu .col_10 {	width:770px; }

.megamenu .col_11 {	width:850px; }

.megamenu .col_12 {	width:930px; }

.megamenu .col_nomargin_left {	margin-left:0; }

.megamenu .col_nomargin_right {	margin-right:0; }

.megamenu .clear {	clear:both; display:block; height:18px; overflow:hidden; visibility:hidden; width:0; }

.megamenu .black_bg {	-moz-border-radius:3px; -webkit-border-radius:3px; background-color:#000; border-radius:3px; padding:4px 6px; }

.megamenu p,.megamenu h1,.megamenu h2,.megamenu h3,.megamenu h4,.megamenu h5,.megamenu h6 { color:#333; font-weight:400; margin:0 0 18px; padding:0; text-align:left; }

.megamenu p { font-size:14px; }

.megamenu h1 { font-size:32px; }

.megamenu h2 { font-size:28px; }

.megamenu h3 { font-size:24px; }

.megamenu h4 { font-size:18px; }

.megamenu h5 { font-size:16px; }

.megamenu h6 { font-size:14px; text-transform:uppercase; }

.megamenu >li ul,.megamenu >li ol { margin:0 0 18px; padding:0 0 0 18px; }

.megamenu >li ul { list-style:disc; }

.megamenu >li ol { list-style:decimal; }

.megamenu >li ul li,.megamenu >li ol li { color:#ddd; font-size:12px; line-height:22px; position:relative; }

.megamenu .calendar,.megamenu .note,.megamenu .help,.megamenu .delete,.megamenu .favorite,.megamenu .lock,.megamenu .archive,.megamenu .briefcase,.megamenu .search,.megamenu .user {	margin-bottom:18px; padding-left:36px; }

.megamenu .calendar {	background:url(../images/icons/calendar.png) no-repeat 0 4px; }

.megamenu .note {	background:url(../images/icons/note.png) no-repeat 0 5px; }

.megamenu .archive {	background:url(../images/icons/archive.png) no-repeat 0 4px; }

.megamenu .search {	background:url(../images/icons/search.png) no-repeat 0 4px; }

.megamenu .help {	background:url(../images/icons/help.png) no-repeat 0 4px; }

.megamenu .delete {	background:url(../images/icons/delete.png) no-repeat 0 5px; }

.megamenu .favorite {	background:url(../images/icons/favorite.png) no-repeat 0 4px; }

.megamenu .lock {	background:url(../images/icons/lock.png) no-repeat 0 4px; }

.megamenu .briefcase {	background:url(../images/icons/briefcase.png) no-repeat 0 5px; }

.megamenu .user {	background:url(../images/icons/user.png) no-repeat 0 4px; }

.megamenu .dark,.megamenu .brown,.megamenu .yellow,.megamenu .red,.megamenu .blue,.megamenu .green {	color:#ccc; margin-bottom:0; padding-left:15px; }

.megamenu .dark {	border-left:#3B3B3B solid 7px; }

.megamenu .brown {	border-left:#8D8767 solid 7px; }

.megamenu .yellow {	border-left:#DBA742 solid 7px; }

.megamenu .red {	border-left:#C05D48 solid 7px; }

.megamenu .blue {	border-left:#52878B solid 7px; }

.megamenu .green {	border-left:none; }

.megamenu .table_light,.megamenu .table_dark {	font-size:12px; margin:6px 0 18px; padding:0; width:100%; }

.megamenu table {	border-collapse:collapse; border-spacing:0; }

.megamenu .table_light th,.megamenu .table_dark th { font-size:12px; font-weight:700; padding:12px 9px; text-align:left; }

.megamenu .table_light {	border:1px solid #cbcbcb; border-bottom:none; }

.megamenu .table_light th { background:#F5F5F5; border-bottom:1px solid #cbcbcb; color:#3A3A3A; }

.megamenu .table_light td { background:#fff; border-bottom:1px solid #cbcbcb; color:#888; padding:12px 9px; }

.megamenu .table_dark {	border:1px solid #000; border-bottom:none; }

.megamenu .table_dark th { background:#0D0D0D; border-bottom:1px solid #000; color:#FFF; }

.megamenu .table_dark td { background:#0F0F0F; border-bottom:1px solid #000; color:#DDD; padding:12px 9px; }

.megamenu img {	border:none; }

.megamenu .inline_img {	-moz-box-shadow:0 1px 1px #000; -o-box-shadow:0 1px 1px #000; -webkit-box-shadow:0 1px 1px #000; background:#F4F4F4; border:1px solid #000; box-shadow:0 1px 1px #000; margin-bottom:18px; padding:4px; }

.megamenu iframe {	border:none; }

.megamenu_tabs .megamenu_tabs_panels {	margin:0 0 15px; }

.megamenu_tabs ul { list-style:none; }

.megamenu_tabs_hide {	display:none; left:0; position:relative; top:0; }

.megamenu_tabs .megamenu_tabs_nav {	display:none; }

.megamenu_tabs .megamenu_tabs_nav li { display:inline; float:left; margin-right:20px; white-space:nowrap; width:auto; }

.megamenu_tabs .megamenu_tabs_nav li a { -moz-border-radius:3px; -moz-box-shadow:0 1px 1px #000; -moz-transition:background-color .3s; -ms-transition:background-color .3s; -o-box-shadow:0 1px 1px #000; -o-transition:background-color .3s; -webkit-border-radius:3px; -webkit-box-shadow:0 1px 1px #000; -webkit-transition:background-color .3s; background-color:#222; background-image:linear-gradient(transparent,rgba(0,0,0,0.2)); border:1px solid #000; border-radius:3px; box-shadow:0 1px 1px #000; color:#fff; float:left; font:bold 11px Sans-Serif; margin:0; padding:7px 12px; position:relative; text-shadow:0 1px 1px #000; text-transform:none; transition:background-color .3s; }

.megamenu_tabs li a.current,.megamenu_tabs li a.current:hover {	-moz-box-shadow:0 0 1px #000; -o-box-shadow:0 0 1px #000; -webkit-box-shadow:0 0 1px #000; background-color:#1A1A1A; box-shadow:0 0 1px #000; top:1px; }

.megamenu_tabs .megamenu_tabs_nav li a:hover,.megamenu_tabs .megamenu_tabs_nav li a:focus {	background-color:#1A1A1A; }

.megamenu .contact_form {	display:block; margin-bottom:10px; }

.megamenu .contact_form label {	color:#fff; font-family:Arial,Helvetica,sans-serif; font-size:12px; font-weight:700; line-height:18px; text-shadow:1px 1px 1px #000; }

.megamenu .form_element {	-moz-border-radius:3px; -moz-box-shadow:0 1px 1px #000; -moz-transition:background-color .3s ease-out; -ms-transition:background-color .3s ease-out; -o-box-shadow:0 1px 1px #000; -o-transition:background-color .3s ease-out; -webkit-border-radius:3px; -webkit-box-shadow:0 1px 1px #000; -webkit-transition:background-color .3s ease-out; background-color:#E8E8E8; border:1px solid #000; border-radius:3px; box-shadow:0 1px 1px #000; color:#000; font-family:Arial,Helvetica,sans-serif; font-size:12px; margin:12px 0 18px; padding:6px; transition:background-color .3s ease-out; width:280px; }

.megamenu .form_element:hover {	-moz-box-shadow:0 3px 3px #000; -o-box-shadow:0 3px 3px #000; -webkit-box-shadow:0 3px 3px #000; background-color:#F4F4F4; box-shadow:0 3px 3px #000; }

.megamenu .form_element:focus {	background-color:#FFF; outline:none; }

.megamenu .contact_form textarea {	height:120px; resize:none; }

.megamenu .contact_form .required {	color:#C00; }

.megamenu .contact_form .special {	display:none; }

.megamenu .contact_form .error,.megamenu .contact_form .sent {	-moz-border-radius:3px; -moz-box-shadow:0 1px 1px #000; -o-box-shadow:0 1px 1px #000; -webkit-border-radius:3px; -webkit-box-shadow:0 1px 1px #000; border:1px solid #000; border-radius:3px; box-shadow:0 1px 1px #000; font-size:11px; padding:3px 6px; text-shadow:1px 1px 1px #fff; }

.megamenu .contact_form .error {	background:#f7cac4; color:#992213; }

.megamenu .contact_form .sent {	background:#d8f6bc; color:#2f530b; }

.megamenu .contact_form .button {	-moz-border-radius:3px; -moz-box-shadow:0 1px 1px #000; -moz-transition:background-color .3s; -ms-transition:background-color .3s; -o-box-shadow:0 1px 1px #000; -o-transition:background-color .3s; -webkit-border-radius:3px; -webkit-box-shadow:0 1px 1px #000; -webkit-transition:background-color .3s; background-color:#222; background-image:linear-gradient(transparent,rgba(0,0,0,0.2)); border:1px solid #000; border-radius:3px; box-shadow:0 1px 1px #000; color:#fff; cursor:pointer; font:bold 11px Sans-Serif; margin:9px 12px 0 0; padding:7px 12px; text-shadow:0 1px 1px #000; transition:background-color .3s; vertical-align:middle; white-space:nowrap; }

.megamenu .contact_form .button:hover,.megamenu .contact_form .button:focus {	background-color:#1A1A1A; color:#fff; }

.megamenu .contact_form .button:active {	-moz-box-shadow:0 0 1px #000; -o-box-shadow:0 0 1px #000; -webkit-box-shadow:0 0 1px #000; box-shadow:0 0 1px #000; position:relative; top:1px; }