Home      FAQ      Forum      Idea Exchange      Ask a Question      My Stuff      Help   
css example
Thanks to Cooper Collier from Waters Web Works: https://www.teamdesk.net/experts?id=21
and the videos he's posted here: https://www.teamdesk.net/videos (scroll to the last two), I've been able to create a new dbstyles.css file.
Attached for anyone who wishes to play around with it (in the Dev branch first perhaps !)

Fonts used were a mixture of Century Gothic, Helvetica Neue (with font-weight settings) as well as keeping in place TD's original fonts. Switching from desktop to iPhone brought different fonts into play nicely.
There are /*comments*/ tags so you can see where each style is used.

Tidying up the fonts, alignment and padding makes a huge difference IMHO.
For example, changing the View Heading columns to be Centered rather than justified left/right is easier to read.

In the video, Cooper explains clearly how to get the tags necessary to make the appropriate changes.

If anyone else would like to share their ideas, this would be the place to do it 😉

Cheers - Brett dbstyles.css

Date Created
1/10/2018 5:31:04 AM
Date Updated
7/29/2018 10:01:00 AM
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:
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.
Back to Search Results