Apply CSS to just event pages

markderrymarkderry Big grinsPosts: 67Registered Users 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
www.markderry.com

Comments

  • Hikin' MikeHikin' Mike Walkin' like a Penguin! Atwater, CaPosts: 3,616Registered Users Major grins

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

  • JtringJtring Major grins CaliforniaPosts: 387Registered Users 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 Big grins Posts: 67Registered Users Big grins

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

    ______________________________
    Mark Derry
    www.markderry.com
  • markderrymarkderry Big grins Posts: 67Registered Users 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
    www.markderry.com
  • Hikin' MikeHikin' Mike Walkin' like a Penguin! Atwater, CaPosts: 3,616Registered Users 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 "tweak 'til it squeaks" St. Louis, MoPosts: 9,261Registered Users 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 | My Blog
  • JtringJtring Major grins CaliforniaPosts: 387Registered Users 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 "tweak 'til it squeaks" St. Louis, MoPosts: 9,261Registered Users 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 | My Blog
  • markderrymarkderry Big grins Posts: 67Registered Users 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
    www.markderry.com
Sign In or Register to comment.