By matthew gibbon on

I am struggling to find where to put the css for fields rendered by DS

I have the following classes according to Firebug that i want to add some css to.

.field field-service-links-displays-group
{
border: 2px black;
padding: 2px;
}
.field field-links
{
border: 2px black;
padding: 2px;
}
.service-links
{
border: 2px black;
padding: 2px;
}

I have placed this in my themes style.css ..... no change
I placed it in DS folder for css.... no joy
also in ND folder css ..... no joy

Can anyone please help.

Thanks

⋅ Categories: Drupal 6.x

Comments

ayesh’s picture

ayesh commented

If you use Panels(instead of that easy DS) module, you can add custom (div and inline) CSS stuff to each pane, field, etc.
Sorry, I don't have a practical solution.

What's new and changing in PHP 8.4

matthew gibbon’s picture

matthew gibbon
Primary language English
Location South Africa KZN
commented

I like panels, quite nice and easy excepts, its not what I call "self generating" e.g this is how I want all node types of this sort to look. for a non coder like me DS is so cool.

Thanks for the input

PawelR’s picture

PawelR commented

Hi, you shouldn't modify any module files, your modification will be lost during module update.
The css file of your theme should have the last word and override all module css files.
Have you tried to clear Drupal caches and your browser cache?

RKS’s picture

RKS commented

It looks like all of those things you want to add CSS to are links. You need to add a after all of them.

.field field-service-links-displays-group a {
border: 2px black;
padding: 2px;
}
.field field-links a {
border: 2px black;
padding: 2px;
}
.service-links a {
border: 2px black;
padding: 2px;
}

matthew gibbon’s picture

matthew gibbon
Primary language English
Location South Africa KZN
commented

Still no joy... tried adding the a for rthe links.

I have turned off css compression in performance and cleared the cache after modifying style.css .

Just to give you an idea of what im am working on

http://www.saclimbing.co.za/Community/content/kloof-gorge

is a page rendered through DS layout for that node type. You can see the service links an comment fields section is laid out pretty crap, and I really am finding it impossible to solve this.

PawelR’s picture

PawelR commented

I believe that you want to change the styling of

tags: 
<div class="field field-service-links-displays-group">
<div class="service-links">
<iframe frameborder="0" scrolling="no" allowtransparency="true" style="border: medium none; overflow: hidden; height: 21px; width: 44px;" src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.saclimbing.co.za%2FCommunity%2Fcontent%2Fkloof-gorge&layout=button_count&show_faces=true&action=like&colorscheme=light&width=100&height=21&font=">
...
the problem is that these tags have inline styling which overrides all css style sheets. Would be the best if you can find the place in the code where these tags are rendered (theme function or tpl.php file) and remove this inline styling, then your css setting will work. Alternatively you can use javascript to clear or amend inline styling.
RKS’s picture

RKS commented

I looked in the source as well and there wasn't a lot of inline styles that would prevent him from doing everything. You're right, the widths and heights are all going to be locked in.

What I'm wondering is why you're using something that is overriding the normal Drupal behavior for handling $links? It's obviously doing a poor job of handling whatever it is supposed to be doing and making your life hell right now. Drupal core is hard enough to style the links inline ul and this module isn't making things easier and seem to be making them harder.

If you can't disable your module and use core to handle what you want, I'd suggest fixing your layout on everything else and see if that helps set it somewhat where you want it. I could see a lot of things off so I'm sure you're not done with everything else.

[EDIT] BTW I was only assuming before when I said add the a. After looking at your source I can see that I was wrong and you should remember to take the a out when you go back and try to work on it some more.

matthew gibbon’s picture

matthew gibbon
Primary language English
Location South Africa KZN
commented

Ya still working on it, here is what I have figured out

Yes a doesnt help..... In lamens terms, DS (Display Suite) useing layouts requires for you to specify which classes you want to use for editing( Which I think defeats the point... you just restyling everything).

The way to do this is in DS layouts choose styles and add the class you want to pertain to selected fields. Then when creating your layout you are given the option of acclocation a class of choice to whichever field you want, though it seems limited in what it will and will not style e.g borders for service links. I am not sure if it is the core, module(service links), or DS which is reconfiguring the css.

New problem is, I assume, DS will not allocate a class with a space in the name.

Any takers for help on this one.

RKS’s picture

RKS commented

Since when has CSS allowed a space in the name anyway? <element class="class class2"> is two classes on the same element.

matthew gibbon’s picture

matthew gibbon
Primary language English
Location South Africa KZN
commented

This is the class I am trying to customize.

so in style.css i create

.field field-links

Any help

RKS’s picture

RKS commented

.field .field-links {
style: style;
}

matthew gibbon’s picture

matthew gibbon
Primary language English
Location South Africa KZN
commented

For some reason I just cant seem to get it to cooperate with any of the css I add. DS seems to strip it all.

matthew gibbon’s picture

matthew gibbon
Primary language English
Location South Africa KZN
commented

Do I just delete the class tag?