From c43a5abcebeca92a2c6ec1065b9170d174b40464 Mon Sep 17 00:00:00 2001 From: Mike Taylor Date: Mon, 10 Nov 2014 11:51:05 +0000 Subject: [PATCH] Completely redo "Structure of HTML generated by widgets" section. --- doc/mkws-manual.markdown | 117 ++++++++++++++++++++++------------------------ 1 file changed, 57 insertions(+), 60 deletions(-) diff --git a/doc/mkws-manual.markdown b/doc/mkws-manual.markdown index 23d80c4..88738ab 100644 --- a/doc/mkws-manual.markdown +++ b/doc/mkws-manual.markdown @@ -1195,76 +1195,73 @@ popup_autoOpen bool 1 Indictaes whether to pop up the wind Multiple `popup` widgets can co-exist on a page. In this case, different `popup_button` values must be used for each. -The structure of the HTML generated by the MKWS widgets -------------------------------------------------------- +Structure of HTML generated by widgets +-------------------------------------- In order to override the default CSS styles provided by the MasterKey Widget -Set, it's necessary to understand that structure of the HTML elements that are -generated within the widgets. This knowledge make it possible, for example, -to style each `
` with class `term` but only when it occurs inside an -element with class `mkws-facets`, so as to avoid inadvertently styling other -elements using the same class in the non-MKWS parts of the page. - -The HTML structure is as follows. As in CSS, #ID indicates a unique identifier -and .CLASS indicates an instance of a class. - - #mkwsSwitch - a* - - #mkwsLang - ( a | span )* - - #mkwsSearch - form - input#mkwsQuery type=text - input#mkwsButton type=submit - - #mkwsBlanket - (no contents -- used only for masking) - - #mkwsResults +Set, it's necessary to understand the structure of the HTML elements that are +generated within the widgets. The HTML structure is as follows. As in CSS, +_.class_ indicates an instance of a class. A trailing `*` indicates zero or +more instances; a trailing `?` indicates zero or one instance. + + .mkws-progress + span.mkws-done + span.mkws-waiting + + .mkws-search + form.mkws-search-form + input.mkws-query + input.mkws-button + + .mkws-results table tbody tr - td - #mkwsTermlists - div.title - div.facet* - div.termtitle - ( a span br )* - td - div#mkwsRanking - form#mkwsSelect - select#mkwsSort - select#mkwsPerpage - #mkwsPager - #mkwsNavi - #mkwsRecords - div.record* - span (for sequence number) - a (for title) - span (for other information such as author) - div.details (sometimes) + td.mkws-facets-container-wide + div.mkws-facets + div.mkws-facet* + div.mkws-facet-title + div.mkws-term* + a + span + td.mkws-motd-container + div.mkws-ranking + form + select.mkws-sort + option* + select.mkws-perpage + option* + div.mkws-pager + div + div + span.mkws-prev + span.mkws-current-page + a* + span.mkws-next + div.mkws-navi + div.mkws-records + div.mkws-summary* + div.mkws-field-data + span.mkws-field-NAME* + div.mkws-details? table tbody tr* th td - #mkwsTargets - #mkwsBytarget - table - thead - tr* - td* - tbody - tr* - td* - - #mkwsStat - span.head - span.clients - span.records - + tr + td + div.mkws-facets-container-narrow + + .mkws-targets + table + thead + tr + td* + tbody + tr* + td* + Appendix: compatibility roadmap =============================== -- 1.7.10.4