Two questions that I guess are both a part of one bigger idea. When creating a content type, I've been trying to figure out how to both indent a field and create a line break after a field both by default. For indenting I have tried adding spaces before the field name, but because it's empty space they are disregarded and displayed as normal. For the line break, I've tried adding a custom code field with br or p, and simply adding a blank field, but in both situations as there is no text to display, the field is not displayed at all. Any suggestions?
I'm assuming that the solution lies in using CSS and the Styles section of Display Suite, but unfortunately I am completely new to CSS. So, in the event that the solution requires it, a little extra explanation of how to apply it would be greatly appreciated. Thanks in advance for any help on the matter!
Comments
Re-Problem with formatting fields
You need to explicitly define css for cck fields (see this http://drupal.org/node/153465) and use these two css property .
1- For indentation use css property MARGIN and PADDING
2- For line break use css property DISPLAY:BLOCK
Thanks
Not Working... :(
Thanks, but which style.css am I supposed to add this to? I'm guessing that it's the style.css within the theme that is currently being used, right? Because when I edit that style sheet, the changes don't seem to take effect. Let's say the name of the field is field_lighting. My code looks like this:
.field-field-lighting {margin-left:20px;
}
That should be correct, right? It doesn't seem to work with the text color change example used in the provided link either.
-
-
When I did it, I did like you
When I did it, I did like you and edited the style sheet, but the class had to be listed under an element. And then you put both the element and the class into Display Suite.
example: lighting.field-field
example:
lighting.field-field-lighting {
margin-left:20px;
}
and the element is lighting and the class is field-field-lighting.
You might make sure that the element is unique though so it doesn't mess up code somewhere else.
Also, you should definitely try out CSS Injector for Drupal. I didn't know CSS very well either, and it made my life soo much easier. Also you should check out this site
http://www.w3schools.com/css
It's amazing, it lets you edit CSS and then see it immediately in the browser.
This is not really a Display
This is not really a Display Suite question, its about CSS, but I'll answer it anyway
@marymasterman's advice is partly correct, you may need to add more CSS 'weight' to the selector – this is called 'specificity' – however the example is incorrect.
Here is a good introduction to the concept: http://www.htmldog.com/guides/cssadvanced/specificity/
Every display suite field is wrapped in the class
.fieldand a specific field class which identifies that field only, for example.field-lighting. If you want all fields to be indented, and with space between them, then creating a css rule which target the .field selector should style that element. For example....field {margin-left:20px;
margin-bottom: 20px;
}
If there is a selector rule with more weight, you may need to make it 'heavier', by adding extra elements, for example...
div .field { ... }/* or */
.node .field { ... }
You can't invent new elements (e.g. 'lighting'), as per @marymasterman's example, as this not valid HTML.
You can create the rule wherever you choose, the styles file is fine, however consider CSS Injector if you only have one or two rules).
Half-working
Thanks for responding despite the incorrect location of my question. While you're here, though, do you know why the style is being applied when I use just the .field class, but not when I use the field specific class (e.g. .field-lighting)? I've tried combinations of underscores, hyphens, extra weights, and listing the class as .field-field-lighting instead of just .field-lighting, but nothing is working for me.
Firstly, make sure you've got
Firstly, make sure you've got the right class! If you are not familiar with Firebug for Firefox or the Chrome/Safari Inspector, get to know it now so you can find the field in question in the HTML structure and target it correctly, http://www.kristarella.com/2009/02/how-to-use-firebug-for-css/.
Assuming you have it correctly, adding weight to it will work.
Success
Firebug solved the problem...except for display:block for some reason. I'm sure it's probably my fault somehow. Class was field-name-field-lighting, not field-field-lighting. Thanks for the help!
Margin:top instead of block
This thread is old, but in case other people are trying to find a way to insert some space between fields in a custom content type (the problems seems to come in with non-text fields -- in my case, file downloads that are coming into Commerce Product Displays from Commerce Products):
CSS Injector is great. I used firebug to find the right field name (in my case: field-name-field-worksheet).
display:block did not work for me either.
But the following did:
.field-name-field-worksheet{
margin-top:40px
}
Thanks for the suggestions!