• Members 19 posts
    March 25, 2017, 12:24 a.m.
    /*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */.btn,.caret,img{vertical-align:middle}hr,img{border:0}body,figure{margin:0}.navbar-fixed-bottom .navbar-collapse,.navbar-fixed-top .navbar-collapse,.pre-scrollable{max-height:340px}.img-thumbnail,.table,label{max-width:100%}.alerts-snackbar,.form-control-feedback,a.btn.disabled,fieldset[disabled] a.btn{pointer-events:none}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}b,optgroup,strong{font-weight:700}dfn{font-style:italic}h1{margin:.67em 0}mark{background:#ff0;color:#000}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}svg:not(:root){overflow:hidden}hr{box-sizing:content-box;height:0}pre,textarea{overflow:auto}code,kbd,pre,samp{font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}/*! Source: https://github.com/h5bp/html5-boilerplate/blob/master/src/css/main.css */@media print{blockquote,img,pre,tr{page-break-inside:avoid}*,:after,:before{background:0 0!important;color:#000!important;box-shadow:none!important;text-shadow:none!important}a,a:visited{text-decoration:underline}a[href]:after{content:" (" attr(href) ")"}abbr[title]:after{content:" (" attr(title) ")"}a[href^="javascript:"]:after,a[href^="#"]:after{content:""}blockquote,pre{border:1px solid #999}thead{display:table-header-group}img{max-width:100%!important}h2,h3,p{orphans:3;widows:3}h2,h3{page-break-after:avoid}.navbar{display:none}.btn>.caret,.dropup>.btn>.caret{border-top-color:#000!important}.label{border:1px solid #000}.table{border-collapse:collapse!important}.table td,.table th{background-color:#fff!important}.table-bordered td,.table-bordered th{border:1px solid #ddd!important}}.btn,.btn-danger.active,.btn-danger:active,.btn-default.active,.btn-default:active,.btn-info.active,.btn-info:active,.btn-primary.active,.btn-primary:active,.btn-warning.active,.btn-warning:active,.btn.active,.btn:active,.dropdown-menu>.disabled>a:focus,.dropdown-menu>.disabled>a:hover,.form-control,.navbar-toggle,.open>.dropdown-toggle.btn-danger,.open>.dropdown-toggle.btn-default,.open>.dropdown-toggle.btn-info,.open>.dropdown-toggle.btn-primary,.open>.dropdown-toggle.btn-warning{background-image:none}.img-thumbnail,body{background-color:#fff}*,:after,:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}html{font-size:10px;-webkit-tap-highlight-color:transparent}body{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:14px;line-height:1.42857143;color:#333}button,input,select,textarea{font-family:inherit;font-size:inherit;line-height:inherit}a{color:#337ab7;text-decoration:none}a:focus,a:hover{color:#23527c;text-decoration:underline}a:focus{outline:-webkit-focus-ring-color auto 5px;outline-offset:-2px}.img-responsive{display:block;max-width:100%;height:auto}.img-rounded{border-radius:6px}.img-thumbnail{padding:4px;line-height:1.42857143;border:1px solid #ddd;border-radius:4px;-webkit-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;transition:all .2s ease-in-out;display:inline-block;height:auto}.img-circle{border-radius:50%}hr{margin-top:20px;margin-bottom:20px;border-top:1px solid #eee}.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);border:0}.sr-only-focusable:active,.sr-only-focusable:focus{position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto}[role=button]{cursor:pointer}.h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6{font-family:inherit;font-weight:500;line-height:1.1;color:inherit}.h1 .small,.h1 small,.h2 .small,.h2 small,.h3 .small,.h3 small,.h4 .small,.h4 small,.h5 .small,.h5 small,.h6 .small,.h6 small,h1 .small,h1 small,h2 .small,h2 small,h3 .small,h3 small,h4 .small,h4 small,h5 .small,h5 small,h6 .small,h6 small{font-weight:400;line-height:1;color:#777}.h1,.h2,.h3,h1,h2,h3{margin-top:20px;margin-bottom:10px}.h1 .small,.h1 small,.h2 .small,.h2 small,.h3 .small,.h3 small,h1 .small,h1 small,h2 .small,h2 small,h3 .small,h3 small{font-size:65%}.h4,.h5,.h6,h4,h5,h6{margin-top:10px;margin-bottom:10px}dl,ol,ul{margin-top:0}.lead,address,dl{margin-bottom:20px}.h4 .small,.h4 small,.h5 .small,.h5 small,.h6 .small,.h6 small,h4 .small,h4 small,h5 .small,h5 small,h6 .small,h6 small{font-size:75%}.h1,h1{font-size:36px}.h2,h2{font-size:30px}.h3,h3{font-size:24px}.h4,h4{font-size:18px}.h5,h5{font-size:14px}.h6,h6{font-size:12px}p{margin:0 0 10px}.lead{font-size:16px;font-weight:300;line-height:1.4}blockquote ol:last-child,blockquote p:last-child,blockquote ul:last-child,ol ol,ol ul,ul ol,ul ul{margin-bottom:0}dt,kbd kbd,label{font-weight:700}address,blockquote .small,blockquote footer,blockquote small,dd,dt,pre{line-height:1.42857143}@media

    How would I edit/override this? (misago.css)
    For me to edit the file directly is just complicated and extremely long.

  • March 25, 2017, 12:27 a.m.

    This is because Misago uses Bootstrap 3 as its frontend framework, and this means its CSS is generated from the LESS files, as i've posted previously. To customize its css you'll need to use original less files provided and node.js-based "less" compiler.

  • Members 19 posts
    March 25, 2017, 12:37 a.m.

    Could you point me to where that is located? Again, appreciate the replies. :)

  • March 25, 2017, 12:39 a.m.

    I've linked to it already, but those files can be found here

  • Members 19 posts
    March 25, 2017, 1:14 a.m.

    So, would that be within the misago directory or the "myapp" one stored on desktop? Im a bit confused on where to look.

  • March 25, 2017, 1:23 a.m.

    Have you clicked the link I've gave you? Thats the only place source LESS files for Misago's CSS exist. Frontend directory is not uploaded to PYPI when I'm doing releases. You need to download or clone the locally and then copy files wherever you want. Its only output style.css that you need to put in myapp/theme/static/misago/style.css to override default css. ;)

  • Members 19 posts
    March 25, 2017, 1:31 a.m.

    Apparently, I dont have the "misago" folder in `myapp/theme/static nor do I have a style.css. Surely, Im missing something. Lmao`

  • March 25, 2017, 1:38 a.m.

    I've didn't say it will be there, just to put css file under such path to override default css.

  • Members 19 posts
    March 25, 2017, 1:39 a.m.

    So, Ive cloned the link and placed the entire misago folder into myapp/theme/static . Would this be a correct way of doing it?

  • March 25, 2017, 1:48 a.m.

    I can't tell. What's the misago folder you are speaking of? Is it one from frontend/style/? Or is it one from repo's root?

    Eitherway, you'll need to use node.js first to compile misago's less files to style.css file, so copying anything will not do the trick.

  • Members 19 posts
    March 25, 2017, 1:52 a.m.

    Aight, how would one do that in node.js? I have node.js installed, I just need direction. Thanks.
    The misago file from frontend/style/ .

  • March 25, 2017, 3:44 a.m.

    Please don't take this as a jab at you, but right now I would likely spend some time to familiarize myself with how Node.js is used by the frontend developers these days. It would be good to learn how to write small tools in it, propably using "npm scripts" or some task runner, like gulp.js, and then read some about Bootstrap 3 that Misago uses for its CSS, as well as less.js.

    I am super happy whenever people pick up my work, and I'm trying to help them the best I can, but I have limited amount of time I may invest into open source that I have to divide between answering questions and pulling forward its codebase. This means I need to have limits on how much hand holding those with problems I can do. The best way to be happy with project such as Misago, that is complete solution building on existing technologies, is to invest some time to explore those technologies.

    Learning basics of how Django projects are laid out, how they load css/js/image files, or how templates are loaded or used to generate final output, is something that person with prior knowledge of other web framework will work out in few days doing tutorials, but will result in large understanding of how Misago is actually setup, and in result, how to customise it. This is the same for writing custom css or working with less. Learning how today webdevelopers use Node.js and its tools to write css will not only help one find himself around Misago's frontend application - it will help one become better webdeveloper.

    Still, I am always here to answer questions.


  • Members 14 posts
    May 8, 2017, 12:36 p.m.

    Hi there!

    I'm trying to do this.

    1. I loaded frontend folder
    2. Generate style.css from less files:
    frontend/style$ lessc index.less style.css
    1. Put this file to forum/theme/static/misago/style.css and make some color changes in style.css
    2. I uncommented in settings.py file this row:
      os.path.join(BASE_DIR, 'theme', 'static'),

    3. Do

    python manage.py collectstatic -c

    And I don't see my changes. The forum uses misago.css file from /static/misago/css/misago.css, and doesn't use theme/static/misago/style.css

    What did I miss?
    Thank you!

    I tried to upload my style.css, but this type doesn't support.
    This is begin of my file:

    /*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
    html {
      font-family: sans-serif;
      -ms-text-size-adjust: 100%;
      -webkit-text-size-adjust: 100%;
    body {
      margin: 0;
    summary {
      display: block;
    video {
      display: inline-block;
      vertical-align: baseline;
    audio:not([controls]) {
      display: none;
      height: 0;
  • May 8, 2017, 12:39 p.m.

    Have you tried putting that file at forum/theme/static/misago/css/style.css?

  • Members 14 posts
    May 8, 2017, 12:46 p.m.

    No, I didn't. But now I put it at forum/theme/static/misago/css/style.css
    And make collect after this, the result is the same.

  • Members 14 posts
    May 8, 2017, 12:54 p.m.

    Do I have to remove misago.css in this folder forum/theme/static/misago/css/ ?

  • May 8, 2017, 12:56 p.m.

    Actually you should name your file misago.css because thats what Misago expects it to be.

    Basically, when Misago collects static files like CSS, it looks for those two paths, and picks first file that works:

    1. forum/theme/static/misago/css/misago.css
    2. misago/static/misago/css/misago.css
  • Members 14 posts
    May 8, 2017, 1:11 p.m.

    Great! It's worked!

    But it doesn't find some files:

    I've found them at /static/misago/admin/css/font-awesome.css /static/misago/admin/css/bootstrap-datetimepicker.css

  • Members 14 posts
    May 8, 2017, 1:15 p.m.

    I copied them to css and it's ok.

    But bootstrap formatting has gone :( or this is because js files. I don't know.

    I attached two files: the forum view before and after (changes.png)


    PNG, 46.5 KB, uploaded by daria2 on May 8, 2017.


    PNG, 70.9 KB, uploaded by daria2 on May 8, 2017.

  • May 8, 2017, 1:29 p.m.

    I don't know how you are writing your styles, because it looks like you are using styles from admin panel, and not the front. There's no dependency on bootstrap datepicker or fontawesome in the frontend, only in admin.

  • Members 14 posts
    May 8, 2017, 2:08 p.m.

    Thank you!
    I wrote before about getting of style.css.

    I loaded frontend folder https://github.com/rafalp/Misago/tree/master/frontend
    Generate style.css from less files: `frontend/style$ lessc index.less style.css`

    Do I have to generate styles in fronend/style/misago folder?
    Like this:

    fronend/style/misago$ find . -name '*.less' -exec lessc {} \; > style.css

    When I try I get error messages. For example:

    /frontend/style/misago$ lessc active-posters.less active-posters.css
    NameError: variable @screen-sm-max is undefined in /frontend/style/misago/active-posters.less on line 20, column 33:
    20   @media screen and (max-width: @screen-sm-max) {
    21     height: 42px; // even list item vertically
  • May 8, 2017, 2:48 p.m.

    lessc frontend/style/index.less misago.css is enough to generate CSS for frontend, and it works. But I don't know how you are doing it in a way that results in you using Misago admin's css file instead of front one.

    I know that Misago has one style.less and style.css pair, and thats the one used by admin control panel. Perhaps you've found wrong file originally, copied it over and is still working on it?

  • Members 14 posts
    May 8, 2017, 3:48 p.m.

    Hooray!!! Thank you very much!

    It was my mistake. I have been working on this two days. And I copied some extra css files in theme/static.
    I delete all except misago.css.
    And it is working now!

    Great!! Thanks again!