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