0

I'm developing a website in Drupal 6, and I've employed Dynamic Display Block for a slideshow that displays in a panel.

Unfortunately, even though the images show in the slideshow, they are not rendered in their full size as I described in the configuration page of the Dynamic Display Block settings.

I used firebug, and I realised that a class called ddblock-processed has been added which is the cause of the issue i'm facing, as it has different dimensions compared to the one I specified.

I've tried overriding that effect in the style sheet - css, but to no avail.

Someone should kindly help me hack this stuff under the hood.

Thank you.

0

ddblock-processed class is added to your div when the Javascript event is attached to it by Drupal. This is normal behavior, but it shouldn't be too hard to override the style with CSS.

To show you a simple example of CSS overrides (even though this is considered an inefficient selector, it doesn't matter too much in cases such as yours):

If on the original style, the CSS is declared as follows:

.ddblock-processed {
  width: 100px;
}

You can easily override it in your own stylesheet by including the "parent" element in the CSS selector. So if ddblock-processed div's parent is a div with an ID of myregion then doing this will override it:

div.ddblock-processed {
  width: 200px;
}

/* OR */

#myregion .ddblock-processed {
  width: 200px;
}

/* OR */

body .ddblock-processed {
  width: 200px;
}

/* OR */

div .ddblock-processed {
  width: 200px;
}

This is called CSS specificity if you want to read up about it.

  • '#ddblock-1.ddblock-contents .ddblock-content .ddblock-container img.ddblock-processed { height: 400px; overflow: hidden; width: 612px; }` – Nocks Mar 30 '12 at 9:46
  • That's a really long selector, but simply adding body at the very front of that selector should let you override this one you posted: body #ddblock-1.ddblock-contents .ddblock-content .ddblock-container img.ddblock-processed { height: 400px; overflow: hidden; width: 612px; }. It's ugly and it's not nice, but if you have modules that have CSS like that then you have to do things like this sometimes. – Beebee Mar 30 '12 at 9:56
  • still didn't work. you may want to visit the website link which is in its very basic stage. If you use firebug tool or any other, you would see that I've added css declaration, and yet nothing happens. I believe the Javascript overwrites or supersedes this declaration. Thank you. – Nocks Mar 30 '12 at 10:44
  • put !important after the width height like so: width: 612px!important;. I've just installed DDBlock and checked it out, if you go to the Block's Configure page, there's width and height settings there too. Have you tried modifying them? You can also use imagecache.module to display images in a certain size which is pretty cool. – Beebee Mar 30 '12 at 10:51
  • I've added the !important to the css declaration, and it didn't take any effect, unfortunately. All the same, I did modify the width and height in the settings of the DDBlock module and that should have done the work, since it's not my first time using it. – Nocks Mar 30 '12 at 11:15

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.