1 2 Previous Next 17 Replies Latest reply: Jan 23, 2014 4:34 AM by Pavan RSS

    how to change css of tabs

    Pavan

      Hello,
      this is pavan, i am using apex 4.2.3
      i want tabs like we use in apex structure like home,appbuilder,sql workshop and subtabs i want same look and field even we click sub tab the mail tab should hilighted i am using theme no 20 but when i am created list and put the drop down its not look that much good may i know how to handle it.
      i tried here http://apex.oracle.com/pls/apex/f?p=52985:1:10701438256
      where i have to change any references please send me,
      Thanks in advance,
      Regards,
      Pavan

        • 2. Re: how to change css of tabs
          jariola

          Ramani_vadakadu wrote:

           

          could be help you...

          Jquery image box out/in function in apex page.

          Hi,

           

          Could you please bit explain how that link could help OP?

          I do not see anything on that Unanswered post that could help this discussion OP.

          Also in link discussion last message is from Nicolette asking clarification from you.

           

          Regards,
          Jari

          • 3. Re: how to change css of tabs
            Ramani_apex

            sorry,i was put wrong thread ID. the slide down css menus covered and answer thread...

            slide down box and slides

            • 4. Re: how to change css of tabs
              Pavan

              thanks for replies,
              i didn't get the links i see the images but the main tab high let when i am two pages of pages, any further reference please send me,
              Thanks in advance,
              Regards,
              Pavan

              • 5. Re: how to change css of tabs
                Pavan

                hello all,
                it is possible right any suggestions please.
                Regards,
                Pavan

                • 6. Re: how to change css of tabs
                  Nicolette

                  Pavan

                   

                  First what are we talking about here.

                  In the subject you mention tabs but in the question you are talking about a list.

                  The precise answer is different for tabs or lists.

                   

                  But in general the html that is rendered is determined by the template that is being used.

                   

                  By drop down you mean a list that uses the drop down template?

                  What do you want to change about it?

                  Just the colours or something else?

                   

                  Nicolette

                  • 7. Re: how to change css of tabs
                    Pavan

                    Thanks for reply Nicolette,
                    Sorry if I make confution to you masters,
                    But what I am asking in this thread is in oracle apex home how is tabs look like home, appliation builder, Sql workshop etc.. and their sub tabs. even when we click on object browser under the sql workshop Main tab is highlighting right like the functionality and the color things I want implement in my application but I am not sure how to implement like by using lists or tabs, What is the best way to do this thing may I know help me on this please,
                    Thanks in advance,
                    Regards,
                    Pavan

                    • 8. Re: how to change css of tabs
                      Nicolette

                      Pavan

                       

                      If I understand you correctly you are looking for the effect that when the user is in a specific part of the application. That part is highlighted in the menu as an indication of where the user is.

                      That effect is made possible by defining a different template for the current and not-current menu items.

                       

                      If you don't see that effect there could be 2 things wrong.

                      1) The template for the current and not current are the same.

                      2) There is no indication that the menu item is current for the page you're on.

                       

                      Before I can explain how and where to check this we first have to know if you're using a list or tabs for you're menu.

                      Please read the chapter Adding Navigation of Application Builder User's Guide

                      And tell us what you are using for you're menu.

                       

                      Menu's can be made with both. And the effect can also be created with both.

                       

                      Nicolette

                      • 9. Re: how to change css of tabs
                        Pavan

                        Thanks for reply Nicolette,

                        Sorry i am unable concentrate on this because of other urgent tasks,

                        what u got is correct from my question and i want to do it using lists and i know have to change in the template but i am not sure how to do it.

                        and as mentioned

                        If you don't see that effect there could be 2 things wrong.

                        1) The template for the current and not current are the same.

                        2) There is no indication that the menu item is current for the page you're on.

                        1) i not sure what u telling

                        2) i created in page 0 http://apex.oracle.com/pls/apex/f?p=52985:1:10701438256

                        check once please,

                        my login's are

                        Workspace : ajit_personal

                        User name: ajit

                        Password :ajit

                        Thanks in advance,

                        Regards,

                        Pavan

                        • 10. Re: how to change css of tabs
                          Nicolette

                          Pavan

                           

                          Having a look at your application both points that I have mentioned in my previous point are preventing you from seeing a difference between current an non current list entries.

                           

                          Point 1

                          List templates have multiple sections. For example "List Template" and "Sublist Template". Both of these templates have 4 different subtemplates depending if the list is current. Or if the list has sublists. In your case we are particular intrested in the "List Template Current with Sublist Items" and "List Template Noncurrent with Sublist Items"

                          The code for these in the "Pull Down Menu" List template are

                          Current

                          <li class="dhtmlMenuItem1">
                          <a href="#LINK#">#TEXT#</a>
                          <img src="#IMAGE_PREFIX#themes/theme_13/menu_small.gif" alt="Expand" onclick="app_AppMenuMultiOpenBottom2(this,'#LIST_ITEM_ID#',false)" />
                          </li>
                          

                           

                          Non current

                          <li class="dhtmlMenuItem1">
                          <a href="#LINK#">#TEXT#</a>
                          <img src="#IMAGE_PREFIX#themes/theme_13/menu_small.gif" alt="Expand" onclick="app_AppMenuMultiOpenBottom2(this,'#LIST_ITEM_ID#',false)" />
                          </li>
                          

                           

                          As you can see both these templates are the same. To make the current list a different colour I would at an extra class for example "current" to the current template. So it becomes

                          <li class="dhtmlMenuItem1 current">
                          <a href="#LINK#">#TEXT#</a>
                          <img src="#IMAGE_PREFIX#themes/theme_13/menu_small.gif" alt="Expand" onclick="app_AppMenuMultiOpenBottom2(this,'#LIST_ITEM_ID#',false)" />
                          </li>
                          

                          Don't forget to add the CSS definition for the class current to either the CSS file you're using or inline to the page templates.

                           

                          Point 2

                          The attribute "Current List Entry" of a list entry determines when the list is current. Default this is set to "Current page is target".

                          This means that when the page being renderd is the target page for the list entry the current template is used.

                          For list entry "Images" has the following url as target "f?p=&APP_ID.::&SESSION.:" so it has no page defined. And the apex builder doesn't know when to use the current template.

                          Pointing this entry to page 2 would solve this.

                          Or use one of the other current list entry types.

                           

                          Nicolette

                          • 11. Re: how to change css of tabs
                            Pavan

                            Thanks for reply Nicolette,

                            but i am not getting fully what i got is i tried in the same page but i didn't see any change i changed the pulldown menu template and i applied css inline template may i miss something  i didn't know if possible can u look into this please,

                             

                            thanks in advance,

                            Regards,

                            Pavan

                            • 12. Re: how to change css of tabs
                              Nicolette

                              Pavan

                               

                              You didn't correct the second point

                              Point 2

                              The attribute "Current List Entry" of a list entry determines when the list is current. Default this is set to "Current page is target".

                              This means that when the page being rendered is the target page for the list entry the current template is used.

                              For list entry "Images" has the following url as target "f?p=&APP_ID.::&SESSION.:" so it has no page defined. And the apex builder doesn't know when to use the current template.

                              Pointing this entry to page 2 would solve this.

                              Or use one of the other current list entry types.

                              So the builder still doesn't know when to use the current template for the Image list entry.

                               

                              As for the Home list entry. You have defined "#dhtmlMenuItem1 current" twice and both are classes so the definition should be ".dhtmlMenuItem1.current".

                              And ".dhtmlMenuItem.current" for the Home list entry.

                              But just defining .current would probably be enough

                               

                              And you may want to use a different background colour for current then you are using for the region body. Since the .dhtmlMenuItem1 and .dhtmlMenuItem don't have a background colour defined you see the background colour of the region.

                               

                              Nicolette

                              • 13. Re: how to change css of tabs
                                Pavan

                                Thanks for reply Nicolette,

                                 

                                As for the Home list entry. You have defined "#dhtmlMenuItem1 current" twice and both are classes so the definition should be ".dhtmlMenuItem1.current".

                                And ".dhtmlMenuItem.current" for the Home list entry.

                                But just defining .current would probably be enough

                                 

                                as you mentioned i assigned the images list entry to page 2, and also changed in the inline css ".dhtmlMenuItem1.current" and the color is changing but if the sub list entry page also the main list should be highlighted example if we goto page 3 also the images should be highlighted,

                                and i am trying  to the list region should occupy entire width of page like if you check the breadcrumb region it occupied the entire width of page, may i know how to do this things,


                                Thanks in advance,

                                Regards,

                                Pavan

                                • 14. Re: how to change css of tabs
                                  Nicolette

                                  Pavan

                                   

                                  If you want the the parent list entry to be current if one of the child entries is current then the "List Entry Current for Pages Type" can't be "Current Page Target".

                                  One option is to use "Colon Delimited Page List" and add the list of pages to List "Entry Current for Condition". The down side of this method that when add a child list entry you need to add the target page to the list.

                                  An other option is to use "Exist Sql Query" and use a hierarchy select statement on apex_application_list_entries for example

                                  select ''
                                  from   apex_application_list_entries lie
                                  where  lie.list_name = 'List1'
                                  and    lie.application_id = :app_id
                                  and    substr(lie.entry_target
                                               ,instr(lie.entry_target,':',1,1)+1
                                               ,instr(lie.entry_target,':',1,2)-instr(lie.entry_target,':',1,1)-1
                                               ) = :app_id
                                  start with lie.parent_entry_text = 'Images'
                                  connect by lie.entry_text = lie.parent_entry_text
                                  

                                  I found that in the sql workshop this query takes several seconds. So use the one that best suites your circumstance.

                                   

                                  As for the region covering the whole wide of the page.

                                  The easiest solution is to use the same "Display Point" and region template as the breadcrumb region.

                                  But essentially the width of the region needs to be set 100%.

                                  Or the background colour needs to be transparent and the page section the region is placed in needs to cover the full width and have the right background colour.

                                   

                                  Nicolette

                                  1 2 Previous Next