is it possible to add a 'sub class' to an ID?

  • i am using the lightbox plus plugin to open content in a lightbox with the code:

    <a class="lbpModal" href="link.html">link text</a>

    the styling of the lightbox that is opened is controlled by the plugin which outputs the following in the head:

    <link rel='stylesheet' id='lightboxStyle-css' href='https://www.site-name.com/wp-content/lbp-css/elegant/colorbox.css?ver=2.0.2' type='text/css' media='screen' />

    there is no way to change this reference to the stylesheet as it is generated by the plugin.

    this head reference directs to wp-content/lbp-css/elegant/colorbox.css

    and in this file there are ID’s defined such as:

    #cboxLoadedContent{margin-bottom:28px;}
#cboxTitle{position:absolute; bottom:3px; left:0; text-align:center; width:100%; color:#949494;}
#cboxCurrent{position:absolute; bottom:3px; left:58px; color:#949494;}

    what i am trying to do is make one link launch a lightbox that has a slightly different style to another lightbox.

    so my question is – is there a way to add a ‘sub class’ to a link and then reference it in the style sheet with something like:

    <a class="lbpModal subClass" href="link.html">link text</a>

    whilst the css would contain:

    #cboxLoadedContent{margin-bottom:28px;}
#cboxLoadedContent .subClass{margin-bottom:0px;}

    any information would be much appreciated.

    thank you.

Viewing 3 replies - 1 through 3 (of 3 total)

  • Your issue isn’t really editing or changing the stylesheet location, your issue is you want to change the output of the link that the plugin generates (stylesheets aren’t what adds the classes to the list items – stylesheets just tell the site how to make it look). You don’t say *how* you want this class to be determined. You can edit the plugin yourself (or better yet, contact the plugin author and see if he can help you with it) to have the ability to add a new class to the link in question, which probably won’t be easy – REALLY not easy if you don’t know how to code PHP.

    Alternatively, you could write a function that looks for the link title/name you want and adds the class to it, but again, this requires some PHP knowledge. And if you ever want to do it to another link, then you’ll have to edit the code to make it work.

    The only other option would be to add the link manually, either before or after what the plugin generates, with the class you want.

    Thread Starter rw1

    (@rw1)

    Thanks for your considered reply. The basic issue is a rather large one (ie adjusting how the plugin outputs the stylesheet reference) and this post was really to see if i could somehow get around that with some css for a temporary solution. I’ve posted a longer description of the how the plugin works here with the aim of trying to find a way to style a secondary lightbox. Thanks again for your input.

    adjusting how the plugin outputs the stylesheet reference

    but that wouldn’t solve your issue. You’re wanting to add a class directly to your link output. That really has nothing to do with the stylesheet. (You can add your own style to your theme stylesheet to cover the new class addition – that’s not a big deal. There’s no need to code the plugin to pull in or edit the plugin’s styles.) But the class won’t apply unless it has something to apply *to* – which is why I was saying you’d have to edit the actual plugin (or whatever) to get that new class added in, and new code to determine *how* the class is added in, since you don’t want it on everything. The stylesheet on it’s own will do nothing. You have to edit the plugin functionality to add that class to the link itself for the style to apply.

    If the lightbox is pulled in via shortcode, you could write our own function to combine with the plugin’s function that would allow you to add your extra class without editing the plugin’s core – but again, that requires some PHP knowledge.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘is it possible to add a 'sub class' to an ID?’ is closed to new replies.