You are here

styles_fbml.css in Drupal for Facebook 5.2

Same filename and directory in other branches
  1. 6.2 themes/fb_fbml/styles_fbml.css
  .page-wrap {
  position: relative;
  }
  .page-wrap.in-new-facebook { width: 760px; }

  div.error {
  padding: 10px;
  border: solid 1px #dd3c10;
  background: #ffebe8;
  }
  div.messages {
  margin: 10px 10px 10px 10px;
  }
  div.node-teaser, div.node, .comment, .view {
  padding: 0px;
  }
  div.node-header, .comment-header {
  background-color: #f7f7f7;
  border-bottom: 1px solid #d8dfea;
  border-top: 1px solid #3b5998;
  padding: 5px 5px 5px 10px;
  overflow: hidden;
  }
  .comment-header {
  border: none;
  }

  .node-header span {
  font-size: 10px;
  display: block;
  }
  .node-header .picture {
  float: left;
  margin: 0 10px 0 0px;
  }
  .indented {padding-left: 10px;}
  .node-teaser .content, .node .content, .comment .content {
  padding: 8px 10px 0px 10px;
  font-size: 12px;
  }
  .content {
  clear: both;
  }

  .content p {
  margin: 0px 0 8px 0;
  font-size: 12px;
  }

  .node-teaser .footer, .node, .footer, .comment .footer {
  border-top: 1px solid #dddddd;
  font-size: 9px;
  margin: 0px 0 20px 0;
  padding: 5px 2px 5px 12px;
  }

  ul.links, .header .block-menu ul {
  list-style: none;
  display: inline;
  }
  
  ul.links li, .header .block-menu ul li {
  border-left: 1px solid #666666;
  float: left;
  padding: 0 5px 0 5px;
  margin: 0;
  white-space: nowrap;
  }

  ul.links li.first, .header .block-menu ul li:first-child {
  border: none;
  padding-left: 0px;
  }
  
  .header .block-menu .title { display: none;}
  .header ul.links, .header .block-menu, .header .breadcrumb {
  font-size: 10px;
  margin: 0;
  }
  
  .header ul.links, .header .block-menu {
  float: right;
}
  
  .header .block .content {clear: none;}
  
  .header .breadcrumb { float: left;}
  
  #canvas-header h1 {
    float: left;
	clear: left;
	padding: 10px 0 0 0;
  }
  #canvas-header img {
    vertical-align: middle;
    margin-right: 10px;
  }
  #canvas-header {
    margin: 0px;
    padding: 10px 10px 10px 20px;
	/*border-bottom: 1px solid #cccccc; IE will not render this */
	overflow: hidden;
  }
  
  /* for IE */
  #end-canvas-header {clear: both;}

  .admin-sidebar {
  padding: 2em 0;
  background: #fdd;
  }
  
  .form_item {
  margin: 10px;
  }
  

  label {
  display: block;
  margin: 10px 0 0 0;
  }

  .form-required { color: red;}

  .form-item input.error, .form-item textarea.error, .form-item select.error {
  border: 1px solid #dd3c10;
  color: #494949;
  }

  /* emulate facebook blue buttons */
  .form-submit { 
    background-color:#3B5998;
	border-color:#D9DFEA rgb(14, 31, 91) rgb(14, 31, 91) rgb(217, 223, 234);
	border-style:solid;
	border-width:1px;
	color:#FFFFFF;
	font-size:11px;
	padding: 1px 8px;
	text-align:center;
	margin: 10px 10px 10px 0;
	}

  fieldset {
    margin: 0 0 10px 0;
	padding: 0px 10px;
  }
  fieldset.collapsible legend {
    font-weight: bold;
  }

  /* Give some links the facebook button look */
  a.fb_button {
	background:#526EA6 url(http://www.facebook.com/images/pandemic/white_arrow_on_blue.gif) no-repeat scroll right center;
	border-color:#145C9A rgb(14, 31, 91) rgb(14, 31, 91) rgb(20, 92, 154);
	border-style:solid;
	border-width:1px;
    color:#FFFFFF;
    font-weight:bold;
    padding:3px 24px 5px 15px;
  }
  a.fb_button:hover {
    background-color:#40578A;
	text-decoration:none;
  }

  table {
  border-collapse: collapse;  
  }

  th {
  text-align: center;
  }

  td {
  margin: 0;
  padding: 0px;
  border: 1px solid #cccccc;
  }
  
  td.view-field {
  text-align: center;
  vertical-align: middle;
  padding: 2px 10px 2px 10px;
  }

  td.view-field-node-title, .fb_discussion_topic .title {
  text-align: left;
  font-size: 12px;
  font-weight: bold;
  }
  .odd {
  background-color: #eeeeee;
  }
  
  div.view {
  clear: both;
  }

  table.fb_discussion {
  clear: both;
  margin: 10px 0 10px 0;
  }
  table.fb_discussion td{
  padding: 10px;
  }

/**
 * Sidebars and such.
 * 
 * The right sidebar styles are based on Facebook's home page.
 * .sidebar_right is the actual sidebar div.  .sidebar-right is on the
 * overall page container.  Confusing.
 */
#content-main {
  float: left;
  padding: 20px 20px 20px 20px;
  border-top: 1px solid #cccccc;
}
.with-sidebar-right #content-main {width: 436px;}
.with-sidebar-right.in-new-facebook #content-main { width: 550px; }
/* prevent form fields from being too wide. */
.with-sidebar-right #content-main input,
.with-sidebar-right #content-main textarea { max-width: 390px; }
.with-sidebar-right.in-new-facebook #content-main textarea { max-width: 504px; }

#sidebar-right {
  float: right;
  width: 170px;
  padding: 0 0 0 0;
  background-color: #f7f7f7;
  border-top: 1px solid #cccccc;
}

#sidebar-right .block .title { 
  margin: 0 5px 0 5px;
  padding: 3px 5px 4px 5px;
  background-color: #e9e9e9;
  text-align: left;
 }

#sidebar-right .block .content {
  padding: 0 0 0 10px;
  margin: 0 0 10px 0;
}

#sidebar-right .content-wrap { 
  background-color: transparent;
  background-image: url(http://www.facebook.com/images/newsfeed_line.gif);
  background-repeat: repeat-y;
  background-attachment: scroll;
  float: left;
 }

div.clear {clear: both;}

/*
 * menu styles
 * 
 */

ul.menu, .item-list ul {
  margin: 0;
  padding: 0;
}

ul.menu ul, .item-list ul ul {
  margin-left: 1em;
}

ul.menu li, .item-list ul li, li.leaf {
  margin: 0;
  padding: 0;
  list-style-type: none;
  list-style-image: none;
}

ul li.expanded {
}

ul li.collapsed {
}

ul li.leaf a, ul li.expanded a, ul li.collapsed a {
  display: block;
}

ul.inline li {
  background: none;
  margin: 0;
  padding: 0 .75em 0 .75em;
}

/* forums */
td.topics, td.posts {text-align: center;}
th {padding: 0 2px;}

/* make tabs align with header and content padding */
.left_tabs {padding-left: 20px;}

/* sub-tabs */
.secondary {
 border: none;
 height: 1em;
  list-style: none;
 }
.secondary li {
  float: left;
 margin: 0 0 0 20px;
}
.secondary li.active {
  font-weight: bold;
}
/* pager */
.pager {
  width: 100%;
  padding: 10px 0;
}

.pager a, .pager-list strong {margin-right: 1em;}

.block-fb_devel {
  border: solid 1px #e2c822;
  background: #fff9d7;
  margin: 10px 0;
  padding: 5px;
 }

#block-fb_canvas-0 {
    display: block;
    height: 0px;
    width: 0px;
}

/* Facebook's captcha FBML */
.captcha {
    margin: 10px 0 5px 0;
}

File

themes/fb_fbml/styles_fbml.css
View source
  1. .page-wrap {
  2. position: relative;
  3. }
  4. .page-wrap.in-new-facebook { width: 760px; }
  5. div.error {
  6. padding: 10px;
  7. border: solid 1px #dd3c10;
  8. background: #ffebe8;
  9. }
  10. div.messages {
  11. margin: 10px 10px 10px 10px;
  12. }
  13. div.node-teaser, div.node, .comment, .view {
  14. padding: 0px;
  15. }
  16. div.node-header, .comment-header {
  17. background-color: #f7f7f7;
  18. border-bottom: 1px solid #d8dfea;
  19. border-top: 1px solid #3b5998;
  20. padding: 5px 5px 5px 10px;
  21. overflow: hidden;
  22. }
  23. .comment-header {
  24. border: none;
  25. }
  26. .node-header span {
  27. font-size: 10px;
  28. display: block;
  29. }
  30. .node-header .picture {
  31. float: left;
  32. margin: 0 10px 0 0px;
  33. }
  34. .indented {padding-left: 10px;}
  35. .node-teaser .content, .node .content, .comment .content {
  36. padding: 8px 10px 0px 10px;
  37. font-size: 12px;
  38. }
  39. .content {
  40. clear: both;
  41. }
  42. .content p {
  43. margin: 0px 0 8px 0;
  44. font-size: 12px;
  45. }
  46. .node-teaser .footer, .node, .footer, .comment .footer {
  47. border-top: 1px solid #dddddd;
  48. font-size: 9px;
  49. margin: 0px 0 20px 0;
  50. padding: 5px 2px 5px 12px;
  51. }
  52. ul.links, .header .block-menu ul {
  53. list-style: none;
  54. display: inline;
  55. }
  56. ul.links li, .header .block-menu ul li {
  57. border-left: 1px solid #666666;
  58. float: left;
  59. padding: 0 5px 0 5px;
  60. margin: 0;
  61. white-space: nowrap;
  62. }
  63. ul.links li.first, .header .block-menu ul li:first-child {
  64. border: none;
  65. padding-left: 0px;
  66. }
  67. .header .block-menu .title { display: none;}
  68. .header ul.links, .header .block-menu, .header .breadcrumb {
  69. font-size: 10px;
  70. margin: 0;
  71. }
  72. .header ul.links, .header .block-menu {
  73. float: right;
  74. }
  75. .header .block .content {clear: none;}
  76. .header .breadcrumb { float: left;}
  77. #canvas-header h1 {
  78. float: left;
  79. clear: left;
  80. padding: 10px 0 0 0;
  81. }
  82. #canvas-header img {
  83. vertical-align: middle;
  84. margin-right: 10px;
  85. }
  86. #canvas-header {
  87. margin: 0px;
  88. padding: 10px 10px 10px 20px;
  89. /*border-bottom: 1px solid #cccccc; IE will not render this */
  90. overflow: hidden;
  91. }
  92. /* for IE */
  93. #end-canvas-header {clear: both;}
  94. .admin-sidebar {
  95. padding: 2em 0;
  96. background: #fdd;
  97. }
  98. .form_item {
  99. margin: 10px;
  100. }
  101. label {
  102. display: block;
  103. margin: 10px 0 0 0;
  104. }
  105. .form-required { color: red;}
  106. .form-item input.error, .form-item textarea.error, .form-item select.error {
  107. border: 1px solid #dd3c10;
  108. color: #494949;
  109. }
  110. /* emulate facebook blue buttons */
  111. .form-submit {
  112. background-color:#3B5998;
  113. border-color:#D9DFEA rgb(14, 31, 91) rgb(14, 31, 91) rgb(217, 223, 234);
  114. border-style:solid;
  115. border-width:1px;
  116. color:#FFFFFF;
  117. font-size:11px;
  118. padding: 1px 8px;
  119. text-align:center;
  120. margin: 10px 10px 10px 0;
  121. }
  122. fieldset {
  123. margin: 0 0 10px 0;
  124. padding: 0px 10px;
  125. }
  126. fieldset.collapsible legend {
  127. font-weight: bold;
  128. }
  129. /* Give some links the facebook button look */
  130. a.fb_button {
  131. background:#526EA6 url(http://www.facebook.com/images/pandemic/white_arrow_on_blue.gif) no-repeat scroll right center;
  132. border-color:#145C9A rgb(14, 31, 91) rgb(14, 31, 91) rgb(20, 92, 154);
  133. border-style:solid;
  134. border-width:1px;
  135. color:#FFFFFF;
  136. font-weight:bold;
  137. padding:3px 24px 5px 15px;
  138. }
  139. a.fb_button:hover {
  140. background-color:#40578A;
  141. text-decoration:none;
  142. }
  143. table {
  144. border-collapse: collapse;
  145. }
  146. th {
  147. text-align: center;
  148. }
  149. td {
  150. margin: 0;
  151. padding: 0px;
  152. border: 1px solid #cccccc;
  153. }
  154. td.view-field {
  155. text-align: center;
  156. vertical-align: middle;
  157. padding: 2px 10px 2px 10px;
  158. }
  159. td.view-field-node-title, .fb_discussion_topic .title {
  160. text-align: left;
  161. font-size: 12px;
  162. font-weight: bold;
  163. }
  164. .odd {
  165. background-color: #eeeeee;
  166. }
  167. div.view {
  168. clear: both;
  169. }
  170. table.fb_discussion {
  171. clear: both;
  172. margin: 10px 0 10px 0;
  173. }
  174. table.fb_discussion td{
  175. padding: 10px;
  176. }
  177. /**
  178. * Sidebars and such.
  179. *
  180. * The right sidebar styles are based on Facebook's home page.
  181. * .sidebar_right is the actual sidebar div. .sidebar-right is on the
  182. * overall page container. Confusing.
  183. */
  184. #content-main {
  185. float: left;
  186. padding: 20px 20px 20px 20px;
  187. border-top: 1px solid #cccccc;
  188. }
  189. .with-sidebar-right #content-main {width: 436px;}
  190. .with-sidebar-right.in-new-facebook #content-main { width: 550px; }
  191. /* prevent form fields from being too wide. */
  192. .with-sidebar-right #content-main input,
  193. .with-sidebar-right #content-main textarea { max-width: 390px; }
  194. .with-sidebar-right.in-new-facebook #content-main textarea { max-width: 504px; }
  195. #sidebar-right {
  196. float: right;
  197. width: 170px;
  198. padding: 0 0 0 0;
  199. background-color: #f7f7f7;
  200. border-top: 1px solid #cccccc;
  201. }
  202. #sidebar-right .block .title {
  203. margin: 0 5px 0 5px;
  204. padding: 3px 5px 4px 5px;
  205. background-color: #e9e9e9;
  206. text-align: left;
  207. }
  208. #sidebar-right .block .content {
  209. padding: 0 0 0 10px;
  210. margin: 0 0 10px 0;
  211. }
  212. #sidebar-right .content-wrap {
  213. background-color: transparent;
  214. background-image: url(http://www.facebook.com/images/newsfeed_line.gif);
  215. background-repeat: repeat-y;
  216. background-attachment: scroll;
  217. float: left;
  218. }
  219. div.clear {clear: both;}
  220. /*
  221. * menu styles
  222. *
  223. */
  224. ul.menu, .item-list ul {
  225. margin: 0;
  226. padding: 0;
  227. }
  228. ul.menu ul, .item-list ul ul {
  229. margin-left: 1em;
  230. }
  231. ul.menu li, .item-list ul li, li.leaf {
  232. margin: 0;
  233. padding: 0;
  234. list-style-type: none;
  235. list-style-image: none;
  236. }
  237. ul li.expanded {
  238. }
  239. ul li.collapsed {
  240. }
  241. ul li.leaf a, ul li.expanded a, ul li.collapsed a {
  242. display: block;
  243. }
  244. ul.inline li {
  245. background: none;
  246. margin: 0;
  247. padding: 0 .75em 0 .75em;
  248. }
  249. /* forums */
  250. td.topics, td.posts {text-align: center;}
  251. th {padding: 0 2px;}
  252. /* make tabs align with header and content padding */
  253. .left_tabs {padding-left: 20px;}
  254. /* sub-tabs */
  255. .secondary {
  256. border: none;
  257. height: 1em;
  258. list-style: none;
  259. }
  260. .secondary li {
  261. float: left;
  262. margin: 0 0 0 20px;
  263. }
  264. .secondary li.active {
  265. font-weight: bold;
  266. }
  267. /* pager */
  268. .pager {
  269. width: 100%;
  270. padding: 10px 0;
  271. }
  272. .pager a, .pager-list strong {margin-right: 1em;}
  273. .block-fb_devel {
  274. border: solid 1px #e2c822;
  275. background: #fff9d7;
  276. margin: 10px 0;
  277. padding: 5px;
  278. }
  279. #block-fb_canvas-0 {
  280. display: block;
  281. height: 0px;
  282. width: 0px;
  283. }
  284. /* Facebook's captcha FBML */
  285. .captcha {
  286. margin: 10px 0 5px 0;
  287. }