I'm trying to use CSS Injector to add some style to some images in a gallery.

Here is the code I've used in my CSS Injector rule:

img, a img { border:2; padding-right:5px;}

Here is the code in my style.css from my theme:

img, a img { border:0;}

And I have it set to run only on the following page for now: content/test

The style is not being applied as desired. Any thoughts? Thanks.

Comments

eojthebrave’s picture

Is the CSS showing up on your page when you view source? Or inspect it with something like Firebug? If not it sounds like an issue with CSS injector and you might consider filing a bug report in the modules issue queue with specific instructions on how someone else could replicate the problem.

If it is you could try making your selectors more specific. (e.g. body img, body img a) than the ones in style.css to make sure they are getting applied.

i25’s picture

I've done some google'ing and as a result I've added the following to my CSS Injector code:

img, a img {border:0 none; padding-right:5px !important;}

It is still not working even though I added the !important tag.

You can see the page here: www.mwebdev.com/at.

Any help would be appreciated. Thanks.

i25’s picture

Any thoughts guys? I'm stumped on this one. Thanks.

eojthebrave’s picture

It doesn't look like your CSS is getting added to the page. At least the one you linked above doesn't have any style sheets attached by css_injector that I can find.

Are the CSS files getting created in your sites/default/files folder. I think they have names like css_injector_1.css, css_injector_2.css and so on.

Do you have any relevant errors in your watchdog table?

i25’s picture

Yes,
I do have a css_injector_3.css file in my files folder, which corresponds to the rule I created in CSS Injector.

What is the watchdog table? I haven't been able to find any such thing in my admin area. Is this a standard table?

Thanks.

vm’s picture

watchdog table = go to administer -> reports

it is there you have access to reports from the drupal system ie: errors, log entires and the like.

i25’s picture

I have the following options under Admin > Reports:

Recent log entries
Top "access denied" errors
Top "Page not found" errors
Top search phrases
SWF Tools status
Available Updates
Status report

I have not been able to find an error log within these items. I can filter the log entries, but there is not error log filter. What am I missing?

vm’s picture

click on recent log entires which shows all reporting to the log.

i25’s picture

Thank you.

So I just visited the gallery in question then visited the log immediately after. Here are the entries I see:

page not found 2009-06-05 16:59 themes/custom_98/images/bg-tab2.gif
page not found 2009-06-05 16:59 themes/custom_98/images/a1.gif
page not found 2009-06-05 16:59 themes/custom_98/images/a2.gif
page not found 2009-06-05 16:59 themes/custom_98/images/a1.gif

These don't seem to have anything to do with the CSS Injector issues, so I would say that no, there are no relevant errors pertaining to this problem.

vm’s picture

Sorry, I can't help any further as I prefer to add css to the style.css based on information gathered from firefox. I've toyed with the module in question but didn't feel it necessary to use.

i25’s picture

Maybe I need to explore your approach. If I add a different set of img tags to my style.css, how would I assign gallery images to this style? That's what I've been banging my head on.

vm’s picture

depends on how your galleries are built and what classes are assigned.

I tend to use custom tpl.php files create my divs and add classes or IDs to target them and play new declarations until I find something suitable. However, without knowing exactly how your galleries are built I can't give specifics.

img is targeting img tags thus chaning img in style css will override all img tags I believe. That said you will need to be more specific with what you are targeting. I'd likely consider gallery divs, but again its largely depends on the method you are using to build these galleries.

i25’s picture

I'm using imagefield, views, cck, node_reference, and views attach (http://blip.tv/file/2185326). I have changed the img tags, but like you said, it affects ALL images, which is not what I want. I need to learn more about customtpl.php files.

Jeff Burnz’s picture

The CSS is invalid. You must declare a unit with the value AND a border style and preferably a color also:

Invalid:
img, a img {border:2; padding-right:5px;}

Valid:
img, a img {border: 2px solid #000; padding-right:5px;}

To put a border and some padding on your Views gallery images try this on for size in your style sheet:
.view-gallery-photos img {border: 1px solid #000; margin-right:10px;}

You just need to learn how to find and identify the selectors in the markup (view source or use Firebug), Views generates many selectors you can use to target each view and view element.

Heres some details about border...
http://www.w3schools.com/css/css_border.asp

i25’s picture

The adjusted css didn't work when placed in CSS Injector, but the code added to style.css worked fine. Something must not be working correctly with CSS Injector.

Jeff Burnz’s picture

i25’s picture

So to confirm, all custom views can be styled using this method? If so, I agree with you... what was the purpose of this module? Thanks.

vm’s picture

everything can be styled the same way not just views.

based on the video you are using to create the galleries Eaton makes his reasoning for the module known and expresses a sentiment that the module isn't for "everyone".