Skip to content

Instantly share code, notes, and snippets.

@danjjohnson

danjjohnson/timeline.css

Created June 13, 2013 11:54
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save danjjohnson/5773119 to your computer and use it in GitHub Desktop.
Save danjjohnson/5773119 to your computer and use it in GitHub Desktop.
Download ZIP
Change the colours in The One Pager timeline
Raw
timeline.css
/* Change timeline post background colours to #f0f0f0 and #eeeeee on hover */
#posts-timeline .timeline-post {background: #f0f0f0;}
#posts-timeline .timeline-post:nth-child(1n):before {border-color: #f0f0f0 transparent transparent transparent;}
#posts-timeline .timeline-post:hover {background: #eeeeee;}
#posts-timeline .timeline-post:nth-child(1n):hover:before {border-color: #eeeeee transparent transparent transparent;}
@media only screen and (min-width: 768px) {
#posts-timeline .timeline-post:nth-child(2n):before {border-color: transparent transparent #f0f0f0 transparent;}
#posts-timeline .timeline-post:nth-child(2n):hover:before {border-color: transparent transparent #eeeeee transparent;}
}
/* Change the 'dot' colours to #444 and #000 on hover */
#posts-timeline .timeline-post:nth-child(1n):after {background: #444;}
#posts-timeline .timeline-post:nth-child(1n):hover:after {background: #000;}
/* Change the timeline colour to #eee */
#posts-timeline:before {background: #eee;}
/* Change the hover glow to #333 */
#posts-timeline .timeline-post:hover {
box-shadow: 0 0 10px 0 #333;
-webkit-box-shadow: 0 0 10px 0 #333;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment