Can I replace the standard Page Title text with a template that looks exactly the same but is editab

Questions
1

Since the Page Title already has the record name in it (in this case, the Project Name), I don’t want to include the Project Name in the field editor right below the Page Title. It takes up a lot of space and is only necessary in case someone needs to edit it. Can I use a template instead of the Page Title component? Can you give me an example of the html/css that would need to be in the template? Thank you!

2

A template isn’t a field that is editable by the end user - it only displays text. Are you saying you want a page that doesn’t have a title? Or one that has an editable field with a fancier looking label? You can apply HTML to the field label.

3

There’s not a direct way to do this, but here’s a creative/hacky way with a field editor & CSS (with considerable thanks to Ben Hubbard for the CSS part): Directions

  1. Delete the title fields of the Page Title (if you want to keep the buttons, which I did).
  2. Add a panel set, adjust the panel widths as desired. Put the buttons in one side, and add a field editor to the other.
  3. Set the field editor to the appropriate model and delete the section title - if you just leave it blank, it won’t show up.
  4. Pull in a Template, and delete its field label.
    5. Then, enter the fields you want in the template e.g.{{FirstName}}{{LastName}}
  5. Then, go into Resources and add an inline CSS resource. Enter the CSS for your field-editor/title, for example. 
    .nx-panel > .nx-basicfieldeditor:first-child .nx-fieldtext { font-size: 2em; color: #299FC5; } .nx-panel > .nx-basicfieldeditor:first-child .nx-basicfieldeditor-section-header { border-bottom: none; }
Basically, here you have to tell the page which field editor you want to change the CSS for, since there are many on the page. Since mine was in a panel, I used .nx-panel > .nx-basicfieldeditor:first-child which means something like “in a panel set, look for a field editor and apply these properties.” If you’re just putting yours at the top of the page (not in a panel), use .nx-page > .nx-basicfieldeditor:first-child. Let us know if you run into any trouble!

4

Thanks for your help on this! On my initial try - the inline css I added changed all field editors… not just the first one (the one I created per the above instructions). Did I miss something?

5

will you share your CSS with me, or even just email your whole page XML to me at anna@skuidify.com. I think it’s a problem with the .nx-panel > .nx-basicfieldeditor:first-child thing, so if you let me know where your field editors are on your page, that should help (i.e. are they in panels? are they in tabs? are they just on the page and not in another component?)

6

It’s possible your setup may be slightly different. Basically you need to isolate the one field editor you want to change. So if the field editor’s parent is the page, then .nx-page > .nx-basicfieldeditor:first-child .nx-fieldtext will be what you want. If it’s not, you need to figure out what the class is for that component. For instance, if it goes page > tabset > field editor, you’d need something like: .nx-page > .ui-tabs .nx-basicfieldeditor:first-child .nx-fieldtext What you’re trying to do is kind of tricky, so it might take a few tries to get the css just right.

7

I see what you’re saying. The CSS was doing exactly what I was telling it to - changing the first field editor found within a panel. I just had a few other first field editors found within a panel on my page. I will try it as the first field editor found on the page and I think that should fix it.

8

After updating to Summer 13 - the CSS I added no longer functions the same way. Can you help?

9

This is what had been working: .nx-panel > .nx-basicfieldeditor:first-child .nx-fieldtext { font-size: 14pt; font-weight: bold; color: #000000; } .nx-panel > .nx-basicfieldeditor:first-child .nx-basicfieldeditor-section{ background: #FFFFFF; margin: 0px padding-bottom: 0px; } .nx-panel > .nx-basicfieldeditor:first-child .nx-basicfieldeditor-section-header { padding: 0px; border-bottom: none; border-top: none; font-weight: bold; color: #FFFFFF; } .nx-panel > .nx-basicfieldeditor:first-child .nx-basicfieldeditor-item { padding: 0px 8px; margin: 0px; border-bottom: none; background-color: #FFFFFF; } .nx-panel > .nx-basicfieldeditor:first-child .nx-list-footer { padding: 0px; margin: 0px; }

10

Hi Kaede, this should be a pretty simple CSS fix. Can you post a screenshot of how it looks now, and how it used to look?

11

This issue really deserves its own thread, so went ahead and created one. Please reference the new topic here: After updating to Summer 13 - the CSS I added no longer functions the same way.