TSP Posted April 24, 2013 Share Posted April 24, 2013 Hi, I had a case where in my template I wanted to have less padding on the maintitle-class in topics. The "issue" was that there was not any parent class that was unique for the page. So I would have to add my own class to the element that used maintitle on the page instead. Which got me thinking, what if you added a class to the body-element to indicate what kind of content there was on the page? Classes could be named something like — topic-view — forum-view — index-view — search-view — profile-view And it would look like this in the body-tag: <body class='ipboard_body topic-view'> And could then be used to create a new style rule that would override the default one. .topic-view .maintitle {padding:3px 10px;} I wouldn't expect IPS to use these classes themselves in their CSS, but it could help other designers achieve what they want in some cases. For my problem however, I eventually realized that for the topic view the maintitle class was used on a div element, while on other pages it was used on a h3 element, so I ended up doing this: div.maintitle {padding:3px 10px;} Which didn't seem to "break" the style for the .maintitle class any other places. Link to comment Share on other sites More sharing options...
Management Matt Posted April 24, 2013 Management Share Posted April 24, 2013 Interesting. Might be able to use something like <body data-location="app_module_section"> This way you can use: body[data-location^=forums_topics] h1 { padding.... } Link to comment Share on other sites More sharing options...
TSP Posted April 24, 2013 Author Share Posted April 24, 2013 Interesting. Might be able to use something like <body data-location="app_module_section"> This way you can use: body[data-location^=forums_topics] h1 { padding.... } How cross browser compatible would it be? Can't say I've seen it utilized in CSS before. But I have no doubt there are other ways this could be improved aswell :) Link to comment Share on other sites More sharing options...
Management Matt Posted April 24, 2013 Management Share Posted April 24, 2013 It's a standard CSS 2 selector, it's supported by IE7+ and all other browsers. Link to comment Share on other sites More sharing options...
GreenLinks Posted April 25, 2013 Share Posted April 25, 2013 Interesting. Might be able to use something like <body data-location="app_module_section"> This way you can use: body[data-location^=forums_topics] h1 { padding.... } Not a bad suggestion but additional content identifiers as the OP suggested can allow way more customised styles. It maybe wise to add them to 4 Link to comment Share on other sites More sharing options...
bfarber Posted April 25, 2013 Share Posted April 25, 2013 Not a bad suggestion but additional content identifiers as the OP suggested can allow way more customised styles. What do you mean exactly? Matt was talking about the same thing as the OP, just a different approach. Or do you mean specifying custom identifiers to automatically append, beyond app/module/section (if so, I already brought that up as I agree, since IP.Content can allow you to create so many unique areas all under the same general structure). Link to comment Share on other sites More sharing options...
Ryan H. Posted April 25, 2013 Share Posted April 25, 2013 Why not dump all three in the body class? That would provide an incredible amount of flexibility in CSS targeting. <body class="app module section etc"> Link to comment Share on other sites More sharing options...
TSP Posted April 25, 2013 Author Share Posted April 25, 2013 Why not dump all three in the body class? That would provide an incredible amount of flexibility in CSS targeting. <body class="app module section etc"> You might want to name the classes something like app-forums module-topics then. As forums and topics would be a bit too general as class names imo as it's likely used another place on the page. You could of course then use body.forums, but either way you should be more specific in class-names for body. I'm not sure I really care about what approach IPS choose to go from, but I believe regular css class names would be more intuitive for everyone to know how to take advantage of. Then again, can't make people learn something new if noone makes use of it ;) Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.