• 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.

  • Project Lead 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.

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

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

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

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

  • 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.

  • Project Lead 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. ;)

  • 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`

  • Project Lead 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.

  • 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?

  • Project Lead 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.

  • 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/ .

  • Project Lead 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.

    Thanks!