Jump to content
SacredWiki

New SacredWiki frame options from Schot

Sneak0r

By Sneak0r,
in Sacred Wiki General Discussion

Recommended Posts

Sneak0r

Sneak0r 33

Posted
Posted (edited)

First of all please have a look at here and here before starting editing any pages!

An other powerfull function I stumbled over:
- Transclusion

and 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 by Sneak0r
Link to comment
Sneak0r

Sneak0r 33

Posted
  • Author
Posted (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 :D ) 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 by Sneak0r
Link to comment
Schot

Schot 407

Posted
Posted

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. :D 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 :D ) 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
Schot

Schot 407

Posted
Posted

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
Schot

Schot 407

Posted
Posted

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

Sneak0r 33

Posted
  • Author
Posted (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 by Sneak0r
Link to comment
Schot

Schot 407

Posted
Posted

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
Schot

Schot 407

Posted
Posted

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

Sneak0r 33

Posted
  • Author
Posted (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 by Sneak0r
Link to comment
Schot

Schot 407

Posted
Posted

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... :tease:

Link to comment
Schot

Schot 407

Posted
Posted

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
Schot

Schot 407

Posted
Posted

Shhhhh! :4rofl:

 

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
Schot

Schot 407

Posted
Posted

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. :butcher:

  • Like! 1
Link to comment
gogoblender

gogoblender 3,070

Posted
Posted

 

Thanx for the vote of confidence Ysne. :D 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 :crazy:

 

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. :butcher:

 

Allow me the first swing

 

:mafia:

 

gogo

 

Link to comment

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
Go to topic listing
×
×
  • Create New...
Please Sign In or Sign Up