3 Replies Latest reply: Feb 15, 2013 3:04 PM by fac586 RSS

    Help wirh inline CSS

    GSDan
      Version- Application Express 4.2.1.00.08
      Theme - Uniframe - 23

      I am attempting to modify label formatting at the page level to remove padding and bold text.

      I have added the following to Edit Page > CSS > Inline

      table.formlayout td label {font: 12px/16px Arial,sans-serif;font-weight:bold;}


      When the page renders, there is no change to the label.
      When inspecting a label i(with Fire Bug) I see the following (the second line is lined out)-


      table.formlayout td label {color: #555555;display: inline-block;font: 12px/16px Arial,sans-serif;padding: 3px 8px 3px 0;}
      table.formlayout td label {font: 12px/16px Arial,sans-serif;font-weight:bold;}

      In firebug, when i disable the first table.formlayout td label, the page renders correctly.

      When i test this in a different project with a different theme, it works correctly. Is there a setting that causing inline CSS to be ignored?
        • 1. Re: Help wirh inline CSS
          GSDan
          I was able to get a workaround using !important but, i will wonder why this is working the way it is.
          • 2. Re: Help wirh inline CSS
            Mindmap
            Hello,

            How about this:
            Go to shared components --> Templates.
            Copy any Label Template. e.g : Optional ....
            Delete the class attribute and add your inline STYLE Attribute. e.g:

            Before Label
            <label for="#CURRENT_ITEM_NAME#" style="font: 12px/16px Arial,sans-serif;font-weight:bold;">
            Then just go back to your items and change their item label template to the new template you have created ....


            Best Regards,
            Fateh

            ---
            If you believe that my answer was helpful or correct, then please mark the answer as helpful or correct ....
            • 3. Re: Help wirh inline CSS
              fac586
              user10954631 wrote:
              Version- Application Express 4.2.1.00.08
              Theme - Uniframe - 23

              I am attempting to modify label formatting at the page level to remove padding and bold text.

              I have added the following to Edit Page > CSS > Inline
              table.formlayout td label {font: 12px/16px Arial,sans-serif;font-weight:bold;}
              When the page renders, there is no change to the label.
              That rule contains no specification of padding properties that would override the theme-specified padding, like:
              table.formlayout td label {
                padding-right: 0;
                font-weight: bold;
              }
              The font properties specified are superfluous as they're the same as those in the theme rule.
              When inspecting a label i(with Fire Bug) I see the following (the second line is lined out)-
              table.formlayout td label {color: #555555;display: inline-block;font: 12px/16px Arial,sans-serif;padding: 3px 8px 3px 0;}
              table.formlayout td label {font: 12px/16px Arial,sans-serif;font-weight:bold;}
              In firebug, when i disable the first table.formlayout td label, the page renders correctly.

              When i test this in a different project with a different theme, it works correctly.
              What theme?
              Is there a setting that causing inline CSS to be ignored?
              No. This is behaving as expected given the structure of theme 23 page template headers:
              <!DOCTYPE html>
              <!--[if lt IE 7 ]> <html class="ie6 no-css3" lang="&BROWSER_LANGUAGE."> <![endif]-->
              <!--[if IE 7 ]>    <html class="ie7 no-css3" lang="&BROWSER_LANGUAGE."> <![endif]-->
              <!--[if IE 8 ]>    <html class="ie8 no-css3" lang="&BROWSER_LANGUAGE."> <![endif]-->
              <!--[if IE 9 ]>    <html class="ie9" lang="&BROWSER_LANGUAGE."> <![endif]-->
              <!--[if (gt IE 9)|!(IE)]><!--> <html lang="&BROWSER_LANGUAGE."> <!--<![endif]-->
              <head>
                <meta charset="UTF-8">
                <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
                <title>#TITLE#</title>
                <link rel="icon" href="#IMAGE_PREFIX#favicon.ico" type="image/x-icon">
                <link rel="shortcut icon" href="#IMAGE_PREFIX#favicon.ico" type="image/x-icon">
                #APEX_CSS#
              #TEMPLATE_CSS#
              #THEME_CSS#
              #PAGE_CSS#
              #APEX_JAVASCRIPT#
              #TEMPLATE_JAVASCRIPT#
              #APPLICATION_JAVASCRIPT#
              #PAGE_JAVASCRIPT#
              #HEAD#
                <meta name="viewport" content="width=device-width, initial-scale=1.0">
                <link rel="stylesheet" href="#IMAGE_PREFIX#themes/theme_23/css/4_1.css?v=2">
                <script src="#IMAGE_PREFIX#themes/theme_23/js/4_1.js"></script>
              </head>
              The <tt>#PAGE_CSS#</tt> substitution string is replaced by the page CSS attributes&mdash;*File URLs* and the Inline CSS you're using. This means that it comes before the theme CSS referenced in the stylesheet link in the CSS cascade. Since your rule and the theme rule have the same selector, the cascade determines that the theme rule overrides yours, not the other way round.

              To override theme CSS the options are: use an <tt>!important</tt> declaration, as you've found (although for various reasons this is not recommended and should be the last resort); modify the page templates so that <tt>#PAGE_CSS#</tt> comes after the stylesheet link; or using a selector with a higher specificity in the Inline CSS:
              body table.formlayout td label {
                padding-right: 0;
                font-weight: bold;
              }