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.

26 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
  15. 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
  16. I want to use this great opportunity to thank Dr Aluya for helping me to get my boyfriend back after 3 months of breakup. My boyfriend breakup with me because he see another girl at his working place and told me he is no longer interested in me and live me in pain and heart break. I seek for help on the internet and i saw so many good talk about this great spell caster Dr Aluya and I contacted him also and explain my problems to him and he cast a love spell for me which i use to get back my boyfriend within the period of 48 hours and i am so grateful to him for the good work he did for me,that is why i also want to let everyone who is in need of help out there to also seek help from him so he can help.His email is aluya.48hoursspelltemple@gmail.com or whatsapp: +2348110493039

    ReplyDelete
  17. My name is Louis Edmond, I am from USA. I want to share a testimony about Dr Aluya, a great spell caster who is very straight forward with his words of casting spells. When my Wife left me for another Man i was so confused,but one a day a friend of mine gave me the email address of this great spell caster called dr Aluya, I contacted this man and explained to him all that i was going through,he then told me to be calm and not worry anymore because my case is a very easy one. At first I never believed all that he was saying until when my husband returned home two days later begging me to forgive him for all that he had done to me and to please accept him back into my life,I was so amazed,I never believed it was going to happen that fast.
    This man is truly great indeed. Contact him today for a perfect solution to your love problem, aluya.48hoursspelltemple@gmail.com.  or whatsApp him  +2348110493039

    ReplyDelete
  18. Hi everyone, my name is Rabueil Islam
     and am from London, I met this spell caster called Dr Aluya of aluya.48hoursspelltemple@gmail.com online and so many other, but i decided to go with this particular spell caster and this is about 2 weeks ago. I needed the spell caster to reunite me and my lover because she started behaving strange and a day came she text me and told me she cannot continue with the relationship anymore, that she just want to be alone. But a close friend of hers shows the guy to me that she was now dating. So i contacted this spell caster because i was totally heart broken and i smoked and get drunk till i could not even notice if am standing or lying.This spell caster told me not to worry, he gave me hope that am to have her again just like old times, and i provided all the requirements, and in just 5 days, my ex lover called me crying over the phone asking for me to forgive her for her stupid act, and she swore with her mother grave to love me and never hurt me again.This was what the spell caster earlier told me and it came after he has done the spell and that same night, my lover came to my house and spend the night with me.I have never seen spell as powerful as this but now, am convinced that Dr Aluya is the best ever, You can contact him through him email address:aluya.48hoursspelltemple@gmail.com or WhatsApp: +2348110493039

    ReplyDelete
  19. My lover dumped for  another woman with two kids i was confused until i came
    in contact with Dr Aluya who helped me with a powerful love spell that
    brought him back within 2 days. contact Dr Aluya for help on :
    Email :aluya.48hoursspelltemple@gmail.com or WhatsApp him  +2348110493039

    ReplyDelete
  20. Get Your Wife Back, Perfect Urgent Love Spell. Am Oliva Giphy
     from FL Usa All Thanks To Dr Aluya Who Brought Back The Love Of My Life. my girlfriend cheated on me and asked for a breakup. I don't believe at first i try to get back with her but all she told me was she’s with someone else. that she is no longer interested in marrying me at that point i was heart broken coz i love my girlfriend so much that i could not let go off her all of a sudden she left me, i really love her and never can imagine my life without her. not until i came across a powerful real spell caster Dr Aluya who promise me 48hours urgent love spell to get back with my girlfriend, good twenty-four {48} hours. hmm-mm, it was a good night time at 11:pm within the days that Dr Aluya told me that my girlfriend will be back, at first i heard the bell rings getting close to my door i heard someone saying honey!!!, it sound familiar i opened the door and i saw my girlfriend standing and weeping in front of me. i was not surprised because its all i have been praying for her to come back home. Guess what 2 weeks after she noticed her system and her body temperature was changed and i took her to clinic for check up and the doctor told me that there is life in her which means she was pregnant i really wants to use this opportunity to thanks Dr Aluya so much and the love page that directed me to Dr Aluya if you have any problem getting your ex back, or predicament that is worse or exactly like this you have been into, contact Dr Aluya on aluya.48hoursspelltemple@gmail.com Whatsapp/cal  +2348110493039  
    https://draluya48hoursspelltemple.webs.com/

    ReplyDelete
  21. My lover dumped another woman with two kids i was confused until i came
    in contact with Dr Aluya who helped me with a powerful love spell that
    brought him back within 2 days. contact Dr Aluya for help on :
    Email :aluya.48hoursspelltemple@gmail.com or aluya.48hoursspelltemple@yahoo.com WhatsApp him +2348110493039


    website https://draluya48hoursspelltemple.webs.com/

    ReplyDelete
  22. How I Got My Ex Husband Back..Am so excited to share my testimony of a real spell caster who brought my husband back to me. My husband and I have been married for about 6 years now. We were happily married with two kids, a boy and a girl. 3 months ago, I started to notice some strange behavior from him and a few weeks later I found out that my husband is seeing someone else. He started coming home late from work, he hardly care about me or the kids anymore, Sometimes he goes out and doesn't even come back home for about 2-3 days. I did all I could to rectify this problem but all to no avail. I became very worried and needed help. As I was browsing through the internet one day, I came across a website that suggested that Dr Aluya can help solve marital problems, restore broken relationships and so on. So, I felt I should give him a try. I contacted him and and told him my problems and he told me what to do and i did it and he did a spell for me. 48 hours later, my husband came to me and apologized for the wrongs he did and promise never to do it again. Ever since then, everything has returned back to normal. I and my family are living together happily again.. All thanks to Dr Aluya Powerful Love Spell that really works. If you have any problem contact him and i guarantee you that he will help you. He will not disappoint you. Email him at: {aluya.48hoursspelltemple@gmail.com}. or  {aluya.48hoursspelltemple@yahoo.com} whatsapp him on: +2348110493039  
      https://draluya48hoursspelltemple.webs.com/  

    ReplyDelete