By mlondon77 on

I'm using the CCK module, but I can't seem to figure out which CSS controls the formatting for the CCK output. I'm trying to add more space between the fields as they are all bunched up. Also, I'd like the image to be floated to the left.

The page I'm referring to is: http://www.bridgebeyond.com/arthur_laird

I'm a beginner with Drupal. Can anyone help me?

Many thanks in advance.

⋅ Categories: Drupal 5.x

Comments

groenm’s picture

groenm commented

Hi Michael,

When playing with CSS, I suggest using Firefox with the additionally installed extension Firebug. Firebug allows you to investigate for each element in your page how the formatting is influenced by the CSS-elements. It further lets you play with the CSS-elements without changing the actual CSS-file on your server, so you can preview the effect of the changes.

In your page, you can learn that changing properties of all CCK-fields in common can be done through the div.field-items and/or div.field-item elements. Individual CCK-fields can be changed through, for example, div.field-field-date-of-birth or div.field-field-time. For example, you can add div.field-items {margin-top: 1em;} to put some spacing above all CCK-fields.

As for the image, here at my end it is aligned left in the maincontent-container (using either Firefox or Opera). So what do you mean with floating left? Do you want to put it in the left sidebar? In that case, you could add an additional block to your left sidebar and at the image to the sidebar.

For a more advanced layout of your pages, either consider writing your own template files, or use the contemplate module.

Regards,
Mark

mlondon77’s picture

mlondon77 commented

Mark,

Thanks for your reply.

I've tried using the div tags you mentioned above by looking at Firebug, except they come up as "div class="field field-type-text field-field-survived-by". I noticed yours have hypens. Should I be converting the spaces in the class to hypens?

Re the image, it is aligned left, but I'd like to float it left, i.e. have the text wrap around it on the right side. I suppose once I figure out how the CSS is affecting the output, this should be fairly straightforward.

I haven't heard of Contemplate, so I'll give it a shot tonight after work to learn more about it.

Thanks again for your input and suggestions.

Regards,

Michael

groenm’s picture

groenm commented

Hi Michael,

Note that the spaces in the class are separators to separate different class names. div class="field field-type-text field-field-survived-by" is therefore a div that belongs to 3 classes at the same time: field, field-type-text, and field-field-survived-by. You should therefore not substitute spaces with hyphens. It is enough to refer only to a single class in your CSS. Just make sure you pick the right one. The class field applies to all fields, but the class field-field-survived-by only applies to the survived-by field.

Check out the HTML-documentation on the class property.

With regard to floating the image. I did not read your question well enough. You could float it left by including in your CSS: div.field-field-pic { float: left;}. Probably you want to apply some margin too, to create some whitespace between the image and the text.

Hope this helps.

Regards,
Mark

mlondon77’s picture

mlondon77 commented

Mark,

I got it to work. Thanks for your help!

Regards,

Michael

general need’s picture

general need commented

I have exactly this issue and was happy to find the question had been asked. Unfortunately, I am noit able to impliment any new CSS code that has the desired effect. I want to add margin-top: 1em; for all div.field-items.

However, in my CSS fille when I use Firebug I am told:

Inherited fromdiv#main.clear-block
#main {style.css (line 158)
text-align:justify;
}

Inherited frombody#second
html, body, table th, table td {style.css (line 28)
color:#505050;
font-family:Arial,Helvetica,sans-serif;
letter-spacing:0.6px;
line-height:1.5em;
}

So where do I make the required edit so that it will work?

mlondon77’s picture

mlondon77 commented

I made the changes to the content.css file. It looks like the following:

.field .field-label,
.field .field-label-inline,
.field .field-label-inline-first {
font-weight:bold;
}

.field .field-label-inline,
.field .field-label-inline-first {
display:inline;
}

.fieldgroup {margin:5pt 0 5pt 0}

.field-field-pic{float:left; padding:3pt 5pt 3pt 2pt;}

.field-field-funeral-charities {padding:5pt 0 5pt 0}

.field .field-label-inline {
visibility:hidden;
}

.node-form .number {
display: inline;
width: auto;
}

The see the effect of these changes, you can visit www.bridgebeyond.com/arthur_laird

hope this helps.

general need’s picture

general need commented

I will tried that, thank you.

It works well for me, but now I want to go a bit more advanced and have the fields displayed literally inline, such that they are not stacked vertically. This is what I want, in a formatted manner with each field vertically aligned. Its not easy.

Field Label 1:Value. Field Label 2:Value. Field Label 3:Value.
Field Label 4:Value. Field Label 5:Value. Field Label 6:Value.
Field Label 7:Value. Field Label 8:Value. Field Label 9:Value.

Note: are needs to be taken as future cck upgrades may implement a new content.css file (not sure, but something to keep in mind)

mlondon77’s picture

mlondon77 commented

If I were going to do that then I would either specify equal widths for each field or use a table.

for the width function, I might try:

field-field-name {
display:inline;
padding: 2pt;
width:50pt;
}

If they are all the same width, then they should appear lined up.

good luck.

rosgar’s picture

rosgar commented

Well, floating the image to the left is no problem and text wrap it.

however, I'm trying to figure out this one...

image| Title
image| teaser teaser teaser teaser
image| teaser teaser teaser teaser
image| teaser teaser teaser teaser

The image is at left side and the title is at the right, not on top of the image.
Is contemplate module the answer for this? or are there other way to do this?

like this site; http://nettuts.com/

mlondon77’s picture

mlondon77 commented

I think the contemplate module is more than you need for this. You could accomplish this with either a simple table or inline div's.

Regards,

Michael

rosgar’s picture

rosgar commented

This is easy in putting code in wordpress' template and putting content at admin, but in Drupal, I'm just scratching my head when using imagecache.

groenm’s picture

groenm commented

Hello Ross,

Another way of doing this is by creating a template file for this particular content type. See the "theme developer guide" for more information: http://drupal.org/node/17565

Greetings,
Mark