Route class on body


(Casper Overgaard) #1

My team and I are currently working on implementing a custom styled discourse solution at http://beta.danskdynamit.com/. To that extend, it would be really useful to have descriptive/route classes on the body tag (also, as described here Descriptive classes in body). It would be awesome in terms of per page/state specific styling. Is it something thats possible?

E.g. front page
<body class="route-index">

E.g. user
<body class="route-user">

E.g. topic
<body class="route-topic">


(Robin Ward) #2

I’m not sure I want the route name to be tightly coupled to the CSS in that way. What if we want to change it?

Instead almost all views / elements have classes and ids that are reachable by CSS. Is there something you’re trying to style but can’t currently?


(Rafael dos Santos Silva) #3

Not OP but bear with me:

I want to add a cool background to the related posts pane. My designer made a full width image, and I’ve put the image in a new div created on the </body>, so it’s a children of the body. Just some negative top margin on this div and we are done.

However I don’t want it on other panes, like latest or category list. If the body has a route type class this is easier to archieve right?


(Mittineague) #4

Does not the “related posts pane” (I’m not sure exactly what you’re referring to) have adequate selectors that would allow you to do something like

.r-p-pane {
  background-image: url(.....);
}

(Philip Battin) #5

One of the things we would like to do is to style the header differently depending on where you are. E.g. a larger header for the front-page and a slim header for sub pages like profile or topic view


#6

In general styling based on body/route classes isn’t a great idea. It doesn’t inspire modular styling and what happens if a route is renamed… That being said, sometimes you still need it.

Would it be possible to expose it behind a feature-flag or something? This way developers would have to acknowledge the risk but still have much more flexibility for styling.


(Rafael dos Santos Silva) #7

The related posts is inside the main container so the background wouldn’t be full wide without a lot of CSS Calc.

Yes possible, but not easy for the marjority.


(Mittineague) #8

Sorry, but I still don’t know what / where you’re referring to.

Got a screen capture?

Though neither may be ideal depending on an images aspect ratio, both contain and cover have wide browser support.

No CSS Calc needed.


(Rafael dos Santos Silva) #9

Something like this:

I want the background of the Suggested Topics to be full width.


(Mittineague) #10

I’m not saying CSS is easy for the majority.
But unless it’s impossible to come up with adequate selectors I really don’t see the need for Discourse to add “easier” selectors.

div#suggested-topics {
  background-image: url(http://localhost/uploads/default/original/1X/7fe5a1cdc2db6af73eaf6aa3bd1208d3ff8cb542.jpg);
  background-size: cover;
}


(Simon Cossar) #11

I’ve been using this (added to the head section) to get the homepage. For me that’s ‘discovery-latest’. It’s also adding a bunch of classes that are not getting used, so it could be improved.

<script>
Ember.Route.reopen({
  activate: function() {
    this._super();
    var cssClass = this.toCssClass();
    // don't add 'application' class
    if (cssClass != 'application') {
    Ember.$('body').addClass(cssClass);
    }
  },
  deactivate: function() {
    this._super();
    Ember.$('body').removeClass(this.toCssClass());
  },
  toCssClass: function() {
    return this.routeName.replace(/\./g, '-').dasherize();
  }
});
</script>

(Rafael dos Santos Silva) #12

Now make this background image go to the borders of the page (not be contained to the suggested topics width) :slight_smile:.


(Simon Cossar) #13

This is a bit of a hack to break out of the wrap div. It works well with background colors, but with an image the image won’t scale. You could use media queries to adjust the size of the padding and margin for different screen sizes.

body {
    overflow-x: hidden;
}

suggested-topics {
    background-image: url(https://pixabay.com/static/uploads/photo/2015/09/03/21/05/water-921311_960_720.jpg);
    background-size: cover;
    padding-left: 400px;
    margin-left: -400px;
    padding-right: 400px;
    margin-right: -400px;
}


(Mittineague) #14

CSS


div#suggested-topics {
  background-image: url(http://localhost/uploads/default/original/1X/7fe5a1cdc2db6af73eaf6aa3bd1208d3ff8cb542.jpg);
  background-size: cover;
  position: absolute;
  left: 0px;
  min-width: 100%;
}

But I don’t think meta.discourse is the place for teaching CSS skills.
So I’ll take the opportunity to shill for SitePoint
HTML & CSS


(Mittineague) #15

Short of that the DOM would need to be over-ridden by a custom template or some JavaScript would need to be used.

In any case, adding another class value to a tag isn’t going to help any.


(Rafael dos Santos Silva) #16

Sorry, my english isn’t that great.

I don’t need help to make this full width, the CSS solution is “simple”:

// those constants work for widths > 1125px, media-query needed
#suggested-topics {
    background: rgba(33, 150, 243, 0.2); // color
    margin: 50px calc((100vw - 1125px)/-2) 0px;
    padding: 50px calc((100vw - 1125px)/2);
}

I was just advocating for making things easier to CSS newbies.