You are here

Home » API reference » A Simple Timeline 7

simple_timeline.css in A Simple Timeline 7 

.simple-timeline ul {
  width: 100%;
  margin: 0 auto;
  position: relative;
  display: inline-block;
  list-style: none;
  background: url('./img/ul-bg.png') center top repeat-y;
  padding: 0 !important;
}

.simple-timeline ul li {
  display: block;
  position: relative;
  width: 50%;
  clear: both;
}

.simple-timeline ul li .timeline-text {
  width: 65%;
  float: left;
  font-size: 14px;
  line-height: 17px;
  margin-left: 2%;
}

.simple-timeline ul li.views-row-even {
  float: right;
}

.simple-timeline ul li.views-row-even > div {
  display: block;
  float: left;
  background: url('./img/li-bg.png') left center no-repeat;
  margin-left: -10px;
  padding-left: 30px;
}

.simple-timeline .timeline-date {
  text-align: right;
  margin: 0 0 1% 0;
}

.simple-timeline ul li.views-row-even > div .timeline-date {
  text-align: left;
}

.simple-timeline ul li.views-row-odd {
  float: left;
  text-align: right;
}

.simple-timeline ul li.views-row-odd > div {
  display: block;
  float: right;
  background: url('./img/li-bg.png') right center no-repeat;
  margin-right: -10px;
  padding-right: 30px;
}

.simple-timeline ul li.views-row-odd > div .timeline-text {
  float: right;
  text-align: right;
  margin-right: 2%;
  margin-left: 0;
}

.simple-timeline ul .timeline-image {
  height: auto;
  overflow-x: hidden;
}

.simple-timeline ul li.views-row-odd > div .timeline-image {
  float: right;
}

.simple-timeline ul li.views-row-even > div .timeline-image {
  float: left;
}

.simple-timeline ul .timeline-content {
  min-width: 125px;
}

.simple-timeline ul li.views-row-odd > div .timeline-content {
  float: left;
  padding-right: 2px;
}

.simple-timeline ul li.views-row-even > div .timeline-content {
  float: right;
  padding-left: 2px;
}

File

simple_timeline.css
View source 
  1. .simple-timeline ul {

  2.   width: 100%;

  3.   margin: 0 auto;

  4.   position: relative;

  5.   display: inline-block;

  6.   list-style: none;

  7.   background: url('./img/ul-bg.png') center top repeat-y;

  8.   padding: 0 !important;

  9. }

  10. 

  11. .simple-timeline ul li {

  12.   display: block;

  13.   position: relative;

  14.   width: 50%;

  15.   clear: both;

  16. }

  17. 

  18. .simple-timeline ul li .timeline-text {

  19.   width: 65%;

  20.   float: left;

  21.   font-size: 14px;

  22.   line-height: 17px;

  23.   margin-left: 2%;

  24. }

  25. 

  26. .simple-timeline ul li.views-row-even {

  27.   float: right;

  28. }

  29. 

  30. .simple-timeline ul li.views-row-even > div {

  31.   display: block;

  32.   float: left;

  33.   background: url('./img/li-bg.png') left center no-repeat;

  34.   margin-left: -10px;

  35.   padding-left: 30px;

  36. }

  37. 

  38. .simple-timeline .timeline-date {

  39.   text-align: right;

  40.   margin: 0 0 1% 0;

  41. }

  42. 

  43. .simple-timeline ul li.views-row-even > div .timeline-date {

  44.   text-align: left;

  45. }

  46. 

  47. .simple-timeline ul li.views-row-odd {

  48.   float: left;

  49.   text-align: right;

  50. }

  51. 

  52. .simple-timeline ul li.views-row-odd > div {

  53.   display: block;

  54.   float: right;

  55.   background: url('./img/li-bg.png') right center no-repeat;

  56.   margin-right: -10px;

  57.   padding-right: 30px;

  58. }

  59. 

  60. .simple-timeline ul li.views-row-odd > div .timeline-text {

  61.   float: right;

  62.   text-align: right;

  63.   margin-right: 2%;

  64.   margin-left: 0;

  65. }

  66. 

  67. .simple-timeline ul .timeline-image {

  68.   height: auto;

  69.   overflow-x: hidden;

  70. }

  71. 

  72. .simple-timeline ul li.views-row-odd > div .timeline-image {

  73.   float: right;

  74. }

  75. 

  76. .simple-timeline ul li.views-row-even > div .timeline-image {

  77.   float: left;

  78. }

  79. 

  80. .simple-timeline ul .timeline-content {

  81.   min-width: 125px;

  82. }

  83. 

  84. .simple-timeline ul li.views-row-odd > div .timeline-content {

  85.   float: left;

  86.   padding-right: 2px;

  87. }

  88. 

  89. .simple-timeline ul li.views-row-even > div .timeline-content {

  90.   float: right;

  91.   padding-left: 2px;

  92. }