Sneak0r 33 Posted August 31, 2013 Share Posted August 31, 2013 (edited) First of all please have a look at here and here before starting editing any pages! An other powerfull function I stumbled over:- Transclusionand an other helpful page - http://www.mediawiki.org/wiki/Help:Formatting Allright - Schot did amazing job after I asked him about the options of the frames that we're using on many pictures ({{S2frame|randompic.jpg|option1|option2|etc}}). here is what he has done for us: Ok sneakor. I added some new options for you in the frame function. You can control margin spacing around picture and the width of the frame. Like below:{{S2frame|[[File:highelfdark.jpg|120px]]|left||0}}Each bar like this --> | gives an option and if you skip an option then you must type the bar to get to the next option. I'll try to explain below:There are now 5 options for the S2frame. The first is the content you want to put inside the frame. The 2nd is if you want to float the frame to the righ(this is default) or the left. The 3rd option is to put a caption above the frame. The 4th option is to control margin(new). The 5th option is to control width(new).Here is an example{{S2frame|[[File:highelfdark.jpg|120px]]|left|This is a dark High Elf that follows the Shadow campaign in Sacred 2|0|135px}}If you only want to change the margin then you still have to type the bars that come before the margin option like this:{{S2frame|[[File:highelfdark.jpg|120px]]|||0}}You don't have to type the bars for options that come after the one you want to change. In the example above you can see that I did not need to type the last bar for the width option.Enjoy! I have much more questions about the best way to use the transclusion but not now Edited August 31, 2013 by Sneak0r Link to comment
Sneak0r 33 Posted August 31, 2013 Author Share Posted August 31, 2013 (edited) Is it possible to upgrade http://www.sacredwiki.org/index.php/Template:S2frame a bit? So that we can see what option are possible and with which modifiers? Edited August 31, 2013 by Sneak0r Link to comment
Sneak0r 33 Posted September 1, 2013 Author Share Posted September 1, 2013 (edited) After doing some work with the S2frame and the new option you've putting in, I was wondering what is much more user friendly / customizable friendly. Is It the S2frame with it's (now w/ almost all important) options or a simple table/div with different classes that you can define in the ccs file? On creating an html/php website im not a big fan of tables for creating layouts and using divs only. But for wikis table are the easiest and beginner friendliest thing (and now even more with the new editor frame, that you implemented ) they can have for doing a decent looking layout. Please let me note what your opinon about that is I can handle both but imho it was a bit tricky with the s2frame ^^ p.s. this is not a request to throw everything away and change it to tables or something like that! Edited September 1, 2013 by Sneak0r Link to comment
Schot 407 Posted September 1, 2013 Share Posted September 1, 2013 Is it possible to upgrade http://www.sacredwiki.org/index.php/Template:S2frame a bit? So that we can see what option are possible and with which modifiers? Everything is possible. What kind of upgrade do you mean? Are you asking to add instructions about how to use it and it's 5 options? Similar to what you posted above? Ok sneakor. I added some new options for you in the frame function. You can control margin spacing around picture and the width of the frame. Like below: {{S2frame|[[File:highelfdark.jpg|120px]]|left||0}} Each bar like this --> | gives an option and if you skip an option then you must type the bar to get to the next option. I'll try to explain below: There are now 5 options for the S2frame. The first is the content you want to put inside the frame. The 2nd is if you want to float the frame to the righ(this is default) or the left. The 3rd option is to put a caption above the frame. The 4th option is to control margin(new). The 5th option is to control width(new). Here is an example {{S2frame|[[File:highelfdark.jpg|120px]]|left|This is a dark High Elf that follows the Shadow campaign in Sacred 2|0|135px}} If you only want to change the margin then you still have to type the bars that come before the margin option like this: {{S2frame|[[File:highelfdark.jpg|120px]]|||0}} You don't have to type the bars for options that come after the one you want to change. In the example above you can see that I did not need to type the last bar for the width option. Enjoy! After doing some work with the S2frame and the new option you've putting in, I was wondering what is much more user friendly / customizable friendly. Is It the S2frame with it's (now w/ almost all important) options or a simple table/div with different classes that you can define in the ccs file? On creating an html/php website im not a big fan of tables for creating layouts and using divs only. But for wikis table are the easiest and beginner friendliest thing (and now even more with the new editor frame, that you implemented ) they can have for doing a decent looking layout. Please let me note what your opinon about that is I can handle both but imho it was a bit tricky with the s2frame ^^ p.s. this is not a request to throw everything away and change it to tables or something like that! We can make an alternative S2frame template on the wiki to the way you suggest but if we used classes then how many different classes would we need? Using divs instead of tables can be tricky. Do you want to try making one? http://www.mediawiki.org/wiki/Help:Templates CSS for templates can be added here: http://www.sacredwiki.org/index.php/MediaWiki:Common.css Link to comment
Sneak0r 33 Posted September 1, 2013 Author Share Posted September 1, 2013 Uhm yea nice idea! But I have no permissions on http://www.sacredwiki.org/index.php/MediaWiki:Common.css Or I'm not sure how else I can add things to the css file without admin rights. Link to comment
Schot 407 Posted September 2, 2013 Share Posted September 2, 2013 Just post here what css you'd like added and I'll put it in for you. Link to comment
Sneak0r 33 Posted September 2, 2013 Author Share Posted September 2, 2013 please give me to code for the s2frame fist so I have something to work with Link to comment
Schot 407 Posted September 2, 2013 Share Posted September 2, 2013 This code? http://www.sacredwiki.org/index.php/Template:S2frame {{S2frame|http://www.sacredwiki.org/images/Sacred_2/uniques/carapacevestment.gif}} {|cellspacing="0px" cellpadding="0px" style="float:{{{2|right}}}; margin: {{{4|10px 0px 10px 10px}}};width:{{{5|auto}}};height:auto;" |- |colspan=3 style="text-align:center;"|{{{3|}}} <div class="topbottom"> </div><div style="position:relative;"><div class="topleft"> </div><div class="topright"> </div></div> |- |class="left" width="8px"| -. |style="background:#1F353F;"|<div class="plainlinks">{{{1}}}</div> |class="right" width="8px"| -. |- |colspan=3|<div class="topbottom"> </div><div style="position:relative;"><div class="botleft"> </div><div class="botright"> </div></div> |} Link to comment
Antitrust 32 Posted September 2, 2013 Share Posted September 2, 2013 There should be an option for enabling a user's personal CSS, that allows you to make test stuff on your personal pages. It can be convenient. http://www.mediawiki.org/wiki/Manual:$wgAllowUserCss Link to comment
Schot 407 Posted September 2, 2013 Share Posted September 2, 2013 Nice. Thanx for the heads up trust and nice to see yah! I just turned that on. sneakor, if you would like you can create a new subpage to your username on sacredwiki for your personal test css. Only you will see the changes you make but I can copy your test results into my own personal css page to see what you create. Follow this link and create the page with whatever css you would like to change or create: http://www.sacredwiki.org/index.php5?title=User:Sneak0r/ahiltar2.css&action=edit To get you started you can try a test css. Put this in your personal css page, (link above). div#content { background-color: yellow; } Link to comment
Sneak0r 33 Posted September 2, 2013 Author Share Posted September 2, 2013 (edited) thanks for addin this! I'll try that soon. Activating personal CSS could be abused and is a bit risky for the whole wiki. Even if we are a more or less closed society ^^ This code? http://www.sacredwiki.org/index.php/Template:S2frame{{S2frame|http://www.sacredwiki.org/images/Sacred_2/uniques/carapacevestment.gif}}{|cellspacing="0px" cellpadding="0px" style="float:{{{2|right}}}; margin: {{{4|10px 0px 10px 10px}}};width:{{{5|auto}}};height:auto;"|-|colspan=3 style="text-align:center;"|{{{3|}}}<div class="topbottom"> </div><div style="position:relative;"><div class="topleft"> </div><div class="topright"> </div></div>|-|class="left" width="8px"| -.|style="background:#1F353F;"|<div class="plainlinks">{{{1}}}</div>|class="right" width="8px"| -.|-|colspan=3|<div class="topbottom"> </div><div style="position:relative;"><div class="botleft"> </div><div class="botright"> </div></div>|} nope I meant the css code for the s2frame -> you can PM me that, or put it on my new css page Don't worry about! I got it Edited September 2, 2013 by Sneak0r Link to comment
Schot 407 Posted September 2, 2013 Share Posted September 2, 2013 Here you go! .topleft{ background: url(http://www.sacredwiki.org/images/thumbframe/topleft.gif) no-repeat; width: 25px; height: 25px; position: absolute; top: -8px; left: 0px; border: 0; padding: 0px; cellspacing: 0px; cellpadding: 0px; } .topbottom{ background: url(http://www.sacredwiki.org/images/thumbframe/topbottom.gif) repeat-x bottom; height: 8px; margin: 0px 10px; border: 0; padding: 0px; cellspacing: 0px; cellpadding: 0px; } .topright{ background: url(http://www.sacredwiki.org/images/thumbframe/topright.gif) no-repeat; width: 25px; height: 25px; position: absolute; top: -8px; right: 0px; border: 0; padding: 0px; cellspacing: 0px; cellpadding: 0px; } .left{ background: url(http://www.sacredwiki.org/images/thumbframe/leftright.gif) repeat-y left; color: transparent; height: auto; width: 8px; align: right; border: 0; padding: 0px; cellspacing: 0px; cellpadding: 0px; } .right{ background: url(http://www.sacredwiki.org/images/thumbframe/leftright.gif) repeat-y right; color: transparent; height: auto; width: 8px; align: left; border: 0; padding: 0px; cellspacing: 0px; cellpadding: 0px; } .botright{ background: url(http://www.sacredwiki.org/images/thumbframe/botright.gif) no-repeat; width: 25px; height: 25px; position: absolute; bottom: 0px; right: 0px; border: 0; padding: 0px; cellspacing: 0px; cellpadding: 0px; } .botleft{ background: url(http://www.sacredwiki.org/images/thumbframe/botleft.gif) no-repeat; width: 25px; height: 25px; position: absolute; bottom: 0px; left: 0px; border: 0; padding: 0px; cellspacing: 0px; cellpadding: 0px; } Link to comment
Sneak0r 33 Posted September 3, 2013 Author Share Posted September 3, 2013 (edited) allright, however it's all put together with the S2frame code, seems to do more with the mediawiki editor/engine/language/what ever and less with html, right?^^ Edited September 3, 2013 by Sneak0r Link to comment
Schot 407 Posted September 3, 2013 Share Posted September 3, 2013 Here's the S2frame code converted from wiki code to html: <table cellspacing="0px" cellpadding="0px" style="float:right; margin: 10px 0px 10px 10px;width:auto;height:auto;"> <tbody><tr> <td style="text-align:center;" colspan="3"> <div class="topbottom"> </div><div style="position:relative;"><div class="topleft"> </div><div class="topright"> </div></div> </td></tr> <tr> <td style="width: 8px;" class="left"> -. </td> <td style="background:#1F353F;"><div class="plainlinks"><img alt="carapacevestment.gif" src="http://www.sacredwiki.org/images/Sacred_2/uniques/carapacevestment.gif"></div> </td> <td style="width: 8px;" class="right"> -. </td></tr> <tr> <td colspan="3"><div class="topbottom"> </div><div style="position:relative;"><div class="botleft"> </div><div class="botright"> </div></div> </td></tr></tbody></table> Link to comment
Sneak0r 33 Posted September 4, 2013 Author Share Posted September 4, 2013 (edited) Found what I was looking for.... {|cellspacing="0px" cellpadding="0px" style="float:{{{2|right}}}; margin: {{{4|10px 0px 10px 10px}}};width:{{{5|auto}}};height:auto;" |- |colspan=3 style="text-align:center;"|{{{3|}}} <div class="topbottom"> </div><div style="position:relative;"><div class="topleft"> </div><div class="topright"> </div></div> |- |class="left" width="8px"| -. |style="background:#1F353F;"|<div class="plainlinks">{{{1}}}</div> |class="right" width="8px"| -. |- |colspan=3|<div class="topbottom"> </div><div style="position:relative;"><div class="botleft"> </div><div class="botright"> </div></div> |} in the code of http://www.sacredwiki.org/index.php/Template:S2frame ... was so stupid to not have a look into the code -.- Edited September 4, 2013 by Sneak0r Link to comment
Schot 407 Posted September 4, 2013 Share Posted September 4, 2013 This code? http://www.sacredwiki.org/index.php/Template:S2frame{{S2frame|http://www.sacredwiki.org/images/Sacred_2/uniques/carapacevestment.gif}} {|cellspacing="0px" cellpadding="0px" style="float:{{{2|right}}}; margin: {{{4|10px 0px 10px 10px}}};width:{{{5|auto}}};height:auto;" |- |colspan=3 style="text-align:center;"|{{{3|}}} <div class="topbottom"> </div><div style="position:relative;"><div class="topleft"> </div><div class="topright"> </div></div> |- |class="left" width="8px"| -. |style="background:#1F353F;"|<div class="plainlinks">{{{1}}}</div> |class="right" width="8px"| -. |- |colspan=3|<div class="topbottom"> </div><div style="position:relative;"><div class="botleft"> </div><div class="botright"> </div></div> |} Found what I was looking for.... {|cellspacing="0px" cellpadding="0px" style="float:{{{2|right}}}; margin: {{{4|10px 0px 10px 10px}}};width:{{{5|auto}}};height:auto;" |- |colspan=3 style="text-align:center;"|{{{3|}}} <div class="topbottom"> </div><div style="position:relative;"><div class="topleft"> </div><div class="topright"> </div></div> |- |class="left" width="8px"| -. |style="background:#1F353F;"|<div class="plainlinks">{{{1}}}</div> |class="right" width="8px"| -. |- |colspan=3|<div class="topbottom"> </div><div style="position:relative;"><div class="botleft"> </div><div class="botright"> </div></div> |} in the code of http://www.sacredwiki.org/index.php/Template:S2frame ... was so stupid to not have a look into the code -.- You never listen to me... Link to comment
Sneak0r 33 Posted September 4, 2013 Author Share Posted September 4, 2013 oops, sry ^^ Link to comment
Schot 407 Posted September 5, 2013 Share Posted September 5, 2013 I just updated the old frame and the code seems to work well. This is the new "tableless" code. It uses the css rule Display and it's attribute Table. Basically we're telling the css to act like a table layout but using divs to do it. HTML: http://www.sacredwiki.org/index.php/Template:Thumbframe <div class="wrapper"> <div class="frame"> <div class="frame_bot"> <div class="frame_left"> <div class="frame_right"> <div class="corner ctl"></div> <div class="corner ctr"></div> <div class="corner cbl"></div> <div class="corner cbr"></div> <div class="content">{{{1}}}</div> </div> </div> </div> </div> </div> CSS: http://www.sacredwiki.org/index.php/MediaWiki:Common.css .wrapper {display:table;margin:6px;} .frame {background:url(images/thumbframe/item_tbar0.gif) repeat-x top left;} .corner {width:35px;height:15px;margin:-4px;position:absolute; background:url("images/thumbframe/item_brc.gif") no-repeat scroll 0 0 transparent;} .ctl {top:0;left:0;-webkit-transform:scaleX(-1) scaleY(-1);-moz-transform:scaleX(-1) scaleY(-1);-ms-transform:scaleX(-1) scaleY(-1); -o-transform:scaleX(-1) scaleY(-1);transform:scaleX(-1) scaleY(-1);} .ctr {top:0;right:0;-webkit-transform:scaleY(-1);-moz-transform:scaleY(-1);-ms-transform:scaleY(-1); -o-transform:scaleY(-1);transform:scaleY(-1);} .cbl {bottom:0;left:0;-webkit-transform:scaleX(-1);-moz-transform:scaleX(-1);-ms-transform:scaleX(-1); -o-transform:scaleX(-1);transform:scaleX(-1);} .cbr {bottom:0;right:0;} .frame_right {padding:6px;position:relative;} .frame_bot {background:url(images/thumbframe/item_bbar0.gif) repeat-x bottom left;} .frame_left {background:url(images/thumbframe/item_lbar.gif) repeat-y top left;} .frame_right {background:url(images/thumbframe/item_rbar.gif) repeat-y top right;} Link to comment
Sneak0r 33 Posted September 5, 2013 Author Share Posted September 5, 2013 Schot that realy makes me ! It looks perfect! I wanna see that in action! Link to comment
Antitrust 32 Posted September 5, 2013 Share Posted September 5, 2013 That looks pretty genius Does it work in all browsers? 1 Link to comment
Schot 407 Posted September 5, 2013 Share Posted September 5, 2013 Shhhhh! You know... I think it actually does. I checked with FF, Chrome, IE, Safari and even my ipod's safari. All run ok though I can't say if it works for old versions of each of the browsers... The Screenshots is using the new template. In case anyone wants to test. Link to comment
Antitrust 32 Posted September 6, 2013 Share Posted September 6, 2013 It's borked in IE8 1 Link to comment
Schot 407 Posted September 6, 2013 Share Posted September 6, 2013 lol Knoooooooow! ... I mean... Nooooooooooo! What tha hell IE. Always gotta be rainin on my code parade. Pardon me while I take a baseball bat to IE8. 1 Link to comment
gogoblender 3,072 Posted September 6, 2013 Share Posted September 6, 2013 Thanx for the vote of confidence Ysne. I'm becoming a bit addicted to the new sacredwiki editor. It has something that I never thought I'd see in a wiki editor. Find/Replace! On the far right top corner of the new editor is a Find/Replace button that can change every instance of a word on a page to a word/spelling of your choosing. Amazing for quick corrections of a misspelled word that appears many times on a single page. Thanks for pointing on that spot! I've used the FireFox Searchfunction and replaced everything by hand. This will be very handy It's borked in IE8 yeeks and yet, I feel that the world is "normal" with this lol Knoooooooow! ... I mean... Nooooooooooo! What tha hell IE. Always gotta be rainin on my code parade. Pardon me while I take a baseball bat to IE8. Allow me the first swing gogo Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now