On most of my installs the images on node view are left aligned and not centered. Something seems to "block" the inheritance of the text-align: center attribute. I did not mess with the view or the css. I doubt it is a theme issue because it appears with Garland and Aquia Marina. That said I have one install were the images are nicely centered in said themes.

Ideas?

Comments

justintime’s picture

justintime commented

Did you change the name of your CCK field from the default (node_gallery_image)? The CSS is hardcoded to that cck field name.

dddave’s picture

dddave commented

Nope, the name seems to be correct.

If I view the source I see that the image in wrapped into 

<div class="field field-node-gallery-image">

whereas on the functioning install it is inside of 

<div class="field field-type-filefield field-field-node-gallery-image">
    <div class="field-items">
            <div class="field-item odd">

For the life of me I have no idea what could be the difference here. I even activated display suite on the working install to see if some of its magic interferes but to no avail. Of course I am not using DS for NG_Image anyways but who knows.

dddave’s picture

dddave commented
Status: Active » Postponed (maintainer needs more info)

Ok, its nd_cck. I'll do some more digging.

scroogie’s picture

scroogie commented

I guess we need to find a better way to always center the image. Any ideas?

nasi’s picture

nasi commented

margin: 0 auto; should do the trick.

scroogie’s picture

scroogie commented

No, I probably expressed that awkwardly. Not the "centering" is the problem, but the CSS selection of the right images. It should work if and only if the content type is an image type in a node gallery relationship.

nasi’s picture

nasi commented

Ahh, that makes sense. Sorry for the misunderstanding.

dddave’s picture

dddave commented

@scroogie

Are you sure this is a NG problem and not a problem with nd_cck? I opened #1040090: nd_cck interferes with Node Gallery because I don't understand how nd_cck can cause this when it is specifically set to not be in use with any NG content types.

scroogie’s picture

scroogie commented

No, I'm not sure. I just thought we could find a different way to center the image, that is more tolerant to changes.

dddave’s picture

dddave commented

Just for the record: putting 

.field-node-gallery-image {
text-align: center;
}

in my theme's local.css file solved the issue.

Adding tag.

scroogie’s picture

scroogie commented
Issue tags: +Needs documentation

On which theme that is dddave?

dddave’s picture

dddave commented

Aquia Marina

dddave’s picture

dddave commented
Status: Postponed (maintainer needs more info) » Closed (works as designed)
katiekatie’s picture

katiekatie commented

@dddave I would like to try your fix but couldn't locate a local.css file. Could you please give me a little more info such as the path to the local.css file.
Thanks :-)

dddave’s picture

dddave commented

You have to look into your theme which you are using. The theme I was using at that time was Aquia Marina and they supported usage of a local.css for easy customization. Not every theme supports that out-of-the-box. For example all themes using AdaptiveTheme support css fiddling via the normal "appearance" settings (D7).
If your theme hasn't a dedicated css file for such purposes you can simply add this customization to your general css file (mostly called style.css). But be aware that upon upgrading your theme to a newer version you are going to loose these changes.
I guess there is a section in the docs describing the various ways of changing css permanently, i.e. without the need to reapply them each and every upgrade.

katiekatie’s picture

katiekatie commented

@dddave Thank you for your help, this is exactly the solution I was after and I have nicely centered images now :-)

For anyone else interested:
I checked the page source then put this in the [yoursite]/themes/bartik/css/style.css file (also wanted text under image centered)
.views-field-field-photo {
text-align: center;
}
.views-field-title {
text-align: center;
}

Then I cleared the cache and the images and text were all nicely centered.