[Sommaire] [Imprimer]

   1  /**********************************************************************/
   2  /* Template: Bulletproof for Serendipity (http://www.s9y.org)         */
   3  /* Authors: Matthias Mees, David Cummins and Don Chambers             */
   4  /*                                                                    */
   5  /* Stylesheet for the Bulletproof admin interface by Don Chambers     */
   6  /* Fixed width design                                                 */
   7  /*                                                                    */
   8  /* http://s9y-bulletproof.com                                         */
   9  /**********************************************************************/
  10  
  11  body {
  12      font: 100.01% Verdana, Arial, Helvetica, sans-serif;
  13      margin: 0;
  14      text-align: center;
  15      background: #888888;
  16      direction: {LANG_DIRECTION};
  17  }
  18  
  19  /* body ID */
  20  /* styles to this ID or body would have the same effect */
  21  #serendipity_admin_page { 
  22  }
  23  
  24  /* these are a default for headings not styled more specifically through an additional class */
  25  h1 {font-size: 170%;}
  26  h2 {font-size: 150%;}
  27  h3 {font-size: 140%;}
  28  h4 {font-size: 125%;}
  29  
  30  /* all links except those specifically overridden by other class or id further down*/
  31  a:link, a:visited, a:active {
  32     text-decoration: none;
  33     color: #055BC6;
  34  }
  35  
  36  a:hover {
  37      text-decoration: none;
  38      color: #FF6600;
  39  }
  40  
  41  /* approximately equal to frontend #wrapper but does not include footer         */
  42  #serendipityAdminFrame {
  43      text-align: left;
  44      margin: 0px auto;
  45      border: 0;
  46      width: 970px;
  47      background: #ffffff url('{TEMPLATE_PATH}img/bp_admin_adminframe.png') top left repeat-y;
  48  }
  49  
  50  /* container is a table, so font must be set on tbody to affect td's */
  51  /* this font size affects everything except #footer                  */
  52  #serendipityAdminFrame tbody {
  53      font-size: 80%;
  54  }
  55  
  56  /* equal to frontend #serendipity_banner */
  57  #serendipityAdminBanner {
  58      color: #ffffff;
  59      background: #5792D8 url('{TEMPLATE_PATH}img/bp_admin_banner.png') top left no-repeat;
  60      height: 105px;
  61      padding: 0;
  62      line-height: 0.7em;
  63  }
  64  
  65  /* First line in banner, ie 'Serendipity Administration Suite' */
  66  #serendipityAdminBanner h1 {
  67      font-weight: bold;
  68      padding: 0;
  69      margin: 12px 0 0 15px;
  70  }
  71  
  72  /* Second line in banner, ie blog name */ 
  73  #serendipityAdminBanner h2 {
  74      font-weight: normal;
  75      padding: 0;
  76      margin-left: 15px;
  77  }
  78  
  79  /* approximately equal to BP frontend #sitenav when located below header */
  80  #serendipityAdminInfopane {
  81      background: #CCCCCC url('{TEMPLATE_PATH}img/bp_admin_infopane.png') top left no-repeat;
  82      text-align: right;
  83      font-size: 75%;
  84      line-height: 70%;
  85      height: 24px;
  86      color: #055BC6;
  87      padding:0 10px 0 0;
  88  }
  89  
  90  /* approximately equal to frontend #content */
  91  .serendipityAdminContent {
  92      padding: 3px 8px 0 8px;
  93      text-align: left;
  94  }
  95  
  96  /* all content identified as a span, notably config descriptions */
  97  /* !important required to override in-line styles                */
  98  .serendipityAdminContent span{
  99      color: #055BC6 !important;
 100  }
 101  
 102  /* welcome message on sign-on screen, ie */
 103  /* 'welcome to serendipity admin suite'  */
 104  /* 'please enter your credentials'       */
 105  #serendipityAdminWelcome{
 106      color: #055BC6;
 107  }
 108  
 109  /* 'back to blog' link in bottom left of sign-on screen */
 110  #serendipityBackToBlog {
 111      padding: 0 0 10px 10px;
 112  }
 113  /* welcome back text displayed after successfully logging in */
 114  .serendipityWelcomeBack {
 115      color: #055BC6;
 116      margin: 0;
 117  }
 118  
 119  /***** SIDEBAR STYLES *****/
 120  
 121  /* s9y v1.2 class between top and bottom menu blocks */
 122  /* display: none prevents excess space (<br />) from */
 123  /* appearing between these 2 menu blocks and the     */
 124  /* menu blocks in between                            */
 125  .serendipitySideBarMenuSpacer {
 126      display: none;
 127  }
 128  
 129  /* Equal to frontend sidebar - positioned left due to table structure */
 130  #serendipitySideBar {
 131      width: 208px;
 132      padding: 3px 0 0 0;
 133  }
 134  
 135  /* style certain elements of admin frontpage navigation blocks the same      */
 136  .further_links,
 137  /* serendipitySideBarMenu is a combination of sidebaritem and sidebarcontent */
 138  /* actual width will be sidebar width less side margins and side borders     */
 139  ul.serendipitySideBarMenu {
 140      list-style: none;
 141      overflow: hidden; 
 142      background: #EEEEEE url('{TEMPLATE_PATH}img/bp_admin_sidebar_body.png') repeat-y;
 143      padding: 0;
 144      width: 200px;
 145      margin: 0 0 2px 8px;
 146  }
 147  
 148  /* just the further links container */
 149  .further_links {
 150  /* for width equal to left sidebar links, set width equal to sidebar less */
 151  /* serendipitySideBarMenu left & right margins plus L&R borders.          */
 152  /* Width does not need to be uniquely defined if ul.serentipitySideBarMenu*/
 153  /* has no borders or L&R padding                                          */
 154      float: right;
 155  }
 156  
 157  /* navigation within the container of further_links */
 158  .further_links ul {
 159      list-style: none;
 160      padding: 0;
 161      margin: 0;
 162  }
 163  
 164  /* all <li>s -  serendipitySideBarMenuHead then needs to be styled separately    */
 165  /* this can change when all plugins have been updated to include s9y ver.1.2     */
 166  /* class of serendipitySideBarMenuLink which applies only to navigational links  */
 167  /* just as serendipitySideBarMenuHead only applies to the title even though both */
 168  /* are <li>s. */
 169  /* Update: All plugins HAVE been modified to include class serendipitySideBarLink*/
 170  /* The method below, however, works for users not using the most recent plugins. */
 171  .further_links li,
 172  .serendipitySideBarMenu li{
 173      line-height: 105%
 174  }
 175  
 176  .further_links li a,
 177  .serendipitySideBarMenu li a {
 178      font-size: 90%;
 179      padding-left: 5px;
 180  }
 181  
 182  /* these are the titles for each menu block */
 183  .further_links .further_links_head,
 184  li.serendipitySideBarMenuHead {
 185  /* this background is a default in the event additional menu blocks are added in the future, but not presently defined */
 186      background: #B0BEC0 url('{TEMPLATE_PATH}img/bp_admin_sidebar_default.png') no-repeat;
 187      font-weight: bold;
 188      font-size: 100%;
 189      color: #30303f;
 190      height: 30px;
 191      padding: 0 0 0 5px;
 192      line-height: 28px;
 193      margin: 0 0 5px 0;
 194      overflow: hidden;
 195  }
 196  
 197  /* unique graphics for the middle 4 menu blocks and further_links */
 198  ul.serendipitySideBarMenuEntry .serendipitySideBarMenuHead {
 199      background: #B0BEC0 url('{TEMPLATE_PATH}img/bp_admin_sidebar_entries.png') no-repeat;
 200  }
 201  ul.serendipitySideBarMenuMedia .serendipitySideBarMenuHead {
 202      background: #B0BEC0 url('{TEMPLATE_PATH}img/bp_admin_sidebar_media.png') no-repeat;
 203  }
 204  ul.serendipitySideBarMenuAppearance .serendipitySideBarMenuHead {
 205      background: #B0BEC0 url('{TEMPLATE_PATH}img/bp_admin_sidebar_appearance.png') no-repeat;
 206  }
 207  ul.serendipitySideBarMenuUserManagement .serendipitySideBarMenuHead {
 208      background: #B0BEC0 url('{TEMPLATE_PATH}img/bp_admin_sidebar_admin.png') no-repeat;
 209  }
 210  .further_links .further_links_head {
 211      background: #B0BEC0 url('{TEMPLATE_PATH}img/bp_admin_sidebar_further.png') no-repeat;
 212  }
 213  
 214  /* set background for all menu block footers including any added in the future, but not presently defined */
 215  .further_links .further_links_foot,
 216  ul.serendipitySideBarMenu .serendipitySideBarMenuFoot {
 217  background: #EEEEEE url('{TEMPLATE_PATH}img/bp_admin_sidebar_foot.png') no-repeat;
 218      display: block !important;
 219      height: 8px;
 220      margin: 3px 0 0 0;
 221      font-size: 0; /* ie6, otherwise item is too tall */
 222  }
 223  
 224  /* main links (top 2) and logout links (bottom 2) are styled to */
 225  /* look like buttons - each of which has a unique icon          */
 226  ul.serendipitySideBarMenuLogout,
 227  ul.serendipitySideBarMenuMain {
 228      background: none;
 229      margin-bottom: 0;
 230      padding: 0;
 231  }
 232  
 233  ul.serendipitySideBarMenuLogout li,
 234  ul.serendipitySideBarMenuMain li {
 235      margin-bottom: 3px;
 236      overflow: hidden;
 237  }
 238  
 239  ul.serendipitySideBarMenuLogout li a,
 240  ul.serendipitySideBarMenuMain li a,
 241  ul.serendipitySideBarMenuLogout li a:hover,
 242  ul.serendipitySideBarMenuMain li a:hover{
 243      font-size: 100%;
 244      font-weight: bold;
 245      margin: 0;
 246      padding-left: 5px;
 247      line-height: 28px;
 248  }
 249  
 250  ul.serendipitySideBarMenuMain a,
 251  ul.serendipitySideBarMenuLogout a{
 252  /* this background is a default in the event additional links are added in the future, but not presently defined */
 253  /* it is an orange button with a double blue arrow pointing right */
 254      background: #FBB73C url('{TEMPLATE_PATH}img/bp_admin_button_default.png') no-repeat;
 255      display: block;
 256      height: 33px;
 257  }
 258  
 259  /* default button hover and active states */
 260  ul.serendipitySideBarMenuMain a:hover,
 261  ul.serendipitySideBarMenuLogout a:hover{
 262      background: #FDE33F url('{TEMPLATE_PATH}img/bp_admin_button_default_h.png') no-repeat;
 263  }
 264  
 265  ul.serendipitySideBarMenuMain a:active,
 266  ul.serendipitySideBarMenuLogout a:active{
 267      background: #FDE33F url('{TEMPLATE_PATH}img/bp_admin_button_default_a.png') no-repeat;
 268      line-height: 30px !important;
 269  }
 270  
 271  /* unique images for each of the main and logout links - normal, hover and active states */
 272  li.serendipitySideBarMenuMainFrontpage a{
 273      background: #FBB73C url('{TEMPLATE_PATH}img/bp_admin_button_frontpage.png') no-repeat;
 274  }
 275  
 276  li.serendipitySideBarMenuMainFrontpage a:hover{
 277      background: #FDE33F url('{TEMPLATE_PATH}img/bp_admin_button_frontpage_h.png') no-repeat;
 278  }
 279  
 280  li.serendipitySideBarMenuMainFrontpage a:active{
 281      background: #FDE33F url('{TEMPLATE_PATH}img/bp_admin_button_frontpage_a.png') no-repeat;
 282      line-height: 30px !important;
 283  }
 284  
 285  li.serendipitySideBarMenuMainPersonal a{
 286      background: #FBB73C url('{TEMPLATE_PATH}img/bp_admin_button_personal.png') no-repeat;
 287  }
 288  
 289  li.serendipitySideBarMenuMainPersonal a:hover{
 290      background: #FDE33F url('{TEMPLATE_PATH}img/bp_admin_button_personal_h.png') no-repeat;
 291  }
 292  
 293  li.serendipitySideBarMenuMainPersonal a:active{
 294      background: #FDE33F url('{TEMPLATE_PATH}img/bp_admin_button_personal_a.png') no-repeat;
 295      line-height: 30px !important;
 296  }
 297  
 298  li.serendipitySideBarMenuLogoutWeblog a{
 299      background: #FBB73C url('{TEMPLATE_PATH}img/bp_admin_button_weblog.png') no-repeat;
 300  }
 301  
 302  li.serendipitySideBarMenuLogoutWeblog a:hover{
 303      background: #FDE33F url('{TEMPLATE_PATH}img/bp_admin_button_weblog_h.png') no-repeat;
 304  }
 305  
 306  li.serendipitySideBarMenuLogoutWeblog a:active{
 307      background: #FDE33F url('{TEMPLATE_PATH}img/bp_admin_button_weblog_a.png') no-repeat;
 308      line-height: 30px !important;
 309  }
 310  
 311  li.serendipitySideBarMenuLogoutLogout a{
 312      background: #FBB73C url('{TEMPLATE_PATH}img/bp_admin_button_logout.png') no-repeat;
 313  }
 314  
 315  li.serendipitySideBarMenuLogoutLogout a:hover{
 316      background: #FDE33F url('{TEMPLATE_PATH}img/bp_admin_button_logout_h.png') no-repeat;
 317  }
 318  
 319  li.serendipitySideBarMenuLogoutLogout a:active{
 320      background: #FDE33F url('{TEMPLATE_PATH}img/bp_admin_button_logout_a.png') no-repeat;
 321      line-height: 30px !important;
 322  }
 323  
 324  /* do not show MenuFoot for the button type links */
 325  ul.serendipitySideBarMenuLogout .serendipitySideBarMenuFoot,
 326  ul.serendipitySideBarMenuMain .serendipitySideBarMenuFoot {
 327      display: none !important;
 328  }
 329  
 330  /***** END OF SIDEBAR STYLES *****/
 331  
 332  /* Admin items presented consecutively such as entries  */
 333  /* comments, users, groups, templates etc.              */
 334  /* first class common to both odd and even items        */
 335  .serendipity_admin_list_item {
 336      border: 1px solid #72878A;
 337      margin: 0 0 5px 0;
 338  }
 339  /* only the uneven/odd list items */
 340  .serendipity_admin_list_item_uneven {
 341      background: #DFDFDF;
 342  }
 343  
 344  /* only the even list items */
 345  .serendipity_admin_list_item_even {
 346      background: #EEEEEE;
 347  }
 348  
 349  /* admin messages reporting an error */
 350  .serendipityAdminMsgError {
 351      text-align: center; 
 352      font-weight: bold;
 353      margin: 10px 0;
 354      color: red;
 355      font-size: 100%;
 356  }
 357  
 358  /* any message indicating no error */
 359  .serendipityAdminMsgSuccess {
 360      text-align: center;
 361      font-weight: bold;
 362      margin: 10px 0; 
 363      color: green;
 364      font-size: 100%;
 365  }
 366  
 367  /* used in spartacus and plugin config*/
 368  .serendipityAdminMsgNotice,
 369  .serendipityAdminMsgNote {
 370      text-align: center;
 371      font-weight: bold;
 372      margin: 10px 0;
 373      color: blue;
 374      font-size: 100%;
 375  }
 376  
 377  /* new input classes available in s9y v1.2 */
 378  .input_checkbox, .input_radio, .input_file, .input_textbox, .input_button, label, select, textarea{
 379      font: 100% Verdana, Arial, Helvetica, sans-serif;
 380  }
 381  .input_textbox, select, textarea {
 382      border: 1px solid #72878A;
 383      background: #F8F9FA;
 384  }
 385  
 386  /* style for text of input buttons */
 387  /* new class of input_button also exists for all input buttons */
 388  input.serendipityPrettyButton,
 389  a.serendipityPrettyButton {
 390      text-decoration: none;
 391      font-weight: bold;
 392      padding: 2px;
 393      margin: 2px 2px 0px 2px;
 394      color: #ffffff;
 395      cursor: pointer;
 396      background: #055BC6 url('{TEMPLATE_PATH}img/bp_admin_prettybutton.png') 0% 50%;
 397      border: 1px solid #055BC6;
 398      font-size: 90%;
 399  }
 400  
 401  /* make anchor version look more like the input version */
 402  a.serendipityPrettyButton {
 403      padding: 3px;
 404  }
 405  
 406  /* entry preview window  */
 407  #serendipity_iframe {
 408      border: 1px solid #72878A !important;
 409      text-align: left !important;
 410      margin: 0; }
 411  
 412  
 413  /* this exists exclusively in /templates/default/admin/media_items.tpl */
 414  .serendipityImageButton {
 415      cursor: pointer; }
 416  
 417  /* icon links, such as edit, delete, reply, etc     */
 418  /* IconLink is used when icon is left of link text  */
 419  /* IconLinkRight is when icon is right of link text */
 420  /* Style approx the same except for margin settings */
 421  /* which provide separation between icon and text   */
 422  a:link.serendipityIconLink,
 423  a:visited.serendipityIconLink {
 424      border: 0;
 425      font-weight: bold;
 426      text-decoration: none;
 427      margin-right: 4px; }
 428  
 429  .serendipityIconLink img {
 430      margin-right: 2px;
 431      vertical-align: bottom;
 432      border: 0; }
 433  
 434  a:link.serendipityIconLinkRight,
 435  a:visited.serendipityIconLinkRight {
 436      border: 0;
 437      font-weight: bold;
 438      text-decoration: none;
 439      margin-left: 4px; }
 440  
 441  .serendipityIconLinkRight img {
 442      margin-left: 2px;
 443      vertical-align: bottom;
 444      border: 0; }
 445  
 446  /* this is not really implemented, but classes do exist in backend code */
 447  .direction_ltr {direction: ltr;}
 448  .direction_rtl {direction: rtl;}
 449  
 450  /*style for block that appears above list of available plugins available for installation */
 451  /* usually contains a filter dropdown box */ 
 452  .serendipity_pluginlist_header form{
 453      border: 1px solid #72878A;
 454      padding: 10px;
 455      margin: 0 0 15px 0;
 456      background: #EEEEEE;
 457  }
 458  
 459  /* style for block that appears above each type of plugin (Backend: User management, Frontend: Entry Related, etc)*/
 460  .serendipity_pluginlist_section {
 461      margin:20px 0 20px 0;
 462      padding:10px;
 463      border:1px solid #72878A;
 464      color:#505050;
 465      line-height:1.5em;
 466      background: #EEEEEE;
 467  }
 468  
 469  /* custom fields within Advanced Options for entries */
 470  #serendipity_customfields {
 471      width: 100%; }
 472  
 473  #serendipity_customfields .customfield_name {
 474      background-color: #FAFAFA;
 475      width: 25%;
 476      padding-left: 5px; }
 477  
 478  #serendipity_customfields .customfield_value {
 479      background-color: #FFFFFF;
 480      width: 75%;
 481      padding: 0;
 482  }
 483  
 484  #serendipity_customfields .customfield_value textarea {
 485      width: 100%;
 486      height: 100px;
 487      padding: 0;
 488      margin:0; }
 489  
 490  /* left side window for choosing media to insert into entry */
 491  #serendipityAdminBodyImageSelectorTree {
 492      width: auto;
 493      font-size: 73%;
 494  }
 495  
 496  #serendipityAdminBodyImageSelectorTree tbody{
 497      font-size: 80%;
 498  }
 499  
 500  /* right side window for choosing media to insert into entry */
 501  /* will default to body background if not specified */
 502  #serendipityAdminBodyImageSelector {
 503      width: auto;
 504      margin: 0px;
 505      background: #FFFFFF;
 506      font-size: 80%;
 507  }
 508  
 509  #serendipityAdminBodyImageSelector tbody{
 510      font-size: 80%;
 511  }
 512  
 513  /* Manage Styles - template name in list of available templates */
 514  /* !important required to override inline style */
 515  span.serendipityTemplateSelectName {
 516      color: #055BC6 !important;
 517  }
 518  
 519  /* New v1.2 class - a hover effect in the plugin list */
 520  .serendipity_PluginAdminHighlight {
 521      background: #ededed;
 522  }
 523  
 524  /* Added class in s9y v1.2 */
 525  /* container between AdminFrame and AdminFooter */
 526  /* can be used to emulate a footer while allowing */
 527  /* "powered by" text to fall below everything else in the actual footer */
 528  .serendipityAdminFooterSpacer {
 529      display: none;
 530  }
 531  
 532  /* Equal to frontend #footer but falls below of #serendipityAdminFrame wrapper */
 533  #serendipityAdminFooter {
 534      border: 0;
 535  /*have to pick up some of the styles from wrapper so they apply to footer div below table*/
 536      margin: 0 auto;
 537      width: 970px;
 538      background: #CCCCCC url('{TEMPLATE_PATH}img/bp_admin_footer.png') top left no-repeat; 
 539      height: 35px; 
 540      font-size: 70%;
 541      line-height: 30px;
 542      padding: 0;
 543  }
 544