Difference between revisions of "User:Cassiel Seraphim/Sandbox"

From EVE University Wiki
Jump to: navigation, search
 
(6 intermediate revisions by the same user not shown)
Line 127: Line 127:
 
= Layered images =
 
= Layered images =
 
<!-- {{note box|The ingame browser won't recognize '''position:relative''' on a cell, so you need to wrap the '''position:absolute''' div-tag inside another '''position:relative''' div-tag.}} -->
 
<!-- {{note box|The ingame browser won't recognize '''position:relative''' on a cell, so you need to wrap the '''position:absolute''' div-tag inside another '''position:relative''' div-tag.}} -->
Sometimes it makes sense to manually build up an image comprised of an image and a tag, or simply two images.
+
Sometimes it makes sense to manually build up an image comprised of an image and a tag, two or more images or a semi-transparent label over an image.
 
{|
 
{|
 
| valign="top" |
 
| valign="top" |
Line 174: Line 174:
 
! Label
 
! Label
 
|-
 
|-
| nowrap style="padding:0px;" | <div style="border:0px; position:relative;"><div style="border:0px; position:absolute; bottom:0px; left:0px; background:rgba(0,0,0,0.6); width:100%;"><p style="padding-left:4px;">{{sh|Venture}}</p></div>[[image:Venture.jpg|128px]]</div>
+
| nowrap style="padding:0px;" | <div style="border:0px; position:relative;"><div style="border:0px; position:absolute; bottom:0px; left:0px; background:rgba(0,0,0,0.6); width:100%;"><p style="padding-left:6px;">[[Venture]]</p></div>[[image:Venture.jpg|128px]]</div>
 
|}
 
|}
 
| valign="top" |
 
| valign="top" |
Line 180: Line 180:
 
! Label too long
 
! Label too long
 
|-
 
|-
| nowrap style="padding:0px;" | <div style="border:0px; position:relative;"><div style="border:0px; position:absolute; bottom:0px; left:0px; background:rgba(0,0,0,0.6); width:100%;"><p style="padding-left:4px;">{{sh|Rorqual}}</p></div>[[image:Rorqual.jpg|128px]]</div>
+
| nowrap style="padding:0px;" | <div style="border:0px; position:relative;"><div style="border:0px; position:absolute; bottom:0px; left:0px; background:rgba(0,0,0,0.6); width:100%;"><p style="padding-left:6px;">{{sh|Typhoon Fleet Issue}}</p></div>[[image:Typhoon Fleet Issue.jpg|128px]]</div>
 
|}
 
|}
 
|}
 
|}
 +
 +
= Pre-tag with markups =
 +
Sometimes you want to combine showing raw code, which is easily done with the {{co|violet|&lt;pre&gt;&lt;/pre&gt;}} html-tag or with the {{t|code}}-template, but also do some markup on it to illustrate what to change.
 +
 +
Here's an example of how it can be done, taken from the [[overview manipulation]] page:
 +
 +
<pre<includeonly></includeonly>>
 +
tabSetup:  {{co|lightgreen|-- This identifies the start of the code handling tabs.}}
 +
- - 0  {{co|lightgreen|-- First tab.}}
 +
  - - - bracket
 +
      - null
 +
    - - name
 +
      - {{co|slateblue|<b&gt;.  PvP  .</b&gt;}}  {{co|lightgreen|-- This is the value for 'name', which is the label for the tab.}}
 +
    - - overview
 +
      - {{co|slateblue|1a - pvp + drones}}  {{co|lightgreen|-- This is the name of the setting that's loaded into this tab.}}
 +
</pre<includeonly></includeonly>>
 +
 +
The key to make this kind of presentation work is to break up the pre-tag with another tag, opening it up with {{co|violet|&lt;pre&lt;includeonly&gt;&lt;/includeonly&gt;&gt;}} and then closing it with {{co|violet|&lt;/pre&lt;includeonly&gt;&lt;/includeonly&gt;&gt;}}, which will end up changing the parsing behaviour of the page and the end result is that you can combine the best of both worlds, a pre-formatted text you can markup with colours or other highlight-methods.
 +
 +
In the rare case your code or text has some templates or wiki-code you don't want to format, but still want to be able to add your own wiki commands you can take this even further by adding {{co|violet|&lt;nowiki&gt;}} to the opening pre-line and {{co|violet|&lt;/nowiki&gt;}} in the closing part then wrap any individual wiki-code inside with the reverse {{co|violet|&lt;/nowiki&gt;}} wiki-code {{co|violet|&lt;nowiki&gt;}} markup.
 +
 +
Since this opens up for html-tags as well as wiki-markups it might be necessary to break up tags or replace equal signs to get the parsed result to your liking. This can be done by using {{co|slateblue|&amp;lt;}} instead of {{co|violet|<}} and {{co|slateblue|&amp;gt;}} instead of {{co|violet|>}} for tags plus {{co|slateblue|&amp;#61;}} instead of {{co|violet|&#61;}} for the equal sign. Technically you only need to break the tag in one place to achieve this, like using {{co|slateblue|<pre&amp;gt;}} as this will be enough for the parser to ignore the incomplete tag, but sometimes it's worth changing both brackets to avoid any potential problems with the rest of the code.
  
 
= Useful HTML-codes =
 
= Useful HTML-codes =
Line 212: Line 234:
 
| valign="top" | <br>For more HTML-codes, see this site:<br>[http://www.ascii.cl/htmlcodes.htm HTML Codes - Table of ascii characters and symbols]
 
| valign="top" | <br>For more HTML-codes, see this site:<br>[http://www.ascii.cl/htmlcodes.htm HTML Codes - Table of ascii characters and symbols]
 
|}
 
|}
 +
 +
= CSS table-magic =
 +
Sometimes you just want some more granular control over formatting in you table, be that row-wise or column-wise. A wonderful and might I add neat trick is to use {{co|violet|nth-child()}} or {{co|violet|nth-last-child()}} to select which columns (or other element) should be affected by a specific format through the parameter variable.
 +
 +
The parameter can allow you to do simple identifications like {{co|slateblue|(1)}} for '''first''', {{co|slateblue|(odd)}} for '''first, third, fifth etc''' or more grouped selections like {{co|slateblue|(-n+2)}} for '''first two columns''' etc. Then {{co|violet|nth-last-child()}} reverses it and {{co|slateblue|(1)}} turns to '''last''' and {{co|slateblue|(-n+2)}} to '''last two right-most columns''' for example.
 +
 +
Add the following CSS-snippet to the page/section before the actual table:
 +
<pre>
 +
{{#css:
 +
tr td:nth-child(-n+2) { text-align: left; }
 +
}}
 +
</pre>
 +
Then continue with the actual table:
 +
<pre>
 +
{| class="wikitable" style="text-align: center;"
 +
! Column 1
 +
! Column 2
 +
! Column 3
 +
! Column 4
 +
|-
 +
| Foo
 +
| Bar
 +
| 1
 +
| 2
 +
|}
 +
</pre>
 +
That will allow you to make a simple and clean table, that's easy for people to edit and read, without cluttering it up with various styles on a cell by cell basis when all you want to do is have a table mostly aligned one way but specifically tailor a few columns in a different way.
 +
 +
This is how it ends up, affected rows highlighted in {{co|slateblue|blue}}:
 +
{{#css:
 +
.testing tr td:nth-child(-n+2) { text-align: left; }
 +
}}
 +
{| class="wikitable testing" style="text-align: center;"
 +
! Column 1
 +
! Column 2
 +
! Column 3
 +
! Column 4
 +
|-
 +
| {{co|slateblue|Foo}}
 +
| {{co|slateblue|Bar}}
 +
| 1
 +
| 2
 +
|}
 +
This is of course not limited to columns, but can also easily be used to alternate background colours for rows etc. For more examples of how you can use the selector part, see [https://css-tricks.com/almanac/selectors/n/nth-child/ :nth-child selector]
  
 
= Colours =
 
= Colours =

Latest revision as of 19:34, 29 January 2021

Icons

white green incursions checkers locked miscellaneous

Icon left.png Icon up.png Icon down.png Icon right.png

Icon left green.png Icon up green.png Icon down green.png Icon right green.png

Icon incursion effect cyno.png Icon incursion effect damage.png Icon incursion effect resists.png Icon incursion effect bounties.png

Icon green check.png Icon yellow circle.png Icon red x.png Icon checkmark.png Icon cancel.png

Icon locked.png Icon unlocked.png

Icon fedo.png Source book.png Concord mtac.png

Help/info Post-its Settings

Icon show info.png Icon help.png Icon help square.png Icon information.png Icon information2.png Icon information square.png

Icon postit.png Icon postits.png Icon postit block.png Icon pax amarria.png

Icon cogs.png Icon cog.png Icon cog bolt.png

Progression template

 67%

For resists:

 60 %
 43 %
 33 %
 90 %

Resist-table

Ship Stats shield electromagnetic resistance shield thermal resistance shield kinetic resistance shield explosive resistance
Icon shield.png 2,500 HP
 60 %
60 %
60 %
60 %
borderless 1,250 HP
 43 %
 43 %
 43 %
 43 %
Icon hull.png 625 HP
 0 %
 0 %
 0 %
 0 %

What happens when you disconnect from the game?

a) Your ship will only try to warp out once (1,000,000 km in a random direction), if for some reason you can't warp right then and there, there will be no more attempts to emergency warp. If you get killed, your pod will also try to warp out once, but like your ship just that one time.
b) Modules will continue to cycle while you have cap, hardeners will stay on, guns will continue to fire (while having ammo) etc.
c) Skills will continue to have an effect, modules like EANMs will continue to function at the same level even if you're disconnected.
d) If they stop shooting you at some point, you'll automatically log out of the game for real as soon as the timers run out, regardless how many times they've been refreshed (this was obvious but still thought I'd double-check it).

Layered images

Sometimes it makes sense to manually build up an image comprised of an image and a tag, two or more images or a semi-transparent label over an image.

Tech and faction
Icon faction.png
Tempest Fleet Issue.jpg
Icon tech2.png
Scimitar.jpg
Icon tech3.png
Legion.jpg
Mining
Best yield per volume of m3 for this type of ore.
Best yield per volume of m3 for this type of ore.
Best yield per volume of m3 for this type of ore.
Best yield per volume of m3 for this type of ore.
Best yield per volume of m3 for this type of ore.
Best yield per volume of m3 for this type of ore.
Tech & faction
Icon tech2.png
Logo faction outer ring excavations.png
Prospect.jpg
Larger icon
Icon faction.png
Logo faction amarr empire clean.png
Malediction.jpg
Larger still
Icon tech1.png
Logo faction gallente federation clean.png
Dominix.jpg
Label
Label too long

Pre-tag with markups

Sometimes you want to combine showing raw code, which is easily done with the <pre></pre> html-tag or with the {{code}}-template, but also do some markup on it to illustrate what to change.

Here's an example of how it can be done, taken from the overview manipulation page:

tabSetup:  -- This identifies the start of the code handling tabs.
- - 0  -- First tab.
  - - - bracket
      - null
    - - name
      - <b>.  PvP  .</b>  -- This is the value for 'name', which is the label for the tab.
    - - overview
      - 1a - pvp + drones  -- This is the name of the setting that's loaded into this tab.

The key to make this kind of presentation work is to break up the pre-tag with another tag, opening it up with <pre<includeonly></includeonly>> and then closing it with </pre<includeonly></includeonly>>, which will end up changing the parsing behaviour of the page and the end result is that you can combine the best of both worlds, a pre-formatted text you can markup with colours or other highlight-methods.

In the rare case your code or text has some templates or wiki-code you don't want to format, but still want to be able to add your own wiki commands you can take this even further by adding <nowiki> to the opening pre-line and </nowiki> in the closing part then wrap any individual wiki-code inside with the reverse </nowiki> wiki-code <nowiki> markup.

Since this opens up for html-tags as well as wiki-markups it might be necessary to break up tags or replace equal signs to get the parsed result to your liking. This can be done by using &lt; instead of < and &gt; instead of > for tags plus &#61; instead of = for the equal sign. Technically you only need to break the tag in one place to achieve this, like using <pre&gt; as this will be enough for the parser to ignore the incomplete tag, but sometimes it's worth changing both brackets to avoid any potential problems with the rest of the code.

Useful HTML-codes

Sometimes you have templates that doesn't allow for showing things like =, < or >, then you can use the following:

Code Result
&#61; =
&lt; <
&gt; >
&amp; &
&#47; /
&#35; #

For more HTML-codes, see this site:
HTML Codes - Table of ascii characters and symbols

CSS table-magic

Sometimes you just want some more granular control over formatting in you table, be that row-wise or column-wise. A wonderful and might I add neat trick is to use nth-child() or nth-last-child() to select which columns (or other element) should be affected by a specific format through the parameter variable.

The parameter can allow you to do simple identifications like (1) for first, (odd) for first, third, fifth etc or more grouped selections like (-n+2) for first two columns etc. Then nth-last-child() reverses it and (1) turns to last and (-n+2) to last two right-most columns for example.

Add the following CSS-snippet to the page/section before the actual table:

{{#css:
 tr td:nth-child(-n+2) { text-align: left; }
}}

Then continue with the actual table:

{| class="wikitable" style="text-align: center;"
! Column 1
! Column 2
! Column 3
! Column 4
|-
| Foo
| Bar
| 1
| 2
|}

That will allow you to make a simple and clean table, that's easy for people to edit and read, without cluttering it up with various styles on a cell by cell basis when all you want to do is have a table mostly aligned one way but specifically tailor a few columns in a different way.

This is how it ends up, affected rows highlighted in blue:

Column 1 Column 2 Column 3 Column 4
Foo Bar 1 2

This is of course not limited to columns, but can also easily be used to alternate background colours for rows etc. For more examples of how you can use the selector part, see :nth-child selector

Colours

Some colours I use.

# C D E
4
3
2
1

█ #e15800
█ #dd9900
█ #93D500
█ #51D200

█ Maroon
█ Sienna
█ Olive
█ ForestGreen

█ purple
█ rebeccapurple
█ slateblue
█ steelblue

Security status
1.0 - #2FEFEF
0.9 - #48F0C0
0.8 - #00EF47
0.7 - #00F000
0.6 - #8FEF2F
0.5 - #EFEF00
0.4 - #D77700
0.3 - #F06000
0.2 - #F04800
0.1 - #D73000
0.0 - #F00000
Miscellanous

█ coral (modules)
█ wheat (quotes)
█ slateblue (changes)
█ violet (tags)
█ lightgreen (comments)
█ #ffd75f (suspect)
█ red (criminal & weapon)
█ cyan (limited engagement)

Gradients

You need the CSS script to handle both normal browsers supporting CSS3 and the ingame browser which do not, but apparently has some old webkit support.

Linear
(vertical)
1
2
3
4
Linear
(horizontal)
1 2 3 4
Radial
+ 1 2 3 4
1
2
3
4

Tooltips

Normal tooptip: Example1Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eu hendrerit nisi. Nulla ornare, dolor eu pulvinar faucibus, magna purus tempor orci, sed malesuada urna ligula sit amet mauris. (lots of text) Example2Lorem ipsum dolor sit amet. (short text).


Let's see what the tooltip upLorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eu hendrerit nisi. Nulla ornare, dolor eu pulvinar faucibus, magna purus tempor orci, sed malesuada urna ligula sit amet mauris. does compared to tooltip rightLorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eu hendrerit nisi. Nulla ornare, dolor eu pulvinar faucibus, magna purus tempor orci, sed malesuada urna ligula sit amet mauris. as well as how tooltip leftLorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eu hendrerit nisi. Nulla ornare, dolor eu pulvinar faucibus, magna purus tempor orci, sed malesuada urna ligula sit amet mauris. differ from tooltip downLorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eu hendrerit nisi. Nulla ornare, dolor eu pulvinar faucibus, magna purus tempor orci, sed malesuada urna ligula sit amet mauris. when put in the end. Does this normal tooltipLorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eu hendrerit nisi. Nulla ornare, dolor eu pulvinar faucibus, magna purus tempor orci, sed malesuada urna ligula sit amet mauris. change?

Now how about an image like this? Icon stasis webifier i.pngIcon stasis webifier i.png -60% speed reduction at 30 km. or a larger one like Logo faction amarr empire.pngLorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eu hendrerit nisi. Nulla ornare, dolor eu pulvinar faucibus, magna purus tempor orci, sed malesuada urna ligula sit amet mauris.

Warp disruption

Certain actions are prevented by warp disruption:

Actions and restrictions Warp disruption
Warp disruption
Warp scrambling
Warp scrambling
22778_64.png
Interdiction probe
28654_64.png
Interdiction field
29003_64.png
Infinity-point
45010_64.png
Infinity-scram
Activating your Warp Drive Icon large red x.png Icon large red x.png Icon large red x.png Icon large red x.png Icon large red x.png Icon large red x.png
Activating an Acceleration Gate Icon large red x.png Icon large red x.png Icon large green check.png Icon large green check.png Icon large red x.png Icon large red x.png
Activating a Star Gate (sub-capital ships) Icon large green check.png Icon large green check.png Icon large green check.png Icon large green check.png Icon large green check.png Icon large green check.png
Activating a Star Gate (capital ships) Icon large green check.png Icon large green check.png Icon large green check.png Icon large green check.png Icon large red x.png Icon large red x.png
Activating a Microwarpdrive (MWD) Icon large green check.png Icon large red x.png Icon large green check.png Icon large green check.png Icon large green check.png Icon large red x.png
Activating a Micro Jump Drive (MJD) Icon large green check.png Icon large red x.png Icon large green check.png Icon large green check.png Icon large green check.png Icon large red x.png
Activating a Micro Jump Drive Field Generator  Icon large green check.png Icon large red x.png Icon large green check.png Icon large green check.png Icon large green check.png Icon large red x.png
Activating a Jump Drive Icon large red x.png Icon large red x.png Icon large red x.png Icon large red x.png Icon large red x.png Icon large red x.png
Docking in a Station Icon large green check.png Icon large green check.png Icon large green check.png Icon large green check.png Icon large green check.png Icon large green check.png
Docking in an Upwell structure Icon large red x.png Icon large red x.png Icon large green check.png Icon large green check.png Icon large red x.png Icon large red x.png