Hi I installed image_caption-6.x-2.x-dev.tar.gz and it is working, how do you give Caption different background colour or border?

Comments

stevenpatz’s picture

stevenpatz
he/him
commented
Title: It is working , thanks » Give Caption different background colour or border?

Clearer title.

davidwhthomas’s picture

davidwhthomas commented

You can style the caption with CSS.

For example, in your themes style.css file:

.image-caption{
  background-color: #eee;
  padding: 5px;
  font-size: 0.8em;
}

You can also style .image-caption-container{} though that's probably not needed.

hope that helps,

regards,

DT

droshani’s picture

droshani commented

I did that but it did not work, How does it work exactly, I have the code for the image from page source

Only local images are allowed.

I see only class="caption", does this mean that the class of .image-caption will be picked up by the .caption anyway?

Here is the testing site http://98.131.16.97/?q=node/11 I can see the caption text but not the formating .

davidwhthomas’s picture

davidwhthomas commented

Hi,

"I see only class="caption", does this mean that the class of .image-caption will be picked up by the .caption anyway?"

Yes.

The class "image-caption" is added to the new caption div created by the jQuery javascript.
This happens dynamically when you view the page.

I'd recommend installing Firebug from :

http://getfirebug.com

It will let you 'inspect' the html dom elements and see how the page fits together ;-)

For example, I can see on your linked page the classes image-caption and image-caption-container are correctly applied to the image.

DT

droshani’s picture

droshani commented

Ok, if it is applied how come the effect is not visible? I can see the caption is there and is working but no DIV property.

davidwhthomas’s picture

davidwhthomas commented

The div property is there for the caption as

class="image-caption"

You should be able to style that in your theme stylesheet.
Check you CSS syntax or try putting !important after a style declaration in case it's been overridden elsewhere.
i.e

.image-caption{
  background-color: #eee !important;
  padding: 5px !important;
  font-size: 0.8em !important;
  border:1px solid #aaa !important;
}

though that shouldn't really be necessary.

I suspect there's something wrong with how you're including the style in your CSS which is not really up to me.

DT

droshani’s picture

droshani commented

I did but it still does not work, my style.css look like

.box {
margin-bottom: 2.5em;
}

/**
* image caption ----------------------
*/

.caption {
}
.image-caption{
background-color: #eee !important;
padding: 5px !important;
font-size: 0.8em !important;
border:1px solid #aaa !important;
}
.image-caption-container {
background-color: #eee !important;
padding: 5px !important;
font-size: 0.8em !important;
border:1px solid #aaa !important;
}

/**
* Layout
*/
#header-region {
min-height: 1em;
background: #d2e6f3 url(images/bg-navigation.png) repeat-x 50% 100%;
}

But nothing comes up. I wonder whether it is compatible with tis version of Drupla 6.x style

davidwhthomas’s picture

davidwhthomas commented

Your CSS looks alright.

Perhaps you're putting it in the wrong style.css file?

I can't see that CSS in the stylesheets for page link you gave me.

It'll need to be in the one for your current theme.

Also, you probably don't need those styles for .image-caption-container, but it's up to you

DT

droshani’s picture

droshani commented

I use Garland 6 for Drupal 6.x and I have only one style.cc in the folder for this theme. I think the problem is something else since the Caption text is there but the formate is not correct. The Source View shows that the class="caption" is in img tag.

What can be the problem I do not know,

I realized that the layout will be messed up when the text is longer than the image width, why is that?

droshani’s picture

droshani commented

Hi, I have upgraded to 6.2 and now this caption is shown but the image is pushed out. How can I fix this please?

davidwhthomas’s picture

davidwhthomas commented
Version: » 6.x-2.2
Status: Active » Closed (fixed)

css styling such as margin and padding are at the discretion of the web designer.

droshani’s picture

droshani commented

well that is for Drupal designers to think of, mean while what can I do to fix this limitation?