Introducing Quests: Tailored gamification & bridging in-person events with your community Mike Gitkos Friday at 12:39 PM1 day
Posted April 24, 201312 yr 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.
April 24, 201312 yr Management 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.... }
April 24, 201312 yr Author 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 :)
April 24, 201312 yr Management It's a standard CSS 2 selector, it's supported by IE7+ and all other browsers.
April 25, 201312 yr 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
April 25, 201312 yr 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).
April 25, 201312 yr 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">
April 25, 201312 yr Author 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 ;) Edited April 25, 201312 yr by TSP
Archived
This topic is now archived and is closed to further replies.