Tips & Tricks

Advanced Theme Editor Tips & Tricks

1. •  
     CommentAuthorcameron
   • CommentTimeNov 12th 2010 edited @ 12/07/2011 10:19 am

    
   A while back Intervals rolled out a new advanced theme editor so that companies who want to add more personalized changes to the interface can do so by making additions to the stylesheets.
   
   To access this part of the application, you'll need administrator-level access. It can be found by clicking on Options > Settings & Defaults > Try the Advanced Theme Editor (this is found in the center column, below the chosen theme.
   
   I'd like to use this thread to discuss some neat things you can do with CSS to customize your company's interface, and hopefully some of you will join in with your own tips and tricks. Also, if there's something that you're trying to accomplish in your interface, and don't know how to do it, feel free to ask here and we'll show you how to do it.
   
   I'm going to start off with some easy examples and eventually add more complicated examples.
   
   Make the home page dashboard show only week days
   
   The following code will get rid of Saturday and Sunday on the homepage dashboard, and works in most modern browsers (Firefox 3.6+, Chrome, Safari, Opera):
   
   
#calendarTable tr th:nth-last-child(-n+2),
#calendarTable tr td:nth-last-child(-n+2) { display: none; }

   
   Get rid of a particular tab
   
   Don't use a part of the Intervals and want to hide a particular tab? The following code will get rid of a tab (we use Milestones as an example here, but you can change it to whatever you want). (Note: this will only hide the tab; people will access to a particular area of the site can still access it if they know the URL.)
   
   
div#navCell ul li a[href='/milestones/'] { display: none; }

2. •  
     CommentAuthorjprado
   • CommentTimeDec 30th 2010 edited @ 12/30/2010 10:10 am

    
   Some additional ones:
   
   Removes the left/right/bottom gutter
   
   
body { background-color: #fff; margin-bottom: 55px; }
div#container { padding-top: 10px; }
div#all { margin: 0; }
div#allRight { padding: 0; background-image: none; }
div#allLeft { padding: 0; background-image: none; }
div#allFooter { height: 0; }
div.cornerLeft { display: none; }
div.cornerRight { display: none; }
div#navOptions { right: 10px; }

   
   Hide profile images thoughout app
   
   
img.userThumb, img.userThumbFL, img.userThumbPLB, img.userThumbNPB, #dockProfile { display: none }

   
   Hide all header alerts, for people who don't use request queue and/or timesheets
   
   
#alertCell { display: none; }

   
   Hide the timer dock
   
   
#dock { display: none; }

3. •  
     CommentAuthorjprado
   • CommentTimeJan 20th 2011

    
   Minimize the height of the header
   
   
#container { padding: 0 !important; }
#brandCell { padding-bottom: 0 !important; }
#globalIconCell { padding-bottom: 0 !important; }

4. •  
     CommentAuthorcameron
   • CommentTimeDec 9th 2011

    
   Here's another one requested by a customer:
   
   Don't display profile images in the application or in emails
   
   
table tr td > a img { display: none; }
table tr td > center > a img { display: none; }
table tr td + td > a img { display: inline-block; }

5. •  
     CommentAuthorjprado
   • CommentTime3 days ago

    
   Another one:
   
   Hide delete project and people links from the side bar on their profile pages:
   
   
#supportLinksSub a[href*="/projects/delete"] { display: none }
#supportLinksSub a[href*="/people/delete"] { display: none }