I'd been looking at code at the code on pages like these. I'm getting really confused and frustrated. I really like this code but it makes no sense. Is there anyone who understand how it works and would be willing to explain it to me?
It would help to know specifically what you want to do. Much of the functionality appears to be Javascript driven, which is not easy to figure out if you only know basic HTML or even wikicode.
Basically, I want to be able to make big titles that can be clicked, with font and shadow and everything, and then have them be sections like those, which can be clicked to show a section of text pretaining to that topic.
So more like w:c:thecampjupiterroleplay:Fanfiction_Portal? The examples you gave seem very similar.
To start with you should copy the following to your wiki to the pages with the same names:
/****************************************/ /* sliders using jquery by User:Tierrie */ /****************************************/ mw.loader.using( ['jquery.ui.tabs'], function() { $(document).ready(function() { var $tabs = $("#portal_slider").tabs({ fx: {opacity:'toggle', duration:100} } ); $("[class^=portal_sliderlink]").click(function() { // bind click event to link $tabs.tabs('select', this.className.replace("portal_sliderlink_", "")); return false; }); }); } );
/* slider */ .portal_section { margin: 0 0 10px 0; background: white; border-radius: 10px; -moz-border-radius: 8px; -webkit-border-radius: 8px; -khtml-border-radius: 8px; -icab-border-radius: 8px; -o-border-radius: 8px; } .portal_body { padding: 0px 10px; } /* portal: slider */ #portal_slider { margin: 0px 0px 15px; padding: 0px; position: relative; height: 400px; background-color: #FFFFFF; } #portal_slider > .portal_body { padding: 0px; } /* portal: content */ #portal_content { font-size: 0.9em; line-height: 1.7em; } #portal_content .portal_body > table { height: 350px; } #portal_content ul ul { margin-left: 1em; } .portal_sliderlink_1:hover, .portal_sliderlink_2:hover, .portal_sliderlink_3:hover, .portal_sliderlink_4:hover, .portal_sliderlink_5:hover, .portal_sliderlink_6:hover, .portal_sliderlink_7:hover, .portal_sliderlink_8:hover, .portal_sliderlink_9:hover, .portal_sliderlink_10:hover, .portal_sliderlink_11:hover, .portal_sliderlink_12:hover, .portal_sliderlink_13:hover, .portal_sliderlink_14:hover, .portal_sliderlink_15:hover { opacity: 0.5;} /* tabs/sliders */ .ui-tabs { position: relative; padding: .2em; zoom: 1; } .ui-tabs .ui-tabs-nav { margin: 0; padding: .2em .2em 0; } .ui-tabs .ui-tabs-nav li { list-style: none; float: left; position: relative; top: 1px; margin: 0 .2em 1px 0; border-bottom: 0 !important; padding: 0; white-space: nowrap; } .ui-tabs .ui-tabs-nav li a { float: left; padding: .5em 1em; text-decoration: none; } .ui-tabs .ui-tabs-nav li.ui-tabs-selected { margin-bottom: 0; padding-bottom: 1px; } .ui-tabs .ui-tabs-nav li.ui-tabs-selected a, .ui-tabs .ui-tabs-nav li.ui-state-disabled a, .ui-tabs .ui-tabs-nav li.ui-state-processing a { cursor: text; } .ui-tabs .ui-tabs-nav li a, .ui-tabs.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-selected a { cursor: pointer; } .ui-tabs .ui-tabs-panel { display: block; border-width: 0; padding: 0; background: none; } .ui-tabs .ui-tabs-hide { display: none !important; } .ui-tabs-hide { display: none !important; }
After that I'll probably really need to know which wiki you're working on or I won't really be able to help you more. Copying the above stuff is probably about 30% of the work.