Make a quick vote 🗳 ️How do you refer to SuiteCRM extensions: add-ons or plug-ins? Click here to have your say 👈

Inline edit not available in Suite 7 theme

Hi,

Inline edit is not available when using the Suite 7 theme. You can still select inline edit under System Settings, but the pencil next to a (inline editable) field does not show up.

Is it possible to change the Suite 7 theme to make it compatible with inline edit?

Hi,

I believe that you can still use inline editing with the Suite7 theme out of the box.

However, double clicking a field and editing it can result in the text “undefined” appearing after saving your changes to the field.

I would recommend using the SuiteR theme as it has other functionality such as being Mobile Friendly, and you wont have to make any changes to get this to work.

However, if you still wish to use the Suite7 theme, and want the Pencil icons to show, you can do so with a few changes.

The following should work, but I haven’t tested it to large extents, so you may want to take a backup of your CRM beforehand.

If you copy the file: /themes/Suite7/css/style.css

and paste it into the location: /custom/themes/Suite7/css/

(if this location in the custom folder doesn’t exist, feel free to create it)

Then copy & paste the following CSS lines into your newly pasted style.css file. (I pasted them into Line 4509 and had no major issues):

.inlineEdit{
    cursor: pointer !important;
}

.inlineEditIcon {
    float: right;
    height: 10px;
    color: #3c8dbc;
    width: 15px;
    padding-left: 3px;
}

.inlineEditIcon svg {
    fill: #3c8dbc;
    display: none;
}

.inlineEdit:hover .inlineEditIcon svg{
    cursor: pointer !important;
    display:inline;
}

td.inlineEditActive{
    background-color: #cccccc;
}

#inlineEditSaveButton{
    float:right;
    display:inline;
}

#inlineEditSaveButton svg{
    fill: #3c8dbc;
}

#inlineEditSaveButton svg:hover{
    fill: #3c8dbc;
}

#inline_edit_field{
    float:left;
    width:80%;
    padding-right:5px;
}

(These lines have been taken from the SuiteR css file, so they should have no issue when being added, however i haven’t tested this to extensive levels to be sure)

After pasting these lines into the file at /custom/themes/Suite7/css/style.css, save your changes.

Find the two files: /themes/SuiteR/images/inline_edit_save_icon.svg
and: /themes/SuiteR/images/inline_edit_icon.svg

Paste these two files into the location: /custom/themes/Suite7/images/

If all of the above is done correctly and without issue, run a Quick Repair and Rebuild in your CRM, press CTRL+F5 to refresh your browser and cache, and you should be able to see the Inline edit icons on the Suite7 theme.

1 Like

Awesome, thanks John. I’ll give that a try.

I like the responsive Suite R theme, but it has some visual limitations such as:

https://suitecrm.com/forum/suitecrm-7-0-discussion/8491-report-dashlets-black-border

These report dashlets look a lot better when using the Suite 7 theme.

Is this the fix for the undefined message? It doesn’t actually indicate in your post, at least that I could tell for certain, what the CSS additions are intended for.

I’m getting “Undefined” after an inline edit on the Suite R theme, and I’m wondering if this code is missing from my theme for some reason, and if I can apply this fix to the Suite R theme.

sieberta