Loading...
 

CSS Selector Questions

This page lists questions and actions for current CSS selectors (just going down the design.css file). Are they still necessary or should they be replaced with Bootstrap selectors?

/* ckeditor body definition */
html[dir=ltr]>body << REMOVED >>

#role_main { min-height: 40em; } << REMOVED - Presumably, layout properties like this are covered by Bootstrap. >>

/* Some default values for basic CSS menus layout */
.cssmenu_horiz a, .cssmenu_vert a, .cssmenu_horiz ul li a << REMOVED - if needed, it should be in a cssmenu stylesheet section. >>

.floatright
.floatleft << REMOVED (but this currently causes the site logo and title to stack rather than be in-line) - Should be replaced with equivalent Bootstrap, or removed - check instances in templates. >>

.sitetitle,
.sitesubtitle { line-height: 1; } << REMOVED >>

.iconmenu { display: inline; } << Used by Kultura in link text. >>

label { cursor: pointer; } << REMOVED >>

<< The .siteloginbar rules were REMOVED as obsolete. >>

<< The module positioning rules such as for site logo and #sitesearchbar should be replaced by modules with parameters. >>

#sitesearchbar << REMOVED >>

#tiki-top form.findtable {margin-top: 0;
	margin-bottom: 0;} << REMOVED >>

#tiki-top table {
	width: auto;
	white-space: nowrap; } << REMOVED >>


.box-quickadmin << Should cssmenu styles should be replaced by bootstrap drop-down? >>

.mod-share-item << Replace by putting in a module? >>

.fullscreen .tellafriend,  << REMOVED - Replace by putting in a module? >>
.fullscreen .share

.error.icon { font-weight: bold; color: #090; } << Replace? Can't find this used. >> 

.fullscreenbutton,
#fullscreenbutton,   << Fullscreen code is currently missing from layout_view.tpl. Should the fullscreen method be re-added, or replaced? >>

#tiki-clean << REMOVED. This is for print view, right? Still needed? >>

.floatlist << REMOVED. Found only in stylesheets. >>

#bottom_modules .box-rsslist br {
	display: none; } << REMOVED >>

#attzone,
#comzone,
#edithelpzone, << This one used only in tiki-user_tasks.tpl. >>
#rules-copy-panel { display: none; } << Presumably still needed but not sure. >>

.clear,
#clear { clear: both; } << Are these still needed (we're supporting newer browsers now)? >>

.imagerank { margin: 10px 5px; } << REMOVED. Only found in stylesheets. >> 

#tiki-top form.findtable
#tiki-top table << REMOVED, and hopefully, not needed. >>

#top_modules .box-quickadmin << Should this be positioned in design.css, or set in admin-modules? The latter, I would think. >>

#bottom_modules .box-rsslist br << REMOVED - The br isn't in wikiplugin_rss.tpl so I don't know if the break is still being produced. >>

.mod-share-item
.mod-share-item a img
.mod-share-item.google-root
.fullscreen .tellafriend,
.fullscreen .share
.share img
#rss
#power
#credits << Rules REMOVED - To be displayed via modules. >>

.mod-share-item.google-root {
	margin-left: .5em;
}

/* centercolumn */
.fullscreen .tellafriend,
.fullscreen .share {
	margin-right: 100px;
	margin-top: 2px;
}

.share img {margin-bottom: -5px;}
#rss { padding: 1em 1em 0; }
#power 	padding: 0 1em 1em;
	font-size: .9em;}
#credits {display: inline;} << REMOVED >>


.error .rbox-data .adminoption,
.error .rbox-data .adminoptionlabel {
	display: inline;} << REMOVED >>

.error.icon {
	font-weight: bold;
	color: #090;} << REMOVED >>


ul.jumplinks << REMOVED - Probably HTML5 role replaces this, as a visually impaired access method. >>

.fullscreenbutton,
#fullscreenbutton << REMOVED - What is the best way currently to get the full-screen (For main content) effect? >>

#tiki-clean << REMOVED - should be covered by Bootstrap print. >>

.floatlist
.floatlist li << REMOVED - Though I'm not sure of the purpose. Will check in the templates. >>

.mod-share-item {
	float: left; } << REMOVED >>

.mod-share-item a img {
	margin-right: .5em; } << REMOVED >>

.mini {
	width: 100%;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
} << This can't be replaced by a single Bootstrap class. About 22 instances in tpls. >>

.pagenums input[type="text"] {margin-top: -1px; } << One instance: block.pagination_links.php. Will Bootstrap pagination classes be used? >> 

a.tikihelp,
a.tikihelp:visited {
	border: 0;
	vertical-align: text-top; }

.iconmenutext { white-space: nowrap; } << 1 instance, in function.icon.php. >>

#rss img,
a.icon,
img.icon {
	vertical-align: middle;
} << Many instances, so OK to retain unless there's a better for same result. >>

#attzoneopen,
#comzoneopen,
#attzone {
	margin-top: 10px; } << REMOVED >>



/** Titles (not boxed) bold lines alone not in summary used by categobjects.tpl + ? **/
.simple_title << REMOVED - only found in stylesheets.  >>

/* New Toolbars */
.textarea-toolbar << Two instances: wiki_edit.tpl and tiki-map_edit.tpl. >>

/* New Help section */
#tikihelp << This is new, so apparently still used. >>

.simple_inlinehelp {
	font-style: italic;
	font-size: small;
	font-family: sans-serif; } << One instance: tiki-admin_notifications.tpl - There's no Bootstrap equivalent - Can this be replaced by some other class? >>

.box-share > div { text-align: center;} << Can HTML be simplified, replaced? >>

.plugin-form-float << This has many properties so hopefully can be replaced with a Bootstrap class. >>

.icon_edit_section { float: right; }
.icon_edit_section img.icon { margin-top: -1px !important; }


#bottom_modules .box-rsslist br {
	display: none; } << REMOVED >>


/* Boxes */
.box-title,
.box-data << Replaced already with Bootstrap panel classes. >>

.modules { position: relative; } << Still needed? >>

#role_main .module { max-width: 180px; } << Probably should be replaced with a grid column class. >>

h3.box-title << changed to h3.panel-title. >>

.moduleflip,
.box-title span img.flipmodimage << These still work, I believe. Is there a better way? >>

.box-data table { width: 100%; } << tables in modules. Maybe can be removed, but check what Bootstrap does with them. >>

.box-data a.linkmenu { display: block; } << Check usage, but maybe not needed. >>

.box-data ol,
.box-data ul {
	padding-left: 2em;
	padding-right: .6em;
	overflow: hidden;
	margin-top: 0;
	margin-bottom: 0; } << Check behavior without these rules. >>

.box-months_links ul << Check behavior without these rules. >>

.collapsed ul { display: none; } << Needed? >>

.modcontrols {
	display: block;
	float: right;
	width: 64px;
	height: 16px; } << Can be replaced with a global class? >>

.minichat,
.minichatdiv,
.minichatchan {
	overflow: auto; } << I guess this is necessary. >>

/* mod-switch_lang */
.box-switch_lang .box-data img {
	padding: .2em;
	vertical-align: middle; } << ? >>

.cbox,
.cbox-data {
	overflow: hidden; } << These classes no longer exist. >>

#autosave_preview > div {
	height: 30ex;
	overflow-y: auto;
	overflow-x: hidden; } << Probably needed? >>

.normal,
.normalnoborder,
.admin {
	padding: 0;
	margin: 0;
	width: 100%; } << As discussed (Nov 19 a.m.), probably should be changed to Bootstrap classes. >>

.ui-accordion .normal,
.ui-accordion .normalnoborder,
.ui-accordion .admin {
	width: auto; } << Still needed? >>

td { vertical-align: top; } << Can be removed. >>

td.third,
th,
td.heading,
tr.diffheader { text-align: center; } << Probably not needed. >>

.tabstoggle { font-size: .8em; } << Can the element be given a generic class? >>

.tabstoggle .button
.tabstoggle.floatright
.tabs .tabstoggle.floatright
.tabs .tabstoggle.floatright .button << Should be refactored somehow. >>

#pageid {
	float: left;
	clear: both; } << Why float left when text is align left already? >>

.wikiactions { white-space: nowrap !important; } << Maybe ok? >>
.split { clear: both; } << Maybe ok? >>

#page-bar {
	display: block;
	margin-top: 0; } << Isn't display: block by default? Check appearance without these rules. >>

#page-bar > span {
	float: left; } << Probably needed? Check without. >>

.hrwikibottom {
	clear: both;
	height: 0;
	visibility: hidden; } << Probably not needed because older browsefs aren't supported any more. >>
 
<< Next in design.css come the feature-specific rules. These should be considered separately. Bootstrap doesn't have any awareness of them. They need to be revamped for more global styling, etc. Roughly (r48556) lines 520 t0 1500. >>

.center << Will REMOVE. Change class to text-center. >>
.justify << No Bootstrap equiv. Probably rename to text-justify. >>
.right, .left << No Bootstrap equiv. Probably rename to text-right, -left, but check instances to see if they are necessary or exist due to kludgy code. >>
/* The reason why they have no equiv in Bootstrap is logical. They are wrong. They are dictating designers and users how text should be aligned instead of letting them decide. There should be no text-center etc. Just maybe class="aligned" for the element wrapper? Give the theme designers freedom of choice! */

#ajaxLoading << Is there something similar in Bootstrap? Check behavior and find similar. >>

#role_main { min-height: 40em; } << REMOVED. >>

/* New unsorted */
.box-webmail_inbox img.icon { vertical-align: middle; } << One instance: box-webmail_inbox.php >>

Page last modified on Wednesday 20 of November, 2013 23:14:24 GMT

Switch Theme

Layout

Subscribe to Tiki Newsletters!

Delivered fresh to your email inbox!
Newsletter subscribe icon
Don't miss major announcements and other big news!
Contribute to Tiki

Site Config