• Members 16 posts
    May 16, 2017, 9:31 p.m.

    What is the name of the css class for the category customization. And how much is editable ofc the lable color, but more like background,font,cursor mb some background music or are thees things to come or are they doable by default or by writing some custom templates or something?

  • May 16, 2017, 9:38 p.m.

    You are only able to enter custom suffix that will cause Misago to add custom css classes containing it to items on categories and threads lists. Misago defines few example classes out of the box that you may find in the docs.

    I've found this approach better than writing complex forms for letting folk to click trough list and page styles. Template complexity is sane that way, and it spares me the rabbithole of "could you add form for customizing XYZ" requests. ;)

  • Members 16 posts
    May 17, 2017, 6:50 p.m.

    How/can i use the

    page-header-bg
    

    In the for mentioned category css class

    and just a quickie would it be possible to load a custom css for just that page?

  • May 17, 2017, 7:24 p.m.

    Have you looked at the html generated by Misago after setting the class? This very thread's in category that has "green" as its defined css class. This results in Misago adding page-thread-green css class to this page. So to style page-header-bg I can use .page-thread-green .page-header-bg selector in my CSS. This is same for category's threads list.

    Loading custom CSS is possible by editing the misago/base.html and misago/categories/base.html templates. This is tricky tough because you'll need to copy them to your own forum's theme/templates directory as misago/base.html and misago/categories/base.html. This will make Misago load your copies instead of defaults. Now edit your theme/templates/misago/base.html and find this line:

    {% include "misago/head.html" %}
    

    Edit it to include your own custom block:

    {% include "misago/head.html" %}
    {% block extra-css %}{% endblock extra-css %}
    

    Not edit theme/templates/misago/categories/base.html and find in it:

    {% block title %}
    

    Edit it to look like this:

    {% block extra-css %}
    <link href="{% static 'my-custom.css' %}" rel="stylesheet">
    {% endblock extra-css %}
    
    
    {% block title %}
    

    Also find:

    {% load i18n %}
    

    And change it to:

    {% load i18n staticfiles %}
    

    Now create theme/static/my-custom.css file. After those modifications Misago should include it on category page. Likewise you may add your custom template block to other templates like misago/threads/thread.html to include custom css at thread view.

  • Members 16 posts
    May 17, 2017, 9:54 p.m.

    OK yeah. Well now im having a problem with

    .page-thread-green
    

    It dosn't seem to bee loading for some reason? or it "flashes" with the right background and stuff but does not stay that way and defaults back to the default theme?

    in page source i see

    <div class="page page-thread page-thread-green">
    

    like u mentioned.But when i inspect the div it's missing the "page-thread-green" part any ideas?

  • May 17, 2017, 10:16 p.m.

    Looks like a bug in Misago then. I'll be releasing next alpha in few days, I'll have a look on this by then.

  • Members 16 posts
    May 17, 2017, 10:22 p.m.

    Another question.

    Do you have any objections to loading a custom css like this

    <link href="/static/misago/css/misago.css" rel="stylesheet">
    <link href="/static/misago/css/custom.css" rel="stylesheet">
    

    Right after the misago one, and just right in the <head> tags?

    Thats the way i'we done it on other projects and it works but if there a better or "right" way of doing this since i'm currently just putting all customization in one file

  • May 18, 2017, 9:16 a.m.

    You should never hardcode /static/ url's - this will break your app the moment you'll change default static files store to something else, like S3 or just fingerprinted assets.

    I don't see anything else to bring up here.

  • Members 20 posts
    May 22, 2017, 1:29 a.m.

    Rafal-- I've tried this and while I can get Misago to recognize and use theme/templates/misago/base.html successfully, I can't get it to recognize the /theme/templates/threadslist/base.html. Which, btw you called "/theme/templates/threads" above?

    Any pointers would be great! Thanks!

  • May 22, 2017, 8:01 a.m.

    Try with /theme/templates/misago/threadslist/base.html. This is because all Misago's templates live under the misago directory to don't conflict with eventual 3rd party templates from other django apps installed.

    That's entirely possible. Misago's codebase is quite spacious, and its tricky to remember it all right ;)

  • Members 20 posts
    May 22, 2017, 12:28 p.m.

    Sorry Rafalp-- I actually mean to say I tried /theme/templates/misago/threadslist/base.html and it doesn't recognize it. But, it still recognizes changes to /theme/templates/misago/base.html and other files in that directory .. but not the subdirs from there.

  • May 22, 2017, 12:36 p.m.

    That would suggest a bug in Django's template loader, and thats super unlikely.

    There are two possibilities remaining:

    1. You are changing something that gets replaced by the JavaScript UI.
    2. You are changing something that gets replaced by inheriting template.

    But its hard to tell without seeing the change.

  • Members 20 posts
    May 22, 2017, 3:44 p.m.

    Here is the change, it's quite simple. Not sure why it's not being recognized since /theme/templates/misago/base.html has changes that are being picked up.

    <div class="page-header">
      <div class="container">
        <div id="threads-header-bg" style="background-image: url(/static/misago/img/logo-bg.png); background-repeat: no-repeat; background-position: 272px -76px; background-size: 640px 360px;"></div>
        <div class="row">
    

    Seems pretty straight forward.

  • May 22, 2017, 3:46 p.m.

    Test it with JavaScript disabled, and you should see your change.

    The thing is, becuase this html is within <div id="page-mount">, it gets overwriten by HTML generated by Misago's JavaScript UI.

    Only theme customizations within page-mount that can be done are via CSS, or forking and customizing JS.

  • Members 20 posts
    May 30, 2017, 8:43 p.m.

    So doing something like adding a new option on the navbar's user-menu would have to be done via customized JS. There is no template you can modify without forking and modifying JS, eh? :*(

  • May 30, 2017, 8:48 p.m.

    You can have dynamic UI via doing it in JS, or static pages with interactivity done by boatloads of fragile jQuery, magic css classes and data- attributes. The former is more reasonable IMHO.

  • May 30, 2017, 8:54 p.m.

    As for forking and modifying JS to add options to user-menu, I would like to eventually support plugin system in Misago's JS to save folk from having to do that, but that's distant future for now.

    If I may ask, what option are you trying to add?

  • Members 20 posts
    May 30, 2017, 10:40 p.m.

    I've got an app that provides for auth integration with Valve's Steam platform. Having a link on the user menu to manage which steam accounts you have linked to your forum account is what I'm after. Would rather not have in on the main nav (which I can modify with the templates).

  • May 31, 2017, 8:28 p.m.

    Thinking about it, it's likely that solution for pains of "forking the frontend" would be forking it and installing babel plugin that would let you override the imports with custom modules. That way you could define your own module in custom directory... or in future setup build script in a way that behaves like Django, and comes with empty directory that you could drop overriding modules in if you so wish.

  • Members 20 posts
    June 1, 2017, 1:17 a.m.

    That would be nice.