Not signed in (Sign In)

The Intervals Forum

Categories

Welcome Guest!
Want to take part in these discussions? If you have an account, sign in now.
If you don't have an account, apply for one now.

Tips & Tricks

Advanced Theme Editor Tips & Tricks

Bottom of Page

1 to 5 of 5

  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; }
    •  
      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; }
    •  
      CommentAuthorjprado
    • CommentTimeJan 20th 2011
     
    Minimize the height of the header


    #container { padding: 0 !important; }
    #brandCell { padding-bottom: 0 !important; }
    #globalIconCell { padding-bottom: 0 !important; }
    •  
      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; }
    •  
      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 }