Sunday, July 12, 2015

GSoC weekly update: How to override templates and styles in AskBot

9:27 PM Posted by Anuradha Welivita 4 comments
Okay this has been giving me a lot of trouble from the beginning and I am really glad that I could sort this out :) Thank you very much Ahmed Fathy Hussein (IRC nick: TheMonster) who helped me to resolve this. And as I could also not find any clear documentation regarding overriding templates and styles in AskBot I will try to explain this here.

So, first of all the testing repository for AskFedora can be cloned from here: https://github.com/fedoradesign/askbot-test to set up our own staging instance in Openshift. I have explained how to set up an Openshift staging instance in one of my earlier posts. AskBot comes as a dependency with this staging instance and it get installed under app-root/runtime/dependencies/python/virtenv/lib/python2.7/site-packages in Openshift. 

The problem I had was how to override the default styles and templates given by AskBot. All the html templates of AskBot are placed inside the 'templates' directory and the CSS, JavaScript, image files etc. are placed inside the 'media' directory. What I tried earlier was trying to change the original AskBot files by ssh into my Openshift repository. But it was very difficult as each time when I needed to do a change I had to ssh into my instance and get the files changed by opening them with the nano editor from the terminal. So, never try that there got to be another solution ;)

So, the solution is this. What we need to do is create a new skin folder inside the repository which is uploaded to Openshift and edit the settings.py file in our repository to type in the following line of code to point to the new skins directory.

ASKBOT_EXTRA_SKINS_DIR = os.path.join(PROJECT_ROOT, '../static') #path to your private skin collection

The directory structure of the new skin folder (Mine is named 'askfedoratheme') should be like this:

-askfedoratheme
        -media
             -style
                  -style.css
             -js
             -images
        -templates
             -main_page.html

Only the templates and files that needs be overriden should be placed inside the new skin folder and the rest of the files will be taken from the default skins and templates provided by AskBot. Of cource the AskBot directory structure should be maintained when creating our own skin. And remember that the new skin folder should be placed inside wsgi/static folder. I have earlier placed it inside askbot_devel folder which did not work. And after that I pushed the repository to Openshift but guess what it did not work as expected :P It was giving a server error. How do we know what the error is? The best way to find a runtime error in Openshift is ssh into the instance and go to the project root of the respective repo and type in 

python manage.py runserver

After running that command the following popped up:

Add ASKBOT_EXTRA_SKINS_DIR to STATICFILES_DIR entry in your settings.py file.
NOTE: it might be necessary to move the line with ASKBOT_EXTRA_SKINS_DIR just above STATICFILES_DIR.

Then as asked I added the ASKBOT_EXTRA_SKINS_DIR under the STATICFILES_DIRS in the following manner:

ASKBOT_EXTRA_SKINS_DIR = os.path.join(PROJECT_ROOT, 'askfedoratheme')
STATICFILES_DIRS = ( 
    ('default/media', os.path.join(ASKBOT_ROOT, 'media')),
    ASKBOT_EXTRA_SKINS_DIR,
)

And after making the changes again push the repo into Openshift. And it will still not work as expected. From the website if you have not created a user account yet, you need to create a user account from the website and that will be your admin account. When you log in from the admin account there will be a link called settings displayed on the top from where you could change the default settings of the website. It is the link to the admin panel. And from there under under 'Select skin' option you will be able to see your new skins folder which in my case is 'askfedoratheme'. And select that directory from the list.

The first time I tried doing that it gave me an error saying:

Site matching query does not exist.

It can be solved by following what is in the link here: http://stackoverflow.com/questions/16068518/django-site-matching-query-does-not-exist

And after doing so again select the new skins directory under Select skin option in the admin panel and then all the styles and templates that you have included in your new skins folder will override the default templates and styles given by AskBot. :) Hope this will solve any kind of issues people ad regarding how to do override the default templates and styles in AskBot.

References
 



 

4 comments:

  1. 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
  2. This comment has been removed by the author.

    ReplyDelete
  3. 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 html templates




    ReplyDelete
  4. Amazing post dude.It will be very helpful for begginers like me.Thank you very much for this important post.Waiting for your next post.You can visit our site to get awesome free piugins

    ReplyDelete

Labels