By CasaDelGato on

I have a Content Type with a dozen or so field in it.
When I have to edit one of those nodes, the edit screen is extremely wasteful of space, so I end up scrolling around for just a dozen or so fields, each is a single line of text.
Is there any way to change the Style/Layout of the Edit screen for a Custom Content node?

⋅ Categories: Drupal 6.x

Comments

Jason Dean’s picture

Jason Dean commented

For improving the layout of a node editing form, you can achieve quite a lot simply through CSS. Applying the CSS to forms of a specific class, I think it would be specific to your custom content type.

Beyond that, you are entering the realms of theming your form with Drupal's Form API (FAPI). You can tweak just about anything, but probably not necessary for styling/layout changes.

onejam’s picture

onejam commented

This module would solve it all but not release yet: http://www.trellon.com/content/blog/interface-module-part-two

For the time being, i guess you could create field groups in CCK to reduce the long list.

Take a look at this as well: http://drupal.org/project/vertical_tabs

-----------------------------------------------------------------
We build engaging websites and intuitive designs that will benefit your business.
Duvien

CasaDelGato’s picture

CasaDelGato commented

The Trellon thing looks really nice, but as you said, it's not released yet.

So I did some searching to see where the classes "form-text" and "form-item" were defined.
I found they both had "display: block;" and "display: inline;" defined for them in multiple places.
It seems the "display: block;" entry was winning the style war.

I ended up making small changes to modules/system/system.css so that "form-text" and "form-item" were both always "display: inline;".
That seems to have worked to at least get the label and field on the same line, which makes the page a LOT smaller and easier to work with.

onejam’s picture

onejam commented

I wouldn't make changes to core files, otherwise you'll lose the changes after upgrading your site. If you have body classes then use:

.section-node-add .form-item {}
.section-node-edit .form-item {}

to target your CSS class and override the changes in system.css file

-----------------------------------------------------------------
We build engaging websites and intuitive designs that will benefit your business.
Duvien

CasaDelGato’s picture

CasaDelGato commented

Since I am relatively new to Drupal (obvious, isn't it!), I'm having trouble with your terminology.
You suggest I put some overriding class definitions somewhere.
I just haven't figured out where.

(and yes, I know that modifying the system.css is a bad idea, I just haven't figured out the full tree of style sheets yet. I've read a bunch of the docs, but it's left me somewhat confused on the subject.)

I'd like to put any overrides/changes I make in a place that will NOT be lost the next time I have to upgrade Drupal.
It's got to be possible.

onejam’s picture

onejam commented

Sorry, put it in your main theme CSS file (ie, style.css) since this should load after all the modules CSS files. If you don't have and body classes, use this line for your body tag in your theme file page.tpl.php file:

<body class="<?php print $body_classes; ?>">

-----------------------------------------------------------------
We build engaging websites and intuitive designs that will benefit your business.
Duvien

CasaDelGato’s picture

CasaDelGato commented

So, is there a css file I can create that has JUST my overrides in it, so I don't have to copy a huge theme css file?
I don't like duplicating something that may change with the next upgrade.

onejam’s picture

onejam commented

Create a new CSS file in your theme folder and add this line to your .info file to link the stylesheet:

stylesheets[all][]   = your_new_stylesheet_filename.css

Drupal will automatically fine the file in your theme folder if it matches.

Remember to clear your cache after you have modified your theme files in performance settings page.

-----------------------------------------------------------------
We build engaging websites and intuitive designs that will benefit your business.
Duvien

CasaDelGato’s picture

CasaDelGato commented

Which .info file?
I bet you saw that question coming... :-)

I could create one in sites/all/themes/garland with just that one line in it, but I think that would "replace" the one in "themes/garland". Am I correct?
I'm hoping for a way to add my .css file to the list, and not have to maintain a copy of a system file. (like garland.info)

WorldFallz’s picture

WorldFallz commented

Ya-- the entire point of css is "cascading" inheritance-- just get more specific with the appropriate styles in the style.css for your theme and you don't have to worry about propagating core changes ad infinitum.

CasaDelGato’s picture

CasaDelGato commented

So, I need to do this with a different Theme (Marinelli).
I've created my own little css file in the marinelli them directory.
I've added the line to the marinelli.info file (my css is listed last).

Since I'd rather just change the class info for just the fields I'm working with, I've tried this:

.form-item#edit-field-mem-fname-0-value-wrapper {
   display:inline;
}

that is the id used on the

tag surrounding the label and entry field in the generated html.
That has no effect.
(and yes, I did purge the caches via the Performance screen.)

The generated html for that field looks like this:

</div><div class="form-item" id="edit-field-mem-fname-0-value-wrapper">
 <label for="edit-field-mem-fname-0-value">First Name: <span class="form-required" title="This field is required.">*</span></label>
 <input type="text" name="field_mem_fname[0][value]" id="edit-field-mem-fname-0-value" size="60" value="Jon" class="form-text required text" />
 <div class="description">First Name</div>
</div>

So, what am I doing wrong?
Is there some way to find out just what classes are defined for what?

tora-bora’s picture

tora-bora commented

You have to paste a 'label'. Try this:
.form-item#edit-field-mem-fname-0-value-wrapper label{
display:inline;
}

CasaDelGato’s picture

CasaDelGato commented

Well, after a long time of other time sinks, I'm getting back to this.
I'd really like to make the Edit Form look decent and fit on one screen.

So, I'm trying to get the Field Labels on the same line as the Field Values.
example: First Name: [enter value here]

The form page has this in it:

</div><div class="form-item" id="edit-field-mem-fname-0-value-wrapper">
 <label for="edit-field-mem-fname-0-value">First Name: <span class="form-required" title="This field is required.">*</span></label>
 <input type="text" name="field_mem_fname[0][value]" id="edit-field-mem-fname-0-value" size="60" value="Frank" class="form-text required text" />
 <div class="description">First Name</div>
</div>

I created this file: EditFormChanges.css

; changes to made edited forms useable.
.form-item#edit-field-mem-fname-0-value-wrapper label{
    display:inline;
}

I modified the giordani.css to have these lines:

stylesheets[all][] = giordani.css
stylesheets[all][] = EditFormChanges.css

And the label is still on the line previous to the value. The display:inline didn't do anything.
(and yes, caches were cleared.)

So, could someone explain to me how I should be doing this? It doesn't seem like it really should be this difficult.

CasaDelGato’s picture

CasaDelGato commented

Turns out you need to do several style overrides to it actually work.
Remember, all I wanted was to get the label on the same line as the value, so instead of:

   Label:
   [enter value here]

you would get:

   Label: [enter value here]

for the block given in my previous message, I had to add these definitions to my own EditFormChanges.css (which was added as described in the previous message.)

; changes to make edited forms useable.

#edit-field-mem-fname-0-value-wrapper {
    display: inline;
}

.form-item#edit-field-mem-fname-0-value-wrapper label {
    display: inline;
}

input#edit-field-mem-fname-0-value {
    display: inline;
}

Remove any one of those, and the label stays on it's own line. You HAVE to have all 3 definitions.
I tried a LOT of permutations for class definitions.

zeezhao’s picture

zeezhao commented

Thanks for your post.

If you have many fields e.g. 50+..., please what is the best way to achieve this without having to name each one? Thanks.