Apply CSS to just event pages

markderry

I am not sure if this is possible but I would like to apply some css to the Event Pages on my site. After some research I have been able to make some tweaks successfully to elements that are specific to the event pages.

There are a couple of elements that are not specific to event pages that I would like to move or edit but when I try it affects other pages that I don't want to make changes on. I would like to implement something like the code below, this is currently not supported by most browsers.

/* Remove "Event Galleries" This may work some day */
@document url_prefix("https://www.markderry.com/event/") {
    .sm-page-widget .sm-page-widget-header {
        visibility: hidden;
        position: relative;
    }
}

Is there some other way to selectively apply the css to event pages?

Hikin' Mike

I've never used events, but when I clicked on that link, it didn't work.

Jtring

The body statement in the HTML for each page has a class of the form sm-page-node-xyzabc, where the xyzabc is a unique identifier for that page. All decedents of that page have an sm-page-node-parent-xyzabc class in their body statement. You can use that to get the effect you want.

I can't get to your events folder to provide an example, but let me use your Landscape gallery (http://www.markderry.com/Portfolio/Landscape). When I use the developer tools in Firefox (Chrome has something similar), I see that the body statement in the Landscape folder includes the class sm-page-node-ggPtx. The following will turn the title red in folders and galleries underneath Landscape that don't use a cover image. (When the cover image is turned on, the identifier below needs more specificity to take precedence over the equivalent SmugMug CSS.) You can work something similar with your events and widgets.

.sm-page-parentnode-ggPtx h1.sm-gallery-cover-title {
    color:red
}

Although he's not yet weighed in yet, the parentnode classes are here thanks to some campaigning Allen did shortly after the new Smugmug came out. He should stop by and take a bow.

markderry

Jim, I think this might work! I will give it a try!

markderry

So I am not sure that the parentnode classes for events are available, when I search the html on the page I don't find anything like a parentnode. Maybe @leftquark can confirm?

Here is an example event page if anyone has any insight I would appreciate it.
http://www.markderry.com/event/TESTEVENT/kvrzMN

Hikin' Mike

@markderry said:
So I am not sure that the parentnode classes for events are available, when I search the html on the page I don't find anything like a parentnode. Maybe @leftquark can confirm?

Here is an example event page if anyone has any insight I would appreciate it.
http://www.markderry.com/event/TESTEVENT/kvrzMN

I was going to suggest the same thing Jim mentioned, use the parent node, but I'm not seeing one either.

Allen

Perhaps event pages are created somewhat like the old sharegroups were, magic without parent.
Notice it also had no "node" identifier.

Jtring

Ouch. I think you are right, Allen. The CSS for the event page has no hooks to anything in the rest of the site and nothing much to distinguish it as a special page, just like the old sharegroup pages.

Short of putting a little snippet of CSS on each event page (and separately for any descendants, if needed), I'm out of ideas. That approach produces code that's a pain to insert and maintain.

Allen

Remember for the old sharegroups I inserted CSS in with the html in the description. But I think it required script in the html and that's been forbidden.

markderry

Thank you @Allen , @Jtring and @Hikin' Mike !

As far as I can tell I cannot put any css on the event pages. When logged in I cannot edit the event pages at all.

It looks like for now I am out of luck and will just need to wait on smugmug to modernize the event pages.