Saturday, 11 May 2013

How to use Chrome and CSS to Customize the Xataface Look & Feel


Xataface provides you (the developer) with many tools to customize the user interface.  Some options include:

  • Implementing Blocks & Slots in delegate classes.
  • Overriding templates.
  • Configuration directives in the various INI files.
  • Preferences.
  • Permissions & Authentication.
  • CSS
  • Javascript
All of these strategies have a time and place.  Before rolling up your sleeves and delving into templates, blocks, slots, preferences, and the like, I recommend seeing how far you can get with just pure CSS by creating your own custom stylesheet.

Using CSS, you can change the logo, hide components on the page, change color schemes, and even modify the layout to a certain extent.  Using a modern web browser like Chrome that includes some developer tools, it is fairly easy to peruse the DOM and come up with the appropriate CSS to modify it to your liking.

In this post I will show you how to change the logo and hide unnecessary sections of the UI by:
  1. Adding a custom CSS stylesheet to your Xataface application.
  2. Using Chrome's developer tools to identify the parts of the page that you want to modify or hide.
  3. Modifying or hiding portions of the UI that we identified in the previous step by adding CSS rules to our CSS file.

Including a Custom Stylesheet

We start by creating a blank CSS file in our application's directory.  We'll call it "style.css".  Then we need to tell Xataface to include this file in the <head> of all pages that are rendered in the app.   We do this inside the beforeHandleRequest() method of the Application delegate class (since this is run before every request is handled so we can ensure that the code will be executed:
We make use of the Dataface_Application class's addHeadContent() method that allows you to embed arbitrary content in the <head> section.  We use it here to add a <link> tag which includes our stylesheet.

Changing the Logo

In this example, I'm using the G2 theme.  Instructions for other themes will be slightly different because the logo is displayed in different positions using different methods.  

Steps:
  1. Open your Xataface application in Chrome.
  2. Right click on the Xataface logo, and select "Inspect Element".
  3. This will open the document inspector so that you can actually see the HTML document tree.  If you got here by right-clicking on the Xataface logo, then it should show up with the xataface logo div tag selected.
    The Chrome element inspector allows you to view the DOM tree.  Here you see the xf-logo div seelcted.  On the right you can see some of the CSS rules that apply to this element, including the background-image directive which specifies the image file to use for the logo.
  4. With the xf-logo div selected you should be able to review the CSS rules that apply to that tag.  The first matched rule (seen in the lower right of the above screenshot) specifies that the background-image is at images/small-xataface-logo.png.  This gives us a clue as to how to craft our own CSS rule to override this background-image.  Let's add a CSS rule in our style.css file to specify a different image file.

    #xf-logo {
        background-image: url(images/custom-logo.png);
    }


    Note that URLs in a CSS file are relative to the location of the stylesheet.  Therefore, we need to place our custom-logo.png file inside the "images" directory which should be at the same level as the style.css file (i.e. in the main site directory).
  5. Reload our page in the browser and see if the change worked:

  6. It looks like it worked, but since our new logo is a different size than the old one, we need to change the dimensions of the xf-logo div tag, so let's make the following change in the style.css file:
  7. And now refresh the page to see the change:

  8. You may want to tinker a little more with the CSS to adjust the position of the logo, but we're pretty much there.

Hiding Sections of the Page

Another common request is to hide sections of the page that your users don't need to access.  Keep in mind that there is a difference between your users not needing to access a feature and not being permitted to access a feature is very important.
Never rely on CSS to hide features that the user shouldn't have access to.  Use permissions for this.  Only use CSS to hide sections that aren't needed.

That said, let's take a look at the "View" page for a record, and make some decisions about which parts of the page are necessary, and which parts we want to keep. 



As an example, let's take an extreme approach and hide everything except what appears inside the "Details" portlet.  No menus.  No logos.  No search box, etc...

Removing the Left Column

  1. Let's use Chrome again to inspect the document so we can figure our how to target the left column.  We just need to right click somewhere in the left column and select "Inspect Element" option to open the element inspector. We can then hover over the various tags and see some feedback in the browser panel as the representation of tags on which you hover become selected.

    Hovering over the left_column div tag in the element inspector causes the  left column to appear selected in the browser panel.  This allows you to hover around and identify the tags that you want to hide or modify.
  2. We see that the id of the left column <td> tag is "left_column", so we can hide this in our style.css file by adding:

    Now, reloading the page we see that the left column is now gone. 


  3. Now, employing similar investigation techniques, we remove the top menu, the search box, the internal left column (i.e. with the tree menus and the record search), by adding the following to our CSS file:
    And the result is:
    With all of the sections removed, we are left with just the portions of the page that we want to display.
There is much more that can be done with CSS to customize the look and feel of a Xataface application.  We have only scratched the surface here.  I'll let you run with it from here to see what your creativity spawns.

18 comments:

  1. Replies
    1. Hi everyone I'm Olivia Hannah and am here to share the wonderful work Dr Raypower did for me. After 5 years in marriage with my husband with 2 kids, my husband started acting weird and going out with other ladies and showed me cold love, on several occasions he threatens to divorce me if I dare question him about his affair with other ladies, I was totally devastated and confused until a old friend of mine told me about a spell caster on the internet called Dr. Raypower who help people with relationship and marriage problem by the powers of love spells, at first I doubted if such thing ever exists but decided to give it a try, when I contact him, he helped me cast a love spell and within 48hours my husband came back to me and started apologizing, now he has stopped going out with other ladies and his with me for good and for real. Contact this great love spell caster for your relationship or marriage problem to be solved today via email: Urgentspellcast@gmail.com or Urgentspellcast@yahoo.com or Call or WhatsApp: +14243308109. 

      Read more about him on his website: http://urgentspellcast.website2.me/














      Hi everyone I'm Olivia Hannah and am here to share the wonderful work Dr Raypower did for me. After 5 years in marriage with my husband with 2 kids, my husband started acting weird and going out with other ladies and showed me cold love, on several occasions he threatens to divorce me if I dare question him about his affair with other ladies, I was totally devastated and confused until a old friend of mine told me about a spell caster on the internet called Dr. Raypower who help people with relationship and marriage problem by the powers of love spells, at first I doubted if such thing ever exists but decided to give it a try, when I contact him, he helped me cast a love spell and within 48hours my husband came back to me and started apologizing, now he has stopped going out with other ladies and his with me for good and for real. Contact this great love spell caster for your relationship or marriage problem to be solved today via email: Urgentspellcast@gmail.com or Urgentspellcast@yahoo.com or Call or WhatsApp: +14243308109. 

      Read more about him on his website: http://urgentspellcast.website2.me/

      Delete
  2. Could someone please advice me in how to left-align all data in all columns in a tables list-view?
    I have been able to left-align the column headers with the following:
    #result_list{
    text-align: left;
    }

    I have how ever not been able to find any css identity that will impact the rendering of the datarows of the list.
    Many thanks in advance.

    ReplyDelete
    Replies
    1. I don't have the exact answer for you, but the key is to look at the structure of the HTML. I might try things like:

      #result_list td {
      text-align:left;
      }

      or

      #result_list td >div {
      text-align:left;
      }

      Delete
  3. Greetings dear,many many thanks for sharing such wonderful information with us.I am eagerly waiting for your next post.Kindly please visit our site for information about css templates

    ReplyDelete
  4. I must admit I have popped in a read a good number of your blogs but I have no idea how to post a response over there, so I'll tell you now how good you are at describing the stuff your at - I must admit I find it insightful to read your blogging. Keep the good work, please visit our website for more free piugins


    ReplyDelete
  5. I really enjoyed this posting in which you share a valuable post. Thanks for sharing it.
    custom logo

    ReplyDelete
  6. Quantum Binary Signals

    Get professional trading signals sent to your cell phone daily.

    Start following our signals right now & gain up to 270% daily.

    ReplyDelete
  7. If you need your ex-girlfriend or ex-boyfriend to come crawling back to you on their knees (even if they're dating somebody else now) you must watch this video
    right away...

    (VIDEO) Get your ex back with TEXT messages?

    ReplyDelete
  8. Hi, I try to change logo but I have this error.
    Can u help me please?

    public function beforeHandleRequest(){ Dataface_Application::getInstance() ->addHeadContent( sprintf('', htmlspecialchars(DATAFACE_SITE_URL.'/style1.css') ) ); }
    Fatal error: Class 'conf_ApplicationDelegate' not found in /Applications/MAMP/htdocs/gardumo/xataface/Dataface/Application.php on line 3024

    ReplyDelete
  9. Much obliged for the post and extraordinary tips..even I likewise feel that diligent work is the most essential part of getting achievement..
    css beautifier

    ReplyDelete
  10. "I have just visited your website, and I think it's great."
    Custom Logo

    ReplyDelete
  11. This comment has been removed by the author.

    ReplyDelete

  12. Keep up the good work! Check out latest deals and offers at RetailEscaper

    ReplyDelete
  13. Hello i am here to spread this good news to the entire world on how i got my ex love back.I was going crazy when my love left me for another girl last month,But when i meet a friend that introduce me to DR IROSI the great messenger to the oracle that he serve,I narrated my problem to DR IROSI about how my ex love left me and also how i needed to get a job in a very big company.He only said to me that i have come to the right place were i will be getting my heart desire without any side effect.He told me what i need to do,After it was been done,In the next 2 days,My love called me on the phone and was saying sorry for living me before now and also in the next one week after my love called me to be pleading for forgiveness,I was called for interview in my desired company were i needed to work as the managing director..I am so happy and overwhelmed that i have to tell this to the entire world to contact DR IROSI at the following email address DRIROSISOLUTIONCENTER@GMAIL.COM and get all your problem solve..No problem is too big for him to solve..Contact him direct on DRIROSISOLUTIONCENTER@GMAIL.COM or call his mobile number or add him up on whatsapp via (+2348118829771). and get your problems solve like me.    

    ReplyDelete
  14. LOVE SPELLS THAT WORKS I am sharing this testimony to partners suffering in their relationships because there is an enduring solution.
    My husband left me and our 2 kids for another woman for 3 years. I tried to be strong just for my kids but I could not control the pains that torment my heart. I was hurt and confused. I needed a help, so i did a research on the internet and came across a site where I saw that Dr. Aluya a spell caster, can help get lovers back. I contacted him and he did a special prayer and spells for me. To my surprises, after some days, my husband came back home. That was how we reunited again and there was a lot of love, joy and peace in the family.
    You can as well contact Dr.  Aluya  , a powerful spell-caster for solutions on his contact aluya.48hoursspelltemple@gmail.com or directly on Whats App: +2348055431163 

    ReplyDelete