HTML Logo by World Wide Web Consortium (www.w3.org). Click to learn more about our commitment to accessibility and standards.

Moving forward with Composr

ocPortal has been relaunched as Composr CMS, which is now in beta. ocPortal 9 will be superseded by Composr 10.

Head over to compo.sr for our new site, and to our migration roadmap. Existing ocPortal member accounts have been mirrored.


Who wants to help me make the CSS easier to understand?

Login / Search

 [ Join | More ]
 Add topic 
Posted
Rating:
#85316 (In Topic #17541)
Avatar

The ocPortal CSS compatibility is being broken at this point, so it's a rare opportunity to find anything that could be simplified and get it done.

I'll upload the new CSS later if anyone wants to check it over and give some comments on it?


Become a fan of ocPortal on Facebook or add me as a friend. Add me on on Twitter.
Was I helpful?
  • If not, please let us know how we can do better (please try and propose any bigger ideas in such a way that they are fundable and scalable).
  • If so, please let others know about ocPortal whenever you see the opportunity.
  • If my reply is too Vulcan or expressed too much in business-strategy terms, and not particularly personal, I apologise. As a company & project maintainer, time is very limited to me, so usually when I write a reply I try and make it generic advice to all readers. I'm also naturally a joined-up thinker, so I always express my thoughts in combined business and technical terms. I recognise not everyone likes that, don't let my Vulcan-thinking stop you enjoying ocPortal on fun personal projects.
  • If my response can inspire a community tutorial, that's a great way of giving back to the project as a user.
Back to the top
 
Posted
Rating:
#85317
Avatar

Community saint

Chris-

I am out of my depth here but there are others whose input would be very valuable. I am just happy to see that you are carefully laying the foundation for ocPortal so that future versions will  benefit from all the work you do here.

Bob
Back to the top
 
Posted
Rating:
#85318
Avatar

Community saint

While we are at this, let's get full sponsorship for the following issues which also tie into the CSS changes Chris is making. All are partially-sponsored or pledged and we should do what we can to get these addresses as Chris goes through this CSS stuff:
0000058: Remove panel_width option - ocPortal feature tracker
0000366: Drop legacy support - ocPortal feature tracker
0000423: Performance improvements: frontend technologies - ocPortal feature tracker

The first two are relatively inexpensive so it should be easy to get the balance of the sponsorships.

The last item is pricey but also includes some very important changes – most notably, moving the JS to the bottom so that it no longer blocks the beginning of the screen render. People hate waiting and this should help to reduce bounce rates.

Let's make sure that Chris can accomplish this and that he is also compensated for all the hard work that he does.

Bob

EDIT: Posted correct link for third item


Last edit: by BobS
Back to the top
 
Posted
Rating:
#85326
Avatar

Community saint

From the very beginning of my involvement with ocPortal I found that there was something innately satisfying about using those funny little html and css symbols with a strong dose of reasoning to tweak my sites. Strange enough, I never felt that way when I was using Joomla. I taught myself the code from reading these forums, following video tutorials and reading countless articles. Web base examples are never far from me while I work at a new theme.  Meanwhile,  I've discovered an art form which begs for my limited time and when I can hold the css paint brush it is always a lot of fun. It is just starting to be less intimidating, but I'm sure I could not reinvent CSS rules at this stage.

Chris, your proposal sounds very  intriguing and I can only say that I'm more than curious at what it would take to participate.

Meanwhile, I've given a few credits on one of Bob's interesting suggestions for sponsorship:
0000366: Drop legacy support - ocPortal feature tracker
Back to the top
 
Posted
Rating:
#85327
Avatar

Community saint

Thanks for your support of that project, Jean. It's important to be able to let go of the past to move to the future. Microsoft has learned this the hard way. A few more credits and we'll have that issue fully-sponsored.

As far as the CSS upgrade goes, don't underestimate yourself. Think back on some of your theming efforts and  try to recall an item where you just wanted to scream, "It should not be this difficult." That might be a perfect example for Chris to think about as he works to simplify the CSS.

Bob
Back to the top
 
Posted
Item has a rating of 5 (Liked by BobSLiked by Jean)  
Rating:
#85328
Avatar

Participation is very straight-forward. I post the global.css file here, and people just reply pointing out confusing points of it.

I've still a lot to do, but I've done the main tidying up now. That means I can post it now.

What I haven't yet done:
  • Removed the standard boxes (currently I've just pulled out the code, but something much simpler is going to go back in)
  • Replaced image-based gradients with CSS ones
  • Removed comcode_exp_ref stuff
  • Possibly, some style updates in general (which is a different matter really)

Some things of note I have done:
  • Huge amount of reorganisation in the file
  • Many things renamed
  • Some CSS classes merged
  • Created a new 'BETA_CSS_PROPERTY' symbol that automatically adds prefixes like "-webkit-" to CSS properties that need it (I gave this a lot of thought, we want the properties, we don't want messy CSS, and this symbol works as an effective marker for what areas are dodgy and gives us a vector for making quick emergency changes without having to change the CSS itself)
  • Some stuff moved out to separate CSS files (e.g. all the forms CSS)

Code

/*
 {$BRAND_NAME`}
 Copyright (c) ocProducts, 2004-2012
*/

/*
=========================
===Overridden Elements===
=========================
*/

html, body {
   border: 0;
   {+START,IF,{$MOBILE}}
      word-wrap: break-word;
   {+END}
}

body, textarea, input, td, th {
   font-family: 'Tahoma', 'Verdana', 'Arial', 'Helvetica', sans-serif;
}

tt, kbd, samp {
   font-weight: bold;
}

abbr,acronym {
   border-bottom: 1px dotted; /* For Safari, which does not have it by default */
}

/* Re-apply default styles non-HTML5-aware browsers */
aside,footer,header,nav,hgroup,article {
   display: block;
}

textarea, input, code {
   font-size: 1em;
}

input[type="text"]:focus, input[type="password"]:focus {
   background: url('{$IMG;,keyboard}') right center no-repeat white;
}

input[type="text"],input[type="password"],input[type="color"],input[type="email"],input[type="number"],input[type="range"],input[type="search"],input[type="tel"],input[type="url"],textarea,select { /* Normally a browser default, but gets inherited on some phones */
   background: white;
}

a:link, .button_hyperlink {
   color: #123d7b; /* {$,a.link, 73% (seed sat_to 85) + 27% !W/B} */
}
a:visited {
   color: #113871; /* {$,wizard, 67% (seed sat_to 85) + 33% !W/B} */
}
a:hover, .button_hyperlink:hover {
   color: #051225; /* {$,a.hover, 30% a.link + 70% !W/B } */
}
a, .button_hyperlink {
   {$BETA_CSS_PROPERTY,transition: color 1s linear;}
}

h1, h2, h3 {
   font-weight: normal;
   color: #325180; /* {$,wizard, 76% seed + 24% !W/B} */
   border-bottom: 1px solid #c1cee3; /* {$,wizard, 100% lightborder} */
}
h1 {
   font-size: 1.9em;
}
h2 {
   font-size: 1.3em;
}
h3 {
   font-size: 1.1em;
}
h3 a:link,
h3 a:active,
h3 a:visited,
h3 a:hover {
   text-decoration: none;
}
h4 {
   font-size: 1em;
   font-weight: bold;
}
/* An iframe screen */
.opens_below h1 {
   display: none;
}

td, th {
   vertical-align: top;
}
th, .fake_th {
   background-color: #a2b6d5; /* {$,th.bgcolor, 60% sb_color + 40% seed} */
   color: #313740; /* {$,wizard, 30% th.bgcolor + 70% !W/B} */
   font-weight: bold;
   text-align: center;
}
/* .de_th makes a th look like a td, yet allows us to use correct markup */
td, th.de_th {
   color: #0d1522; /* {$,wizard, 20% seed + 80% !W/B} */
   font-weight: normal;
   text-align: {!en_left};
   background-color: transparent;
   font-weight: normal;
   border: 0;
}

hr {
   height: 0;
   border: 0;
   border-bottom: 2px dotted #a2b6d5; /* {$,wizard, 60% sb_color + 40% seed} */
   text-align: left; /* Fixes difference with Opera */
}

img {
   display: inline;
   border: 0;
}

iframe {
   padding: 0;
   margin: 0;
   border: 0;
}

/*input[type="text"],textarea {  So Comcode can be typed
   unicode-bidi: bidi-override;
   direction: ltr;
}*/
#htmlarea input[type="text"], #htmlarea textarea {
   unicode-bidi: normal;
   direction: {!dir};
}

{+START,IF,{$MOBILE}}
   select {
      max-width: 100px;
   }

   /* On mobiles we want maximum fluidity */

   table, table.do_next_section {
      table-layout: auto !important;

      /* Allows wrapping */
      overflow-x: visible !important;
      overflow-y: visible !important;
   }
   col {
      width: auto !important;
   }
   * {
      white-space: normal !important;
      word-wrap: break-word !important;
   }
{+END}

/*
=========================
======Global Layout======
=========================
*/

/* Consider .website_body as 'body': it is just we cannot put our styles directly on body because sometimes this gets used in things we should not mess with such as the WYSIWYG editors frame (which is #htmlarea) and e-mails */
.website_body {
   padding: 0 !important;
   color: #0d1522; /* {$,wizard, 20% seed + 80% !W/B} */
   background: #FFFFFF; /* {$,wizard, 100% W/B} */
}

/* htmlarea = WYSIWYG editor */
.website_body, #htmlarea {
   margin: 0;
   font-size: 0.88em;
}

{+START,IF,{$CONFIG_OPTION,fixed_width}}{+START,IF,{$NOT,{$MOBILE}}}
   #main_website { /* #main_website targets only the main site screen, avoiding frames etc */
      background-color: #e3eaf6 !important; /* {$,wizard, 11% (seed sat_to 100) + 89% W/B} */

      /* Want to change the tiled background?
         Try this Google search to get image ideas http://www.google.co.uk/search?tbm=isch&q=tile+background
         Find how to edit the referenced "outer-background" theme image by doing an Admin Zone search for "outer-background"
      */
      background: url('{$IMG;,outer-background}');
   }
   #main_website #body_inner {
      width: 980px;
      position: relative;
      margin: 0 auto 0 auto;
      border-left: 1px solid #8ba4ca; /* {$,wizard, 61% seed + 39% W/B} */
      border-right: 1px solid #8ba4ca; /* {$,wizard, 61% seed + 39% W/B} */
      border-bottom: 1px solid #8ba4ca; /* {$,wizard, 61% seed + 39% W/B} */
      {$BETA_CSS_PROPERTY,box-shadow: 0 0 30px #6b81a1;} /* {$,wizard, 100% medborder.border} */
   }
{+END}{+END}

header {
   background-color: #e3e9f2; /* {$,topcolor, 100% bgcol } */
   {+START,IF,{$NOT,{$CONFIG_OPTION,fixed_width}}}
      {$BETA_CSS_PROPERTY,box-shadow: 0 0 2px 2px #426aa9;} /* {$,wizard, 100% seed} */
   {+END}
}

header h1 {
   margin: 0;
   {+START,IF,{$MOBILE}}
      width: 100%;
      float: left;
      text-align: center;
   {+END}
}

{+START,IF,{$NOT,{$MOBILE}}}
   .logo {
      float: left;
   }

   /*
   Commented out by default.
   If you enable it will turn off the standard logo and replace it with a big header image.
   Don't enable if banners addon is still installed

   Find how to edit the referenced "header" theme image by doing an Admin Zone search for "header"
   */
   /*
   .logo_outer {
      margin-bottom: 8px;
      width: 980px;
      height: 100px;
      float: left;
      background: url('{$IMG;,header}') no-repeat !important;
   }
   
   .logo_outer * {
      display: none;
   }

   #global_navigation {
      margin-top: 99px !important;
   }
   */
{+END}

#global_navigation {
   font-size: 0.95em;
   {+START,IF,{$MOBILE}}
      text-align: center !important;
      margin: 0 auto;
      padding: 8px 0px 9px 0;
   {+END}
   {+START,IF,{$NOT,{$MOBILE}}}
      text-align: right;
      margin-top: 59px;
      padding: 6px 5px 8px 0;
      background: url('{$IMG;,zone_gradient}') repeat-x;
   {+END}
   min-height: 15px;
   font-weight: bold;
   color: #edf2f9; /* {$,wizard, 15% zg_top + 85% W/B} */
   background-color: #426aa9; /* {$,wizard, 100% seed} */
   background-position: left bottom;
}

.global_banner {
   position: absolute;
   top: 0;
   right: 0;
}

.text_banner {
   width: 13.5em;
   font-family: 'Arial', sans-serif;
   background-color: white;
}

.text_banner a {
   font-size: 1.4em;
}

.text_banner_l_text {
   color: #008000; /* {$,wizard, 100% 008000} */ /* Google adwords style */
   font-size: 0.9em;
}

/* This is applied to the screen title, which is specially included on each screen; in the case of Comcode pages it is the first level 1 title. The screen title is by default an h1, but we define the styles separately so we can style this special title independently (there are lots of cool things we could do to it) */
.screen_title {
   margin-top: 0.35em;
   margin-bottom: 0.8em;
   min-width: 300px;
}

.global_breadcrumbs {
   padding: 5px 0 0 0;
   {+START,IF,{$NOT,{$MOBILE}}}
      float: {!en_right};
      margin-left: 5px;
   {+END}
}
.global_breadcrumbs abbr {
   white-space: nowrap;
}

.breadcrumbs {
   font-weight: bold;
}

.breadcrumbs_img {
   vertical-align: middle;
   margin-{!en_right}: 4px;
}

.title_tagline, .subtitle_tagline {
   font-size: 0.8em;
}
.title_tagline {
   padding-bottom: 20px;
   margin-top: -1.5em;
   color: #444649; /* {$,wizard, 30% sb_color + 70% !W/B} */
}
.subtitle_tagline {
   margin: -8px 0 0 19px;
}

#body_inner {
   min-height: 450px;
   overflow: hidden;
}

#main_website #body_inner, .fake_middle_continuation {
   background-color: #ffffff; /* {$,maincolor, 100% W/B} */

   /* Want to set a tiled background?
      Uncomment the code below
      Try this Google search to get image ideas http://www.google.co.uk/search?tbm=isch&q=tile+background
      Find how to edit the referenced "inner-background" theme image by doing an Admin Zone search for "inner-background"
   */
   /*background: url('{$IMG;,inner-background}');*/
}

.global_middle {
   padding: 5px;
   overflow: hidden;
}

#popup_spacer {
   padding: 20px;
}
#popup_spacer h2 {
   margin-top: 0;
}

/* Used in the Setup Wizard constructed block layouts in the start page */
.fp_col_block {
   {+START,IF,{$NOT,{$MOBILE}}}
      width: 48%;
   {+END}
   {+START,IF,{$MOBILE}}
      margin: 0.5em 0;
      width: 100%;
   {+END}
}

.fake_middle_continuation {
   padding: 1px; /* Needed to force border draw of inner-contents */
}

/* fake_middle_continuation is defined to make it easy for us to reapply the same styling that goes to global_middle to something else such as the contents of an iframe */
.global_middle, .fake_middle_continuation {
}

#panel_left {
   float: {!en_left};
}

#panel_right {
   float: {!en_right};
}

.global_side {
   word-wrap: break-word;
   padding-top: 1em;
   padding-bottom: 10px;
}

.global_side .standardbox_wrap_panel {
   font-size: 0.9em;
}

.global_side h2 {
   border-bottom: 1px solid;
   text-transform: lowercase;
   font-weight: normal;
   width: 50%;
   padding-{!en_left}: 10px;
   margin-{!en_left}: 10px;
}

.global_messages {
   padding: 4px 4px 8px 4px;
}

.global_message {
   margin: 3px 0;
}

.global_message strong {
   text-shadow: 1px 1px 1px #4b5a71; /* {$,wizard, 70% medborder.border + 30% !W/B} */
   font-weight: normal;
}

.global_message img {
   margin-top: -3px;
   margin-{!en_right}: 5px;
}

footer {
   background-color: #6b81a1; /* {$,wizard, 100% medborder.border} */

   color: #ffffff; /* {$,wizard, 100% W/B} */
   padding: 10px;
   {+START,IF,{$NOT,{$CONFIG_OPTION,fixed_width}}}
      {$BETA_CSS_PROPERTY,box-shadow: 0 0 2px 2px #8ba4ca;} /* {$,footer_bg, 61% seed + 39% W/B} */
   {+END}
   {+START,IF,{$MOBILE}}
      text-align: center;
   {+END}
}

footer .button_hyperlink,
footer a:link,
footer a:visited,
footer a:active,
footer .linkcolor {
   color: #000000; /* {$,wizard, 100% !W/B} */
}

footer a:hover {
   color: #FFFFFF !important; /* {$,wizard, 100% W/B} */
}

footer .global_bottom {
   {+START,IF,{$NOT,{$MOBILE}}}
      float: {!en_left};
   {+END}
}

footer .global_bottom img {
   vertical-align: middle;
}

footer .global_bottom_button_ref_point {
   position: absolute;
}

footer .global_bottom #special_page_type {
   width: 17em;
}

footer .global_flagrant {
   {+START,IF,{$NOT,{$MOBILE}}}
      float: {!en_right};
   {+END}
   font-size: 0.9em;
   color: #dbe6f7; /* {$,wizard, 35% footer_bg + 65% W/B} */
   font-weight: bold;
   padding-bottom: 4px;
   text-shadow: 2px 2px 2px #6b81a1; /* {$,wizard, 100% medborder.border} */
}

footer .invisible_ref_point {
   position: absolute;
   width: 0px;
}

footer .global_copyright {
   {+START,IF,{$NOT,{$MOBILE}}}
      text-align: center;
   {+END}
   font-size: 0.85em;
}

footer .global_minilinks {
   padding-top: 3px;
   font-size: 0.9em;
   white-space: nowrap; /* Stops logout link wrapping around in Firefox 3.6 */
}

footer .global_minilinks a {
   white-space: nowrap;
   {+START,IF,{$MOBILE}}
      padding: 4px;
   {+END}
}

footer .global_minilinks a:hover {
   color: #97aed0; /* {$,wizard, 10% W/B + 90% footer_bg} */
}

/*
=========================
==With Special Meanings==
=========================
*/

.autocomplete { /* Membership of this class is used as a tag to allow form autocompletion */
}

.xhtml_validator_off { /* Membership of this class is used as a tag to turn off the XHTML-validator */
   display: inline-block; /* To stop it breaking text-align: center */
   width: 100%;
}

.img_thumb { /* Membership of this class is used as a tag to turn on the nereid blend effect */
   opacity: 0.7;
}

.textarea_scroll { /* Turns off word-wrapping for a textarea: this has to be done using Javascript so that the invalid 'wrap' property isn't written into the XHTML */
}

body .accessibility_hidden { /* Contents should be made visible (or interpreted) for accessibly representation but hidden for normal visual display */
   /* Shift it out of the viewport */
   position: absolute;
   top: -256000px;
   left: 0;
   display: block; /* stops browser bugs where it interacts with the layout flow incorrectly */
}

.non_accessibility_redundancy { /* Contents should be skipped by screen readers */
   {+START,IF,{$MOBILE}}
      display: none;
   {+END}
}

/*
=========================
=====Reusable Styles=====
=========================
*/

.float_surrounder, .float_surrounder_precise {
   width: 100%;
   outline: 0;
   overflow: hidden;
}

.nothing_here, .more_here {
   font-size: 0.95em;
   padding-{!en_left}: 15px;
   margin-{!en_left}: 10px;
   background-image: url('{$IMG;,edited}');
   background-position: {!en_left} 4px;
   background-repeat: no-repeat;
}

.edited {
   font-size: 0.85em;
   padding-{!en_left}: {$?,{$MOBILE},0.7,2}em;
   font-style: italic;
}
div.edited {
   padding-top: {$?,{$MOBILE},10,30}px;
}

.inline_image {
   vertical-align: top !important;
}

.inline_image_2 {
   vertical-align: middle !important;
}

.inline_image_3 {
   vertical-align: baseline !important;
}

.inline_image_4 {
   margin-top: -4px !important;
}

.media_box {
   overflow: hidden;
   width: 100%;
   outline: 0;
   margin: {$?,{$MOBILE},1,3}em 0;
   text-align: center;
   position: relative;
}

.media_box a {
   outline: 0;
}

.media_box img, .img_thumb {
   border: 1px solid #6b81a1; /* {$,wizard, 100% medborder.border} */
   {$BETA_CSS_PROPERTY,box-shadow: 3px 3px 10px #6b81a1;} /* {$,wizard, 100% medborder.border} */
   max-width: 100%;
   box-sizing: border-box;
}

.scale_down { /* Membership of this class is used as a tag to turn on image scaling */
   max-width: 100%;
   box-sizing: border-box;
}

a.poster_member em {
   text-shadow: 2px 2px 2px #8497b3; /* {$,wizard, 50% bordcolor + 50% W/B } */
   padding: 4px 0;
   letter-spacing: 1px;
}
a.poster_member:link, a.poster_member:active, a.poster_member:visited, a.poster_member:hover {
   font-size: 1em;
   font-weight: bold;
   border: 1px dashed #8497b3; /* {$,wizard, 50% bordcolor + 50% W/B } */
   border-left: 0;
   border-right: 0;
   display: block;
   background-color: #f0f3f9; /* {$,wizard, 75% ocf_row2 + 25% W/B }*/
   margin-bottom: 7px;
   text-decoration: none;
   padding: 2px 2px;
}
.post_poster a.poster_member:link, .post_poster a.poster_member:active, .post_poster a.poster_member:visited, .post_poster a.poster_member:hover {
   display: inline-block;
}
a.poster_member:hover {
   border-color: #072d65; /* {$,wizard, 100% bordcolor}*/
   background-color: #f5f8fb; /* {$,wizard, 50% ocf_row2 + 50% W/B }*/ /*50% white over medborder color*/
}

input.button_hyperlink {
   border-style: none;
   background-color: transparent;
   text-decoration: underline;
   font-weight: bold;
   border: 0;
   margin: 0;
   padding: 0;
   cursor: pointer;
   text-align: {!en_left};
}

/* Makes a link tag (a) look like it's not anything special (we use these tags as tab points sometimes) */
.non_link,
.non_link:link,
.non_link:visited,
.non_link:hover,
.non_link:active {
   color: #0d1522 !important; /* {$,wizard, 20% seed + 80% !W/B} */
   text-decoration: none;
   cursor: default;
}

.hide_button {
   vertical-align: middle;
   {$BETA_CSS_PROPERTY,transition: opacity 0.2s linear !important;}
   outline: 0;
   font-weight: bold;
}
{+START,IF,{$NOT,{$MOBILE}}}
   .hide_button_spacing {
      padding-top: 20px;
   }
{+END}

.pulldown_spacer {
   padding-top: 20px;
}

.comcode_supported_icon {
   vertical-align: middle;
}

.quick_self_edit_link {
   font-size: 0.8em;
   text-align: center;
}
#panel_top .quick_self_edit_link {
   display: none;
}

.control_functions {
   font-weight: bold;
}

.staff_actions {
   margin-top: 2em;
   font-size: 0.95em;
   {+START,IF,{$MOBILE}}
      border: 1px solid #6b81a1; /* {$,wizard, 100% medborder.border} */
   {+END}
}
.staff_actions a {
   white-space: nowrap !important;
}

.associated_links {
   font-size: 0.8em;
   text-align: center;
}
/* Panels made smaller already, so can't allow a font size to be too tiny */
.global_side .associated_links {
   font-size: 0.9em;
}

.associated_breadcrumbs {
   font-size: 0.8em;
   color: #123d7b; /* {$,a.link, 73% (seed sat_to 85) + 27% !W/B} */
}

.associated_details {
   font-size: 0.8em;
   font-weight: normal;
}
div.associated_details {
   margin: 5px;
}

.trinav_left {
   float: left;
   {+START,IF,{$NOT,{$MOBILE}}}
      margin-left: 26px;
   {+END}
   {+START,IF,{$MOBILE}}
      width: 33%;
   {+END}
   text-align: left;
}

.trinav_mid {
   float: left;
   {+START,IF,{$NOT,{$MOBILE}}}
      margin-left: 26px;
   {+END}
   {+START,IF,{$MOBILE}}
      width: 33%;
   {+END}
   text-align: center;
}

.trinav_right {
   float: right;
   {+START,IF,{$NOT,{$MOBILE}}}
      margin-left: 10px;
      margin-right: 26px;
   {+END}
   {+START,IF,{$MOBILE}}
      width: 33%;
   {+END}
   text-align: right;
}

.nav_mid {
   text-align: center;
   {+START,IF,{$MOBILE}}
      margin: 10px auto 0px;
      width: 100%;
      float: left;
   {+END}
}

.red_alert {
   color: #d91522; /* {$,red_highlights, 80% FF0000 + 20% seed} */
   font-weight: bold;
}
div.red_alert {
   text-align: center;
}

div.error, p.error {
   background-color: #fff2f2; /* {$,wizard, 95% W/B + 5% FF0000} */
   padding: 5px 0;
}

.field_name {
   font-weight: bold;
}

.horiz_field_sep {
   padding-{!en_left}: 30px;
}

th.meta_data_title {
   font-weight: bold !important;
}

.inline_wip_message {
   background-color: #F2F5F9; /* {$,wizard, 80% ocf_row2 + 20% W/B}*/
   padding: 4px;
   margin: 0;
   border: 1px solid #EBE773; /* {$,wizard, 100% EBE773} */ /* Intentionally redish on all theme colours */
   font-size: 0.9em;
}

#global_navigation .inline_wip_message {
   background-color: #426aa9; /* {$,wizard, 100% seed} */
}

.inline_wip_message img {
   float: {!en_left};
}

.inline_wip_message p {
   margin: 1px 0 0 28px;
}

/*
=========================
========Spacing==========
=========================
*/

.not_too_tall {
   max-height: 300px;
   overflow: auto;
}

.horizontal_scrolling {
   overflow: auto;
   padding-right: 1px; /* For non-aligning table borders */
}

span.long_space {
   padding-{!en_left}: 30px;
   display: inline-block;
}

.tiny_linebreak {
   line-height: 0.5em;
}

.tiny_paragraph {
   margin: 0.5em 0;
}

.whitespace_visible {
   width: 100%;
   overflow: auto;
   outline: 0;
   white-space: pre;
}

.standard_indent {
   padding-{!en_left}: 100px;
}

.mini_indent {
   padding-{!en_left}: 20px;
}

hr.spaced_rule {
   margin: 20px 0;
}

hr.long_break {
   margin: 20px 0;
}

.arrow_ruler {
   text-align: center;
}

.centered_inline_block {
   text-align: center;
}

.inline_block {
   text-align: {!en_left};
   display: inline-block;
}

.inline_block .wide_table_wrap { /* Fixes Firefox bug */
   overflow-x: visible;
   overflow-y: visible;
}

.inline {
   display: inline;
}

.left {
   float: {!en_left};
}

.right {
   float: {!en_right};
}

.float_separation {
   padding-{!en_right}: 10px;
}

.lonely_preview {
   text-align: center;
}

/*
=========================
=========Tables==========
=========================
*/

.table_cell_nowrap {
   white-space: nowrap;
}

.autosized_table {
   table-layout: auto !important;
}

.autosized_table img {
   vertical-align: middle;
}

table.scrollable_inside {
   table-layout: fixed; /* For permission setting stuff that can scroll off */
}

.wide_table_wrap {
   overflow-x: auto;
   overflow-y: hidden;
}

.wide_table {
   width: 100%;
   {+START,IF,{$NOT,{$MOBILE}}}
      table-layout: fixed;
   {+END}
}

.spaced_table th, .spaced_table td {
   padding: 3px;
}

/* Undo for nested tables from WYSIWYG */
.solidborder table[cellpadding="0"] td, .solidborder table[cellpadding="0"] th {
   padding: 0;
}

.highlighted_table_cell {
   background-color: #c1cee3; /* {$,wizard, 100% lightborder} */
}

/*
=========================
=====Core Interfaces=====
=========================
*/

.question_ui_buttons {
   text-align: center;
   margin-top: 15px;
}

.tooltip {
   font-size: 1em;
   padding: 3px;
   background-color: #f5f7fa; /* {$,wizard, 5% seed + 95% W/B} */
   border: 1px solid #4b5a71; /* {$,wizard, 70% medborder.border + 30% !W/B} */
   z-index: 1000;
   opacity: 0.9;
   word-wrap: break-word;
}
.tooltip img {
   max-width: 100%;
}
.tooltip .shunted_button {
   display: none;
}
.tooltip .whitespace_visible {
   max-height: 5em;
   overflow: auto;
}
.tooltip .standardbox_links_classic {
   display: none;
}
.tooltip_img {
   position: absolute;
   right: 3px;
   top: 3px;
}
.tooltip h2 {
   margin-top: 0;
}
.tooltip a, .tooltip a:visited, .tooltip a:link, .tooltip a:active, .tooltip a:hover {
   text-decoration: none !important;
   color: inherit !important;
}
.tooltip_fields {
   border-collapse: collapse;
   font-size: 0.85em;
}
.tooltip_fields th {
   border-right: 1px solid #4b5a71; /* {$,wizard, 70% medborder.border + 30% !W/B} */
   font-weight: bold !important;
   padding-right: 1em;
}
.tooltip_fields td {
   padding-left: 1em;
}

.diff del {
   color: red;
}
.diff ins {
   font-weight: bold;
   text-decoration: none;
}

.members_viewing {
   padding: 4px;
   text-indent: 25px;
   padding-{!en_left}: 0;
}

.radio_list_picture {
   float: {!en_left};
   white-space: nowrap;
   padding: 3px;
   font-size: 0.8em;
   min-height: 35px;
   min-width: 35px;
}

#page_running_admin_themes .radio_list_picture {
   float: none;
   margin: 15px;
   border: 1px solid #c1cee3; /* {$,wizard, 100% lightborder} */
}

.radio_list_picture img {
   max-width: 100px;
}

.results_table {
   font-size: 0.85em;
   margin: 8px 0;
}

.results_table_sorter {
   margin-bottom: 3px;
   max-width: {$?,{$MOBILE},315,400}px;
   float: left;
}

.results_browser_spacing {
   padding: 10px 0;
}

.results_browser {
   float: {$?,{$MOBILE},{!en_left},{!en_right}};
   padding: 0;
   margin: 2px 0 0 0;
/*   max-width: 540px; Looks bad on forumview */
}

.alphabetical_jumper {
   float: none !important;
   margin-left: 2px !important;
   margin-bottom: 10px !important;
   max-width: 100% !important;
   padding: 3px;
}

.results_continue, .results_page_num {
   border-{!en_left}: 0;
}

.results_page_num {
   font-weight: bold;
}

.results_browser_per_page {
   {+START,IF,{$NOT,{$MOBILE}}}
      display: inline;
      padding: 0 20px;
   {+END}
   {+START,IF,{$MOBILE}}
      float: left;
   {+END}
}

.results_browser_pages {
   display: inline;
}

/* See also medborder declaration near bottom and .ocf_on declaration above */
.results_browser a:link,
.results_browser a:visited,
.results_browser a:hover,
.results_browser a:active,
.results_browser span,
.results_launcher a:link,
.results_launcher a:visited,
.results_launcher a:hover,
.results_launcher a:active,
.results_launcher span {
   display: inline-block;
   text-decoration: none;
   margin-top: 0;
   {+START,IF,{$NOT,{$MOBILE}}}
      margin-{!en_left}: -1px;
   {+END}
}
.results_browser a:hover,
.results_launcher a:hover {
   background-color: #d9e1ee; /* {$,wizard, 20% seed + 80% W/B} */
}

.results_browser a:link,
.results_browser a:visited,
.results_browser a:hover,
.results_browser a:active,
.results_browser span,
.results_launcher a:link,
.results_launcher a:visited,
.results_launcher a:hover,
.results_launcher a:active,
.results_launcher span {
   padding: 2px {$?,{$MOBILE},10,5}px;
}

.results_launcher a:link,
.results_launcher a:visited,
.results_launcher a:hover,
.results_launcher a:active,
.results_launcher span {
   padding: 0 3px;
}

.results_launcher {
   font-size: 0.8em;
   display: inline;
   padding-{!en_left}: 20px;
}

.category_list {
   margin: 0;
   padding: 0 0 0 20px;
   overflow: auto;
}

.category_entry {
   padding: 6px 0;
   margin: 6px 0;
   clear: both;
   overflow: hidden;
   width: 100%;
}

.category_entry a img {
   max-width: 150px;
}

.category_entry + .category_entry {
   border-top: 1px solid #c1cee3; /* {$,wizard, 100% lightborder} */
}

.category_entry a {
   font-size: 1.1em;
}

.category_entry .associated_details {
   margin-bottom: 0;
}

.category_sorter {
   text-align: center;
   margin: 20px auto 0 auto;
   padding: 5px;
}

.category_sorter label {
   font-weight: bold;
}

.category_sorter br {
   line-height: 1.3em;
}

.index_screen_fancier_screen_pre {
   margin-bottom: 15px;
}

.index_screen_fancier_screen_post {
   margin-top: 15px;
}

{+START,IF,{$NOT,{$MOBILE}}}
   .index_screen_fancier_screen_entries {
      margin-{!en_left}: 30px;
   }
{+END}

.index_screen_fancier_entry {
   margin: 3px;
   padding: 3px;
}

.index_screen_fancier_entry_link {
   font-weight: bold;
   margin-bottom: 0.3em;
}

.index_screen_fancier_entry_count {
   font-size: 0.8em;
   font-weight: normal;
}

.index_screen_fancier_entry_description {
   font-size: 0.8em;
   margin-{!en_left}: 1.3em;
}

#splurgh {
   font-weight: bold;
}

#splurgh ul {
   list-style: none;
   margin-{!en_left}: 0;
   padding-{!en_left}: 0;
   font-size: 1.5em;
}

#splurgh li {
   margin-{!en_left}: 0;
   padding-{!en_left}: 0;
}

#splurgh ul ul {
   list-style: circle;
   font-size: 0.9em;
   padding-top: 6px;
}

#splurgh li li {
   margin-{!en_left}: 40px;
   padding-{!en_left}: 0;
}

#splurgh ul ul ul {
   font-size: 0.8em;
}

#splurgh ul ul ul ul {
    font-size: 1em;
}

div.wysiwyg_color_finder {
   color: #EAEFF5; /* {$,barrier_a, 72% bgcol + 28% W/B} */
}

.fractional_edit {
   margin: -3px;
   border: 1px dashed #94979d; /* {$,wizard, 65% bgcol + 35% !W/B} */
   padding: 2px;
}

.fractional_edit_nonover {
}

.ajax_tree_list_loading {
   padding: 80px;
   text-align: center;
}

#tree_list__root_tree_list {
   padding-bottom: 4px;
}
.tree_list_highlighted a, .tree_list_nonhighlighted a {
   background-color: white;
   color: black;
}
.tree_list_highlighted a {
   font-weight: bold;
}
.tree_list_nonhighlighted a {
}

/*
=========================
========Feedback=========
=========================
*/

{+START,IF,{$NOT,{$MOBILE}}}
   .lined_up_boxes .ratings, .lined_up_boxes .trackbacks {
      margin-top: 0;
   }

   .lined_up_boxes .right {
      margin-left: 1em;
   }

   .lined_up_boxes .left {
      margin-right: 1em;
   }
{+END}

{+START,IF,{$MOBILE}}
   .lined_up_boxes .right {
      width: 100%;
   }

   .lined_up_boxes .left {
      width: 100%;
   }
{+END}

.ratings {
   width: {$?,{$MOBILE},100%,10em};
   margin-top: 1em;
}

.ratings .standardbox_spaced {
   padding: 0 0 5px 5px;
}

.RATING_BOX .rating_inner {
   text-align: center;
}

.RATING_INLINE_DYNAMIC .rating_inner, .RATING_INLINE_DYNAMIC form {
   display: inline;
}

.post_action_link .RATING_INLINE_DYNAMIC {
   padding-left: 20px;
}

.rating_inner {
   white-space: nowrap;
}

.rating_inner img {
   cursor: pointer;
}

.trackbacks {
   width: {$?,{$MOBILE},100%,14em};
   margin-top: 1em;
   margin-left: 1em;
}

.trackback_inside {
   white-space: nowrap;
}

.trackback_result {
   padding: 5px;
}

.post .post_title {
   font-weight: bold;
   padding-left: 0;
   margin-bottom: 0.2em;
}

.post .post_avatar {
   float: right;
   margin: 10px 0 0 20px;
   width: 60px;
}

.post .post_subline {
   margin-bottom: 1em;
   font-size: 0.8em;
}

.post .post_poster {
   font-weight: bold;
}

.post .post_time {
}

.post .post_action_link {
}

.post .post_thread_children {
   margin-top: 1em;
   {+START,IF,{$MOBILE}}
      margin-left: 7px;
   {+END}
   {+START,IF,{$NOT,{$MOBILE}}}
      margin-left: 20px;
   {+END}
}

.post .post_buttons {
   margin-top: 1.3em;
}

.post_buttons a {
   opacity: 0.0;
   {$BETA_CSS_PROPERTY,transition-property : opacity;}
   {$BETA_CSS_PROPERTY,transition-duration : 0.5s;}
}

.post_buttons a[rel="add reply"] {
   opacity: 1.0;
}

.post_buttons:hover a {
   opacity: 1.0;
}

.post_show_more {
   text-align: center;
   border: 1px dashed #c1cee3; /* {$,wizard, 100% lightborder} */
   border-bottom-left-radius: 40px;
   border-bottom-right-radius: 40px;
   padding: 15px;
   font-weight: bold;
   font-size: 0.85em;
}

.post .post_show_more {
   margin-left: 20px;
}

.highlighted_post {
   background-color: #fafbfd; /* {$,code_content, 25% ocf_row2 + 75% W/B} */
   padding: 15px;
   border: 1px dotted #6b81a1; /* {$,wizard, 100% medborder.border} */
   {+START,IF,{$NOT,{$MOBILE}}}
      margin-right: 70px;
   {+END}
}

#comments_form .standardbox_wrap_internal {
   margin: 0;
   border: 0;
}

#comments_posting_form_outer .attachments {
   text-align: {!en_left};
   padding: 5px;
}

.comments_posting_form_inner {
   text-align: {!en_left};
   padding: 0px;
   margin: 0 auto;
   width: {$?,{$MOBILE},100%,525}px;
   {+START,IF,{$MOBILE}}
      overflow: hidden;
      outline: 0;
   {+END}
}

.comments_posting_form_inner textarea {
   color: #94979d; /* {$,wizard, 65% bgcol + 35% !W/B} */
}

.comments_posting_form_inner table {
   border-collapse: collapse;
}

.comments_posting_form_end {
   overflow: hidden;
   {+START,IF,{$MOBILE}}
      margin: 4px 20px 10px 0px;
      padding: 0;
      text-align: center;
   {+END}
   {+START,IF,{$NOT,{$MOBILE}}}
      margin-left: 160px;
   {+END}
}

{+START,IF,{$MOBILE}}
   .comments_posting_form_end .proceed_button button {
      float: none;
   }
{+END}

.comments_captcha img, .comments_captcha iframe, .comments_captcha input {
   margin: 0 5px 2px 5px;
   vertical-align: middle;
}

.comments_captcha {
   width: 200px;
   margin: 20px auto 0 auto;
   font-size: 0.85em;
   text-align: center;
}

.comments_posting_form_inner th {
   font-weight: bold !important;
   padding: 3px 15px 3px 0;
   border-right: 1px solid #6b81a1; /* {$,wizard, 100% medborder.border} */
}

.comments_posting_form_inner td {
   padding-left: 15px;
}

.comments_posting_form_emoticons {
   float: {!en_left};
   width: 120px;
   padding-{!en_right}: 5px;
   text-align: center;
   padding-top: 5px;
   font-size: 0.8em;
}

.comments_posting_form_emoticons p {
   margin-bottom: 0;
}

.comments_posting_form_links {
   text-align: right;
   font-size: 0.85em;
   font-weight: normal;
}

.reviews_average {
   font-size: 0.8em;
   opacity: 0.7;
}

/*
=========================
==========Lists==========
=========================
*/

ul.compact_list, ol.compact_list {
   margin: 0;
   padding: 0;
}
ul.compact_list li, ol.compact_list li {
   margin: 0 0 0 17px;
   padding: 0;
}

ul.spaced_list, .spaced_list ul, ol.spaced_list, .spaced_list ol {
   margin: 0;
   padding: 0 !important;
   list-style-type: square;
}
.spaced_list li {
   margin: 0 0 10px 25px !important;
   padding: 0;
}

ul.tick_list, ul.tick_list li {
   margin: 0;
   padding: 0;
   list-style-type: none;
}

ul.actions_list {
   padding: 0 0 0 {$?,{$MOBILE},10,40}px;
   margin: 0;
}
.global_side ul.actions_list {
   padding-left: 15px;
}
ul.actions_list li, ul.actions_list_compact li, ul.actions_list_super_compact li {
   padding: 0;
   margin: 0;
   list-style-type: none;
   list-style-image: none;
}
ul.actions_list h4 {
   display: inline;
   line-height: 2em;
}

ul.actions_list_compact {
   padding: 0 0 0 20px;
   margin: 0;
}

ul.actions_list_super_compact {
   padding: 0;
   margin: 0;
}

li.actions_list_strong {
   font-weight: bold;
}

/*
=========================
=======Misc Forms========
=========================
*/

.captcha {
   font-size: 0.8em;
   margin-bottom: 3px;
}

.captcha a {
   float: {!en_right};
   margin: 10px 0 0 5px;
}

/* This will push back 100% width elements that would cause CSS-overflows or table-stretches. Input fields do it a lot because they have built in borders. Doesn't happen for drop-downs and buttons */
.constrain_field {
   padding-{!en_right}: 9px; /* Tested for precision on Firefox */
}

.quite_wide_field {
   width: 88%;
}

.wide_field, .wide_button {
   width: 100%;
}

input.input_box_label_within {
   color: gray;
}

input[type="reset"].wide_button, input[type="reset"].button_micro, input[type="reset"].button_page, input[type="reset"].button_pageitem,
input[type="submit"].wide_button, input[type="submit"].button_micro, input[type="submit"].button_page, input[type="submit"].button_pageitem,
input[type="button"].wide_button, input[type="button"].button_micro, input[type="button"].button_page, input[type="button"].button_pageitem,
button.wide_button, button.button_micro, button.button_page, button.button_pageitem
{
   {$BETA_CSS_PROPERTY,transition: opacity 0.5s linear;}
   display: inline-block;
   border: none;
   cursor: pointer;
   border: 1px solid #072d65; /* {$,wizard, 100% bordcolor}*/
   background-color: #5a85c5; /* {$,wizard, 100% lgradcolor} */
   color: #ffffff; /* {$,wizard, 100% W/B} */
   border-radius: 6px 6px 6px 6px;
   -moz-border-radius: 6px;
   background-image: url('{$IMG;,standardboxes/title_gradient}');
   opacity: 0.85;
   text-shadow: 1px 1px 1px #000000; /* {$,wizard, 100% !W/B} */
   margin: 0 2px;
}

.button_pageitem_tall {
   background-image: none !important;
}

.button_options_spacer {
   margin-{!en_left}: {$?,{$MOBILE},10,30}px;
}

input[type="reset"].button_micro, input[type="submit"].button_micro, input[type="button"].button_micro, button.button_micro
{
   padding: 0 3px 1px 3px !important;
   opacity: 1.0; /* Needed for Opera */
}
input[type="reset"].wide_button, input[type="submit"].wide_button, input[type="button"].wide_button, button.wide_button, input[type="submit"].button_pageitem, input[type="button"].button_pageitem, button.button_pageitem
{
   padding: 2px 4px 3px 4px !important;
}
input[type="reset"].button_page, input[type="submit"].button_page, input[type="button"].button_page, button.button_page
{
   padding: 3px 5px 4px 5px !important;
   min-width: {$?,{$MOBILE},5.8,9.8}em;
}
input[type="reset"].wide_button:hover, input[type="reset"].button_micro:hover, input[type="reset"].button_page:hover, input[type="reset"].button_pageitem:hover,
input[type="submit"].wide_button:hover, input[type="submit"].button_micro:hover, input[type="submit"].button_page:hover, input[type="submit"].button_pageitem:hover,
input[type="button"].wide_button:hover, input[type="button"].button_micro:hover, input[type="button"].button_page:hover, input[type="button"].button_pageitem:hover,
button.wide_button:hover, button.button_micro:hover, button.button_page:hover, button.button_pageitem:hover
{
   opacity: 1.0;
}
input[type="reset"].wide_button:disabled, input[type="reset"].button_micro:disabled, input[type="reset"].button_page:disabled, input[type="reset"].button_pageitem:disabled,
input[type="submit"].wide_button:disabled, input[type="submit"].button_micro:disabled, input[type="submit"].button_page:disabled, input[type="submit"].button_pageitem:disabled,
input[type="button"].wide_button:disabled, input[type="button"].button_micro:disabled, input[type="button"].button_page:disabled, input[type="button"].button_pageitem:disabled,
button.wide_button:disabled, button.button_micro:disabled, button.button_page:disabled, button.button_pageitem:disabled
{
   opacity: 0.4 !important;
   cursor: default;
}

.button_page, .button_pageitem {
   vertical-align: middle;
   {+START,IF,{$MOBILE}}
      margin-bottom: 5px;
   {+END}
}

.proceed_button {
   text-align: center;
   padding: 15px 0; /* Can't be margin, as in Firefox it can collapse below the body */
   margin: 0;
}
.global_side .proceed_button {
   padding: 5px 0;
}
div.proceed_button_left {
   text-align: {!en_left};
}
div.proceed_button_left_2 {
   text-align: {!en_left};
   margin-{!en_left}: -20px;
}

.mini_proceed_button {
   padding-top: 20px;
}

.shunted_button {
   text-align: {!en_right};
}

.button_panel_spaced {
   margin-top: 10px;
}

.button_panel {
   text-align: center;
}

.button_panel_left {
}

/*
=========================
====Frame Interfaces=====
=========================
*/

.dynamic_iframe {
   width: 100%;
   height: 900px; /* This is dynamically resized; 900px is referenced from JAVASCRIPT.tpl so don't change it */
}

.expandable_iframe {
   width: 100%;
}

/*
=========================
=======Carousels=========
=========================
*/

.carousel {
   overflow: hidden;
   width: 100%;
   white-space: nowrap;
   position: relative;
}

.carousel .img_thumb {
   max-width: 140px;
}

.carousel .move_left, .carousel .move_right {
   min-height: 16px;
   width: 17px;
}

.carousel .move_left {
   margin-right: 20px;
   padding-right: 5px;
   float: left;
   background: url('{$IMG;,carousel/button_left}') left center no-repeat;
   border-right: 1px dotted #6b81a1; /* {$,wizard, 100% medborder.border} */
}

.carousel .move_left_hover {
   background-image: url('{$IMG;,carousel/button_left_hover}');
}

.carousel .move_right {
   margin-left: 20px;
   padding-left: 5px;
   float: right;
   background: url('{$IMG;,carousel/button_right}') right center no-repeat;
   border-left: 1px dotted #6b81a1; /* {$,wizard, 100% medborder.border} */
}

.carousel .move_right_hover {
   background-image: url('{$IMG;,carousel/button_right_hover}');
}

.carousel .main {
   overflow: hidden;
}

/*
=========================
===========Tabs==========
=========================
*/

.tab_surround {
   border-left: 1px solid;
   border-right: 1px solid;
   border-bottom: 1px solid;
   border-color: #b5b5b5; /* {$,wizard, 100% b5b5b5} */
   padding: 8px;
   margin-left: 1px;
}

.tabs {
   border-left: 0;
   border-right: 0;
   border-top: 0;
   border-bottom: 1px solid;
   border-color: #b5b5b5; /* {$,wizard, 100% b5b5b5} */
   height: 22px;
}

a.tab:link, a.tab:visited, a.tab:hover, a.tab:active {
   text-decoration: none;
}

.tab {
   float: left;
   background: url('{$IMG;,tab}') !important;
   padding: 3px 7px 0 7px !important;
   height: 20px;
   text-align: center;
   cursor: pointer;
}

.tab_active {
   font-weight: bold;
}

.tab:hover {
   text-decoration: underline !important;
}

.tab strong {
   font-weight: normal;
   font-style: italic;
}

.tab_first {
}

.tab_last {
   border-right: 1px solid;
   border-color: #b5b5b5; /* {$,wizard, 100% b5b5b5} */
}

.tab_surround .tab { /* subtabs */
   padding-top: 5px !important;
   height: 18px;
   font-size: 0.88em;
}

/*
=========================
==========Menus==========
=========================
*/

.nl, .nl ul {
   display: block;
   margin: 0;
   padding-{!en_left}: 0;
}

.nl li {
   display: block;
   margin-{!en_left}: 0;
   padding-{!en_left}: 0;
   list-style-type: none;
   list-style-image: none;
}

.menu_type__tree .has_no_img .drawer, .menu_type__popup .has_no_img .drawer {
   background: url('{$IMG;,menus/menu_bullet_expand}') no-repeat 0 5px !important;
}

.menu_type__tree .has_no_img .drawer:hover, .menu_type__popup .has_no_img .drawer:hover {
   background: url('{$IMG;,menus/menu_bullet_expand_hover}') no-repeat 0 5px !important;
}

.has_img a {
   background: none !important;
   padding-{!en_left}: 0 !important;
}

.has_img {
   padding-{!en_left}: 25px !important;
}

.has_img img {
   vertical-align: bottom;
}

.menu_type__dropdown .nlevel .has_img img, .menu_type__popup .has_img img {
   width: 20px;
}

.menu_type__tree ul li a, .menu_type__popup ul li a, .menu_type__dropdown ul.nlevel li a { /* ul li added to ensure precedence over ".nl li" selector, whilst not forcing us to use up our only !important */
   display: inline-block;
   padding-{!en_left}: 14px;
}

.menu_type__tree .current a, .menu_type__popup .current a, .menu_type__dropdown .nlevel .current a {
   background: transparent url('{$IMG;,menus/menu_bullet_current}') no-repeat 5px 6px !important;
}

.menu_type__popup .has_img.current a, .menu_type__dropdown .nlevel .has_img.current a {
   background: none !important;
}

.menu_type__tree .non_current a, .menu_type__popup .non_current a, .menu_type__dropdown .nlevel .non_current a {
   background: transparent url('{$IMG;,menus/menu_bullet}') no-repeat 5px 6px;
}

.menu_type__tree .non_current a:hover, .menu_type__popup .non_current a:hover, .menu_type__dropdown .nlevel .non_current a:hover {
   background: transparent url('{$IMG;,menus/menu_bullet_hover}') no-repeat 5px 6px;
}

.menu_type__select li, .menu_type__dropdown .nlevel li {
   padding: 3px 5px !important;
}

.menu_type__tree li, .menu_type__popup li {
   padding: 3px 5px 3px 0 !important;
}

.menu_type__popup .nlevel li , .menu_type__dropdown .nlevel li {
   white-space: nowrap;
}

.global_bottom img {
   {$BETA_CSS_PROPERTY,transition: transform 0.5s linear;}
}

.global_bottom img:hover {/*, .menu_type__dropdown li:hover>img*/
   {$BETA_CSS_PROPERTY,transform: rotate(10deg);}
}

.menu_type__popup {
   min-width: 150px;
}

.menu_type__dropdown ul.nlevel, .menu_type__popup ul {
   line-height: 1.4em;
   border-top: 1px solid #6b81a1; /* {$,wizard, 100% medborder.border} */
   border-left: 1px solid #6b81a1; /* {$,wizard, 100% medborder.border} */
   border-right: 1px solid #6b81a1; /* {$,wizard, 100% medborder.border} */
}

.menu_type__dropdown ul.nlevel {
   {$BETA_CSS_PROPERTY,box-shadow: 3px 3px 10px #6b81a1;} /* {$,wizard, 100% medborder.border} */
}

.menu_type__popup .menu_spacer, .menu_type__popup li, .menu_type__dropdown .nlevel li, .menu_type__dropdown .nlevel .menu_spacer {
   border-bottom: 1px solid #6b81a1; /* {$,wizard, 100% medborder.border} */
}

.menu_type__popup .menu_spacer, .menu_type__popup li {
   background-color: #eaeff6 !important; /* {$,mm_c_tab, 100% ocf_row2} */
}

.menu_type__popup li a:link, .menu_type__popup li a:visited, .menu_type__popup li a:active {
   color: #123d7b; /* {$,wizard, 73% (seed sat_to 85) + 27% !W/B} */
}
.menu_type__popup li a:hover {
   color: #9C202F !important; /* {$,wizard, 100% a.hover}*/
}

.menu_type__popup ul ul {
   margin-top: -1px;
}

.menu_type__popup a:link, .menu_type__popup a:visited, .menu_type__popup a:active, .menu_type__dropdown .nlevel a:link, .menu_type__dropdown .nlevel a:visited, .menu_type__dropdown .nlevel a:active {
   text-decoration: none;
}

.menu_type__popup a:hover, .menu_type__dropdown .nlevel a:hover {
   text-decoration: underline;
   cursor: pointer;
}

.menu_type__dropdown .nlevel li, .menu_type__dropdown .nlevel .menu_spacer {
   background-color: #c1cee3; /* {$,wizard, 100% lightborder} */
}

.menu_type__dropdown .nlevel li:hover {
   background-color: #d9e1ee; /* {$,wizard, 20% seed + 80% W/B} */
}

.menu_type__dropdown .nlevel .menu_spacer {
   display: block;
   padding-{!en_right}: 0;
}

.menu_type__dropdown .nlevel, .menu_type__dropdown .nlevel a:active, .menu_type__dropdown .nlevel a:link, .menu_type__dropdown .nlevel a:visited, .menu_type__dropdown .nlevel a:hover {
   color: #0d1522 !important; /* {$,wizard, 20% seed + 80% !W/B} */
}

.menu_type__embossed, .menu_type__top, .menu_type__dropdown {
   overflow: hidden;
   outline: 0;
}

.menu_type__embossed, .menu_type__top, .menu_type__dropdown, .menu_type__embossed li, .menu_type__top li, .menu_type__dropdown li.toplevel {
   background-color: #eaeff6 !important; /* {$,mm_c_tab, 100% ocf_row2} */
}

.menu_type__embossed .current, .menu_type__top .current, .menu_type__dropdown .toplevel.current {
   color: #0d1522; /* {$,wizard, 20% seed + 80% !W/B} */
   background-color: #c2d1e5 !important; /* {$,hover_bg, 93% (mm_c_tab sat_to 15) + 7% !W/B} */
}

.menu_type__embossed a:link, .menu_type__embossed a:visited, .menu_type__embossed a:hover, .menu_type__embossed a:active, .menu_type__top a:link, .menu_type__top a:visited, .menu_type__top a:hover, .menu_type__top a:active {
   text-decoration: none;
}

.menu_type__embossed a:hover, .menu_type__top a:hover, .menu_type__dropdown a.toplevel_link:hover {
   background-color: #c2d1e5 !important; /* {$,hover_bg, 93% (mm_c_tab sat_to 15) + 7% !W/B} */
   {$BETA_CSS_PROPERTY,transition: color,background-color 0.5s linear;}
}

.menu_type__embossed a, .menu_type__top a, .menu_type__dropdown a.toplevel_link {
   display: block;
   padding: 3px 4px 5px 4px !important;
   outline: 0;
}

.menu_type__top a, .menu_type__dropdown a.toplevel_link {
   font-size: 0.9em;
}

{+START,IF,{$NEQ,{$LANG},EN}}
   .menu_type__embossed a, .menu_type__top a, .menu_type__dropdown a.toplevel_link {
      font-size: 0.72em;
   }
{+END}

.menu_type__embossed {
   border-left: 1px solid #6b81a1; /* {$,wizard, 100% medborder.border} */
   border-right: 1px solid #6b81a1; /* {$,wizard, 100% medborder.border} */
   border-bottom: 1px solid #6b81a1; /* {$,wizard, 100% medborder.border} */
}

.menu_type__embossed li {
   border-top: 1px solid #6b81a1; /* {$,wizard, 100% medborder.border} */
}

.menu_type__top, .menu_type__dropdown {
   border-top: 1px solid #0d1522; /* {$,wizard, 20% seed + 80% !W/B} */
   border-bottom: 1px solid #0d1522; /* {$,wizard, 20% seed + 80% !W/B} */
   border-{!en_right}: 1px solid #0d1522; /* {$,wizard, 20% seed + 80% !W/B} */
}

.menu_type__top li, .menu_type__dropdown li.toplevel {
   float: {!en_left};
   border-{!en_left}: 1px solid #0d1522; /* {$,wizard, 20% seed + 80% !W/B} */
   margin-{!en_right}: -1px;
   margin-bottom: 0;
   {+START,IF,{$MOBILE}}
      font-size: 0.8em;
   {+END}
   {$BETA_CSS_PROPERTY,transition: color,background-color 0.5s linear;}
}

.menu_type__top li.last, .menu_type__dropdown li.toplevel.last {
   float: none !important; /* so it eats all space remaining */
   overflow: hidden; /* so it is shunted against it's left-hand neighbours without overlapping */
   margin-{!en_right}: 0 !important; /* as would cause wrapping with the overflow hidden */
   position: relative; {!en_left}: -1px; /* In place of margin-right */
}

.menu_type__top li.last a, .menu_type__dropdown li.toplevel.last a {
   border-left: 1px solid #0d1522; /* {$,wizard, 20% seed + 80% !W/B} */
}

.menu_type__top img, .menu_type__dropdown .toplevel_link img {
   margin-top: -2px;
}

.menu_type__top img, .menu_type__dropdown img {
   float: {!en_left};
   padding: 0 8px 0 3px;
}

.menu_type__top .menu_spacer, .menu_type__dropdown li.toplevel.menu_spacer {
   height: 1.15em;
   width: 4em;
   padding: 4px;
   float: {!en_left};
}

.menu_type__tree ul, .menu_type__select ul {
   margin: 2px 0 0 0 !important;
}

.menu_type__tree ul ul {
   padding-{!en_left}: 5px;
}

.menu_type__zone {
   font-size: 0.9em;
   max-height: 15px;
}

.menu_type__zone ul {
   display: inline;
   margin: 0;
   padding: 0;
   {+START,IF,{$MOBILE}}
      overflow:hidden;
      height:auto;
      text-align:center;
   {+END}
}

{+START,IF,{$NEQ,{$LANG},EN}}
   .menu_type__zone ul {
      font-size: 0.85em;
   }
{+END}

.menu_type__zone li {
   display: inline;
   padding: 0;
   list-style-type: none;
   list-style-image: none;
}

.menu_type__zone li * {
   vertical-align: middle;
}

.menu_type__zone .divider {
   color: #bdcbe1; /* {$,wizard, 35% seed + 65% W/B} */
}

#global_navigation .menu_type__zone a:link, #global_navigation .menu_type__zone a:visited, #global_navigation .menu_type__zone a:active {
   color: #edf2f9; /* {$,wizard, 15% zg_top + 85% W/B} */
}

.menu_type__zone a:link, .menu_type__zone a:visited, .menu_type__zone a:active {
   margin-{!en_right}: 1px;
   text-decoration: none;
}

#global_navigation .menu_type__zone a:hover {
   color: #ffffff; /* {$,global_navigation_hover, 100% W/B } */
}

.menu_type__zone a {
   border-bottom: 1px transparent;
   {$BETA_CSS_PROPERTY,transition: border-bottom-color 0.5s linear;}
   border-bottom-color: #426aa9; /* {$,wizard, 100% seed} */
}

.menu_type__zone a:hover {
   text-decoration: none;
   border-bottom: 1px dashed;
}

.menu_type__zone .current {
   border-bottom: 1px dashed;
   border-bottom-color: #a5bde1; /* {$,wizard, 75% zg_top + 25% FFFFFF} */
}

.menu_type__zone .current:hover {
   border-bottom: 1px dashed;
   border-bottom-color: #ffffff; /* {$,wizard, 100% global_navigation_hover} */
}

.menu_type__zone .menu_spacer {
   padding: 0 3em;
}

.edit_menu_link {
   text-align: {!en_right};
   font-size: 0.8em;
}

.menu_block .edit_menu_link a, #global_navigation .edit_menu_link_inline, #panel_top .edit_menu_link_inline, #panel_bottom .edit_menu_link_inline {
   opacity: 0.4;
   {$BETA_CSS_PROPERTY,transition: opacity 0.5s linear;}
}
.menu_block:hover .edit_menu_link a, #global_navigation:hover .edit_menu_link_inline, #panel_top:hover .edit_menu_link_inline, #panel_bottom:hover .edit_menu_link_inline {
   opacity: 1.0;
}

*>.edit_menu_link_inline {
   display: none;
}

*:hover>.edit_menu_link_inline {
   display: block;
}

.edit_menu_link_inline {
   position: absolute;
   right: 1px;
   z-index: 10000;
}

/*
=========================
=========Comcode=========
=========================
*/

.comcode_snapback {
   text-align: {!en_right};
   font-size: 0.7em;
}

.comcode_overlay {
   padding: 15px;
   margin: 0;
   background-color: #fafbfd; /* {$,code_content, 25% ocf_row2 + 75% W/B} */
   border: 1px solid #7f9ac5; /* {$,wizard, 68% seed + 32% W/B} */
}

.comcode_overlay_main {
   margin-bottom: 3em;
}

.comcode_overlay_dismiss {
   text-align: center;
   position: absolute;
   bottom: 0;
   width: 90%;
}

.comcode_code_wrap {
   width: 100%;
   overflow-x: auto;
}

/* .comcode_quote is used where the [quote] tag is parsed. */
/* .comcode_code is used where the [code] tag is parsed. */
.comcode_quote, .comcode_code, .comcode_hide {
   margin: 15px;

   /* To prevent horizontal overlapping with floats */
   outline: 0;
}
.comcode_quote, .comcode_code {
   overflow: auto;
}
.comcode_hide {
   overflow: hidden;
}

.comcode_quote_h4,
.comcode_code_h4 {
   border: 1px solid #7f9ac5; /* {$,wizard, 68% seed + 32% W/B} */
   padding: 4px;
   margin-bottom: 0;
   background: #8ea6cb url('{$IMG;,quote_gradient}') repeat-y; /* {$,comcode_code_h4, 60% seed + 40% W/B} */
}

.comcode_quote_content,
.comcode_code_content {
   border: 1px solid #7f9ac5; /* {$,wizard, 68% seed + 32% W/B} */
   display: block;
   padding: 5px;
   margin-{!en_left}: 8px;
   background-color: #fafbfd; /* {$,code_content, 25% ocf_row2 + 75% W/B} */
   color: #3f3f3f; /* {$,wizard, 25% code_content + 85% !W/B} */
   overflow: hidden;
}

.comcode_quote_content_titled {
   border-top: 0;
}

.comcode_code_content {
   font-family: 'Courier New', 'Courier', monospace;
   font-size: 1.1em;
   border-top: 0;
   white-space: nowrap;
   overflow: auto;
}

.comcode_code_scroll {
   max-height: 300px;
}

.comcode_highlight {
   font-weight: bold;
   color: #d91522; /* {$,wizard, 100% red_highlights} */
   background-color: #ffffcc; /* {$,orange_highlights,100% #ffffcc} */
}

.cedi_link, .comcode_exp_ref {
   color: #444649; /* {$,wizard, 30% sb_color + 70% !W/B} */
   font-size: 0.85em;
}

.comcode_exp_ref a {
   background-image: url('{$IMG;,arrow_box}') !important;
}

.cedi_link a {
   background-image: url('{$IMG;,cedi_link}') !important;
}

.comcode_exp_ref a, .cedi_link a {
   padding-{!en_right}: 17px !important;
   background-repeat: no-repeat !important;
   background-position: 100% 30% !important;
}

.comcode_exp_ref a:hover {
   background-image: url('{$IMG;,arrow_box_hover}') !important;
}

.cedi_link a:hover {
   background-image: url('{$IMG;,cedi_link_hover}') !important;
}

.comcode_exp_ref a:hover, .cedi_link a:hover {
   padding-{!en_right}: 17px !important;
   background-repeat: no-repeat !important;
   background-position: 100% 30% !important;
}

.comcode_exp_thumb {
   background-color: #eaeff6; /* {$,wizard, 100% ocf_row2} */
   width: 10%;
   padding: 0;
   margin: 5px;
   margin-{!en_left}: 0;
}

.comcode_exp_thumb td {
   border: 1px solid #6b81a1; /* {$,wizard, 100% medborder.border} */
}

.comcode_exp_thumb p {
   color: #325180; /* {$,wizard, 76% seed + 24% !W/B} */
   font-size: 0.8em;
   padding: 2px;
   margin: 0;
   margin-bottom: 3px;
}

.comcode_exp_thumb img {
   margin: 1px;
}

.comcode_concept_inline, a.comcode_concept_inline:link, a.comcode_concept_inline:visited, a.comcode_concept_inline:hover, a.comcode_concept_inline:active {
   border-bottom: 1px dashed #325180; /* {$,wizard, 76% seed + 24% !W/B} */
   display: inline-block;
}

.comcode_concepts {
   font-size: 0.85em;
   border: 1px solid #bdcbe1; /* {$,wizard, 35% seed + 65% W/B} */
   background-color: #eaeff6; /* {$,wizard, 100% ocf_row2} */
   width: 80%;
   margin: 0 auto;
}

.comcode_concepts_header {
   font-weight: bold;
   text-align: center;
   background-color: #a2b6d5; /* {$,wizard, 60% sb_color + 40% seed} */
   color: #313740; /* {$,wizard, 30% th.bgcolor + 70% !W/B} */
   height: 1.8em;
}

.comcode_concepts_title {
   background-image: url('{$IMG;,checklist/checklist1}');
   background-repeat: no-repeat;
   background-position: 1px 0;
   vertical-align: top;
   text-indent: 14px;
   margin: 0;
}

.comcode_concepts_content {
   padding-bottom: 0.8em;
}

.comcode_table_of_contents {
   border: 1px solid #bdcbe1; /* {$,wizard, 35% seed + 65% W/B} */
   background-color: #eaeff6; /* {$,wizard, 100% ocf_row2} */
   display: inline-block;
   padding-{!en_right}: 10px;
   white-space: nowrap;
   font-size: 0.9em;
}

.search_result .comcode_table_of_contents {
   display: none;
}

.comcode_table_of_contents ol {
   list-style-position: inside;
   padding-{!en_left}: 12px;
   margin: 0;
}
.comcode_table_of_contents li {
   margin: 0;
   padding: 0;
}

.comcode_table_of_contents a {
   margin: 0;
}

.comcode_table_of_contents_title {
   text-align: center;
   color: #444649; /* {$,wizard, 30% sb_color + 70% !W/B} */
   margin: 3px;
   font-weight: bold;
}

.comcode_italic {
   font-style: italic;
}

.comcode_bold {
   font-weight: bold;
}

.comcode_underline {
   text-decoration: underline;
}

.comcode_strike {
   text-decoration: line-through;
}

.comcode_section_controller {
   padding-top: 10px;
   margin-bottom: 20px;
}

.ticker {
   margin: 0 auto;
   height: 15px;
   white-space: nowrap;
   overflow: hidden;
   text-align: left;
}

.shocker {
   text-align: right;
   width: 100%;
   font-size: 1.2em;
}

.shocker_left {
   float: left;
   font-weight: bold;
}

.shocker_right {
}

{+START,IF,{$NOT,{$MOBILE}}}
   .attachment {
      min-width: 450px;
      margin: 1em 0;
      border: 1px solid #6b81a1; /* {$,wizard, 100% medborder.border} */
   }
   
   .attachment legend {
      border: 1px solid #6b81a1; /* {$,wizard, 100% medborder.border} */
      padding: 0.15em 0.3em;
      font-size: 0.9em;
      font-style: italic;
   }
{+END}

.attachment_details {
   margin-top: 8px;
}

.attachment_left {
   float: left;
   margin: 0 15px 5px 0;
}

.attachment_right {
   float: right;
   margin: 0 0 5px 15px;
}

.attachment_left .attachment, .attachment_right .attachment {
   width: 200px;
}

.attachment_action {
   font-size: 0.8em;
}

.attachment_action a {
   font-weight: bold;
}

.attachment_img {
   max-width: 100%;
}

/*
=========================
====Link type display====
===Based on "Elements"===
==== by Ben Henschel ====
=========================
*/

a[href^="mailto:"] {
   background: url('{$IMG;,filetypes/email_link}') no-repeat right top;
   padding: 0 22px 5px 0;
}

a[href$=".pdf"], a[href$=".ps"], body div a.pdf_link {
   background: url('{$IMG;,filetypes/page_pdf}') no-repeat right top;
   padding: 0 22px 5px 0;
}

a[href$=".doc"], a[href$=".docx"], a[href$=".rtf"], body div a.doc_link {
   background: url('{$IMG;,filetypes/page_doc}') no-repeat right top;
   padding: 0 22px 5px 0;
}

a[href$=".xls"], a[href$=".xlsx"], body div a.xls_link {
   background: url('{$IMG;,filetypes/page_xls}') no-repeat right top;
   padding: 0 22px 5px 0;
}

a[href$=".ppt"], a[href$=".pptx"], body div a.ppt_link {
   background: url('{$IMG;,filetypes/page_ppt}') no-repeat right top;
   padding: 0 22px 5px 0;
}

a[href$=".log"], a[href$=".txt"], body div a.txt_link {
   background: url('{$IMG;,filetypes/page_txt}') no-repeat right top;
   padding: 0 22px 5px 0;
}

a[href$=".odt"], body div a.odt_link {
   background: url('{$IMG;,filetypes/page_odt}') no-repeat right top;
   padding: 0 22px 5px 0;
}

a[href$=".odp"], body div a.odp_link {
   background: url('{$IMG;,filetypes/page_odt}') no-repeat right top;
   padding: 0 22px 5px 0;
}

a[href$=".ods"], body div a.ods_link {
   background: url('{$IMG;,filetypes/page_ods}') no-repeat right top;
   padding: 0 22px 5px 0;
}

a[href$=".rss"], body div a.feed_link {
   background: url('{$IMG;,filetypes/feed}') no-repeat right top;
   padding: 0 22px 5px 0;
}

a[href$=".torrent"], body div a.torrent_link {
   background: url('{$IMG;,filetypes/page_torrent}') no-repeat right top;
   padding: 0 22px 5px 0;
}

a[href$=".zip"], a[href$=".gz"], a[href$=".bz2"], a[href$=".tar"], a[href$=".rar"], body div a.archive_link {
   background: url('{$IMG;,filetypes/page_archive}') no-repeat right top;
   padding: 0 22px 5px 0;
}

a[href$=".asf"], a[href$=".ra"], a[href$=".wma"], a[href$=".wav"], a[href$=".mp3"], a[href$=".ogg"], a[href$=".mid"], a[href$=".mov"], a[href$=".qt"], a[href$=".wmv"], a[href$=".ram"], a[href$=".rm"], a[href$=".avi"], a[href$=".mpg"], a[href$=".mpe"], a[href$=".mpeg"], a[href$=".mp4"], a[href$=".webm"], body div a.media_link {
   background: url('{$IMG;,filetypes/page_media}') no-repeat right top;
   padding: 0 22px 5px 0;
}

a[target="_blank"] {
   background: url('{$IMG;,filetypes/external_link}') no-repeat right top;
   padding-right:10px;
}

a[onclick$="window.open"], body div a.external_link {
   background: url('{$IMG;,filetypes/external_link}') no-repeat right top !important;
   padding-right:10px !important;
}

body a.link_exempt, body link_exempt_wrap a, body a[href*=".php"] {
   background-image:none;
   padding:0px;
}

body a.link_exempt2 {
   background-image:none;
}

{+START,IF,{$ADDON_INSTALLED,recommend}}
   .print_icon {
      background: url('{$IMG;,recommend/print}') no-repeat left top !important;
      padding: 0 0 5px 22px !important;
   }
{+END}

a[title="{!VIRTUAL_ROOT}"]:hover {
   color: #d91522; /* {$,red_highlights, 80% FF0000 + 20% seed} */
}

/*
=========================
=======Print rules=======
=========================
*/

@media print {
   body {
      background: none;
   }
   
   h1 {
      display: none;
   }
   
   .wide_table_wrap {
      overflow-y: visible !important;
   }

   .button_panel,
   #screen_actions_outer,
   .adminzone_search,
   header,
   .global_banner,
   .hide_button,
   footer,
   .global_side,
   .quick_self_edit_link, .control_functions, .staff_actions,
   #comments_form,
   .members_viewing,
   .ratings, .trackbacks {
      display: none;
   }

   #global_navigation {
      visibility: hidden;
   }
}


Become a fan of ocPortal on Facebook or add me as a friend. Add me on on Twitter.
Was I helpful?
  • If not, please let us know how we can do better (please try and propose any bigger ideas in such a way that they are fundable and scalable).
  • If so, please let others know about ocPortal whenever you see the opportunity.
  • If my reply is too Vulcan or expressed too much in business-strategy terms, and not particularly personal, I apologise. As a company & project maintainer, time is very limited to me, so usually when I write a reply I try and make it generic advice to all readers. I'm also naturally a joined-up thinker, so I always express my thoughts in combined business and technical terms. I recognise not everyone likes that, don't let my Vulcan-thinking stop you enjoying ocPortal on fun personal projects.
  • If my response can inspire a community tutorial, that's a great way of giving back to the project as a user.
Back to the top
 
Posted
Item has a rating of 5 (Liked by BobS)  
Rating:
#85344
Avatar

Community saint

I really liked the idea of defining the colour variables up front (i.e. in the Global interface section) but that seems to have gone now. That helped when manually tweaking the css.

One of the really slow parts of theme customisation is changing the colours. It would be great if we could use variables directly inside the css. For example, instead of:

Code

border-left: 1px solid #8ba4ca; /* {$,wizard, 61% seed + 39% W/B} */
Maybe have something like:

Code

border-left: 1px solid {$V,main_website_border};
With $V, being the command to extract a variable, and main_website_border being the colour variable declared earlier in the file.

It will make customising colours really easy, by just making one colour change (per css file) at the head of the file instead of having to hunt down and change multiple references.

I know that there will be extra processing overhead when parsing the css, but that hit should be minimal given that most of the time the cached css file will be used, so the only problem I can see with this idea is the extra processing overhead when editing via the contextual css editor due to its dynamic nature.

Even if {$V,variable_name} method is not used, there is still variable clean-up that can be done.

1) Remove all duplicate variable declarations. For example

Code

{$,a.link,...)
is declared in both "a:link, .button_hyperlink" and ".associated_breadcrumbs".

2) Use variables instead of repeating formulas. For example, instead of having 3 instances of

Code

{$,wizard, 35% seed + 65% W/B}
, declare

Code

{$,toc_divider,35% seed + 65% W/B}
once at top of file and reference it as

Code

{$,wizard, 100% toc_divider}
in the 3 instances, although it would be even better if the 100% could be dropped.

3) All colours should have an associated variable so that they can all be managed in the one place, so the following would need variables:

Code

background-color: white;
color: black;
color: gray;
color: red;

Hope this makes sense.


Last edit: by temp1024

Do you have a Samsung Galaxy S / Galaxy S II ? If so, why not check out my ScreenFree FM Radio .
Back to the top
 
Posted
Rating:
#85348
Avatar

I really liked the idea of defining the colour variables up front (i.e. in the Global interface section) but that seems to have gone now. That helped when manually tweaking the css.

It's not, I just haven't pasted that back in yet ;). I'm tidying this up too.

border-left: 1px solid {$V,main_website_border};

You can use Tempcode SET and GET symbols to do just this. You can use any Tempcode that will produce a constant result, or differentiates based on mobile/non-mobile (because the caching is shared, but segregated by mobile/non-mobile).



Regarding the colour variables, these are for the theme wizard really, there isn't a lot of point editing them by hand (it's not related to the SET/GET stuff just described). I am looking to clean this up too, but it's not so critical, especially since people can use the RGB-shift method to make new themes now. Any hard-coded colour names in the CSS are very rare, and done when the colour conveys a very strong meaning and hence should be immune to the Theme Wizaard.


Become a fan of ocPortal on Facebook or add me as a friend. Add me on on Twitter.
Was I helpful?
  • If not, please let us know how we can do better (please try and propose any bigger ideas in such a way that they are fundable and scalable).
  • If so, please let others know about ocPortal whenever you see the opportunity.
  • If my reply is too Vulcan or expressed too much in business-strategy terms, and not particularly personal, I apologise. As a company & project maintainer, time is very limited to me, so usually when I write a reply I try and make it generic advice to all readers. I'm also naturally a joined-up thinker, so I always express my thoughts in combined business and technical terms. I recognise not everyone likes that, don't let my Vulcan-thinking stop you enjoying ocPortal on fun personal projects.
  • If my response can inspire a community tutorial, that's a great way of giving back to the project as a user.
Back to the top
 
Posted
Item has a rating of 5 (Liked by BobS)  
Rating:
#85353
Avatar

Community saint

Chris Graham said

Regarding the colour variables, these are for the theme wizard really, there isn't a lot of point editing them by hand (it's not related to the SET/GET stuff just described).
I know that the variables are for the wizard, and I didn't change them. I used the list as a mini-reference and the formulas as a way to identify related items. For example, if I'm changing say a blue border line green, I'd look for similar colour variable names and identical wizard formulas to determine which other blues in the css are related to borders.
 I am looking to clean this up too, but it's not so critical, especially since people can use the RGB-shift method to make new themes now.
But that doesn't help when doing detailed changes. The theme wizard is great as a wholesale change tool, but I can't use it to change specific elements, and that when I need to go the the css, and it would help a lot if didn't have do do multiple code changes for one colour change.
Any hard-coded colour names in the CSS are very rare, and done when the colour conveys a very strong meaning and hence should be immune to the Theme Wizaard.
That's fine, but I was thinking more in terms of consistency and easy to find.


Do you have a Samsung Galaxy S / Galaxy S II ? If so, why not check out my ScreenFree FM Radio .
Back to the top
 
Posted
Item has a rating of 5 (Liked by BobS)  
Rating:
#85357
Avatar

Community saint

I love reading temp's ideas about removing some of the repeating declaration rules and replacing many with variables, and I think it is a brilliant way of simplifying things.:cool: However, and please take the following remark from a non-pro coder point of view only, but it seems to me that the CSS code used by ocPortal should in the end also be as close as possible to what casual themers expect it to be, otherwise it might send more than a few into panic, thinking that the process of modifying CSS is just for professional coders.;)  


Last edit: by Jean
Back to the top
 
Posted
Item has a rating of 5 (Liked by BobS)  
Rating:
#85358
Avatar

Jean said

I love reading temp's ideas about removing some of the repeating declaration rules and replacing many with variables, and think it is a brilliant way of simplifying things. However, and please take the following remark from a non-pro coder point of view only, but it seems to me that the CSS code used by ocPortal should in the end also be as close as possible to what casual themers expect it to be, otherwise it might send more than a few into panic, thinking that the process of modifying CSS is just for professional coders.  

That's my thoughts really too. I don't want to make it too abstract. But, I do want people to be able to make it abstract (GET/SET) should they wish to. Someone could make a "coder-friendly theme" for example.


Become a fan of ocPortal on Facebook or add me as a friend. Add me on on Twitter.
Was I helpful?
  • If not, please let us know how we can do better (please try and propose any bigger ideas in such a way that they are fundable and scalable).
  • If so, please let others know about ocPortal whenever you see the opportunity.
  • If my reply is too Vulcan or expressed too much in business-strategy terms, and not particularly personal, I apologise. As a company & project maintainer, time is very limited to me, so usually when I write a reply I try and make it generic advice to all readers. I'm also naturally a joined-up thinker, so I always express my thoughts in combined business and technical terms. I recognise not everyone likes that, don't let my Vulcan-thinking stop you enjoying ocPortal on fun personal projects.
  • If my response can inspire a community tutorial, that's a great way of giving back to the project as a user.
Back to the top
 
Posted
Item has a rating of 5 (Liked by BobS)  
Rating:
#85360
Avatar

Community saint

I don't think doing items 1 & 2 (or even 3) will end up making it too abstract to cause anyone any real problems. For example,

Code

{$,wizard, 35% seed + 65% W/B}
is currently actually implemented in the css as:

Code

color: #bdcbe1; /* {$,wizard, 35% seed + 65% W/B} */
which would end up as

Code

color: #bdcbe1; /* {$,wizard, 100% toc_divider} */
They will still be able to see and change the colour directly at the line. The only part they won't be able to see is the formula which, lets face it, most are probably not even going to either care about (because its a comment) or fully understand it.

That I think is a good half-way point as it should make think easier for both coders and non-coders alike.



Do you have a Samsung Galaxy S / Galaxy S II ? If so, why not check out my ScreenFree FM Radio .
Back to the top
 
Posted
Rating:
#85361
Avatar

I'm afraid I don't quite follow the advantage to this? I can't see a draw back particular (apart from implementation time), but how does it make the themers life easier (assuming they're not programming for the themee wizard).


Become a fan of ocPortal on Facebook or add me as a friend. Add me on on Twitter.
Was I helpful?
  • If not, please let us know how we can do better (please try and propose any bigger ideas in such a way that they are fundable and scalable).
  • If so, please let others know about ocPortal whenever you see the opportunity.
  • If my reply is too Vulcan or expressed too much in business-strategy terms, and not particularly personal, I apologise. As a company & project maintainer, time is very limited to me, so usually when I write a reply I try and make it generic advice to all readers. I'm also naturally a joined-up thinker, so I always express my thoughts in combined business and technical terms. I recognise not everyone likes that, don't let my Vulcan-thinking stop you enjoying ocPortal on fun personal projects.
  • If my response can inspire a community tutorial, that's a great way of giving back to the project as a user.
Back to the top
 
Posted
Rating:
#85362
Avatar

Community saint

I understand both sides of this, but I do really like temp's idea for a single block of color declarations. As it is now, after I upgrade and diff the various CSS files, most of the changes are just color changes but I have to review each and every instance. If I understand temp's idea correctly, there would be very few changes in the code due to the use of variables and I would only have to suss out the actual non-color changes and the changes in the "color block".

Bob


Last edit: by BobS
Back to the top
 
Posted
Item has a rating of 5 (Liked by BobS)  
Rating:
#85363
Avatar

Community saint

Chris Graham said

I'm afraid I don't quite follow the advantage to this? I can't see a draw back particular (apart from implementation time), but how does it make the themers life easier (assuming they're not programming for the themee wizard).
Because they will be able to more readily identify and change related elements.

They will know that if they change #bdcbe1 they should also look at any other elements that use toc_divider as chances are that they should also be changed to maintain consistency.

The default theme has already established these relationships, but its not particularly obvious when they are represented with just a formula.

Do you have a Samsung Galaxy S / Galaxy S II ? If so, why not check out my ScreenFree FM Radio .
Back to the top
 
Posted
Rating:
#85364
Avatar

Community saint

BobS said

I understand both sides of this, but I do really like temp's idea for a single block of color declarations. As it is now, after I upgrade and diff the various CSS files, most of the changes are just color changes but I have to review each and every instance. If I understand temp's idea correctly, there would be very few changes in the code due to the use of variables and I would only have to suss out the actual non-color changes and the changes "color block".
Bingo!!!

Do you have a Samsung Galaxy S / Galaxy S II ? If so, why not check out my ScreenFree FM Radio .
Back to the top
 
Posted
Rating:
#85365
Avatar

Oh, I think I understand now. So you're saying it allows easier detection of a mismatch, when a new rule has been inserted after an upgrade?


Become a fan of ocPortal on Facebook or add me as a friend. Add me on on Twitter.
Was I helpful?
  • If not, please let us know how we can do better (please try and propose any bigger ideas in such a way that they are fundable and scalable).
  • If so, please let others know about ocPortal whenever you see the opportunity.
  • If my reply is too Vulcan or expressed too much in business-strategy terms, and not particularly personal, I apologise. As a company & project maintainer, time is very limited to me, so usually when I write a reply I try and make it generic advice to all readers. I'm also naturally a joined-up thinker, so I always express my thoughts in combined business and technical terms. I recognise not everyone likes that, don't let my Vulcan-thinking stop you enjoying ocPortal on fun personal projects.
  • If my response can inspire a community tutorial, that's a great way of giving back to the project as a user.
Back to the top
 
Posted
Item has a rating of 5 (Liked by Guest)  
Rating:
#85366
Avatar

Community saint

Jean said

I love reading temp's ideas about removing some of the repeating declaration rules and replacing many with variables, and think it is a brilliant way of simplifying things. However, and please take the following remark from a non-pro coder point of view only, but it seems to me that the CSS code used by ocPortal should in the end also be as close as possible to what casual themers expect it to be, otherwise it might send more than a few into panic, thinking that the process of modifying CSS is just for professional coders.  
Jean-

I take the opposite view. I am at best a "casual themer" and that is being very generous to me. temp's suggestion to replace the inline color definition with variables is brilliant in my view. It will make finding changes in the CSS after an upgrade much easier. It will make changing colors much easier. The only real downside is that it is different than what most encounter but that can easily be explained away as "an advanced implementation making managing theme colors much more efficient."

The difference between using an abstracted variable versus the more common way seems simple for a novice like me to use and explaining the abstraction is very straightforward. People could still employ the standard technique when creating their CSS definitions; heck, it wouldn't take much to find and replace the variables with the actual color codes if one really wanted to.

Chris, in another thread, talked about simplifying ocPortal code and I think this is a masterful example of simplifying the color definitions in the CSS files. I honestly don't understand why this is not common practice but, maybe, ocPortal can once again blaze a new trail that makes building and maintaining a site much easier than the competitor's solutions.

Bob
Back to the top
 
Posted
Rating:
#85370
Avatar

Community saint

One other thought which just came to mind (hoping that I understand temp's position clearly) is that the theme wizard information would need only exist in the the color variable definition block and in any code manually added by the user. This would eliminate the many theme wizard instructions littered throughout the CSS and would present a somewhat significant savings in the CSS file size.

I really hope substituting variables for the actual hex color code in CSS definitions gets some serious consideration.

Bob
Back to the top
 
Posted
Rating:
#85371
Avatar

Community saint

BobS said

One other thought which just came to mind (hoping that I understand temp's position clearly) is that the theme wizard information would need only exist in the the color variable definition block and in any code manually added by the user. This would eliminate the many theme wizard instructions littered throughout the CSS and would present a somewhat significant savings in the CSS file size.

I really hope substituting variables for the actual hex color code in CSS definitions gets some serious consideration.

Bob
Actually, I am already rethinking this because using just the variables to define which color to use from the color definitions would not work well with the available debugging tools like Firebug and the in-built tools in Chrome.

temp's mid-point solution would at least help to some degree to find and change color values or perhaps the Theme Wizard could have a mode to update color values after the color definitions change.

I am getting in over my head so I am just going to watch to see what develops and hope it makes it easier to redefine color changes.

Bob
Back to the top
 
1 guests and 0 members have just viewed this: None
Control functions:

Quick reply   Expand