IDs and Classes
| Class | Explanation |
| .owindow | description: 'This class encompasses all pop up windows, including when a username is accessed.' containers: "* Contained by #odialog-container\n* May contain:\n * .title\n * .content\n * .button-bar" details: "Whenever a user's name is clicked on, or whenever an error occurs, a pop up block comes up describing the user's info or displaying the error information. These special blocks use the .owindow class to display this information.\n\nBy default, the .owindow class and its descendents use a standard white box to display content, but manipulation of this class can lead to snazzy pop ups meant to match the site's theme." examples: "When you click on css: ".owindow {\n -moz-border-radius: 10px 10px 10px 10px;\n -moz-box-shadow: 0 0 10px;\n -webkist-border-radius: 10px;\n -webkit-box-shadow: 0 0 10px;\n background: none repeat scroll 0 0 #EEEEEE;\n border: medium none;\n color: #000000;\n position: absolute;\n text-align: left;\n text-shadow: none;\n width: 50em;\n}\n.owindow .title {\n background: url(\"http://rhombusproductions.wdfiles.com/local--files/themes%3Ared-black/top-bar.png\") repeat scroll 0 0 transparent;\n color: #FFFFFF;\n cursor: move;\n font-weight: bold;\n height: 20px;\n padding: 0.5em 1em;\n text-shadow: -1px -1px 0 #000000;\n -moz-border-radius: 2px 2px 2px 2px;\n}" template: '6540817' base: ".owindow {\n background-color: white;\n border: 2px solid #BBBBBB;\n position: absolute;\n text-align: left;\n width: 50em;\n}\n.owindow .close {\n cursor: pointer;\n float: right;\n font-size: 85%;\n padding: 0.2em 0.4em;\n}\n.owindow .title {\n background-color: #F5F5F5;\n cursor: move;\n font-size: 120%;\n font-weight: bold;\n height: 1%;\n padding: 0.2em 1em;\n}\n.owindow .content {\n padding: 0.5em 1em;\n}\n.owindow .button-bar {\n margin: 0.5em;\n padding: 0.2em 1em;\n text-align: right;\n}\n.owindow .button-bar input {\n padding: 0 0.5em;\n}\n.owindow .button-bar a {\n background-color: #F4F4F4;\n border: 1px solid #AAAAAA;\n margin: 0.2em;\n padding: 0.1em 1em;\n text-decoration: none;\n}\n.owindow .button-bar a:hover {\n background-color: #DDDDDD;\n}\n.owindow.owait {\n width: auto;\n}\n.owindow.owait .content {\n background-image: url(\"../images/progress/progressbar.gif\");\n background-position: center bottom;\n background-repeat: no-repeat;\n margin: 10px;\n padding: 0 50px 20px;\n}\n.owindow.osuccess {\n width: auto;\n}\n.owindow.osuccess .content {\n margin: 10px;\n padding: 0 50px;\n}" ifNotBase: '0' image: null Read More... |
| .page-watch-options | description: 'This class surrounds text detailing the options for watching a Wikidot page found at the bottom of every page by default directly above the edit options or directly below the page edition details.' containers: '* Contained by #page-options-container' details: "This class is the container for the page watch options, where people can watch or unwatch a page, category or the whole site. On this site, it looks like the below:\n\nStart watching: site css.wikidot.com | category _default | this page [?]\n\n.page-watch-options is a class belonging to a <div> block. Therefore, as the demonstration to the right indicates, it stretches across the entire screen." examples: "If you have used the Watchers module on your site, you may want to hide these links from appearing at the bottom of your pages. You can therefore use this class selector to hide this on every page. The code below does this:\n[[code type=\"css\"]]\n.page-watch-options { display: none; }\n[[/code]]\n\nIf you look on this particular page, you will find that you cannot find these options. This is because this page uses the above code to hide it." css: '.page-watch-options { display: none; }' template: '6540817' base: ".page-watch-options{\n font-size: 95%;\n text-align: right;\n}\n\n.page-watch-options a{\n text-decoration: none;\n}\n\n.page-watch-options a:hover{\n text-decoration: underline;\n}" ifNotBase: '0' image: null Read More... |
| .printuser | description: '.printuser is the class that is used anywhere that a users advatar and username is displayed. It is used in the upper right side of most sites to display the userinfo next to the account settings. It is also used anywhere the user module is used, in the page edit info and many other places' containers: '' details: '' examples: '' css: '' template: '6540817' base: ".printuser {\n}\n.printuser a {\n margin-right: -1px;\n}\n.printuser img.small {\n background-position: left center;\n background-repeat: no-repeat;\n height: 16px;\n margin: 0;\n padding: 1px 9px 1px 8px;\n vertical-align: -0.3em;\n width: 16px;\n z-index: 0;\n}\n.printuser.anonymous img.small {\n padding: 1px;\n}" ifNotBase: '0' image: null Read More... |
