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 based up the purple colour schema used on the site. Automates banding of the tables. Will not 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 based upon the purple colour schema common 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

stocktable

Based upon the purple colour schema for this site but without alternating rows support. Designed for compatability 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

  • This section needs to be completed


Back to the Top

Tooltip Classes

  • This section needs to be completed


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.

A brief how-to on building JavaScript tools and personal CSS styles on this site.

First -- whatever [Skin] you chose from your [Preferences] will tell you the name that you should use for the JS or CSS files that are needed.

You may work with private/personal javascript and CSS formats by editing a page off your user page by your skins name.

The default skin on this site is monobook so, to develop any JavaScript or CSS, you would use the following:

  • for JavaScript: [monobook.js] (Note the LOWER-CASE sub-page name. that is required format for the interface to work)
  • for CSS: [monobook.css] (again with the lowercase name).

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

If you are designing for site-wide use, first test and workout your formatting on your private page -- THEN submit a request for it to be made available to all users by the administrators.
Back to Top

Resources to help you with developing JS and CSS

A list of the skins and what .js and .css pages to use. lower on the page are many links to existing js scripts that can be used. NOTE: All linkages, etc.. are ON THAT SITE -- not here -- so you will need to copy any scripts you wish to experiment with to your .js file here.
A fairly complete guide on many of the "hidden" structures and how to use them for manipulating various areas of the screen such as the logo, side menu-bar, upper edit bar, etc...


Back to Top

External Link

Wikipedia Help:Table

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