API tools faq
paste
Advertisement
rccharles

asc adjust css post # 1

rccharles
Jun 25th, 2016
262
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 46.83 KB | None | 0 0
raw download clone embed print report
  1. <body><p>For those who do not want to have to make any edits, here is the complete CSS to display the ASC forum content with the likes, bookmarks and replies icons. Posts and replies within a thread are shown at the Apple default size.</p>
  2. <p></p>
  3. <p>(Note: next reply is the complete CSS to display same, but without likes or bookmarks)</p>
  4. <p></p>
  5. <p>CODE: SELECT ALL</p>
  6. <p></p>
  7. <pre class="jive_text_macro jive_macro_code _jivemacro_uid_14668746751858692" jivemacro="code" _modifiedtitle="true" _jivemacro_uid="_14668746751858692" ___default_attr="css">
  8. <p> /*</p>
  9. <p> custom styles for Apple Support Communities board system introduced in 2014-06 (v 0.6)</p>
  10. <p> </p>
  11. <p> Copyright 2014 Hiroto, et. al.</p>
  12. <p> </p>
  13. <p> GNU General Public License</p>
  14. <p></p>
  15. <p> </p>
  16. <p></p>
  17. <p> This program is free software: you can redistribute it and/or modify</p>
  18. <p> it under the terms of the GNU General Public License as published by</p>
  19. <p> the Free Software Foundation, version 3</p>
  20. <p></p>
  21. <p> </p>
  22. <p></p>
  23. <p> This program is distributed in the hope that it will be useful,</p>
  24. <p> but WITHOUT ANY WARRANTY; without even the implied warranty of</p>
  25. <p> MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the</p>
  26. <p> GNU General Public License for more details.</p>
  27. <p></p>
  28. <p> </p>
  29. <p></p>
  30. <p> For a copy of the GNU General Public License</p>
  31. <p> see &lt;http://www.gnu.org/licenses/&gt;.</p>
  32. <p> </p>
  33. <p> Change Log:</p>
  34. <p> -- Fold versions 0.43 and 0.50 into this version.</p>
  35. <p> -- Added media tag to select on screen size.</p>
  36. <p> -- Scroll large code listings</p>
  37. <p> -- Change color highlights unread posts</p>
  38. <p></p>
  39. <p> </p>
  40. <p></p>
  41. <p> */</p>
  42. <p> @-moz-document</p>
  43. <p> url-prefix(https://discussions.apple.com/community/),</p>
  44. <p> url-prefix(https://discussions.apple.com/people/),</p>
  45. <p> url-prefix(https://discussions.apple.com/content)</p>
  46. <p> {</p>
  47. <p></p>
  48. <p> </p>
  49. <p></p>
  50. <p> /* Scroll code listings. set max-height of syntax highlighted code in thread content browser */</p>
  51. <p> .jive-rendered-content .dp-highlighter {</p>
  52. <p> max-height: 500px !important;</p>
  53. <p> overflow: auto !important;</p>
  54. <p> } /* added in v0.6 */</p>
  55. <p> /* Scroll code listings. set max-heiht of pre code (visible when javascript is disabled) */</p>
  56. <p> .jive-rendered-content pre {</p>
  57. <p> max-height: 500px !important;</p>
  58. <p> overflow: auto !important;</p>
  59. <p> } </p>
  60. <p> /* added in v0.6 */</p>
  61. <p> </p>
  62. <p> /* highlights in dark blue unread posts when logged in. added in v0.6 */</p>
  63. <p> .j-td-title strong {color:#191970 !important; font-weight: normal !important;}</p>
  64. <p> </p>
  65. <p></p>
  66. <p></p>
  67. <p> /* Wide screen browser</p>
  68. <p> ===================</p>
  69. <p> </p>
  70. <p> This rule set will be fine for normal to wide window whose width is ca. 1265px or greater.</p>
  71. <p> However, it will not be beneficial to very narrow window of 700-900px in width.</p>
  72. <p> */</p>
  73. <p></p>
  74. <p> </p>
  75. <p></p>
  76. <p> @media all and (min-width: 1265px) /* added in v0.6 */</p>
  77. <p> {</p>
  78. <p> /* ------------------------------------------------------------------------------- -----------------</p>
  79. <p> BODY</p>
  80. <p> */</p>
  81. <p> body.j-body-welome, /* Welcome */</p>
  82. <p> body.j-body-place, /* Community */</p>
  83. <p> body.j-body-yourwork, /* Content */</p>
  84. <p> body.j-body-home, /* Activity */</p>
  85. <p> body.j-body-yourconnections, /* People */</p>
  86. <p> body.j-body-preferences, /* Preferences */</p>
  87. <p> body.jive-body-content, /* Thread */</p>
  88. <p> body.jive-body-search, /* Search */</p>
  89. <p> body.jive-view-profile /* Profile */</p>
  90. <p> { /* added in v0.43 */</p>
  91. <p> background: white !important;</p>
  92. <p> }</p>
  93. <p> body {</p>
  94. <p> background: white;</p>
  95. <p> min-width: 0px !important;</p>
  96. <p> }</p>
  97. <p> #body-apple {</p>
  98. <p> width: 100% !important;</p>
  99. <p> min-width: 0px !important;</p>
  100. <p> }</p>
  101. <p></p>
  102. <p> </p>
  103. <p></p>
  104. <p></p>
  105. <p> /* ------------------------------------------------------------------------------- -----------------</p>
  106. <p> TEXT</p>
  107. <p> */</p>
  108. <p> /* line spacing */</p>
  109. <p> .jive-content { line-height: 1.25 !important; }</p>
  110. <p></p>
  111. <p> </p>
  112. <p></p>
  113. <p> </p>
  114. <p> /* ------------------------------------------------------------------------------- -----------------</p>
  115. <p> ASC HEADER AREA</p>
  116. <p> */</p>
  117. <p> #j-header,</p>
  118. <p> #j-compact-header,</p>
  119. <p> #j-footer { width: 100% !important; }</p>
  120. <p> </p>
  121. <p> /* navigation header (Apple Support Communities ...) */</p>
  122. <p> #j-header-wrap {</p>
  123. <p> padding: 0px 40px !important;</p>
  124. <p> margin: 0px 0px 15px !important;</p>
  125. <p> }</p>
  126. <p> #j-globalNav-bg {</p>
  127. <p> padding: 0pX !important;</p>
  128. <p> margin: 0px !important;</p>
  129. <p> }</p>
  130. <p> #j-satNav { overflow: visible !important; }</p>
  131. <p> #jive-breadcrumb { right: 40px !important; }</p>
  132. <p></p>
  133. <p> </p>
  134. <p></p>
  135. <p></p>
  136. <p> /* ------------------------------------------------------------------------------- -----------------</p>
  137. <p> ASC TOP PAGE</p>
  138. <p> */</p>
  139. <p> #jive-widgetframe-body_5780758 &gt; .content-large, /* discussions.apple.com */</p>
  140. <p> #jive-widgetframe-body_188974 &gt; .content-large, /* discussionsjapan.apple.com */ /* added in v0.42 */</p>
  141. <p> #jive-widgetframe-body_20835 &gt; .content-large /* discussionskorea.apple.com */ /* added in v0.42 */</p>
  142. <p> { /* added parent id in v0.41 */</p>
  143. <p> text-align: center !important;</p>
  144. <p> overflow-x: auto !important;</p>
  145. <p> overflow-y: hidden !important;</p>
  146. <p> }</p>
  147. <p> .apple-communities {</p>
  148. <p> display: inline-block !important;</p>
  149. <p> width: 1120px !important;</p>
  150. <p> text-align: left !important;</p>
  151. <p> }</p>
  152. <p></p>
  153. <p> </p>
  154. <p></p>
  155. <p></p>
  156. <p> /* ------------------------------------------------------------------------------- -----------------</p>
  157. <p> THREAD LIST BROWSER</p>
  158. <p> */</p>
  159. <p> /* show author name in 'Latest activity' column in detailed list view of threads */</p>
  160. <p> td.j-td-date &gt; span { display : inherit !important; }</p>
  161. <p></p>
  162. <p> </p>
  163. <p></p>
  164. <p> /* main section */</p>
  165. <p> #j-main { padding: 0px !important; }</p>
  166. <p></p>
  167. <p> </p>
  168. <p></p>
  169. <p> /* table cell title */</p>
  170. <p> .jive-table td.jive-table-cell-title { padding: 5px !important; }</p>
  171. <p> </p>
  172. <p> /* thread list view column widths */ /* added in v0.43 */</p>
  173. <p> .j-browse-details .j-td-title { max-width: none !important; }</p>
  174. <p> .j-browse-details .j-td-date {</p>
  175. <p> width: auto !important;</p>
  176. <p> max-width: 20% !important;</p>
  177. <p> }</p>
  178. <p></p>
  179. <p> </p>
  180. <p></p>
  181. <p> /* ------------------</p>
  182. <p> Hide Like and Bookmark columns in thread list view.</p>
  183. <p> */ /* added in v0.43 (optional) */</p>
  184. <p> /* ------------------ (currently commented out)</p>
  185. <p> .j-browse-details .j-td-likes,</p>
  186. <p> .j-browse-details .j-td-bookmarks { display: none !important; }</p>
  187. <p> .j-browse-details &gt; table.j-browse-list &gt; thead.j-rc4 &gt; tr &gt; th + th,</p>
  188. <p> .j-browse-details &gt; table.j-browse-list &gt; thead.j-rc4 &gt; tr &gt; th + th + th { display: none !important; }</p>
  189. <p> .j-browse-details &gt; table.j-browse-list &gt; thead.j-rc4 &gt; tr &gt; th + th + th + th { display: table-cell !important; }</p>
  190. <p> ------------------ */</p>
  191. <p></p>
  192. <p> </p>
  193. <p></p>
  194. <p> /* threads list view table tr td */</p>
  195. <p> .j-browse-details-tbody tr td { padding: 5px !important; }</p>
  196. <p></p>
  197. <p> </p>
  198. <p></p>
  199. <p> /* communities list view table tr td */</p>
  200. <p> .jive-communities-listing table tr td { padding: 5px !important; }</p>
  201. <p> </p>
  202. <p> /* thumbnails view width */</p>
  203. <p> .j-browse-content .j-thumb-view,</p>
  204. <p> .j-browse-places .j-browse-thumbnails,</p>
  205. <p> .j-browse-people .j-browse-thumbnails { width: 100% !important; }</p>
  206. <p> </p>
  207. <p> /* thumbnail view list item margin */ /* added in v0.43 */</p>
  208. <p> .j-browse-content .j-thumb-view &gt; li,</p>
  209. <p> .j-browse-places .j-browse-thumbnails &gt; li { margin-right: 20px !important; }</p>
  210. <p></p>
  211. <p> </p>
  212. <p></p>
  213. <p> /* social actions row */</p>
  214. <p> .apple-social-actions-wrapper { margin-right: 0px !important; }</p>
  215. <p> .j-thread .j-social-actions { margin-right: 40px !important; }</p>
  216. <p></p>
  217. <p> </p>
  218. <p></p>
  219. <p> /* apple header, subheader row ("Find helpful contents..." etc )*/ /* fixed in v0.43 */</p>
  220. <p> #apple-full-subheader,</p>
  221. <p> #apple-activity-subheader {</p>
  222. <p> padding: 0px 40px 15px !important;</p>
  223. <p> margin-bottom: 15px !important;</p>
  224. <p> }</p>
  225. <p> #apple-full-header h2,</p>
  226. <p> #apple-activity-header h2 { padding: 0px 40px !important; }</p>
  227. <p></p>
  228. <p> </p>
  229. <p></p>
  230. <p> /* page header */</p>
  231. <p> .j-body-place #jive-body &gt; header.j-page-header {</p>
  232. <p> margin-left: 40px !important;</p>
  233. <p> margin-right: 40px !important;</p>
  234. <p> width: auto !important;</p>
  235. <p> }</p>
  236. <p> </p>
  237. <p> /* browser filter row */</p>
  238. <p> #j-browse-filters { margin-bottom: 5px !important; }</p>
  239. <p></p>
  240. <p> </p>
  241. <p></p>
  242. <p> /* browser controls row */</p>
  243. <p> .j-type-row { margin-bottom: 0px !important; }</p>
  244. <p></p>
  245. <p> </p>
  246. <p></p>
  247. <p> /* browser controls content types (All Contents|User Tips|Discussions) width */</p>
  248. <p> #js-browse-controls .j-type-row .j-content-types { width: 90% !important; }</p>
  249. <p> </p>
  250. <p> /* browser controls view toggle (Thumbnails|Details) width */</p>
  251. <p> #js-browse-controls #j-item-view-toggle {</p>
  252. <p> width: 10% !important;</p>
  253. <p> display: table !important;</p>
  254. <p> }</p>
  255. <p></p>
  256. <p> </p>
  257. <p></p>
  258. <p> /* content filter row (All|Open|Answered|Threads) */</p>
  259. <p> .j-content-filter {</p>
  260. <p> background: white !important;</p>
  261. <p> margin-bottom: 10px !important;</p>
  262. <p> } </p>
  263. <p> </p>
  264. <p> /* container canvas */</p>
  265. <p> .j-contained {</p>
  266. <p> margin-left: 40px !important;</p>
  267. <p> margin-right: 40px !important;</p>
  268. <p> }</p>
  269. <p></p>
  270. <p> </p>
  271. <p></p>
  272. <p> /* category filter bar */</p>
  273. <p> .jive-content-filter {</p>
  274. <p> left: 0px !important;</p>
  275. <p> width: 80% !important;</p>
  276. <p> }</p>
  277. <p> .touchcarousel-wrapper { width: 100% !important; }</p>
  278. <p> .touchcarousel .tc-paging-container { width: 90% !important; } /* added in v0.41 */</p>
  279. <p></p>
  280. <p> </p>
  281. <p></p>
  282. <p> /* more search results available */</p>
  283. <p> #j-more-search-results-available { padding: 10px !important; }</p>
  284. <p> </p>
  285. <p> /* misc */</p>
  286. <p> .jive-widget { margin-bottom: 10px !important; }</p>
  287. <p> .j-column { margin-bottom: 10px !important; }</p>
  288. <p></p>
  289. <p> </p>
  290. <p></p>
  291. <p></p>
  292. <p> /* ------------------</p>
  293. <p> Treatment for narrow window</p>
  294. <p> Method 1 (minimum optimisation)</p>
  295. <p></p>
  296. <p> </p>
  297. <p></p>
  298. <p> Adjust thread list table's shift and margin to maximize its width.</p>
  299. <p> */ /* added in v0.43 */</p>
  300. <p> .j-layout-sl.j-browse-content .j-column-wrap-l { margin-left: -166px !important; }</p>
  301. <p> .j-layout-sl.j-browse-content .j-column-l { margin-left: 166px !important; }</p>
  302. <p> .j-layout-sl.j-browse-content .j-column-s { width: 166px !important; }</p>
  303. <p> /* ------------------ */</p>
  304. <p></p>
  305. <p> </p>
  306. <p></p>
  307. <p> /* ------------------</p>
  308. <p> Swap left-right positions of thread list table and sidebar ui (filters &amp; actions)</p>
  309. <p> */ /* fixed in v0.43 */</p>
  310. <p> /* let thread list table float left */</p>
  311. <p> .j-layout-sl.j-browse-content .j-column-wrap-l,</p>
  312. <p> .j-layout-sl.j-browse-places .j-column-wrap-l { float: left !important; }</p>
  313. <p></p>
  314. <p> </p>
  315. <p></p>
  316. <p> /* let sidebar ui float right */</p>
  317. <p> .j-layout-sl.j-browse-content .j-column-s,</p>
  318. <p> .j-layout-sl.j-browse-places .j-column-s { float: right !important; }</p>
  319. <p> /* ------------------ */</p>
  320. <p></p>
  321. <p> </p>
  322. <p></p>
  323. <p></p>
  324. <p> /* ------------------------------------------------------------------------------- -----------------</p>
  325. <p> THREAD CONTENT BROWSER</p>
  326. <p> */</p>
  327. <p> /* thread header */</p>
  328. <p> .apple-thread-header {</p>
  329. <p> width: auto !important;</p>
  330. <p> margin-bottom: 10px !important;</p>
  331. <p> margin-left: 40px !important;</p>
  332. <p> }</p>
  333. <p> </p>
  334. <p> /* thread original post */</p>
  335. <p> .j-thread .jive-content { margin: 0px 40px 0px 140px !important; }</p>
  336. <p> </p>
  337. <p> /* thread replies ul */</p>
  338. <p> ul.jive-discussion-replies.jive-discussion-indent-0 { margin: 0px !important; }</p>
  339. <p> </p>
  340. <p> /* thread reply li */</p>
  341. <p> .jive-discussion-replies li.reply { margin-top: 15px !important; }</p>
  342. <p></p>
  343. <p> </p>
  344. <p></p>
  345. <p> /* thread view indent */</p>
  346. <p> .jive-discussion-indent-1 li.reply { padding-left: 15px !important; }</p>
  347. <p> </p>
  348. <p> /* thread info */</p>
  349. <p> .jive-thread-info {</p>
  350. <p> padding: 10px 40px !important;</p>
  351. <p> margin: 0px !important;</p>
  352. <p> }</p>
  353. <p> </p>
  354. <p> /* thread answer rollup */</p>
  355. <p> .j-answer-rollup { margin: 30px 0px !important; }</p>
  356. <p> </p>
  357. <p> /* thread post header (poster, date, response to) */</p>
  358. <p> .j-thread-post &gt; header {</p>
  359. <p> padding: 10px 20px 0px 20px !important;</p>
  360. <p> margin-bottom: 12px !important;</p>
  361. <p> }</p>
  362. <p> </p>
  363. <p> /* thread post section (message body) */</p>
  364. <p> .j-thread-post section {</p>
  365. <p> padding: 0px 20px !important;</p>
  366. <p> margin-bottom: 6px !important;</p>
  367. <p> }</p>
  368. <p> </p>
  369. <p> /* thread post footer (Like|Reply etc) */</p>
  370. <p> .j-thread-post footer { padding: 0px 15px !important; }</p>
  371. <p> .j-thread-post footer &gt; ul { padding: 2px !important; }</p>
  372. <p> .j-thread-post footer &gt; .acclaim-container { margin: 5px 0px !important; }</p>
  373. <p></p>
  374. <p> </p>
  375. <p></p>
  376. <p> /* thread rendered content */</p>
  377. <p> .jive-rendered-content { padding-bottom: 4px !important; }</p>
  378. <p> </p>
  379. <p> /* thread rendered content quote &amp; pre */</p>
  380. <p> .jive-rendered-content .jive-quote,</p>
  381. <p> .jive-rendered-content .jive-pre {</p>
  382. <p> margin: 5px 15px !important;</p>
  383. <p> }</p>
  384. <p></p>
  385. <p> </p>
  386. <p></p>
  387. <p> /* thread reply footer (Return to Community|Go to original post) */</p>
  388. <p> #jive-thread-reply-footer { margin-top: 10px !important; }</p>
  389. <p> </p>
  390. <p> /* more like this links, incomming links */</p>
  391. <p> #apple-related-threads { margin: 0px 40px !important; }</p>
  392. <p> #apple-related-threads .j-box { margin-bottom: 0px !important; }</p>
  393. <p> .j-icon-list li { padding: 3px 0px 3px 22px !important; }</p>
  394. <p></p>
  395. <p> </p>
  396. <p></p>
  397. <p></p>
  398. <p> /* ------------------------------------------------------------------------------- -----------------</p>
  399. <p> INLINE EDITOR</p>
  400. <p> */</p>
  401. <p> /* editor */</p>
  402. <p> .jive-discussion-replies li.addReply { margin: 50px 40px 0px !important; }</p>
  403. <p></p>
  404. <p> </p>
  405. <p></p>
  406. <p></p>
  407. <p> /* ------------------------------------------------------------------------------- -----------------</p>
  408. <p> ADVANCED EDITOR</p>
  409. <p> */</p>
  410. <p> /* content area */</p>
  411. <p> .j-thread .jive-content.jive-create-thread,</p>
  412. <p> .jive-body-formpage-document .jive-content.doc-page {</p>
  413. <p> margin: 0px 40px !important;</p>
  414. <p> padding: 0px !important;</p>
  415. <p> }</p>
  416. <p></p>
  417. <p> </p>
  418. <p></p>
  419. <p> /* header */</p>
  420. <p> .j-thread .jive-content.jive-create-thread h2,</p>
  421. <p> .jive-body-formpage-document .jive-content.doc-page h2 { padding: 0px !important; }</p>
  422. <p></p>
  423. <p> </p>
  424. <p></p>
  425. <p> /* editor panel */</p>
  426. <p> .j-thread .jive-content.jive-create-thread #jive-compose-title,</p>
  427. <p> .j-thread .jive-content.jive-create-thread .jive-editor-panel.jive-large-editor-panel,</p>
  428. <p> .jive-body-formpage-document .jive-content.doc-page #jive-compose-title,</p>
  429. <p> .jive-body-formpage-document .jive-content.doc-page .jive-editor-panel.jive-large-editor-panel { margin: 0px !important; }</p>
  430. <p></p>
  431. <p> </p>
  432. <p></p>
  433. <p> /* line height in editor */</p>
  434. <p> body.tiny_mce_content { line-height: inherit !important; }</p>
  435. <p></p>
  436. <p> </p>
  437. <p></p>
  438. <p> /* replying to */</p>
  439. <p> .jive-body-formpage-comment .jive-thread-message { margin: 0px !important; }</p>
  440. <p></p>
  441. <p> </p>
  442. <p></p>
  443. <p> /* buttons (Reply|Cancel) */</p>
  444. <p> .j-publishbar,</p>
  445. <p> .jive-body-formpage .jive-composebuttons { margin: 20px 40px 0px !important; }</p>
  446. <p></p>
  447. <p> </p>
  448. <p></p>
  449. <p></p>
  450. <p> /* ------------------------------------------------------------------------------- -----------------</p>
  451. <p> ACTIVITY STREAM</p>
  452. <p> */</p>
  453. <p> /* activity entry */</p>
  454. <p> .j-act-entry { padding: 5px 0px 10px 100px !important; }</p>
  455. <p></p>
  456. <p> </p>
  457. <p></p>
  458. <p> /* activity title */</p>
  459. <p> .j-body-home .j-act-title { padding: 5px 0px 5px 24px !important; }</p>
  460. <p></p>
  461. <p> </p>
  462. <p></p>
  463. <p> /* activity body &amp; comment */ /* added in v0.43 */</p>
  464. <p> .j-body-home .j-act-init { padding: 5px 0px 10px 100px !important; }</p>
  465. <p> .apple-activity-comments-wrapper { margin-left: 0px !important; }</p>
  466. <p></p>
  467. <p> </p>
  468. <p></p>
  469. <p> /* Like list */</p>
  470. <p> .j-act-grouped .j-act-g-item { padding: 3px !important; }</p>
  471. <p> </p>
  472. <p> </p>
  473. <p> /* ------------------------------------------------------------------------------- -----------------</p>
  474. <p> SEARCH RESULTS</p>
  475. <p> */</p>
  476. <p> /* search result entry */</p>
  477. <p> .j-search-results-main-container .j-search-result { padding: 10px !important; } /* added in v0.43 */</p>
  478. <p></p>
  479. <p> </p>
  480. <p></p>
  481. <p></p>
  482. <p> /* ------------------------------------------------------------------------------- -----------------</p>
  483. <p> DOC (USER TIP)</p>
  484. <p> */ /* added in v0.43 */</p>
  485. <p> /* user tip canvas */</p>
  486. <p> .jive-body-content.j-doc .j-column-wrap-l { margin: 0px 40px !important; }</p>
  487. <p></p>
  488. <p> </p>
  489. <p></p>
  490. <p></p>
  491. <p> /* ------------------------------------------------------------------------------- -----------------</p>
  492. <p> PROFILE</p>
  493. <p> */ /* added in v0.43 */</p>
  494. <p> /* header &amp; navigation bar (Bio|Activity|Content|Communities) */</p>
  495. <p> .j-view-profile .j-page-header { padding: 10px 40px !important; }</p>
  496. <p> .j-bigtab-nav { margin: 10px 40px !important; }</p>
  497. <p> </p>
  498. <p> /* Bio */</p>
  499. <p> .j-layout-l .j-column-wrap-l { width: 100% !important; }</p>
  500. <p></p>
  501. <p> </p>
  502. <p></p>
  503. <p> /* Communities (places) sidebar ui blue marker adjustment</p>
  504. <p> (according to the sidebar width changed to 166px from 180px for selector: .j-layout-sl.j-browse-places .j-column-s</p>
  505. <p> in PLACES section) */</p>
  506. <p> .j-view-profile .j-second-nav ul &gt; li.active { width: 156px !important; }</p>
  507. <p></p>
  508. <p> </p>
  509. <p></p>
  510. <p></p>
  511. <p> /* ------------------------------------------------------------------------------- -----------------</p>
  512. <p> PLACES</p>
  513. <p> */ /* added in v0.43 */</p>
  514. <p> /* latest activity column */</p>
  515. <p> .j-browse-details .j-td-activity { max-width: 650px !important; }</p>
  516. <p></p>
  517. <p> </p>
  518. <p></p>
  519. <p></p>
  520. <p> /* ------------------</p>
  521. <p> Treatment for narrow window</p>
  522. <p> Method 1 (minimum optimisation)</p>
  523. <p></p>
  524. <p> </p>
  525. <p></p>
  526. <p> Adjust community list table's shift and margin to maximize its width.</p>
  527. <p> */ /* added in v0.43 */</p>
  528. <p> .j-layout-sl.j-browse-places .j-column-wrap-l { margin-left: -166px !important; }</p>
  529. <p> .j-layout-sl.j-browse-places .j-column-l { margin-left: 166px !important; }</p>
  530. <p> .j-layout-sl.j-browse-places .j-column-l { padding-left: 0px !important; }</p>
  531. <p> .j-layout-sl.j-browse-places .j-column-s { width: 166px !important; }</p>
  532. <p> /* ------------------ */</p>
  533. <p> } /* end of wide screen */</p>
  534. <p></p>
  535. <p></p>
  536. <p></p>
  537. <p> @media all and (max-width: 1265px) /* added in v0.6 */</p>
  538. <p> {</p>
  539. <p> /* styles for narrow browsers</p>
  540. <p> ==========================</p>
  541. <p> </p>
  542. <p> Narrow is basically the same as the above wide screen browser except that this lets the sidebar</p>
  543. <p> column (filter column) in list view be pushed down or up in layout flow to make room for the main</p>
  544. <p> column (table column) when the window is not wide enough. It is done by setting margin-left and</p>
  545. <p> padding-left of main column to 0 and setting max-width of main column, which is currently 1019px.</p>
  546. <p> Consequently, if window width is less than 1265px (= 40 (margin-left) + 1019 (main column) + 166</p>
  547. <p> (sidebar colum) + 40 (margin-right)), sidebar column is pushed down or up according to document</p>
  548. <p> tree order. This rule set is intended to be useful for normal to narrow window whose width is in</p>
  549. <p> range ca. 700-1400px. It can be used for wider window as well but there's no point to set the</p>
  550. <p> max-width of main column in order to move sidebar column when the window is wide enough.</p>
  551. <p> </p>
  552. <p> custom styles for Apple Support Communities board system introduced in 2014-06 (v 0.5) */</p>
  553. <p> </p>
  554. <p> /* ------------------------------------------------------------------------------- -----------------</p>
  555. <p> BODY</p>
  556. <p> */</p>
  557. <p> body.j-body-welome, /* Welcome */</p>
  558. <p> body.j-body-place, /* Community */</p>
  559. <p> body.j-body-yourwork, /* Content */</p>
  560. <p> body.j-body-home, /* Activity */</p>
  561. <p> body.j-body-yourconnections, /* People */</p>
  562. <p> body.j-body-preferences, /* Preferences */</p>
  563. <p> body.jive-body-content, /* Thread */</p>
  564. <p> body.jive-body-search, /* Search */</p>
  565. <p> body.jive-view-profile /* Profile */</p>
  566. <p> { /* added in v0.43 */</p>
  567. <p> background: white !important;</p>
  568. <p> }</p>
  569. <p> body {</p>
  570. <p> background: white;</p>
  571. <p> min-width: 0px !important;</p>
  572. <p> }</p>
  573. <p> #body-apple {</p>
  574. <p> width: 100% !important;</p>
  575. <p> min-width: 0px !important;</p>
  576. <p> }</p>
  577. <p></p>
  578. <p> </p>
  579. <p></p>
  580. <p></p>
  581. <p> /* ------------------------------------------------------------------------------- -----------------</p>
  582. <p> TEXT</p>
  583. <p> */</p>
  584. <p> /* line spacing */</p>
  585. <p> .jive-content { line-height: 1.25 !important; }</p>
  586. <p></p>
  587. <p> </p>
  588. <p></p>
  589. <p> </p>
  590. <p> /* ------------------------------------------------------------------------------- -----------------</p>
  591. <p> ASC HEADER AREA</p>
  592. <p> */</p>
  593. <p> #j-header,</p>
  594. <p> #j-compact-header,</p>
  595. <p> #j-footer { width: 100% !important; }</p>
  596. <p> </p>
  597. <p> /* navigation header (Apple Support Communities ...) */</p>
  598. <p> #j-header-wrap {</p>
  599. <p> padding: 0px 40px !important;</p>
  600. <p> margin: 0px 0px 15px !important;</p>
  601. <p> }</p>
  602. <p> #j-globalNav-bg {</p>
  603. <p> padding: 0pX !important;</p>
  604. <p> margin: 0px !important;</p>
  605. <p> }</p>
  606. <p> #j-satNav { overflow: visible !important; }</p>
  607. <p> #jive-breadcrumb { right: 40px !important; }</p>
  608. <p></p>
  609. <p> </p>
  610. <p></p>
  611. <p></p>
  612. <p> /* ------------------------------------------------------------------------------- -----------------</p>
  613. <p> ASC TOP PAGE</p>
  614. <p> */</p>
  615. <p> #jive-widgetframe-body_5780758 &gt; .content-large, /* discussions.apple.com */</p>
  616. <p> #jive-widgetframe-body_188974 &gt; .content-large, /* discussionsjapan.apple.com */ /* added in v0.42 */</p>
  617. <p> #jive-widgetframe-body_20835 &gt; .content-large /* discussionskorea.apple.com */ /* added in v0.42 */</p>
  618. <p> { /* added parent id in v0.41 */</p>
  619. <p> text-align: center !important;</p>
  620. <p> overflow-x: auto !important;</p>
  621. <p> overflow-y: hidden !important;</p>
  622. <p> }</p>
  623. <p> .apple-communities {</p>
  624. <p> display: inline-block !important;</p>
  625. <p> width: 1120px !important;</p>
  626. <p> text-align: left !important;</p>
  627. <p> }</p>
  628. <p></p>
  629. <p> </p>
  630. <p></p>
  631. <p></p>
  632. <p> /* ------------------------------------------------------------------------------- -----------------</p>
  633. <p> THREAD LIST BROWSER</p>
  634. <p> */</p>
  635. <p> /* show author name in 'Latest activity' column in detailed list view of threads */</p>
  636. <p> td.j-td-date &gt; span { display : inherit !important; }</p>
  637. <p></p>
  638. <p> </p>
  639. <p></p>
  640. <p> /* main section */</p>
  641. <p> #j-main { padding: 0px !important; }</p>
  642. <p></p>
  643. <p> </p>
  644. <p></p>
  645. <p> /* table cell title */</p>
  646. <p> .jive-table td.jive-table-cell-title { padding: 5px !important; }</p>
  647. <p> </p>
  648. <p> /* thread list view column widths */ /* added in v0.43 */</p>
  649. <p> .j-browse-details .j-td-title { max-width: none !important; }</p>
  650. <p> .j-browse-details .j-td-date {</p>
  651. <p> width: auto !important;</p>
  652. <p> max-width: 20% !important;</p>
  653. <p> }</p>
  654. <p></p>
  655. <p> </p>
  656. <p></p>
  657. <p> /* ------------------</p>
  658. <p> Hide Like and Bookmark columns in thread list view.</p>
  659. <p> */ /* added in v0.43 (optional) */</p>
  660. <p> /* ------------------ (currently commented out)</p>
  661. <p> .j-browse-details .j-td-likes,</p>
  662. <p> .j-browse-details .j-td-bookmarks { display: none !important; }</p>
  663. <p> .j-browse-details &gt; table.j-browse-list &gt; thead.j-rc4 &gt; tr &gt; th + th,</p>
  664. <p> .j-browse-details &gt; table.j-browse-list &gt; thead.j-rc4 &gt; tr &gt; th + th + th { display: none !important; }</p>
  665. <p> .j-browse-details &gt; table.j-browse-list &gt; thead.j-rc4 &gt; tr &gt; th + th + th + th { display: table-cell !important; }</p>
  666. <p> ------------------ */</p>
  667. <p></p>
  668. <p> </p>
  669. <p></p>
  670. <p> /* threads list view table tr td */</p>
  671. <p> .j-browse-details-tbody tr td { padding: 5px !important; }</p>
  672. <p></p>
  673. <p> </p>
  674. <p></p>
  675. <p> /* communities list view table tr td */</p>
  676. <p> .jive-communities-listing table tr td { padding: 5px !important; }</p>
  677. <p> </p>
  678. <p> /* thumbnails view width */</p>
  679. <p> .j-browse-content .j-thumb-view,</p>
  680. <p> .j-browse-places .j-browse-thumbnails,</p>
  681. <p> .j-browse-people .j-browse-thumbnails { width: 100% !important; }</p>
  682. <p> </p>
  683. <p> /* thumbnail view list item margin */ /* added in v0.43 */</p>
  684. <p> .j-browse-content .j-thumb-view &gt; li,</p>
  685. <p> .j-browse-places .j-browse-thumbnails &gt; li { margin-right: 20px !important; }</p>
  686. <p></p>
  687. <p> </p>
  688. <p></p>
  689. <p> /* social actions row */</p>
  690. <p> .apple-social-actions-wrapper { margin-right: 0px !important; }</p>
  691. <p> .j-thread .j-social-actions { margin-right: 40px !important; }</p>
  692. <p></p>
  693. <p> </p>
  694. <p></p>
  695. <p> /* apple header, subheader row ("Find helpful contents..." etc )*/ /* fixed in v0.43 */</p>
  696. <p> #apple-full-subheader,</p>
  697. <p> #apple-activity-subheader {</p>
  698. <p> padding: 0px 40px 15px !important;</p>
  699. <p> margin-bottom: 15px !important;</p>
  700. <p> }</p>
  701. <p> #apple-full-header h2,</p>
  702. <p> #apple-activity-header h2 { padding: 0px 40px !important; }</p>
  703. <p></p>
  704. <p> </p>
  705. <p></p>
  706. <p> /* page header */</p>
  707. <p> .j-body-place #jive-body &gt; header.j-page-header {</p>
  708. <p> margin-left: 40px !important;</p>
  709. <p> margin-right: 40px !important;</p>
  710. <p> width: auto !important;</p>
  711. <p> }</p>
  712. <p> </p>
  713. <p> /* browser filter row */</p>
  714. <p> #j-browse-filters { margin-bottom: 5px !important; }</p>
  715. <p></p>
  716. <p> </p>
  717. <p></p>
  718. <p> /* browser controls row */</p>
  719. <p> .j-type-row { margin-bottom: 0px !important; }</p>
  720. <p></p>
  721. <p> </p>
  722. <p></p>
  723. <p> /* browser controls content types (All Contents|User Tips|Discussions) width */</p>
  724. <p> #js-browse-controls .j-type-row .j-content-types { width: 90% !important; }</p>
  725. <p> </p>
  726. <p> /* browser controls view toggle (Thumbnails|Details) width */</p>
  727. <p> #js-browse-controls #j-item-view-toggle {</p>
  728. <p> width: 10% !important;</p>
  729. <p> display: table !important;</p>
  730. <p> }</p>
  731. <p></p>
  732. <p> </p>
  733. <p></p>
  734. <p> /* content filter row (All|Open|Answered|Threads) */</p>
  735. <p> .j-content-filter {</p>
  736. <p> background: white !important;</p>
  737. <p> margin-bottom: 10px !important;</p>
  738. <p> } </p>
  739. <p> </p>
  740. <p> /* container canvas */</p>
  741. <p> .j-contained {</p>
  742. <p> margin-left: 40px !important;</p>
  743. <p> margin-right: 40px !important;</p>
  744. <p> }</p>
  745. <p></p>
  746. <p> </p>
  747. <p></p>
  748. <p> /* category filter bar */</p>
  749. <p> .jive-content-filter {</p>
  750. <p> left: 0px !important;</p>
  751. <p> width: 80% !important;</p>
  752. <p> }</p>
  753. <p> .touchcarousel-wrapper { width: 100% !important; }</p>
  754. <p> .touchcarousel .tc-paging-container { width: 90% !important; } /* added in v0.41 */</p>
  755. <p></p>
  756. <p> </p>
  757. <p></p>
  758. <p> /* more search results available */</p>
  759. <p> #j-more-search-results-available { padding: 10px !important; }</p>
  760. <p> </p>
  761. <p> /* misc */</p>
  762. <p> .jive-widget { margin-bottom: 10px !important; }</p>
  763. <p> .j-column { margin-bottom: 10px !important; }</p>
  764. <p></p>
  765. <p> </p>
  766. <p></p>
  767. <p></p>
  768. <p> /* ------------------</p>
  769. <p> Treatment for narrow window</p>
  770. <p> Method 1 (minimum optimisation)</p>
  771. <p></p>
  772. <p> </p>
  773. <p></p>
  774. <p> Adjust thread list table's shift and margin to maximize its width.</p>
  775. <p> */ /* added in v0.43 */</p>
  776. <p> /* ------------------ (currently commented out)</p>
  777. <p> .j-layout-sl.j-browse-content .j-column-wrap-l { margin-left: -166px !important; }</p>
  778. <p> .j-layout-sl.j-browse-content .j-column-l { margin-left: 166px !important; }</p>
  779. <p> .j-layout-sl.j-browse-content .j-column-s { width: 166px !important; }</p>
  780. <p> ------------------ */</p>
  781. <p> /* ------------------</p>
  782. <p> Treatment for narrow window</p>
  783. <p> Method 2 (more beneficial to narrow window but has disadvantage for wide window)</p>
  784. <p> </p>
  785. <p> Let thread list table have full width but not exceed 1019px to make room for sidebar ui (filters &amp; actions).</p>
  786. <p> If window is wide enough (&gt;=1265px), sidebar ui is displayed next to thread list table,</p>
  787. <p> otherwise it is displayed below or above it (depending upon its document tree order).</p>
  788. <p> </p>
  789. <p> * sidebar width (constant) = 166px</p>
  790. <p> * thread table max width = 1019px</p>
  791. <p> * canvas margin-left = 40px</p>
  792. <p> * canvas margin-right = 40px</p>
  793. <p> ---------------------------------------</p>
  794. <p> * total = 1265px</p>
  795. <p> */ /* added in v0.5 */</p>
  796. <p> /* ------------------ (currently active) */</p>
  797. <p> .j-layout-sl.j-browse-content .j-column-wrap-l { max-width: 1019px !important; }</p>
  798. <p> .j-layout-sl.j-browse-content .j-column-wrap-l { margin-left: 0px !important; }</p>
  799. <p> .j-layout-sl.j-browse-content .j-column-l { margin-left: 0px !important; }</p>
  800. <p> .j-layout-sl.j-browse-content .j-column-s { width: 166px !important; }</p>
  801. <p> /* ------------------ */</p>
  802. <p></p>
  803. <p> </p>
  804. <p></p>
  805. <p> /* ------------------</p>
  806. <p> Swap left-right positions of thread list table and sidebar ui (filters &amp; actions)</p>
  807. <p> */ /* fixed in v0.43 */</p>
  808. <p> /* let thread list table float left */</p>
  809. <p> .j-layout-sl.j-browse-content .j-column-wrap-l,</p>
  810. <p> .j-layout-sl.j-browse-places .j-column-wrap-l { float: left !important; }</p>
  811. <p></p>
  812. <p> </p>
  813. <p></p>
  814. <p> /* let sidebar ui float right */</p>
  815. <p> .j-layout-sl.j-browse-content .j-column-s,</p>
  816. <p> .j-layout-sl.j-browse-places .j-column-s { float: right !important; }</p>
  817. <p> /* ------------------ */</p>
  818. <p></p>
  819. <p> </p>
  820. <p></p>
  821. <p></p>
  822. <p> /* ------------------------------------------------------------------------------- -----------------</p>
  823. <p> THREAD CONTENT BROWSER</p>
  824. <p> */</p>
  825. <p> /* thread header */</p>
  826. <p> .apple-thread-header {</p>
  827. <p> width: auto !important;</p>
  828. <p> margin-bottom: 10px !important;</p>
  829. <p> margin-left: 40px !important;</p>
  830. <p> }</p>
  831. <p> </p>
  832. <p> /* thread original post */</p>
  833. <p> .j-thread .jive-content { margin: 0px 40px 0px 140px !important; }</p>
  834. <p> </p>
  835. <p> /* thread replies ul */</p>
  836. <p> ul.jive-discussion-replies.jive-discussion-indent-0 { margin: 0px !important; }</p>
  837. <p> </p>
  838. <p> /* thread reply li */</p>
  839. <p> .jive-discussion-replies li.reply { margin-top: 15px !important; }</p>
  840. <p></p>
  841. <p> </p>
  842. <p></p>
  843. <p> /* thread view indent */</p>
  844. <p> .jive-discussion-indent-1 li.reply { padding-left: 15px !important; }</p>
  845. <p> </p>
  846. <p> /* thread info */</p>
  847. <p> .jive-thread-info {</p>
  848. <p> padding: 10px 40px !important;</p>
  849. <p> margin: 0px !important;</p>
  850. <p> }</p>
  851. <p> </p>
  852. <p> /* thread answer rollup */</p>
  853. <p> .j-answer-rollup { margin: 30px 0px !important; }</p>
  854. <p> </p>
  855. <p> /* thread post header (poster, date, response to) */</p>
  856. <p> .j-thread-post &gt; header {</p>
  857. <p> padding: 10px 20px 0px 20px !important;</p>
  858. <p> margin-bottom: 12px !important;</p>
  859. <p> }</p>
  860. <p> </p>
  861. <p> /* thread post section (message body) */</p>
  862. <p> .j-thread-post section {</p>
  863. <p> padding: 0px 20px !important;</p>
  864. <p> margin-bottom: 6px !important;</p>
  865. <p> }</p>
  866. <p> </p>
  867. <p> /* thread post footer (Like|Reply etc) */</p>
  868. <p> .j-thread-post footer { padding: 0px 15px !important; }</p>
  869. <p> .j-thread-post footer &gt; ul { padding: 2px !important; }</p>
  870. <p> .j-thread-post footer &gt; .acclaim-container { margin: 5px 0px !important; }</p>
  871. <p></p>
  872. <p> </p>
  873. <p></p>
  874. <p> /* thread rendered content */</p>
  875. <p> .jive-rendered-content { padding-bottom: 4px !important; }</p>
  876. <p> </p>
  877. <p> /* thread rendered content quote &amp; pre */</p>
  878. <p> .jive-rendered-content .jive-quote,</p>
  879. <p> .jive-rendered-content .jive-pre {</p>
  880. <p> margin: 5px 15px !important;</p>
  881. <p> }</p>
  882. <p></p>
  883. <p> </p>
  884. <p></p>
  885. <p> /* thread reply footer (Return to Community|Go to original post) */</p>
  886. <p> #jive-thread-reply-footer { margin-top: 10px !important; }</p>
  887. <p> </p>
  888. <p> /* more like this links, incomming links */</p>
  889. <p> #apple-related-threads { margin: 0px 40px !important; }</p>
  890. <p> #apple-related-threads .j-box { margin-bottom: 0px !important; }</p>
  891. <p> .j-icon-list li { padding: 3px 0px 3px 22px !important; }</p>
  892. <p></p>
  893. <p> </p>
  894. <p></p>
  895. <p></p>
  896. <p> /* ------------------------------------------------------------------------------- -----------------</p>
  897. <p> INLINE EDITOR</p>
  898. <p> */</p>
  899. <p> /* editor */</p>
  900. <p> .jive-discussion-replies li.addReply { margin: 50px 40px 0px !important; }</p>
  901. <p></p>
  902. <p> </p>
  903. <p></p>
  904. <p></p>
  905. <p> /* ------------------------------------------------------------------------------- -----------------</p>
  906. <p> ADVANCED EDITOR</p>
  907. <p> */</p>
  908. <p> /* content area */</p>
  909. <p> .j-thread .jive-content.jive-create-thread,</p>
  910. <p> .jive-body-formpage-document .jive-content.doc-page {</p>
  911. <p> margin: 0px 40px !important;</p>
  912. <p> padding: 0px !important;</p>
  913. <p> }</p>
  914. <p></p>
  915. <p> </p>
  916. <p></p>
  917. <p> /* header */</p>
  918. <p> .j-thread .jive-content.jive-create-thread h2,</p>
  919. <p> .jive-body-formpage-document .jive-content.doc-page h2 { padding: 0px !important; }</p>
  920. <p></p>
  921. <p> </p>
  922. <p></p>
  923. <p> /* editor panel */</p>
  924. <p> .j-thread .jive-content.jive-create-thread #jive-compose-title,</p>
  925. <p> .j-thread .jive-content.jive-create-thread .jive-editor-panel.jive-large-editor-panel,</p>
  926. <p> .jive-body-formpage-document .jive-content.doc-page #jive-compose-title,</p>
  927. <p> .jive-body-formpage-document .jive-content.doc-page .jive-editor-panel.jive-large-editor-panel { margin: 0px !important; }</p>
  928. <p></p>
  929. <p> </p>
  930. <p></p>
  931. <p> /* line height in editor */</p>
  932. <p> body.tiny_mce_content { line-height: inherit !important; }</p>
  933. <p></p>
  934. <p> </p>
  935. <p></p>
  936. <p> /* replying to */</p>
  937. <p> .jive-body-formpage-comment .jive-thread-message { margin: 0px !important; }</p>
  938. <p></p>
  939. <p> </p>
  940. <p></p>
  941. <p> /* buttons (Reply|Cancel) */</p>
  942. <p> .j-publishbar,</p>
  943. <p> .jive-body-formpage .jive-composebuttons { margin: 20px 40px 0px !important; }</p>
  944. <p></p>
  945. <p> </p>
  946. <p></p>
  947. <p></p>
  948. <p> /* ------------------------------------------------------------------------------- -----------------</p>
  949. <p> ACTIVITY STREAM</p>
  950. <p> */</p>
  951. <p> /* activity entry */</p>
  952. <p> .j-act-entry { padding: 5px 0px 10px 100px !important; }</p>
  953. <p></p>
  954. <p> </p>
  955. <p></p>
  956. <p> /* activity title */</p>
  957. <p> .j-body-home .j-act-title { padding: 5px 0px 5px 24px !important; }</p>
  958. <p></p>
  959. <p> </p>
  960. <p></p>
  961. <p> /* activity body &amp; comment */ /* added in v0.43 */</p>
  962. <p> .j-body-home .j-act-init,</p>
  963. <p> .j-view-profile .j-act-init { padding: 5px 0px 10px 100px !important; }</p>
  964. <p> .apple-activity-comments-wrapper { margin-left: 0px !important; }</p>
  965. <p></p>
  966. <p> </p>
  967. <p></p>
  968. <p> /* Like list */</p>
  969. <p> .j-act-grouped .j-act-g-item { padding: 3px !important; }</p>
  970. <p> </p>
  971. <p> </p>
  972. <p> /* ------------------------------------------------------------------------------- -----------------</p>
  973. <p> SEARCH RESULTS</p>
  974. <p> */</p>
  975. <p> /* search result entry */</p>
  976. <p> .j-search-results-main-container .j-search-result { padding: 10px !important; } /* added in v0.43 */</p>
  977. <p></p>
  978. <p> </p>
  979. <p></p>
  980. <p></p>
  981. <p> /* ------------------------------------------------------------------------------- -----------------</p>
  982. <p> DOC (USER TIP)</p>
  983. <p> */ /* added in v0.43 */</p>
  984. <p> /* user tip canvas */</p>
  985. <p> .jive-body-content.j-doc .j-column-wrap-l { margin: 0px 40px !important; }</p>
  986. <p></p>
  987. <p> </p>
  988. <p></p>
  989. <p></p>
  990. <p> /* ------------------------------------------------------------------------------- -----------------</p>
  991. <p> PROFILE</p>
  992. <p> */ /* added in v0.43 */</p>
  993. <p> /* header &amp; navigation bar (Bio|Activity|Content|Communities) */</p>
  994. <p> .j-view-profile .j-page-header { padding: 10px 40px !important; }</p>
  995. <p> .j-bigtab-nav { margin: 10px 40px !important; }</p>
  996. <p> </p>
  997. <p> /* Bio */</p>
  998. <p> .j-layout-l .j-column-wrap-l { width: 100% !important; }</p>
  999. <p></p>
  1000. <p> </p>
  1001. <p></p>
  1002. <p> /* Communities (places) sidebar ui blue marker adjustment</p>
  1003. <p> (according to the sidebar width changed to 166px from 180px for selector: .j-layout-sl.j-browse-places .j-column-s</p>
  1004. <p> in PLACES section) */</p>
  1005. <p> .j-view-profile .j-second-nav ul &gt; li.active { width: 156px !important; }</p>
  1006. <p></p>
  1007. <p> </p>
  1008. <p></p>
  1009. <p></p>
  1010. <p> /* ------------------------------------------------------------------------------- -----------------</p>
  1011. <p> PLACES</p>
  1012. <p> */ /* added in v0.43 */</p>
  1013. <p> /* latest activity column */</p>
  1014. <p> .j-browse-details .j-td-activity { max-width: 650px !important; }</p>
  1015. <p></p>
  1016. <p> </p>
  1017. <p></p>
  1018. <p></p>
  1019. <p> /* ------------------</p>
  1020. <p> Treatment for narrow window</p>
  1021. <p> Method 1 (minimum optimisation)</p>
  1022. <p></p>
  1023. <p> </p>
  1024. <p></p>
  1025. <p> Adjust community list table's shift and margin to maximize its width.</p>
  1026. <p> */ /* added in v0.43 */</p>
  1027. <p> /* ------------------ (currently commented out)</p>
  1028. <p> .j-layout-sl.j-browse-places .j-column-wrap-l { margin-left: -166px !important; }</p>
  1029. <p> .j-layout-sl.j-browse-places .j-column-l { margin-left: 166px !important; }</p>
  1030. <p> .j-layout-sl.j-browse-places .j-column-s { width: 166px !important; }</p>
  1031. <p> ------------------ */</p>
  1032. <p> /* ------------------</p>
  1033. <p> Treatment for narrow window</p>
  1034. <p> Method 2 (more beneficial to narrow window but has disadvantage for wide window)</p>
  1035. <p> </p>
  1036. <p> Let community list table have full width but not exceed 1019px to make room for sidebar ui (filters &amp; actions).</p>
  1037. <p> If window is wide enough (&gt;=1265px), sidebar ui is displayed next to community list table,</p>
  1038. <p> otherwise it is displayed below or above it (depending upon its document tree order).</p>
  1039. <p> </p>
  1040. <p> * sidebar width (constant) = 166px</p>
  1041. <p> * community table max width = 1019px</p>
  1042. <p> * canvas margin-left = 40px</p>
  1043. <p> * canvas margin-right = 40px</p>
  1044. <p> ---------------------------------------</p>
  1045. <p> * total = 1265px</p>
  1046. <p> */ /* added in v0.5 */</p>
  1047. <p> /* ------------------ (currently active) */</p>
  1048. <p> .j-layout-sl.j-browse-places .j-column-wrap-l { max-width: 1019px !important; }</p>
  1049. <p> .j-layout-sl.j-browse-places .j-column-wrap-l { margin-left: 0px !important; }</p>
  1050. <p> .j-layout-sl.j-browse-places .j-column-l { margin-left: 0px !important; }</p>
  1051. <p> .j-layout-sl.j-browse-places .j-column-l { padding-left: 0px !important; }</p>
  1052. <p> .j-layout-sl.j-browse-places .j-column-s { width: 166px !important; }</p>
  1053. <p> /* ------------------ */</p>
  1054. <p></p>
  1055. <p> </p>
  1056. <p></p>
  1057. <p></p>
  1058. <p> } /* end of narrow browsers. */</p>
  1059. <p> } /* end of moz-document */</p>
  1060. <p> </p>
  1061. </pre>
  1062. <p></p></body>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!