1 2 Previous Next 18 Replies Latest reply: Jan 6, 2014 3:06 AM by user8786417 RSS

    Insert custom theme

    user8786417

      Hi all,

       

      I am very new to APEX, and wanted to know how to achieve the following:

       

      This is current border color I have:

      https://drive.google.com/file/d/0B_1CqEGSVhBiZ0p3VjRKZmx4UjA/edit?usp=sharing


      And this is what I want:


      https://drive.google.com/file/d/0B_1CqEGSVhBiNV9OWUpqSnFyemM/edit?usp=sharing



      How can I achieve an orange border?

      and also a company logo top right?

       

       

      Many thanks.

        • 1. Re: Insert custom theme
          vincent_deelen

          Hi Hussain (?),

           

          You'll need some css for that. You need to identify the css class for your tab bar, and for your company logo. Easiest way is to open your application in firefox with the firebug add on, or in chrome. You can right click on the element that you wish to adjust the css of and choose the "inspect element" option. This will display the html for the element that you inspect, here you can find the name of the class the element has.

           

          Once you got the correct classes, you can write your own css file. You'll need something like:

               .uTabBar{ background-color : orange !important; }

               .uHeaderLogo{ float: right; }

           

          You can upload your css file in Shared Components > Files > Cascading Style Sheets.

          Last, you can include your css file in your page template: Shared Components > User Interface > Templates. Open the default page template (the one that's checked as default), in the header section

          right under the line #PAGE_CSS#, add your file:

           

               <link rel="stylesheet" href="#WORKSPACE_IMAGES#MY_FILE.css" type="text/css">

           

          Where you;ll need to replace "MY_FILE" with the actual name of your css file.

           

          Regards,

           

          Vincent

          http://vincentdeelen.blogspot.com

          • 2. Re: Insert custom theme
            user8786417

            Hi Vincent,

             

            Thanks very much for your reply, so to ask further questions in regards to your reply, its just my understanding of these components as a whole are limited for now.

             

            I am able to inspect the element, but not sure what i am meant to be looking for exactly, i am not familiar with css, so i will have to learn this. I have taken a print screen, in the below link, if you can guide me to what i am exactly looking for that would really help, as i am a bit lost here. https://drive.google.com/file/d/0B_1CqEGSVhBid0RQVFhiZG5vN0E/edit?usp=sharing

             

            In regards to the code you pasted, is that what i will only need? or i will need to define that inside the html tags? or can i simply edit the css that is being called for the theme in apex?

             

            I did upload the 2 lines of code as css file, but could not see the header section in the default template.

             

            Home_Page: https://drive.google.com/file/d/0B_1CqEGSVhBiMnM0WnZ5MlF2SGc/edit?usp=sharing

             

            Default template: https://drive.google.com/file/d/0B_1CqEGSVhBiYWJuU25VOTZrV2s/edit?usp=sharing

             

            Oh, i also checked your blog (interesting) and realized your from the same country as me

             

            Look forward to hearing.

             

            Rgds,

            • 3. Re: Insert custom theme
              vincent_deelen

              Hi,

              So judging from your screenshot yoou're running theme nr 13.

              First lets set the logo to the right. In this theme there is a table row in which there is a table cell for your logo and a cell for your navigation bar -default displayed on the right, which holds username of logged in user. In hte middle of those two table cells there is one extra table cell, used as padding to keept the former two cells apart.

              To align you logo, you'll have to choose wheter you want it completely on the right, and place your navigation bar on the left (ie. switch the two table cells) or if you want the logo the be displayed just before the navigation bar. Either way, you can achieve this by rearanging the table cells in the body section of your (default)page template:

              http://www.vincentdeelen.com/images/otn/t13_outline_logo.png

              In this picture the table cells that you can rearrange are highlighted. To get to the template of the default page, you were pretty close -judging by your last print screen. In Shared Components > User Interface > Templates, you'll need to scroll down to the section where pages are listed and click on the page template that is checked as default (probably "One Level Tabs"). There you'll find an overview as in my screen shot.

               

              Now for the tab bar colloring.

              Unfortunately theme 13  uses images to set the color of the breadcrumbbar and the tabs. So adding a background color won't work (the image will be shown on top of the background color). I don't see any practical solution, other than:

              - creating your own tab- and breadcrumbbar images

              - uploading them to your file system or application

              - rewriting your entire theme css file to refernece the new images

              - saving that to your file system or application

              - removing any reference to the original theme css from your theme/templates and replacing that with your own css file.

               

              This is rather long road and any mistake can have far reaching consequences. You'd be much better of using a more recent theme such as theme 25 or 26. Is there any particular reason why you use theme 13?

               

              Regards,

              Vincent

              http://vincentdeelen.blogspot.com

              • 4. Re: Insert custom theme
                user8786417

                Hey Vincent,

                 

                Thanks for your feedback as always.

                 

                I managed move the logo to the right by swapping the tables around as suggested, however the navigation bar is still on the right and now the log is directly on top of that.

                 

                Code:

                 

                <table summary="" cellpadding="0" cellspacing="0" border="0" width="100%">

                <tr>

                <td valign="top">#NAVIGATION_BAR#<br />#REGION_POSITION_08#</td>

                <td width="100%" valign="top">#REGION_POSITION_07#</td>

                <td valign="top"><a id="t13Logo2" href="#">#LOGO#</a><br />#REGION_POSITION_06#</td>

                </tr>

                </table>

                 

                I don't really have a reason for using this theme, if use the suggested themes would it be easier to change the color?

                 

                Rgds,

                • 5. Re: Insert custom theme
                  vincent_deelen

                  Hi,

                   

                  Hmmm. Try clearing your browser cache, or test the page in an other browser. If the above code is the first thing in your page template body, then it should definetly be displayed in the correct order.

                  If you consider changing your theme, I'd suggest theme number 25 or 26.

                   

                  Regards,

                  Vincent

                  http://vincentdeelen.blogspot.com

                  • 6. Re: Insert custom theme
                    user8786417

                    Hi vincent,

                     

                    Sorry about the late response, things have been really busy at work.

                     

                    I could not locate theme 25/26 maybe because i am on different version?

                     

                    But would that make things easier? just trying to understand at this stage.

                     

                    Many thanks.

                    • 7. Re: Insert custom theme
                      vincent_deelen

                      Hi,

                      Okay, so what version of APEX do you use?

                      The advantage of newer themes is that they rely more on css for page layout and styling, in contrast to the older themes, that heavily depend on wrapped table rows and cells. And - what in your case is troubling, the use of background images to style tabs etc.

                       

                      Regards,

                      Vincent

                      • 8. Re: Insert custom theme
                        user8786417

                        Hi Vince,

                         

                        I am using 4.0.2 version.

                         

                        I have selected theme 1, with white background and red navigation bar, i just want to make that orange, how can i go about just changing that part of the css in the exiting css file that is being used?

                         

                        Header code:

                         

                        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

                        <html lang="&BROWSER_LANGUAGE." xmlns="http://www.w3.org/1999/xhtml" xmlns:htmldb="http://htmldb.oracle.com" xmlns:apex="http://apex.oracle.com">

                        <head>

                          <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">

                          #HEAD#

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

                          <!--[if IE]><link rel="stylesheet" href="#IMAGE_PREFIX#themes/theme_1/css/theme_4_0_ie.css" type="text/css" /><![endif]-->

                          <!--[if IE 6]><link rel="stylesheet" href="#IMAGE_PREFIX#themes/theme_1/css/theme_4_0_ie6.css" type="text/css" /><![endif]-->

                          <!--[if IE 7]><link rel="stylesheet" href="#IMAGE_PREFIX#themes/theme_1/css/theme_4_0_ie7.css" type="text/css" /><![endif]-->

                        </head>

                        <body #ONLOAD#>

                        <!--[if lte IE 6]><div id="outdated-browser">#OUTDATED_BROWSER#</div><![endif]-->

                        #FORM_OPEN#

                         

                         

                        Body code:

                         

                        <div id="header">

                          <div id="logo"><a href="#HOME_LINK#">#LOGO##REGION_POSITION_06#</a></div>

                          #REGION_POSITION_07#

                          <div id="navbar">

                            #NAVIGATION_BAR#

                            <div class="app-user">#WELCOME_USER#</div>

                            #REGION_POSITION_08#

                          </div>

                        </div>

                        <div id="tabs">

                          <div class="frame">

                            <div class="bg">

                              <div class="tab-holder">

                                #TAB_CELLS#

                              </div>

                            </div>

                          </div>

                        </div>

                        <div id="topbar">#REGION_POSITION_01##REGION_POSITION_04#</div>

                        <div id="messages">#SUCCESS_MESSAGE##NOTIFICATION_MESSAGE##GLOBAL_NOTIFICATION#</div>

                        <div id="body">

                          <table class="tbl-body" cellspacing="0" cellpadding="0" border="0" summary="">

                            <tbody>

                              <tr>

                                <td class="tbl-main" width="100%">#REGION_POSITION_02##BOX_BODY#</td>

                                <td class="tbl-sidebar">#REGION_POSITION_03#</td>    

                              </tr>

                            </tbody>

                          </table>

                        </div>

                         

                         

                        I am finding a bit hard to locate where the change may need to occur, do i need to locate the css and make the change there? i went to shared components and could not see any.

                         

                        Look forward to your response.

                         

                        Many thanks.

                        • 9. Re: Insert custom theme
                          vincent_deelen

                          Hi,

                           

                          Try to add the following code to your tempate header, right above the header close tag "</head>":

                           

                          <style>

                          #tabs, .frame, .bg{

                            background       : none   !important;

                            background-color : orange !important;

                            border-radius    : 4px    !important;

                          }

                          </style>

                           

                          It removes the background styling of the tab bar, adds a color and rounds the corners of the bar to give it a smoother look.

                          You might want to change "orange" in to a shade of orange that doesn't burn your eyes :

                          ColorPicker.com : Quick Online Color Picker Tool | HTML Color Codes

                           

                          Note that the border-radius is not support by releases older than IE9. Other browser should support it just fine:

                          CSS3 Borders

                           

                          Regards,

                          Vincent

                          http;//vincentdeelen.blogspot.com

                          • 10. Re: Insert custom theme
                            user8786417

                            Hey vince,

                             

                            Thanks, the border is indeed orange now. I now need to think if this is the best for the interface lol as the tabs are red, anyway to change it with style tag so the tabs blend with the border?

                             

                            Could i also ask if it is possible to create a favicon for apex, i tried a few steps but i am very lost, this would be my last task for the application.

                             

                            Apologise about these questions, i am trying to still get my head around how the interface is related to apex variables.

                             

                            Many thanks and happy holidays.

                            • 11. Re: Insert custom theme
                              user8786417

                              The theme i want from another application at work is referecing the following in the heading: <link rel="stylesheet" href="#IMAGE_PREFIX#themes/theme_6/theme_3_1.css" type="text/css" />

                               

                              I am unable to locate the css, if i want the same styling, do i have to locate the css and reference it in the header like above?

                               

                              thanks.

                              • 12. Re: Insert custom theme
                                vincent_deelen

                                Hi,

                                 

                                I've never tried to add a favicon myself, but this old post should be helpful:

                                Display favicon in Apex?

                                 

                                For your tabs you need to add the following:

                                 

                                .first-non-current, .non-current {
                                  background       : none   !important;
                                  background-color : orange !important;
                                  border-style     : solid !important;
                                  border-width     : medium !important;
                                  border-radius    : 4px    !important;
                                }
                                
                                

                                 

                                Put it again in your template, after the other code you've already put in the header. The border style tags are just to make the tabs stand out from the background, but I think you're better of using a slidely other shade of orange than the background instead. I'll leave that to your preference.

                                user8786417 wrote:

                                 

                                The theme i want from another application at work is referecing the following in the heading: <link rel="stylesheet" href="#IMAGE_PREFIX#themes/theme_6/theme_3_1.css" type="text/css" />

                                 

                                I am unable to locate the css, if i want the same styling, do i have to locate the css and reference it in the header like above?

                                 

                                thanks.

                                The stylesheet you are refering to is in another application that uses another theme. You can't run two theme's next to each other in one application. Also you can't just copy the css from another theme and expect it to work in your current application, as theme you use now uses different classes and id's in its markup.

                                 

                                Regards,

                                Vincent

                                http://vincentdeelen.blogspot.com

                                • 13. Re: Insert custom theme
                                  user8786417

                                  Hi Vince,

                                   

                                  Thanks for your email and happy holidays.

                                   

                                  I will try to execute your steps for the colour scheme tomorrow,  As for the favicon post, it says you have to upload it to the apache directory, but i cannot see one, is this installed seperatley?

                                   

                                  Look forward to hearing.

                                   

                                  Many thanks.

                                  • 14. Re: Insert custom theme
                                    user8786417

                                    Morning Vince,

                                     

                                    The code worked like a charm, i changed the border style to :none to blend it more.

                                     

                                    The question i have remaining is, how do i find out the element names such as #tabs, .frame, .bg .first-non-current, .non-current to change the theme. I see now how to make the change now, but not sure what elements are available.

                                     

                                    #tabs, .frame, .bg{

                                      background       : none   !important;

                                      background-color : orange !important;

                                      border-radius    : 0px    !important;

                                    }

                                     

                                    .first-non-current, .non-current {

                                      background       : none   !important;

                                      background-color : orange !important;

                                      border-style     : none   !important;

                                      border-width     : medium !important;

                                      border-radius    : 4px    !important;

                                    }

                                     

                                    I am looking to change the color of text to green inside the tabs.

                                     

                                    Many thanks.

                                    1 2 Previous Next