Problem/Motivation

I use colorbox on the same site for different purposes.

The way that colorbox node module shows a node in an overlay has to be themed differently (the whole overlay, close button included) than the standard colorbox overlay.

Proposed resolution

Adding a special class to the overlay callback in the onComplete callback, like this :

colorbox_node.js l.107

            params.onComplete = function () {
                $this.colorboxNodeGroup();
                
                // hack for theming
                $('#colorbox').addClass('special-node-colorbox');
            }

Hope this helps someone.

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

iLLin’s picture

Status: Active » Closed (works as designed)

Why? You can target =#cBoxLoadedContent or w/e the id is. It loads all types of classes and ids for targeting use.

Nicolas Bouteille’s picture

Hi, sorry but I don't understand your answer and I am interested in doing the same thing.

Nicolas Bouteille’s picture

Status: Closed (works as designed) » Active
Nicolas Bouteille’s picture

Category: Feature request » Support request
iLLin’s picture

Status: Active » Closed (works as designed)

This is a CSS question and has nothing to do with this module. You may be better off looking in stackoverflow for a solution on how to target CSS classes and ID's.

Nicolas Bouteille’s picture

Status: Closed (works as designed) » Active

Sorry to insist, but I think you did not understand the question.
The problem is not to be able to theme the colorbox, or its button... we both know how to target elements in CSS.
But when you need to theme the same element (colorbox) in a different way according to the use case, you need a selector to differentiate them... like a custom class.
Right now, when I inspect the colorbox, there is no way to differentiate the colorbox according to my use case.
It would be nice to be able to add custom classes to the #colorbox element, using data-classes attribute for example... the same way we can use data-inner-width...

iLLin’s picture

Status: Active » Closed (works as designed)

I am unclear to what you mean by to "differentiate the colorbox". What does this even mean? Also, all this module is intended to do is show the page "content" inside a colorbox window. How you theme your site is up to you. Please keep this closed, we can continue this conversation with it closed and if I feel that your problem is truly a bug or feature request I will consider, I will re-open it. Until then, let me know more details about your issue or request.

Nicolas Bouteille’s picture

We want to apply a different design to the colorbox window according to what stuff we are displaying inside, so we need additional classes at the top #colorbox level to be able to identify which use case we're in. How is that unclear?

iLLin’s picture

How do you do it on the actual page? Are they different node-types? Are they views? What happens if on mobile? Do you only theme it differently when its opened in the colorbox, or do you theme it differently on the actual page? Are you trying to change how the complete colorbox window looks with different pages? Depending on these answers will depend on if I will include something like this. I see no reason currently.

Nicolas Bouteille’s picture

Title: Provide special class name for overlay » Provide custom classes to #colorbox and #cboxOverlay using data-classes attribute
Category: Support request » Feature request
Status: Closed (works as designed) » Active

Look man, the request is clear... being able to add custom classes to both the #colorbox and #cboxOverlay div by using an attribute such as data-classes="my-custom-class" so that one can theme the colorbox window, its overlay and all its components based on that specific class.

If your too dumb to understand that or too lazy to do it and all you care about is closing every issue you can, so be it. Someone else will do it one day.

iLLin’s picture

Status: Active » Closed (won't fix)

Don't be a jerk, I am trying to understand your request to see if it makes sense to be included or not.

I understand that you want to dynamically change the colorbox window display for different pieces of content for the actual colorbox container. I was hoping for more of a why you wanted to do that instead of this is what i want to do and that's that. I'm not going to add some feature just because you said so, it needs to make sense.

Here's my issues with this.

#1 Usability from a users perspective where a modal box changes on the same site is probably not the best experience. Why should I support bad practices?
#2 All this is turned off on Mobile devices, so what makes these modals so important that you want different experiences between the two. Again, why should I support bad practices.
#3 Who else is doing different model boxes throughout their site? You might as well add some animated gifs and use the blink tag.

Again.... I need to understand if this makes sense or not. If you're too lazy to explain to me why this is so important that it needs to be put into this module (but you're the only one doing it) then yeah, I will continue to close issues down that I feel don't fit with this module. I guess that's one of those perks of being the author and all....

Nicolas Bouteille’s picture

Wow, the colorbox is disabled on mobile, really? Why? I might need to switch to something else just because of that.

Alright... since you clearly lack imagination and obviously are not a designer let me give you an example why all colorbox windows should not necessarily look the same... I want to display the result of a job application in a Colorbox. But I want it to look like a piece of paper inside a folder... not just a white rectangular window... but I might need this regular white design for more basic stuff later on... so I only want to alter the design of that specific colorbox. So if I can add data-classes="job-application" to my link and then get the class="job-application" to be added to the generated #colorbox div, I will be able to do so. And because my folder is dark, I might want to change the overlay as well to something brighter, just for that use case...

I understand that you might need to second guess people before adding complex feature requests... but come on, this is a tiny add-on... letting people add a custom class... WOW! Should I let them do that!??
Sorry but you are being the jerk here pal.
Again, you might be the author, but this is a community... I never asked you to do this personally so if you think it's a bad idea just don't do it but stop closing this thread when clearly some people are asking for this...

Nicolas Bouteille’s picture

Status: Closed (won't fix) » Active

For those looking to achieve this, until a proper solution is added, here is my fix:

<?php
   var innerWidth = $this.data('inner-width');
   var innerHeight = $this.data('inner-height');
+ var customClasses = $this.data('classes');

   ...

   params.onComplete = function () {
      $this.colorboxNodeGroup();
+    $('#colorbox').addClass(customClasses);
+    $('#cboxOverlay').addClass(customClasses);
   }

?>

cheers

iLLin’s picture

Status: Active » Closed (won't fix)
Nicolas Bouteille’s picture

asshole...

Nicolas Bouteille’s picture

improved version of second part :

            params.onComplete = function () {
              $this.colorboxNodeGroup();
              $('#cboxOverlay').addClass(customClasses);
              $('#colorbox').addClass(customClasses);
              $('#colorbox').addClass('open');
              $('#colorbox').css("overflow", "visible");
            };
            params.onClosed = function () {
              $('#cboxOverlay').removeClass(customClasses);
              $('#colorbox').removeClass(customClasses);
              $('#colorbox').removeClass('open');
            };
fluxline’s picture

@nicolas:

right now i'm trying to solve my own issue with colorbox node and i've read a lot of posts, and i always thought to myself, this iLLin guy gives the best support i've seen in a long time for any module. then i read your post. damn dude, that was just plain abusive. he was only trying to understand and ask a few questions. if he decided it wasn't something he wanted to do with his module, that's his right. if you don't like it than write your own.

that's the worst thread response from a punter i've ever read on drupal.

Nicolas Bouteille’s picture

I'm glad iLLin has been helpful with you but when someone does not understand a problem yet very well explained from post #1 and closes the thread right away, I say he's not looking to help or understand but not to be bothered.

Then when he started to ask me questions I still think he was not trying to understand but to find any possible excuses to close this thread again.

I agree that in some cases it might be necessary from the maintainer to wonder wether a feature should be included or not, but when it's just a matter of adding a custom CSS class so that designers can theme the way they need to, there's no need to spend so much time arguing about it.

I am also sorry that you feel like it's HIS module... as I said, IMHO Drupal is a community. As soon as one releases a module to the community it is not his or her module anymore but the community's. I did not ask him to implement the feature, just not to close the thread. In lots of modules you can see new features coming from people who are not even co-maintainers.

iLLin’s picture

I like this approach as it adds a lot more options. Nicolas, if you provide a patch with these ideas in mind, I think its a better fit.
https://www.lullabot.com/blog/article/your-javascript-should-expose-apis...

Nicolas Bouteille’s picture

Just a quick reply to let you know I saw your post. No time to dive into this right now, a lot in my plate for my client... and I will also probably need to gain to skills before I can do it but would love to. So I've added this to my todo list and will give it a try as soon as I can.

kutulus’s picture

+1 for this Feature request.

dekisha’s picture

+1

LAguilar’s picture

+1 for this Feature request.

aram.gevorgyan’s picture

Also +1 for this Feature request.

aram.gevorgyan’s picture

Hi, from Comment #16, created patch file.

senzaesclusiva’s picture

aram.gevorgyan Sorry to reopen this thread.
From many time i'm trying to add this feature.
I often use colorbox node opening them especially by views.
Can this patch also be used in conjunction with the Views module?

Many thanks