Apply CSS to just event pages

markderrymarkderry Registered Users Posts: 68 Big grins

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?

______________________________
Mark Derry
markderry.smugmug.com

Comments

  • Hikin' MikeHikin' Mike Registered Users Posts: 5,448 Major grins
  • JtringJtring Registered Users Posts: 673 Major grins

    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.

    Jim Ringland . . . . . jtringl.smugmug.com
  • markderrymarkderry Registered Users Posts: 68 Big grins

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

    ______________________________
    Mark Derry
    markderry.smugmug.com
  • markderrymarkderry Registered Users Posts: 68 Big grins

    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

    ______________________________
    Mark Derry
    markderry.smugmug.com
  • Hikin' MikeHikin' Mike Registered Users Posts: 5,448 Major grins

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

  • AllenAllen Registered Users Posts: 10,007 Major grins
    edited January 14, 2018

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

    Al - Just a volunteer here having fun
    My Website index | My Blog
  • JtringJtring Registered Users Posts: 673 Major grins

    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.

    Jim Ringland . . . . . jtringl.smugmug.com
  • AllenAllen Registered Users Posts: 10,007 Major grins

    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.

    Al - Just a volunteer here having fun
    My Website index | My Blog
  • markderrymarkderry Registered Users Posts: 68 Big grins

    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.

    ______________________________
    Mark Derry
    markderry.smugmug.com
Sign In or Register to comment.