how to change width of the button boxes

voicecarriervoicecarrier
in Support
I want to widen the default width of the buttons. I figure this is some CSS parameter, but where is the CSS stored,and which field value do I change to widen the box width? The box right now only shows about 7 characters of the caller name (CNAME), and I want to have a wider box so that i can see more like 20 characters, because i have ambiguous caller names after 7 characters... for example MERCEDES PARTS vs. MERCEDES SALES are the same in the first 7 characters, and that confuses the operator. Any help is appreciated.

Comments

  • nicolasnicolas
    The file to change is /var/www/html/fop2/css/operator.css , look for the extenbutton class, increase the width and reduce font size.

    Best regards,
  • voicecarriervoicecarrier
    I tried changing in the operator.css file the field called "width=17.4em;", to a much larger number, but the width of the cells in the table (it is 4 cells across) did not change, and the total width of the extension cell did not change. How do you force a refresh? I updated freepbx, did a reload, logged out and back into FOP2, but no change occurred. Either this is not the correct field to change OR you have to kick FOP2 somehow to force it to reload?
  • nicolasnicolas
    The width of the button does not change the width of the layout. They are different things, very different. There are some posts talking about how fop2 uses the grid960 system. If you want to change the layout, you will hve to modify index.html and set the grid as your liking. You can check index_only_extensions.html that is included in the fop2 tarball that shows only one main area with no right column.

    Best regards,
  • voicecarriervoicecarrier
    well, the FOP2 layout shows 4 extensions per row. However on a large monitor with lots of horizontal pixels, such as a 1280 horiz. display on a 23 inch monitor, it means lots of dead space, and the caller name is truncated. It seems like it would be very worthwhile to add some kind of control in the product itself to determine the size, and allow for customization. changing the index.html is pretty scary. I will give it a try, but it should be in the documentation how to adjust the size of the extension boxes. also one can use HTML DIV tags, and use a 25% width tag on each element so as to fully utilize all the horizontal space, that is another possibility for FOP2 to look at that would make it automatically use up all horizon. space.
  • nicolasnicolas
    For using the whole horizontal space for extensions, you already have the index_only_extensions.html file, try it out, you could rename it to index.html if you like it. Changing a .css file is quite easy, if you have a super monitor, you can reduce the button width and reduce the font size in operator.css / extenbutton class. The grid system in index.html is just a little bit more complicated. I understand that its perhaps scary, but it is just a text file, and we are talking html, not some new language. The grid960 system is well documented too.

    Right now is hard to change the layout as you have a mix of things to set in the UI, and it has to work/look similar across browsers. That is really hard to do. Once you get familiar with the grid960 system you will see that is quite simple, actually very simple to work with, as you just need to change a css class in a div, nothing else.

    You can try to catch me on the live help and I we can work together on altering the layout so you get familiar with it.

    Best regards,
  • voicecarriervoicecarrier
    When I first changed the CSS file, and logged out/in again, there was no change to the presentation, so I thought the change had no effect. Now, today, the layout changed. So my burning question is after you make a change to the CSS, how do you force the browser to reload the CSS style; it appears to be cached somehow, how do you flush this out to make it happen again. I am using FreePBX, and there doesn't seem to be a "reload" button for the FOP2 product, and I would have thought that pressing the refresh button in the browser would update but it doesn't....
  • nicolasnicolas
    css, js and any other file that is not html cannot control how the browser will cache the data. So you must force-refresh your page, or configure apache to set nocache headers.

    That is a web server configuration, not a fop2 configuration, here is a nice article talking about it:

    http://www.askapache.com/htaccess/using ... ccess.html


    In practice, I just hit shift and click the reload/refresh button to get files refreshed when I perform changes.

    Best regards,
  • nicolasnicolas
    css, js and any other file that is not html cannot control how the browser will cache the data. So you must force-refresh your page, or configure apache to set nocache headers.

    That is a web server configuration, not a fop2 configuration, here is a nice article talking about it:

    http://www.askapache.com/htaccess/using ... ccess.html


    In practice, I just hit shift and click the reload/refresh button to get files refreshed when I perform changes.

    Best regards,
  • voicecarriervoicecarrier
    what is the significance of the "shift" key when clicking browser refresh?
  • nicolasnicolas
    It will bypass the browser cache:

    http://en.wikipedia.org/wiki/Wikipedia: ... your_cache

    All browsers accept shift + refresh, Internet Explorer I think requires ctrl + refresh

    So, when you modify a web page, css file, jpg image (this applies to *any* web page), if you want to see the changes, do not just reload the page, do a shift+reload to be sure your changes are going to be read again instead of from cache.
  • dslxdslx
    I tried loading the extensions_only index.html file but is states Flash required. Is this compatable with FOP2?
    I am trying to elimiante the empty column on the right side of the screen as I have many extensions to show.
  • nicolasnicolas
    Consider the following diff file: 
         <div class="container_16" id="allbuttons">
 
-        <div class="grid_12" id='left_column'>
+        <div class="grid_16" id='left_column'>
             <div class="box" style='width:100%;' id='box_extensionbox'>
                 <h2>
                    <span class='handle'></span> <span id='extensionstag'></span> <span id="toggle-extensionlist" class='myclick visible'></span>
@@ -144,7 +147,7 @@
                 <div class="block" id='extensionlist'></div>
             </div>
         </div>
-        <div class="grid_4" id='right_column'>
+        <div class="grid_4" id='right_column' style='display:none;'>

    Modify index.html so those classed are changed as depicted to remove the rightmost column and leave one big section for extensions only.

    Best regards,
Sign In or Register to comment.

© Asternic Corp 2024