TeamDesk Knowledge Base & Support

basenine 1/10/2018 5:34:03 AM

Hover over dbstyles.css
Right-Click and "Download Linked File"
Navigate to saved file
Open File in Text Edit (or NotePad for all you heathen, PC users 😉 )

Kirill Bondar  Staff  1/10/2018 6:49:59 AM

Hint from developers: bookmarking a link to database setup/resources section might be useful. Setup's UI is unaffected by dbscript/dbstyles so even if you accidentally break database UI and hide a link to Setup, you'll still be able to navigate to resources to revert the changes or delete the file.

cooper collier  1/10/2018 9:51:13 AM

Thank you for the kind comments!

I do not know why, but the dbstyles.css link Brett provided is "corrupted" something in the process has inserted "/" all over the code, and put some other things that do not belong. The result it does not work as he intended.

I know Brett would fix this himself, but he is in some weird time zone. So I cleaned up the file and reposted it here. https://drive.google.com/open?id=1LMY2RkTVRGCeDAgodGxkzhWsXRZ4fnfI

Note, he made most of his changes to the forms. So you need to open a record in view mode to see the changes. DO NOT worry about hurting your data, CSS does nothing to your data. You can upload the file and if you do not like the changes delete the file. The absolute only thing you can do that is bad is to accidentally hide the "setup" button.

This is what Kirill is saying, make a bookmark to your database setup page before messing with the dbstyles and you will always be safe!

Also, there is another video HTML/CSS Bare Minimum, you may want to watch this video first.

basenine 1/10/2018 9:25:22 PM

Hi there Cooper.

Yeah - I noticed the file was corrupted too, but found that right-clicking and downloading the file (and opening up in TextEdit/NotePad) worked ok.

That said though, your version on G Drive is better...

I've made some changes (found an error in the Sections header...fixed) and made the "Create New" button look a lot better

So here 'tis:
https://drive.google.com/file/d/1eF0eUl6St94Xt5QHI_RlQrGLSF9JOFBg/view?usp=sharing

Jorge Solá 7/29/2018 10:01:00 AM

Thank you, Cooper. The videos were very easy to follow & useful. It's actually quite easy to prepare a CSS file & customize the look of different TeamDesk elements.

Here are a couple more applications of the CSS that I have explored:

- To make an element invisible in such a way that it doesn't take up any space on the screen, change its size to 0px. Example:

#frm_1234567 > section > table > caption > h2 {
/* make table header invisible */
font-size: 0px;
}

- To add an image to a group header in a table view:

#frm_1234567 > section > table > tbody:nth-child(3) > tr:before {
/* Add image to group header */
display: inline-block;
content: url(https://www.teamdesk.net/secure/db/12345/attachment.aspx?fid=12345678&id=1&rev=1&ext=.jpg);
}

The possibilities are limitless.

Mike Nelson 7/25/2019 2:22:56 PM

how about being able to do this based on role?

In other words we have public access setup to our database. My customers can come in and add new service calls and it works great. I would love to be able to remove the search and add new button across top from customer role but not for my CSR role. I can do this with the dbstyles but it does it for all roles. any way to do this role specific?

cooper collier  7/25/2019 5:43:53 PM

Mike, please forgive me if the following idea "misses" the mark. If it does I would be happy to find a couple minutes to take a peak at what you are doing, one paragraph of text is probably not enough.

I happen to be working on a private project of my own that required huge amount of css work. in essence I am making an IOS PWA app that used TeamDesk as a database backend.

what I have done is used the javascript embed function to place a View or Dashboard onto an HTML or WordPress page. When you do that I have found that you can place CSS on the page above the javascript embed.

You then direct the client to that page,

IN the example below, I am hiding the view title and the view table first column (the column headers).

<style>

.hdr { display: none;}

.fs-grid > thead:nth-child(2) { display: none;}

.fs-grid > caption:nth-child(1) { display: none;}

</style>


<script src="https://www.teamdesk.net/secure/embed.js" data-url="/ed-####/db/####/overview.aspx"></script>

Slava Shinderov  Staff  7/26/2019 4:57:10 AM

@Matt A sort of the following may be added to dbscript.js (adjust role names)

// when page is loaded...
$(function() {
// for Role 1 or Role 2 -- ADJUST HERE
if(gApiConfig.role == "Role 1" || gApiConfig.role == "Role 2") {

// iterate and adjust HTML body as you need

// for example, following code will remove "Search for Keywords"
$("#frm_search").remove();

}
});

Learn more here:
https://www.teamdesk.net/blog/whats-new/database-pages-run-script/