You are here

Home » API reference » Better Comments 7

better_comments.css in Better Comments 7

Same filename and directory in other branches
  1. 7.2 css/better_comments.css
div.comment-body {
  border: 1px solid #ccc;
  display: inline-block;
  margin: 10px 0;
  padding: 5px 0;
  width: 90%;
  min-width:400px
}
.indented .comment-body {
    width: 86%;
	margin-left: 3px;
}
#edit-subject {
  width: 400px;
}
.better-comments .form-item {
  margin-top: 0 !important;
}
.comment-user-picture {
  display: inline;
}

.better-comment-wrapper {
    float: left;
    width: 100%;
}
.comment div.user-picture {
  width: 70px;
  height: 70px;
  float: left;
}
.better-comments img {
 // padding: 0 5px 0 0 !important;
}
.comment div.user-picture img {
  margin-left: 0;
  height: 70px;
}
.user-picture {
  display: inline;
  float: left !important;
}
div.comment-content {
    padding: 5px;
    float: left;
	 width: 85%;
}
.username {
  font-weight: bold;
}
div[class*="indented"] {
    float: left;
    margin-left: 25px;
}
div[id*="edit-comment-body"] {
    float: left;
    width: 83%;
}
.comment-body .user-picture img,
.comment-user-picture img {
  height: 60px;
  margin: 0 5px;
  width: 60px;
}
#comment-form, .comment-form {
    min-width: 400px;
    width: 98%;
}
.comment-form .comment-user-picture img {
  border: 1px solid #ccc;
  border-right: none;
}
#better-comments-text {
  height: 62px;
  resize: none;
  border-radius: 0;
}
textarea[id*="edit-comment-body-und-"] {
  width: 410px;
  height: 70px;
}
div.grippie {
  display: none;
}
#comments {
  border-top: 1px solid #cccccc;
}
#comments .form-actions {
    float: left;
    margin: 0px;
    padding: 0px;
    width: 100%;
}
div[class*="indented"] .comment-form {
    background: #efefef;
    float: left;
    padding: 10px;
}
.use-ajax.button,
.button.ajax-processed {
  border-radius: 1px;
  margin-left: 5px;
}
.better-comments-confirm,
.preview {
  background: none repeat scroll 0 0 #ffffff;
  border: 1px solid #cccccc;
  box-shadow: 0 2px 26px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(0, 0, 0, 0.1);
  margin-bottom: 12px;
  min-height: 85px;
  padding: 10px;
  width: 375px;
}
.preview .comment-body {
  border: medium none;
}
.better-comments-confirm .form-actions {
  float: right;
  margin: 7px 14px;
}
.better-comments-confirm .form-submit.ajax-processed {
  border-radius: 0;
  margin: 0;
}
.ajax-progress .throbber {
  position: absolute;
  z-index: 999;
  height: 20px; /* tweak this according to your gif */
  width: 20px; /* tweak this according to your gif */
  margin: 2px;
}

File

css/better_comments.css
View source 
  1. div.comment-body {

  2.   border: 1px solid #ccc;

  3.   display: inline-block;

  4.   margin: 10px 0;

  5.   padding: 5px 0;

  6.   width: 90%;

  7.   min-width:400px

  8. }

  9. .indented .comment-body {

  10.     width: 86%;

  11. 	margin-left: 3px;

  12. }

  13. #edit-subject {

  14.   width: 400px;

  15. }

  16. .better-comments .form-item {

  17.   margin-top: 0 !important;

  18. }

  19. .comment-user-picture {

  20.   display: inline;

  21. }

  22. 

  23. .better-comment-wrapper {

  24.     float: left;

  25.     width: 100%;

  26. }

  27. .comment div.user-picture {

  28.   width: 70px;

  29.   height: 70px;

  30.   float: left;

  31. }

  32. .better-comments img {

  33.  // padding: 0 5px 0 0 !important;

  34. }

  35. .comment div.user-picture img {

  36.   margin-left: 0;

  37.   height: 70px;

  38. }

  39. .user-picture {

  40.   display: inline;

  41.   float: left !important;

  42. }

  43. div.comment-content {

  44.     padding: 5px;

  45.     float: left;

  46. 	 width: 85%;

  47. }

  48. .username {

  49.   font-weight: bold;

  50. }

  51. div[class*="indented"] {

  52.     float: left;

  53.     margin-left: 25px;

  54. }

  55. div[id*="edit-comment-body"] {

  56.     float: left;

  57.     width: 83%;

  58. }

  59. .comment-body .user-picture img,

  60. .comment-user-picture img {

  61.   height: 60px;

  62.   margin: 0 5px;

  63.   width: 60px;

  64. }

  65. #comment-form, .comment-form {

  66.     min-width: 400px;

  67.     width: 98%;

  68. }

  69. .comment-form .comment-user-picture img {

  70.   border: 1px solid #ccc;

  71.   border-right: none;

  72. }

  73. #better-comments-text {

  74.   height: 62px;

  75.   resize: none;

  76.   border-radius: 0;

  77. }

  78. textarea[id*="edit-comment-body-und-"] {

  79.   width: 410px;

  80.   height: 70px;

  81. }

  82. div.grippie {

  83.   display: none;

  84. }

  85. #comments {

  86.   border-top: 1px solid #cccccc;

  87. }

  88. #comments .form-actions {

  89.     float: left;

  90.     margin: 0px;

  91.     padding: 0px;

  92.     width: 100%;

  93. }

  94. div[class*="indented"] .comment-form {

  95.     background: #efefef;

  96.     float: left;

  97.     padding: 10px;

  98. }

  99. .use-ajax.button,

  100. .button.ajax-processed {

  101.   border-radius: 1px;

  102.   margin-left: 5px;

  103. }

  104. .better-comments-confirm,

  105. .preview {

  106.   background: none repeat scroll 0 0 #ffffff;

  107.   border: 1px solid #cccccc;

  108.   box-shadow: 0 2px 26px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(0, 0, 0, 0.1);

  109.   margin-bottom: 12px;

  110.   min-height: 85px;

  111.   padding: 10px;

  112.   width: 375px;

  113. }

  114. .preview .comment-body {

  115.   border: medium none;

  116. }

  117. .better-comments-confirm .form-actions {

  118.   float: right;

  119.   margin: 7px 14px;

  120. }

  121. .better-comments-confirm .form-submit.ajax-processed {

  122.   border-radius: 0;

  123.   margin: 0;

  124. }

  125. .ajax-progress .throbber {

  126.   position: absolute;

  127.   z-index: 999;

  128.   height: 20px; /* tweak this according to your gif */

  129.   width: 20px; /* tweak this according to your gif */

  130.   margin: 2px;

  131. }