9 Replies Latest reply: Feb 3, 2013 5:47 PM by 988822 RSS

    Changing Tab Location for Theme

    wallysteadman - oracle
      Greetings all,
      I have an APEX instance and I am using Theme Topaz 4 and when I create tabs, the main tabs are aligned to the right of the page but I would like them to be aligned to the left of the page. Could someone point me in the direction or location I need to be looking to accomplish this? Thanks in advance

      Wally
        • 1. Re: Changing Tab Location for Theme
          GokhanAtil
          I tried to add a tab and then a new tab set but I couldn't see "right aligned tabs". Anyway the tab locations can be changed if you modify the page template.

          Open "Shared Components", then "Templates", then pick the page template to edit. You can modify the tab/parent tab/image tab attributes (HTML codes).

          I hope it helps.

          Gokhan
          • 2. Re: Changing Tab Location for Theme
            wallysteadman - oracle
            I am using: Two Level Tabs - Right Sidebar (optional / table-based)

            So should I be editing the body of the template? After I make a copy of it that is. Sorry for sounding unsure, but I guess I really am.
            <div id="header">
              <div id="logo"><a href="#HOME_LINK#">#LOGO##REGION_POSITION_06#</a></div>
              #REGION_POSITION_07#
              <div id="navbar">
                <div class="app-user">#WELCOME_USER#</div>
                #NAVIGATION_BAR#
                #REGION_POSITION_08#
              </div>
              <div id="parent-tabs">
                <div class="tab-holder">#PARENT_TAB_CELLS#</div>       <<<<<<<<<<<<<THIS AREA????
              </div>
            </div>
            <div id="tabs">
              <div class="frame">
                <div class="bg">
                  <div class="tab-holder">
                    #TAB_CELLS#         <<<<<<<<<<<<<THIS AREA????
                  </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>
            Edited by: wfsteadman on Apr 14, 2011 8:34 AM
            • 3. Re: Changing Tab Location for Theme
              GokhanAtil
              well, you need to try and see. I couldn't imagine how your tabs are right-aligned. So I can't tell you the exact place to modify. Could you share a screenshot of the page?

              There's also a section for "tabs" (in page template). You should also check there.
              • 4. Re: Changing Tab Location for Theme
                wallysteadman - oracle
                I have created a workspace on apex.oracle.com with example of tabs I am using. I am not very saavy with changing the templates.
                http://apex.oracle.com/pls/apex/f?p=34463:1

                workspace: wfsteadman
                user: demo
                password: demo

                Testing Tabs: Application 34463
                • 5. Re: Changing Tab Location for Theme
                  GokhanAtil
                  So you want to change location of "Products | Home" buttons?
                  • 6. Re: Changing Tab Location for Theme
                    wallysteadman - oracle
                    Yes I am trying to align them to the left side of the page and if possible move the child tabs to the right side of the page.
                    • 7. Re: Changing Tab Location for Theme
                      fac586
                      Very easy to accomplish using a couple of CSS overrides. Include
                      #parent-tabs {
                        right: auto;
                        left: 10px;
                      }
                      #tabs .tab-holder {
                        float: right;
                      }
                      via your preferred style sheet mechanism in the <tt>head</tt> of all page templates after the following elements:
                      <link rel="stylesheet" href="#IMAGE_PREFIX#themes/theme_4/css/theme_4_0.css" type="text/css" />
                      <!--[if IE]><link rel="stylesheet" href="#IMAGE_PREFIX#themes/theme_4/css/theme_4_0_ie.css" type="text/css" /><![endif]-->
                      <!--[if IE 6]><link rel="stylesheet" href="#IMAGE_PREFIX#themes/theme_4/css/theme_4_0_ie6.css" type="text/css" /><![endif]-->
                      <!--[if IE 7]><link rel="stylesheet" href="#IMAGE_PREFIX#themes/theme_4/css/theme_4_0_ie7.css" type="text/css" /><![endif]-->
                      • 8. Re: Changing Tab Location for Theme
                        jcw
                        Here's how to do it in v4.1.1... click:

                        <ul>
                        <li>Application Builder
                        <li>"your application"
                        <li>Shared Components
                        <li>Themes (under User Interface)
                        <li>"your theme" (ex: Dark Blue - 16)
                        <li>One Level Tabs (or whichever tab theme you selected for application, see check mark icons on right to confirm themes you are currently using in application)
                        <li>Definition
                        </ul>

                        Then, in Body section, change:
                        <div class="TabHolder">
                        to
                        <div class="TabHolder" style="float: left;">
                        Pretty tedious, but you don't have to change the external stylesheet this way.
                        • 9. Re: Changing Tab Location for Theme
                          988822
                          thank you so much about your post it's extremely usefull for me