Overriding default theming

The above CSS won't work for every theme. It depends on what rules are being overridden/inherited by the chosen Drupal theme. Skeleton, for example, has a lot of button theming that is not addressed by the above.

Also, Cookie Control has both dark and light themes, left and right positioning, which both need to be accounted for.

(Background info for other readers: This problem is happening because the style rules output by the module (from the cookieControl-4.1.min.js file) take lower precedence to style rules in Drupal themes.)

Could this be solved by adding !important to all the rules in cookieControl-4.1.min.js? If so, would the module maintainer be willing to do this? I have contacted CivicUK to ask them to do it as it is probably best done by them and I suppose, if it's a good idea, they would have no objection to it but it would depend on the module using the latest javascript code, unless they update older versions also.

In the meantime, on a personal note, I am finding it a real pain to get the pop-up to be styled correctly in all browsers. I have it looking just right in Firefox and Chrome but, as usual, IE7 is looking a mess. I am not a CSS guru so it's taking a while.

I am hoping there is an easier way out of this problem.

You're probably right about float positioning.

I am trying to keep the original colours.

I heard back from CivicUK who say they have updated their CSS selectors to improve specificity to fix this issue on Wordpress and other sites, so it would good to see what they have done and update the Drupal module.

Adding !important is probably not such a good idea as it will make it harder to override the theme as you have done.

I have found it useful to extract the CSS from the js file for easier reference. I have attached the file for others to use if they want (I can't guarantee I haven't introduced any errors, though, but I think it's accurate).

Now that I have fixed my styling issues in IE7, I am inclined to say the problem was caused more by my chosen parent theme than this module. Hence, I am not sure there is a module-based solution to this as I had hoped.

Any Drupal theme that aims for consistent styling will probably have some general style rules (like Skeleton has with buttons) and, by nature of how Drupal and CSS work, these may affect a module's theme. The only way to get around this is by overriding the styles you don't want in the local.css or subtheme, targeting specifically the module's elements.

In most cases this is probably not hard; in my case the Skeleton theme, which is a very nice looking theme, had a lot of general styles that were quite complex (at least I found them so).

Anyway, the solution is probably just to get good enough at CSS to do it!

Hence, I wouldn't object if this ticket were marked as "works as designed", unless anyone more knowledgeable than me has any better ideas. :-)

kingfisher64, the answer to your question is in my previous posts (i.e. Skeleton theme overriding the module theme) and I've now resolved it. I just had to get to grips with some rules of inheritance I either didn't fully understand or missed some pertinent rules in the Skeleton theme (which is quite complex by my standards). Then, although I did fix it quite quickly in Firefox and Chrome, something completely different was being output in IE7 (sometimes nothing at all!). So 95% of the problem was due to how IE7 handles (or doesn't handle) CSS.

I suspect overriding the module theme is much easier when creating your own Drupal theme or using a starter theme, rather than subtheming an existing Drupal theme.

Anyway, is there a reason why you changed the issue title back to a rather vague one (IMHO)? I don't think that title helps people know what this issue is about. "Drupal theming" could apply to any number of things and this is specifically about theming the module rather than Drupal. Could you possibly change it to something else more descriptive then if you think my edit was inaccurate (though I think I summed it up quite well). Thanks. :-)

there is a template file in the module and you can override the default markup in your theme if you wish.
Or am i missing some other requirement here?

Can we have the css not be added by JS? It would be nicer if there was a separate css file that is just overridden in the theme layer like normal.

My custom css isn't getting picked up because of the inline css is taking precedent

Thanks

I agree with paulsheldrake, I think it's a terrible idea to implement styling through this minified JS file... It's a complete nightmare to make this module dance to your wishes. I'm having a lot of closed-source feelings when browsing through this JS file...

I'll be searching for another module to fix my problems, until this gets resolved.

If you are overriding inline css you have to use the !important argument in the css. However I don't think that will keep the js from overriding it.

The minified JS is outside of the scope of this module. It's provided by another developer.