2 Replies Latest reply: Apr 30, 2014 2:40 AM by fac586 RSS

    Using Theme Image in custom list

    Richard Legge

      Hi all.. Firstly appreciate the help that everyone gives on here.. as a relative beginner its invaluable..

       

      Onwards.. Im using APEX 4.2. And theme 17 Sapphire.

       

      Ive picked up a neat custom list that Im using as my menu for my application...  It has its own template, and references its own CSS..

       

      I' m trying to get the menu header to look like the theme region header.and by this I mean as an example on the standard reports region it has the title, and a grey background.. My menu has a similar menu title region for the top level menu.  I can change the CSS and get a similar look and feel for the top level menu item, but not quite right....  I've realised by inspecting the page that the region header is using an image.. when I inspect it in firefox, I see "background-image: url('../images/sRegion.png');"

       

      From reading.. (and this is where it gets a bit vague)  I'm supposed to use   " background-image:url(#WORKSPACE_IMAGES#sRegion.png);  " somewhere. However also reading further, apparently you shouldn't put it into the CSS file..??

       

      So, firstly, am I way off of the mark with this? or close? Then, if so, where should I put this piece of code/reference..  I thought that maybe I should put it in the template file, but there doesn't seem to be any substitution variables for #workspace_images#, so not sure how it would pick it up...   I'm not sure if I should put it in the header of the List region header as its defined in the application, and if so, how do I get it to put the image in the right place in the list.

       

      Anyhow I'd be very grateful if someone could guide me through it..

       

      For reference, my relevant bits of code from the files are here:

       

      Template definition

       

      Before List Entry

      <div id="vertical-collapsible-nav">

       

      <div class="is-lvl1-current"><span id="#A01#">#TEXT#</span>

      </div>

       

      etc.....

       

      Then the relevant section of my CSS file looks like the following...  Changing the fonts, colors, and various attributes in this definition changes the attributes...

       

       

      div#vertical-collapsible-nav div span {

      display: block;

        height: 23px;

       

        font-size: 14px;

        font-weight: bold;

        padding: 4px 0px 4px 10px;

        text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.5);

        border-bottom: 1px;

        border-bottom-style:solid;

        border-bottom-color:     #181818;

       

      }

       

      many Thanks

      Richard

        • 1. Re: Using Theme Image in custom list
          Richard Legge

          OK.. An update. I've worked out how to reference my class / div in the header of my list.. And I can change the background colour of my list heading.. However I still cannot reference the theme image that is on the region template...

          i.e. image:url(#WORKSPACE_IMAGES#sRegion.png);  (that's the image being referenced by another region).

           

          so now my question is whether I can reference theme images directly like this, or if not, how?, or do I need to copy the image by saving it from the web, uploading it into my workspace images, and then using it?

           

          rgds

          • 2. Re: Using Theme Image in custom list
            fac586

            Richard Legge wrote:

             

            However I still cannot reference the theme image that is on the region template...

            i.e. image:url(#WORKSPACE_IMAGES#sRegion.png);  (that's the image being referenced by another region).

            It's not. Built-in theme files (including images) are stored in web server file system or XMLDB folders, not the workspace repository. These are therefore referenced using the #IMAGE_PREFIX# built-in substutution string rather than #WORKSPACE_IMAGES#. The exact location of these resources depends on the web server used and the options selected at installation.

             

            The documentation is very unclear and unhelpful on this topic. It describes how to upload images to the workspace repository, but not how to reference them using #WORKSPACE_IMAGES# once they are there. It goes on—confusingly—to cover referencing images using #IMAGE_PREFIX# as if that applied to the workspace repository, and never explains how to access and add resources to the file system or XMLDB folders.

            when I inspect it in firefox, I see "background-image: url('../images/sRegion.png');"

            "../images/sRegion.png" specifies the image location relative to the theme CSS style sheet containing the region header rule. You can find the path to this style sheet in the Header definition of the page template used for the page:


            <link rel="stylesheet" href="#IMAGE_PREFIX#themes/theme_17/css/theme_4_0.css" type="text/css" />


            The URL of the sRegion.png image is therefore #IMAGE_PREFIX#themes/theme_17/images/sRegion.png. If you are going to reference this in an external style sheet, #IMAGE_PREFIX# will not be substituted, so must be manually replaced with the location of your images folder, which is /i/ by default, for example: /i/themes/theme_17/images/sRegion.png. (You can see the substituted value for your application by viewing the page source in the browser, and looking at the stylesheet link above in the page header)