Not signed in (Sign In)
The Intervals Forum is read-only
Please head to help.myintervals.com for help articles and guides. If you have any questions, please contact our support team.

Tips & Tricks

Advanced Theme Editor Tips & Tricks

Bottom of Page

1 to 8 of 8

  1.  
    • cameron
    • Nov 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; }

    • jprado
    • Dec 30th 2010 edited @ 01/17/2013 11:54 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; border-bottom-right-radius: 0; border-bottom-left-radius: 0;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none; }
    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.  
    Minimize the height of the header


    #container { padding: 0 !important; }
    #brandCell { padding-bottom: 0 !important; }
    #globalIconCell { padding-bottom: 0 !important; }
  4.  

    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.  

    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 }

  6.  

    Hi Guys. I have a problem, hope you can help me.
    My company logo needs to be on a black background, so i neet to change the header background color as well as the text for the quick links on the left. How can i do it?
    Thanx in advance

    • jprado
    • Sep 25th 2012 edited @ 03/01/2013 6:41 am
     

    Try this:


    #header { background: #000; }
    #globalIconCell a,
    #alertCell a { color: #fff; }


    Change #fff to your color of choice if white is too bright for the text.

  8.  
    Make each day on the home calendar have equal widths


    #calendarTable td { width: 14%; }

1 to 8 of 8

  1.  

Comments are closed.
For more Intervals help documentation, please visit help.myintervals.com

Back to Discussions