This discussion is archived
5 Replies Latest reply: Mar 1, 2013 8:07 AM by Jiminy RSS

Theme 26 CSS

Jiminy Newbie
Currently Being Moderated
Hi,

I am using Theme 26 in Apex 4.2.1 and the "Use Theme Default" page template which is One Level Tabs - No Sidebar

Within the CSS INLINE section I have added the following code but this does not seem to take effect:

.display_only {
font-weight:bold;
}

I have checked that the substitution string for #PAGE_CSS# is referenced which it is.

Are there any other reasons why CSS would not be rendered when using the CSS INLINE section?

JIM
  • 1. Re: Theme 26 CSS
    Mindmap Pro
    Currently Being Moderated
    Hello,
    It works fine with me .... Please try this:
    .display_only {
    font-weight:bold !important;
    }
    * You can see your page source to make sure that the CSS rule exists in the page source..


    Regards,
    Fateh
  • 2. Re: Theme 26 CSS
    Jiminy Newbie
    Currently Being Moderated
    Hi Fateh,

    Brilliant that worked.

    Does this mean that their is some CSS that is overriding my overide?

    Thanks,

    JIM
  • 3. Re: Theme 26 CSS
    Mindmap Pro
    Currently Being Moderated
    Hello,
    I think so. But, I cannot tell anything since I do not see your page... Please consider the order:

    #APEX_CSS#
    #TEMPLATE_CSS#
    #THEME_CSS#
    #PAGE_CSS#


    Also, you may have some CSS in your regions. To achieve what want, just Add *!important* that I suppose you know what it does ....

    Make sure to use Fire bug in your browser and check the rules that are being overridden ....


    Best Regards,
    Fateh
  • 4. Re: Theme 26 CSS
    fac586 Guru
    Currently Being Moderated
    JIM wrote:
    Hi,

    I am using Theme 26 in Apex 4.2.1 and the "Use Theme Default" page template which is One Level Tabs - No Sidebar

    Within the CSS INLINE section I have added the following code but this does not seem to take effect:

    .display_only {
    font-weight:bold;
    }

    I have checked that the substitution string for #PAGE_CSS# is referenced which it is.

    Are there any other reasons why CSS would not be rendered when using the CSS INLINE section?
    <tt>#PAGE_CSS#</tt> comes before the theme CSS (the <tt>link rel="stylesheet"</tt> element) in the cascade:
    <!--[if HTML5]><![endif]-->
    <!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>
    <!--[if !HTML5]>
      <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <![endif]-->
      <meta charset="UTF-8">
      <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; maximum-scale=1.0;">
      <link rel="stylesheet" href="#IMAGE_PREFIX#themes/theme_26/css/4_2.css?v=#APEX_VERSION#">
      <script src="#IMAGE_PREFIX#themes/theme_26/js/4_2.js?v=#APEX_VERSION#"></script>
    </head>
    The theme CSS therefore overrides your "override". If you're doing a lot of template or page overrides I'd recommend modifying the page templates to move the <tt>#PAGE_CSS#</tt> and <tt>#TEMPLATE_CSS#</tt> substitution strings after the theme CSS reference:
    <!--[if HTML5]><![endif]-->
    <!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>
    <!--[if !HTML5]>
      <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <![endif]-->
      <meta charset="UTF-8">
      <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#
    #THEME_CSS#
    #APEX_JAVASCRIPT#
    #TEMPLATE_JAVASCRIPT#
    #APPLICATION_JAVASCRIPT#
    #PAGE_JAVASCRIPT#
    #HEAD#
      <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">
      <link rel="stylesheet" href="#IMAGE_PREFIX#themes/theme_26/css/4_2.css?v=#APEX_VERSION#">
    #TEMPLATE_CSS#
    #PAGE_CSS#
      <script src="#IMAGE_PREFIX#themes/theme_26/js/4_2.js?v=#APEX_VERSION#"></script>
    </head>
    Specificity might also be an issue. See these threads for recent discussion on similar topics:

    <li>{thread:id=2489308}
    <li>{thread:id=2494467}
  • 5. Re: Theme 26 CSS
    Jiminy Newbie
    Currently Being Moderated
    Hi Fac586,

    I moved the #TEMPLATE_CSS# and #PAGE_CSS# under the style sheet but still no luck.

    Ill take a look into Specificity. I have also found the Grid Layout is specifying class="regionColumns" so this maybe another avenue to inspect.

    JIM

Legend

  • Correct Answers - 10 points
  • Helpful Answers - 5 points