Help:Advanced Editing III

From Lotro-Wiki.com
Jump to navigation Jump to search

Advanced Editing III - CSS and Tables

CSS Class information

One thing typically rather difficult to figure out on a site, is where/what are those "cool class" definitions that make things happen. And are there things one does not know about that could be taken advantage of. Thus, this site will provide some extra information on these details for our contributing editors to be able to take advantage of.

Classes Defined on this site

A categorized list of all formatting classes defined on this site.
Back to the Top

CSS Formatting Classes

None.


Back to the Top

Text Classes

None.


Back to the Top

Table Classes

NOTE: Some of these tables function based upon the marriage between JavaScript and CSS (altRows functionality). The colours are controlled via the CSS classes but the actual "work", to place the colours in alternating bands, is handled in the JavaScript.

With respect to tablenames -- most all of them MUST be capitalized exactly as shown. If not, they will not work as you expect them to.

not sure who designed this nor for what purpose...
Dark Table schema that will be used by the tooltips engine (still in development)
Alternating rows colour schema that is based on your skin selection found under user preferences. Automates banding of the tables. May not consistently work with "stacked" class calls such as "collapsible", "sortable" and the like.
Similiar to the altRows but works with "collapsible" and "sortable" -- it won't automate banding of your table.
dark table colour schema for use in the Monster Play portions of the site to show clearly that the information is not part of "standard game play" and works with "collapsible" and "sortable".
Monster Play version of the altRows class to automatically alternate (band) the rows of a table.
wikitable

Not sure who designed this table in this fashion but here it is...

Caption
Col Header 1 Col Header 2 Link Header
Row Header Row detail, Row 1, Col 2 Good Link - Category:Help // Invalid Link Bogus Link // Off-site link https://forums-old.lotro.com
2nd Row Header Row detail, Row 2, Col 2 Good Link - Category:Help // Invalid Link Bogus Link // Off-site link https://forums-old.lotro.com
Row detail, Row 3, Col 1 Row detail, Row 3, Col 2 Good Link - Category:Help // Invalid Link Bogus Link // Off-site link https://forums-old.lotro.com
Row detail, Row 4, Col 1 Row detail, Row 4, Col 2 Good Link - Category:Help // Invalid Link Bogus Link // Off-site link https://forums-old.lotro.com


Back to the Top

darktable

The table colour pallet and link pallet definition used for Npcbox and other dark coloured tables.

Caption
Col Header 1 Col Header 2 Link Header
Row Header Row detail, Row 1, Col 2 Good Link - Category:Help // Invalid Link Bogus Link // Off-site link https://forums-old.lotro.com
2nd Row Header Row detail, Row 2, Col 2 Good Link - Category:Help // Invalid Link Bogus Link // Off-site link https://forums-old.lotro.com
Row detail, Row 3, Col 1 Row detail, Row 3, Col 2 Good Link - Category:Help // Invalid Link Bogus Link // Off-site link https://forums-old.lotro.com
Row detail, Row 4, Col 1 Row detail, Row 4, Col 2 Good Link - Category:Help // Invalid Link Bogus Link // Off-site link https://forums-old.lotro.com


Back to the Top

altRows

Alternating rows colour schema that is based on your skin selection found under user preferences. Uses JavaScript and may not consistently work with collapsible and sortable or any other class name stacking.

Caption
Col Header 1 Col Header 2 Link Header
Row Header Row detail, Row 1, Col 2 Good Link - Category:Help // Invalid Link Bogus Link // Off-site link https://forums-old.lotro.com
2nd Row Header Row detail, Row 2, Col 2 Good Link - Category:Help // Invalid Link Bogus Link // Off-site link https://forums-old.lotro.com
Row detail, Row 3, Col 1 Row detail, Row 3, Col 2 Good Link - Category:Help // Invalid Link Bogus Link // Off-site link https://forums-old.lotro.com
Row detail, Row 4, Col 1 Row detail, Row 4, Col 2 Good Link - Category:Help // Invalid Link Bogus Link // Off-site link https://forums-old.lotro.com


Back to the Top

stocktable

Table format that does use alternating rows. It is based on your skin selection found under user preferences. Designed for compatibility with stacking of classes such as "sortable" and "collapsible".

Caption
Col Header 1 Col Header 2 Link Header
Row Header Row detail, Row 1, Col 2 Good Link - Category:Help // Invalid Link Bogus Link // Off-site link https://forums-old.lotro.com
2nd Row Header Row detail, Row 2, Col 2 Good Link - Category:Help // Invalid Link Bogus Link // Off-site link https://forums-old.lotro.com
Row detail, Row 3, Col 1 Row detail, Row 3, Col 2 Good Link - Category:Help // Invalid Link Bogus Link // Off-site link https://forums-old.lotro.com
Row detail, Row 4, Col 1 Row detail, Row 4, Col 2 Good Link - Category:Help // Invalid Link Bogus Link // Off-site link https://forums-old.lotro.com


Back to the Top

mptable

Colour schema used for Monster Play portions of this site. Designed for compatability with stackable class defintions such as "collapsible" and "sortable".

Caption
Col Header 1 Col Header 2 Link Header
Row Header Row detail, Row 1, Col 2 Good Link - Category:Help // Invalid Link Bogus Link // Off-site link https://forums-old.lotro.com
2nd Row Header Row detail, Row 2, Col 2 Good Link - Category:Help // Invalid Link Bogus Link // Off-site link https://forums-old.lotro.com
Row detail, Row 3, Col 1 Row detail, Row 3, Col 2 Good Link - Category:Help // Invalid Link Bogus Link // Off-site link https://forums-old.lotro.com
Row detail, Row 4, Col 1 Row detail, Row 4, Col 2 Good Link - Category:Help // Invalid Link Bogus Link // Off-site link https://forums-old.lotro.com


Back to the Top

altRowsMP

Alternating Rows based upon the Monster Play colour used on this site. Uses JavaScript and will NOT work with any other composite class definitions such as:

  • sortable
  • collapsible

nor any other "class=..." name stacking.

Caption
Col Header 1 Col Header 2 Link Header
Row Header Row detail, Row 1, Col 2 Good Link - Category:Help // Invalid Link Bogus Link // Off-site link https://forums-old.lotro.com
2nd Row Header Row detail, Row 2, Col 2 Good Link - Category:Help // Invalid Link Bogus Link // Off-site link https://forums-old.lotro.com
Row detail, Row 3, Col 1 Row detail, Row 3, Col 2 Good Link - Category:Help // Invalid Link Bogus Link // Off-site link https://forums-old.lotro.com
Row detail, Row 4, Col 1 Row detail, Row 4, Col 2 Good Link - Category:Help // Invalid Link Bogus Link // Off-site link https://forums-old.lotro.com


Back to the Top

JavaScript Classes

Site JavaScript is managed through the Gadgets extension. Each gadget is a self-contained module registered in MediaWiki:Gadgets-definition and delivered via ResourceLoader. Key JavaScript-powered classes:

  • collapsible / collapsed — powered by the collapsibleTables gadget
  • altRows / altRowsMed / altRowsMed2 / altRowsMP — powered by the alternatingRows gadget
  • changetierv2 / changeTier / creatureTier — powered by the tierSwap gadget
  • servertime — powered by the serverTime gadget
  • data-rotation / data-rotation-table — powered by the rotation gadget
  • coordslink — powered by the coords gadget
  • ajaxttlink — powered by the tooltips gadget

See Help:Gadgets for full descriptions and usage examples of each.
Back to the Top

Tooltip Classes

The tooltips system uses two CSS classes:

  • tooltip-content — wraps the tooltip popup content inside item pages. The tooltips gadget fetches this content via AJAX when a reader hovers over an [[Item:…]] link.
  • ajaxttlink — added automatically by the gadget to item links; triggers the hover behaviour.

The tooltip layout and fields are defined by Template:Item Tooltip.
Back to the Top

Named Colour Chart

A chart of all major browser supported named colours. As in the names in this table can be used in all major browsers instead of the hex code or rgb(r, g, b) notations to more easily document your colour use.


Back to the Top

Table Tips and Tricks

A list of some tips and tricks for table design and work.
Back to the Top

How to draw borders just along rows or columns inside a table

NOTE: This is a wiki and the tables here are defined via short-hand HTML notation that is translated to HTML then styles applied to that. Thus, for those familiar with the rules= requirement to use borders= -- that's handled "internally" by the wiki so you don't have to explicitly use border to gain this functionality. I'm using the border command to demonstrate how it can be used in conjunction with these commands versus just empty tables with or without column/row lines..

You'll notice how it tweaks around what you see for the tables presentation. You can use a lot of different abilities with this and style="border:..." stuff works with this stuff too but that's part of "learning" -- play with it a bit to get a feel for what you want and what you're trying to do and have faith, most probably there's a "short cut" to specifying each cell or the like. 

{| border="3"
!| Header 1
!| Header 2
!| Header 3
!| Header 4
|-
|| row 1, col 1
|| row 1, col 2
|| row 1, col 3
|| row 1, col 4
|-
|| row 2, col 1
|| row 2, col 2
|| row 2, col 3
|| row 2, col 4
|}

First -- a stock table with borders turned on...
{| border="3"

Header 1 Header 2 Header 3 Header 4
row 1, col 1 row 1, col 2 row 1, col 3 row 1, col 4
row 2, col 1 row 2, col 2 row 2, col 3 row 2, col 4

{| border="3" rules="cols"

Header 1 Header 2 Header 3 Header 4
row 1, col 1 row 1, col 2 row 1, col 3 row 1, col 4
row 2, col 1 row 2, col 2 row 2, col 3 row 2, col 4

{| border="3" rules="rows"

Header 1 Header 2 Header 3 Header 4
row 1, col 1 row 1, col 2 row 1, col 3 row 1, col 4
row 2, col 1 row 2, col 2 row 2, col 3 row 2, col 4

{| border="3" rules="all"

Header 1 Header 2 Header 3 Header 4
row 1, col 1 row 1, col 2 row 1, col 3 row 1, col 4
row 2, col 1 row 2, col 2 row 2, col 3 row 2, col 4

{|border="3" rules="none"

Header 1 Header 2 Header 3 Header 4
row 1, col 1 row 1, col 2 row 1, col 3 row 1, col 4
row 2, col 1 row 2, col 2 row 2, col 3 row 2, col 4


Back to the Top

A table that is both Collapsable -AND- Sortable

This is a trick so...

You use 2 tables. One inner and one outer. The outer table is the Container that collapses. The inner table is the sortable table.

General Rule on Collapsable tables:

  • The first table header ( <th> ! ) will be the collapse lable so use 1.
  • Seperate this title <th> element from the actual table (don't try and put it on the ! line.
  • Embedded tables *MUST* be on separate lines from the actual line.
Exampe:
{| border="1"
 !| Column Header
|-
|| <===== Notice: This is the table row that the sort table will appear in.
{| <===== Notice: Start of new table -- on a new line AFTER the line you might try and start it on.
  • If you use alternating colour stripes for your table, it is highly advisable that you 'DO NOT set it to sortable without using a class defined to support that functionality. The alternating colours are assigned to the line so will sort messing up pretty table (as in the colours will clump up).
  • You can use the collapsable and sortable tags with a predefined table class as in:
class="darktable collapsable collapsed" and the like.
  • The example here has collapsed in the collapsible class definition. This is optional to allow the table to start collapsed versus open. Just don't specify the "collapsed" portion of the class if you want it expanded at the start.
  • The example here also has the 3rd column, in the sortable table with class="unsortable" as an optional parameter to demonstrate how to remove a column from being sortable.
(and yes, you can have more than 1 unsortable column and they can be in pretty much any order you want.)
  • Any % based width use for your sort table will be based upon it's container table. As in 50% width will make it HALF the width of the ROW it is appearing in so a table with a 50% width as your collapse table and a table with 50% width for your sort table will show as 25% of the screen space (half of half the screen...) Thus (usually) sortable tables embedded in a row should be set to 100% to fill that row.
{| class="collapsible collapsed" border="1"
 !| Collapse Header
 |-
 ||
 {|
 {| class="sortable"
  !| Sort Col 1
  !| Sort Col 2
  !class="unsortable"| Unsortable Column
  |-
  || Data 1, Col 1
  || Data 1, Col 2
  || Unsortable data 1
  |-
  || Data 2, Col 1
  || Data 2, Col 2
  || Unsortable data 2
  |-
  || Data 3, Col 1
  || Data 3, Col 2
  || Unsortable data 3
 |}
|}
|}


Back to the Top

How to: Develop JavaScript/CSS on this site

Note: If you don't know what I mean by JavaScript and CSS, don't play with this stuff. This is advanced development.

Site-wide JavaScript and CSS: Use Gadgets

All new site-wide JavaScript and CSS must be added as a gadget — not placed in MediaWiki:Common.js or loaded via mw.loader.load(). See Help:Gadgets → Adding New JavaScript for the step-by-step process.

In brief:

  1. Write your code on a page named MediaWiki:Gadget-yourName.js (or .css)
  2. Create a description at MediaWiki:Gadget-yourName
  3. Register it in MediaWiki:Gadgets-definition
  4. Test and document

Personal JavaScript and CSS

You can also experiment with private JavaScript and CSS that only affects your own browsing. Edit a subpage of your user page named after the active skin:

These files will allow you to work with your code and formats privately without impacting other users. JavaScript goes in the .js file and styles in the .css file.

If your personal script works well and would benefit all users, submit a request to have it made into a gadget by the administrators.
Back to Top

Resources


Back to Top

Wikipedia Help:Table

Retrieved from "https://lotro-wiki.com/w/index.php?title=Help:Advanced_Editing_III&oldid=2044932"