This discussion is archived
12 Replies Latest reply: May 4, 2013 9:48 AM by Mini RSS

Button Customization

Mini Journeyer
Currently Being Moderated
Hi friends,

Currently i have five buttons of list template: Button List like below

<li>Assignment Information
<li>Leave Information
<li>Training and Official Missions
<li>Overtime Details
<li>Employee Appraisal Details

In the above i have the size of the button is getting varied according to the text with the button like Assignment Information button is of one size, leave information is of other size due to their count of content in text.

i need to maintain the size of the button to be same, like since from all the above five "Training and official Missions" button width is large since its text is more. I thought of keeping the same width size of the "Training and official Missions" button to all the other buttons.

So that all the buttons will have equal size like "Training and Official Missions" button size instead of varying the button size dynamically according to the content inside with it.

Whether it is possible to make the size of that button list template to be static irrespective of their size change according to their content. And also i need to increase the height of that button, so that the text in the button will be visible clearly, as now it appears to be crowded as the height is less in it.

Since i doesn't find any option for adjusting the size of that button list template(for height and width). Also not sure of altering the button template. Kindly friends help me with this.

I have reproduced the example in apex.oracle.com FYR, kindly find it

Thanks in advance

Brgds,
Mini
  • 1. Re: Button Customization
    VC Guru
    Currently Being Moderated
    Hello,

    Look at your List Template and find the css class and override it
  • 2. Re: Button Customization
    Mini Journeyer
    Currently Being Moderated
    Hi Vikram,

    Thanks for the reply. Sorry to say, Im a beginner in CSS not sure of making changes with the class.

    can you help me with the editing of it.

    Brgds,
    Mini
  • 3. Re: Button Customization
    Mini Journeyer
    Currently Being Moderated
    Hi Vikram,

    Also i tried to find CSS class of that button by inspecting Element, but im not clear of which one is that.

    In that i think that t20ButtonList is the CSS class, by referring that how i can increase the size of that button.

    I tried like by adding it in HTML header like below, but it dint worked
    <style>
    #t20ButtonList {
    style=width:200px
    }</style>
    Brgds,
    Mini
  • 4. Re: Button Customization
    VC Guru
    Currently Being Moderated
    if its a class then refer using a '.' it should be
    <style>
    .t20ButtonList {
      width:200px;
    }</style>
    Start here http://www.w3schools.com/css/css_examples.asp
  • 5. Re: Button Customization
    Mini Journeyer
    Currently Being Moderated
    Hi Vikram,

    Thanks for the reply.

    I tried like below in the HTML Header of the page, but after that change i can see a gap b/w each and every buttons instead of the button size to increase.
    <style>
    .t20ButtonList {
      width:200px;
    }</style>
    Is im missing anything.

    Thanks

    Brgds,
    Mini
  • 6. Re: Button Customization
    Mini Journeyer
    Currently Being Moderated
    Hi Vikram,

    Waiting for your reply.

    Thanks

    Brgds,
    Mini
  • 7. Re: Button Customization
    VC Guru
    Currently Being Moderated
    see my above reply ca css class should be referenced using a '.' not #
  • 8. Re: Button Customization
    Mini Journeyer
    Currently Being Moderated
    Hi Vikram,

    I tried by using a '.' instead of '#' like i mentioned in my above post soon after that, im getting a gap b/w button but there is no any change in the button width.

    Is there i need to change anything else vikram other than this.
    ;)

    Thanks

    Brgds,
    Mini
  • 9. Re: Button Customization
    fac586 Guru
    Currently Being Moderated
    Mini wrote:

    Thanks for the reply.

    I tried like below in the HTML Header of the page, but after that change i can see a gap b/w each and every buttons instead of the button size to increase.
    <style>
    .t20ButtonList {
    width:200px;
    }</style>
    Is im missing anything.
    Wrong class. <tt>t20ButtonList</tt> is a wrapper, not the button. It should be
    <style>
    .t20Button {
      display: block;
      width: 200px;
    }
    </style>
  • 10. Re: Button Customization
    Mini Journeyer
    Currently Being Moderated
    Hi fac,

    Thanks and great it worked well now all the buttons is of the same width.

    I have one more here to be adjusted, now the text are in left justified inside the button i need that text to be in centered and also is it possible to add a different background color to each and every button or different color to each and every text with in the button.

    Thanks

    Brgds,
    Mini
  • 11. Re: Button Customization
    fac586 Guru
    Currently Being Moderated
    Mini wrote:
    Hi fac,

    Thanks and great it worked well now all the buttons is of the same width.

    *I have one more here to be adjusted, now the text are in left justified inside the button i need that text to be in centered
    As VC suggests this is basic CSS. You need to spend a couple of days studying the CSS tutorials he linked to.
    <style>
    .t20Button {
      display: block;
      width: 200px;
      text-align: center;
    }
    </style>
    and also is it possible to add a different background color to each and every button or different color to each and every text with in the button.*
    It depends. There are various ways of doing this. What are you actually doing here? Multiple button list regions with "Never" conditions on all but the first entries look odd to me.

    One possibility is to assign a static region ID to each list region and use it in a descendent selector to apply a different colour scheme to the buttons in each list:
    <style>
    .t20Button {
      display: block;
      width: 200px;
      background-image: none;
      text-align: center;
    }
      #assignment .t20Button {
        background-color: #c00;
        color: #fff !important;
      }
        #assignment .t20Button:hover {
          background-color: #600;
          color: #ccc !important;
        }
      #leave .t20Button {
        background-color: #0c0;
        color: #fff !important;
      }
        #leave .t20Button:hover {
          background-color: #060;
          color: #ccc !important;
        }
      /* ...and so on for other list regions... */
    </style>
    Note that you can't use static region IDs with "No Template" regions like you were originally using: this requires a region template containing the <tt>#REGION_STATIC_ID#</tt> substitution string. There isn't a suitable basic container region template in theme 20 (even the simplest contains styling you don't want), so you have to create a new "DIV container" region template and use it for the list regions:
    <div class="t20Region t20DivContainer" id="#REGION_STATIC_ID#" #REGION_ATTRIBUTES#>
      #BODY#
    </div>
  • 12. Re: Button Customization
    Mini Journeyer
    Currently Being Moderated
    Dear fac,

    Perfect and Excellent.
    :D

    Thanks for this timely help.

    Brgds,
    Mini

Legend

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