تصویر محمدعلی اکبری
Styling HTML tables in node's body

In Drupal we should care about styling html elements which user can use inside WYSIWYG editor. Tables, images, videos, source code and some other special tags are very important.

We could handle this by some few lines of CSS. for example this code belongs to table tags.

.node {
  table {
    &.sticky-header {
      margin-top: 0;
      margin-bottom: 0;
      z-index: 100;
    }
    width: 90%;
    text-shadow: 1px 1px 0px #fff;
    background:#eaebec;
    margin: 20px auto;
    border:#ccc 1px solid;

    -moz-border-radius:3px;
    -webkit-border-radius:3px;
    border-radius:3px;

    -moz-box-shadow: 0 1px 2px #d1d1d1;
    -webkit-box-shadow: 0 1px 2px #d1d1d1;
    box-shadow: 0 1px 2px #d1d1d1;

    a {
      &:link {
        color: #666;
        font-weight: bold;
        text-decoration:none;
      }
      &:visited {
        color: #999999;
        font-weight:bold;
        text-decoration:none;
      }
      &:active, &:hover {
        color: #bd5a35;
        text-decoration:underline;
      }
    }

    th {
      padding:21px 25px 22px 25px;
      border-top:1px solid #fafafa;
      border-bottom:1px solid #e0e0e0;

      background: #ededed;
      background: -webkit-gradient(linear, left top, left bottom, from(#ededed), to(#ebebeb));
      background: -moz-linear-gradient(top,  #ededed,  #ebebeb);
      &:first-child {
        text-align: left; /*LTR*/
        padding-left:20px;
      }
    }
    tr {
      text-align: center;
      padding-left: 20px; /*LTR*/
      &:first-child {
        th {
          &:first-child {
            -moz-border-radius-topleft:3px;
            -webkit-border-top-left-radius:3px;
            border-top-left-radius:3px;
          }
          &:last-child {
            -moz-border-radius-topright:3px;
            -webkit-border-top-right-radius:3px;
            border-top-right-radius:3px;
          }
        }
      }
      &:last-child {
        td {
          border-bottom:0;
          &:first-child {
            -moz-border-radius-bottomleft:3px;
            -webkit-border-bottom-left-radius:3px;
            border-bottom-left-radius:3px;
          }
          &:last-child {
            -moz-border-radius-bottomright:3px;
            -webkit-border-bottom-right-radius:3px;
            border-bottom-right-radius:3px;
          }
        }
      }
      &.even {
        td {
          background: #f6f6f6;
          background: -webkit-gradient(linear, left top, left bottom, from(#f8f8f8), to(#f6f6f6));
          background: -moz-linear-gradient(top,  #f8f8f8,  #f6f6f6);
        }
      }
      &:hover {
        td {
          background: #f2f2f2;
          background: -webkit-gradient(linear, left top, left bottom, from(#f2f2f2), to(#f0f0f0));
          background: -moz-linear-gradient(top,  #f2f2f2,  #f0f0f0);    
        }
      }
    }
    td {
      padding: 18px;
      border-top: 1px solid #ffffff;
      border-bottom: 1px solid #e0e0e0;
      border-left: 1px solid #e0e0e0;

      background: #fafafa;
      background: -webkit-gradient(linear, left top, left bottom, from(#fbfbfb), to(#fafafa));
      background: -moz-linear-gradient(top,  #fbfbfb,  #fafafa);

      &:first-child {
        text-align: left; /*LTR*/
        padding-left:20px;
        border-left: 0;
      }
    }
  }
}

 

افزودن نظر جدید