Changeset 5129
- Timestamp:
- Mar 13, 2010, 5:57:44 PM (14 years ago)
- Location:
- trunk/themes/default
- Files:
-
- 7 deleted
- 2 edited
Legend:
- Unmodified
- Added
- Removed
-
trunk/themes/default/template/header.tpl
r5123 r5129 40 40 {if not empty($page_refresh) }<meta http-equiv="refresh" content="{$page_refresh.TIME};url={$page_refresh.U_REFRESH}">{/if} 41 41 42 <script type="text/javascript" src="{$ROOT_URL} {$themeconf.js_dir}/scripts.js"></script>42 <script type="text/javascript" src="{$ROOT_URL}themes/default/js/scripts.js"></script> 43 43 <!--[if lt IE 7]> 44 <script type="text/javascript" src="{$ROOT_URL} {$themeconf.js_dir}/pngfix.js"></script>44 <script type="text/javascript" src="{$ROOT_URL}themes/default/js/pngfix.js"></script> 45 45 <![endif]--> 46 46 -
trunk/themes/default/theme.css
r5123 r5129 1 2 /* template css */ 3 @import "menubar.css"; 4 @import "content.css"; 5 @import "thumbnails.css"; 6 @import "picture.css"; 7 @import "default-layout.css"; 8 /* Override properties with import local file */ 9 @import "local-layout.css"; 10 11 @import "default-colors.css"; 12 1 /** 2 * Menubar 3 */ 4 #menubar { 5 float: left; 6 margin: 0 0 10px 1em; 7 padding: 0; 8 display: inline; 9 } 10 11 #menubar DL, #menubar DT, #menubar DD { 12 margin: 0; padding: 0; display: block; 13 } 14 15 #menubar .button { 16 margin: -2px 2px 2px; 17 width: auto; 18 padding: 0; 19 text-indent: 0; 20 list-style: none; 21 text-align: center; 22 float: right; 23 } 24 25 /* H2 properties copied here */ 26 #menubar DT { 27 font-weight: bold; 28 padding: 5px 5px 5px 5px; 29 font-size: 120%; 30 text-align: center; 31 } 32 33 #menubar UL, 34 #menubar FORM, 35 #menubar P { 36 font-size: 92%; 37 margin: 10px 0 10px 5px; 38 } 39 #menubar UL { 40 list-style-type: square; 41 list-style-position: inside; 42 padding: 0 0 0 2px; 43 } 44 #menubar UL UL { 45 font-size: 100%; 46 margin-top: 0; 47 margin-bottom: 0; 48 } 49 50 #menubar LI.selected A { 51 font-weight: bold; 52 } 53 54 #menubar LI.selected LI A { 55 font-weight: normal; 56 } 57 58 #menubar .menuInfoCatByChild { 59 font-size: 80%; 60 font-style: italic; 61 } 62 63 #menubar INPUT { 64 text-indent: 2px; 65 } 66 67 /* quickconnect form */ 68 FORM#quickconnect { 69 margin: 5px; 70 padding: 0; 71 } 72 73 FORM#quickconnect FIELDSET { 74 margin: 0; 75 padding: 0; /*IE6 requires padding 0*/ 76 } 77 78 FORM#quickconnect FIELDSET DIV { 79 margin: 8px 5px; 80 padding: 0; 81 } 82 83 #menubar #menuTagCloud { 84 text-align: center; 85 margin: 5px 0; 86 } 87 88 #menubar #menuTagCloud SPAN { 89 white-space: nowrap; 90 } 91 92 /** 93 * Content 94 */ 95 .content { 96 margin-right: 1em; 97 margin-bottom: 1em; /* when it's longer than menu bar */ 98 } 99 100 BODY#theCommentsPage .content, 101 BODY#theUploadPage .content, 102 BODY#theRegisterPage .content, 103 BODY#theIdentificationPage .content, 104 BODY#theProfilePage .content, 105 BODY#theSearchPage .content, 106 BODY#theAboutPage .content, 107 BODY#thePopuphelpPage .content, 108 BODY#thePasswordPage .content, 109 BODY#theNotificationPage .content, 110 BODY#theTagsPage .content, 111 BODY#theNBMPage .content 112 { 113 margin: 1em; 114 } 115 116 .content H2 { margin-bottom: 3px;} /*<- for IE otherwise calendar select is displaced to middle of page*/ 117 118 .content .navigationBar, .content .additional_info, .content .calendarBar { 119 margin: 8px 4px; 120 text-align: center; 121 } 122 123 .content .pageNumberSelected { 124 font-style: italic; 125 font-weight: bold; 126 } 127 128 .content .additional_info { 129 font-size: 110%; 130 } 131 132 133 /* actions */ 134 UL.categoryActions { 135 margin: 0 2px; 136 width: auto; 137 padding: 0; 138 text-indent: 0; 139 list-style: none; 140 text-align: center; 141 } 142 143 .content DIV.titrePage UL.categoryActions { 144 float: right; 145 text-align: center; 146 } 147 148 .content DIV.titrePage { 149 padding: 0 0 3px; 150 } 151 152 .content UL.categoryActions LI { 153 display: inline; 154 } 155 156 .content UL.categoryActions A IMG, UL.categoryActions A { 157 border: none; 158 margin-bottom: -5px; 159 } 160 161 /* begin chronology/calendar elements*/ 162 .content DIV.calendarViews { 163 display: block; 164 float: right; 165 margin: 2px 0 0; 166 } 167 168 SPAN.calItem, SPAN.calItemEmpty { 169 font-weight: bold; 170 margin: 0 1px; 171 } 172 173 SPAN.calItem A { border:0 } 174 175 .content DIV.calendarCalBar { 176 margin: 10px 10px; 177 text-align: left; 178 } 179 180 SPAN.calCalHead { 181 font-weight: bold; 182 font-size: 110%; 183 margin: 0 2px; 184 } 185 186 SPAN.calCal { margin: 0 2px; } 187 188 /* nice looking month calendar*/ 189 TABLE.calMonth { 190 border: none; 191 border-collapse: collapse; 192 margin-bottom: 10px; /*<-IE ignores this */ 193 } 194 195 TD.calDayCellFull, TD.calDayCellEmpty, TD.calDayCellBlank { 196 vertical-align: top; 197 font-weight: bold; 198 font-size: 18px; 199 } 200 201 TD.calDayHead { 202 font-weight: bold; 203 font-size: 12px; 204 text-align: center; 205 } 206 207 DIV.calImg { 208 overflow: hidden; 209 vertical-align: bottom; 210 z-index: 1; 211 position: relative; /*<- this required by IE*/ 212 } 213 214 .calImg img { 215 position: relative; 216 border: 0; 217 } 218 219 .calBackDate { 220 padding-left: 4px; 221 padding-top: 0px; 222 z-index: 2; 223 position: absolute; 224 vertical-align: top; 225 color: #000; 226 } 227 228 .calForeDate { 229 padding-left: 5px; 230 padding-top: 1px; 231 z-index: 3; 232 position: absolute; 233 vertical-align: top; 234 color: #fff; 235 } 236 237 /* Category thumbnails on main page, CSS code inspired from MOD subcatify */ 238 .content UL.thumbnailCategories { 239 margin: 0; 240 padding: 0; 241 list-style: none; 242 overflow: hidden; 243 width: 100%; 244 } 245 246 .content UL.thumbnailCategories LI { 247 margin:0; 248 padding:0; 249 float:left; 250 } 251 252 .content DIV.thumbnailCategory { 253 display:block; 254 padding: 2px 0px 0px 2px; 255 margin: 5px; 256 } 257 258 .content DIV.thumbnailCategory DIV.description { 259 font-size: 90%; 260 overflow: auto; 261 /*width: inherit;*/ 262 } 263 264 .content DIV.thumbnailCategory DIV.description H3 { 265 text-align: left; 266 background: transparent; 267 margin: 0; 268 padding: 0.1em; 269 font-size: 120%; 270 } 271 272 .content DIV.thumbnailCategory DIV.description P { 273 margin: 0; 274 } 275 276 .content DIV.thumbnailCategory DIV.illustration { 277 text-align: left; 278 margin: 2px 0 0 2px; 279 float: left; 280 } 281 282 283 /* User comments */ 284 DIV#comments { 285 padding-left: 5px; 286 padding-right: 5px; 287 } 288 289 DIV#comments DIV.description { 290 font-size: 100%; 291 } 292 293 /* Thumbnails */ 294 .content UL.thumbnails SPAN.thumbLegend { 295 font-size: 90%; 296 overflow: hidden;/* oversized legend is clipped */ 297 } 298 299 /* Thumbnail "elastic" layout */ 300 .content UL.thumbnails { 301 margin: 0; 302 padding: 0; 303 list-style: none; 304 text-align: center; /* to center the whole collection in .content */ 305 } 306 .content UL.thumbnails LI { display: inline } 307 308 .content UL.thumbnails SPAN.wrap1 { 309 margin: 0 5px 5px 5px; 310 display: table-cell; display: inline-table; 311 display: inline-block;/* Why 3 display option ??? */ 312 vertical-align: top; /* OK with Opera and IE6 not Geko */ 313 text-align: center; /* to center the thumbnail and legend in Geko/Opera */ 314 } 315 .content UL.thumbnails SPAN.wrap2 { 316 margin: 0; /* important reset the margins */ 317 display: table-cell;/* block prevents vertical-align here */ 318 vertical-align: middle;/* Ok with Opera and Geko not IE6 */ 319 } 320 .content UL.thumbnails SPAN.wrap2 A, 321 .content UL.thumbnails LABEL { 322 display: block; 323 border-bottom: none; 324 } 325 .content UL.thumbnails IMG { 326 margin-bottom: -4px; /* why ??? something wrong with Geko and Opera ignored by IE6*/ 327 } 328 329 /** 330 * Picture 331 */ 332 #imageHeaderBar { 333 padding-top: 2px; 334 padding-bottom: 2px; 335 margin-top: 4px; 336 overflow: hidden; 337 width: 100%; 338 } 339 340 #imageHeaderBar .browsePath { 341 float: left; 342 margin-left: 10px; 343 } 344 345 #imageHeaderBar .imageNumber { 346 float: right; 347 margin-right: 10px; 348 } 349 350 #imageHeaderBar H2 { 351 text-align: center; 352 padding: 0; 353 clear: both; 354 } 355 356 #imageToolBar { 357 text-align: center; 358 position: relative; 359 clear: both; 360 margin-bottom: 4px; 361 padding: 0; 362 height: 28px; 363 } 364 365 #imageToolBar A, #imageToolBar IMG { 366 display: block; 367 border: none; 368 margin: 0; padding: 0; 369 } 370 #imageToolBar A { width: 48px; } 371 #imageToolBar IMG { margin: 2px auto; } 372 #imageToolBar .randomButtons A { float: left; } 373 #imageToolBar .navButtons A { float: right; } 374 375 #theImage { 376 clear: left; 377 text-align: center; 378 } 379 380 #theImage>IMG { 381 display: block; 382 margin: 0 auto; 383 border: none; 384 } 385 386 #linkPrev { 387 float: left; 388 margin-right: 10px; 389 margin-left: 5px; 390 } 391 392 #linkNext { 393 float: right; 394 margin-right: 5px; 395 margin-left: 10px; 396 } 397 398 TABLE.infoTable .label { 399 font-weight: bold; 400 text-align: right; 401 padding-right: 0.5em; 402 } 403 404 TABLE.infoTable TD.value UL { 405 margin: 0; 406 padding: 0 0 0 1.5em; 407 list-style-type: square; 408 } 409 410 .thumbnailCategories LI { list-style: none; } 411 412 .rateButton, .rateButtonSelected, .rateButtonStarFull, .rateButtonStarEmpty { 413 padding:0; 414 border:0; 415 } 416 417 .rateButton, .rateButtonStarFull, .rateButtonStarEmpty { 418 cursor: pointer; 419 } 420 421 .rateButtonSelected { 422 font-weight:bold; 423 font-size:120%; 424 } 425 426 .rateButtonStarFull { 427 background: url('icon/rating-stars.gif') no-repeat scroll; background-position:-16px center; width:16px; 428 } 429 430 .rateButtonStarEmpty { 431 background: url('icon/rating-stars.gif') no-repeat scroll; background-position:0 center; width:16px; 432 } 433 434 /** 435 * Default Layout 436 */ 437 BODY { 438 margin: 5px; 439 padding: 0; 440 font-size: 0.8em; 441 font-family: Arial,Helvetica,sans-serif; 442 } 443 444 445 H1 { 446 text-align: center; 447 font-size: 150%; 448 font-weight: bold; 449 padding: 0; 450 margin: 0.5em 0 1em 0; 451 } 452 453 H2 { 454 margin: 0; 455 padding: 5px 0.5em 5px 0.5em; 456 text-align: left; 457 font-size: 120%; 458 } 459 460 A { 461 text-decoration:none; 462 border-bottom: 1px dotted #005e89; 463 } 464 A:hover { 465 border-bottom: 1px solid #858460; 466 } 467 468 IMG { 469 border: none; 470 } 471 472 HR.separation { 473 visibility: hidden; 474 clear: both; 475 } 476 477 #copyright { 478 clear: both; 479 font-size: 83%; 480 text-align: center; 481 margin: 0 0 10px 0; 482 } 483 484 INPUT, SELECT { 485 margin: 0; 486 font-size: 1em; /* <= some browsers don't set it correctly */ 487 } 488 489 TABLE { /* horizontaly centered */ 490 margin-left: auto; 491 margin-right: auto; 492 } 493 494 495 FORM { padding: 0; margin: 0; } 496 497 FORM P { 498 text-align: center; 499 margin-top: 2em; 500 margin-bottom: 2em; 501 } 502 503 FORM FIELDSET P { 504 margin-top: 1em; 505 margin-bottom: 0; 506 } 507 508 SELECT.categoryList { 509 height: 20em; 510 width: 500px; 511 } 512 513 514 /** 515 * Filter forms are displayed label by label with the input (or select...) 516 * below the label. Use an UL to make a group (radiobox for instance). 517 * Use a SPAN to group objects in line 518 */ 519 FIELDSET { 520 padding: 1em; 521 margin: 1em; 522 overflow: hidden; /* <- makes Opera happy */ 523 } 524 525 FORM.filter FIELDSET UL { 526 margin: 0; 527 } 528 FORM.filter FIELDSET UL, 529 FORM.filter FIELDSET LABEL { 530 display: block; 531 float: left; 532 margin-right: 1em; 533 padding: 0; 534 } 535 536 FORM.filter FIELDSET LI { 537 list-style: none; 538 margin-bottom: 0.5em; 539 } 540 541 FORM.filter FIELDSET LI LABEL { 542 display: inline; 543 float: none; 544 } 545 546 FORM.filter FIELDSET UL.tagSelection LABEL { 547 display: inline; 548 float: none; 549 margin-right:0.5em;/*reduce from above*/ 550 } 551 552 /* cannot use FIELDSET>LABEL because of IE<=6 */ 553 FORM.filter FIELDSET LABEL INPUT, 554 FORM.filter FIELDSET LABEL SELECT, 555 FORM.filter FIELDSET LABEL SPAN, 556 FORM.filter FIELDSET LABEL TEXTAREA { 557 display: block; 558 margin: 0.5em 0; 559 } 560 FORM.filter FIELDSET * LABEL INPUT, 561 FORM.filter FIELDSET * LABEL SELECT, 562 FORM.filter FIELDSET * LABEL TEXTAREA, 563 FORM.filter FIELDSET LABEL SPAN INPUT, 564 FORM.filter FIELDSET LABEL SPAN SELECT, 565 FORM.filter FIELDSET LABEL SPAN TEXTAREA { 566 display: inline; 567 vertical-align: top; 568 margin: 0 0.5em 0 0; 569 } 570 571 FORM.filter FIELDSET UL.tagSelection LI LABEL INPUT { 572 margin-right:0; 573 } 574 575 /* following declaration is important to avoid strange FF behaviour */ 576 FORM.filter FIELDSET LABEL SPAN SELECT { 577 margin: 0; 578 } 579 580 FORM.filter FIELDSET P 581 { 582 clear: left; 583 display: block; 584 } 585 586 FORM.filter INPUT[type="submit"] { 587 margin-top: 1em; 588 } 589 590 FORM.properties UL { 591 list-style-type: none; 592 margin: 0; 593 padding: 0; 594 } 595 596 FORM.properties LI { 597 margin-bottom: 0.5em; 598 padding: 0; 599 line-height: 1.8em; 600 clear: left; 601 } 602 603 FORM.properties SPAN.property { 604 font-weight: bold; 605 float: left; 606 width: 50%; 607 text-align: right; 608 margin: 0; 609 padding: 0 0.5em 0 0; 610 } 611 612 /* button tools */ 613 UL.actions { 614 text-indent: 0; 615 list-style: none; 616 } 617 UL.actions LI { 618 display: inline; 619 } 620 UL.actions A, UL.actions IMG { 621 border: none; 622 } 623 624 UL.tagSelection { 625 width: 99%; 626 margin: 1em 0 1em 0; 627 padding: 0; 628 } 629 630 UL.tagSelection LI { 631 display: inline; 632 white-space: nowrap; 633 } 634 635 #fullTagCloud { 636 font-size: 120%; 637 text-align: justify; 638 padding: 0; 639 margin: 1em 2em 1em 2em; 640 } 641 642 #fullTagCloud SPAN { 643 white-space: nowrap; 644 margin: 0 2px; 645 } 646 647 648 .tagLevel5 { font-size: 150%; } 649 .tagLevel4 { font-size: 140%; } 650 .tagLevel3 { font-size: 120%; } 651 .tagLevel2 { font-size: 100%; } 652 .tagLevel1 { font-size: 90%; } 653 654 655 /* Popup help page */ 656 BODY#thePopuphelpPage #copyright { 657 display: none; 658 } 659 660 #theNotificationPage p { padding: 0.5em; } 661 BODY#thePopuphelpPage .content P { 662 text-align: justify; 663 padding: 0.5em; 664 } 665 666 BODY#thePopuphelpPage .content OL LI, 667 BODY#thePopuphelpPage .content UL LI 668 { 669 margin-bottom: 0.5em; 670 } 671 672 TR.tagLine { 673 border-bottom: 1px solid #ddd; 674 } 675 TD.nbEntries { 676 text-align: right; 677 font-style: italic; 678 font-size: 90%; 679 } 680 681 FIELDSET.tagLetter { 682 border: 1px solid #d3d3d3; 683 width: 200px; 684 margin: 0.5em; 685 padding: 10px; 686 } 687 688 LEGEND.tagLetterLegend { 689 border: 1px solid #d3d3d3; 690 font-size:120%; 691 font-weight: bold; 692 padding: 0 5px; 693 font-style: normal; 694 } 695 696 TABLE.tagLetterContent { 697 width:100%; 698 font-size:80%; 699 border-collapse : collapse; 700 } 701 702 #theHeader {text-align: center;} 703 704 #theNotificationPage DL, 705 #thePopuphelpPage DL { margin: 0 25px 25px; } 706 .content #comments UL.thumbnailCategories LI { width:99%; } 707 /* jQuery datepicker */ 708 IMG.ui-datepicker-trigger { 709 cursor : pointer; 710 } 711 712 /* Set the width of the menubar for the galery */ 713 #menubar { 714 width: 18em; 715 } 716 .content { 717 margin-left: 20em; /* = #menubar width + 2em */ 718 } 719 /* Set minimum width of the page before getting a scrollbar */ 720 /* IE5 and IE6 don't get that */ 721 BODY { 722 min-width: 60em; /* ~ 3* #menubar width */ 723 } 724 BODY#thePopuphelpPage { 725 min-width: 0; 726 } 727 728 /* Set some sizes according to your maximum thumbnail width and height */ 729 .content UL.thumbnails SPAN, 730 .content UL.thumbnails SPAN.wrap2 A, 731 .content UL.thumbnails LABEL, 732 .content DIV.thumbnailCategory DIV.illustration { 733 width: 140px; /* max thumbnail width + 2px */ 734 } 735 .content UL.thumbnails SPAN.wrap2, 736 .content DIV.thumbnailCategory DIV.description { 737 height: 140px; /* max thumbnail height + 2px */ 738 } 739 740 741 /* Category thumbnails on main page */ 742 .content UL.thumbnailCategories LI { 743 width: 49.7%; /* 49.7% for 2 per line, 33.2% for 3 per line*/ 744 } 745 746 /* Set defaults for thumbnails legend */ 747 .content UL.thumbnails SPAN.thumbLegend { 748 display: block; /* display: none; if you don't want legend */ 749 height: 4em; /* legend height (don't set auto to be Gecko friendly)*/ 750 } 751 752 /** 753 * Default colors 754 */ 755 #imageToolBar * { 756 background: inherit; 757 } 758 759 /* So that non-links are slightly greyed out */ 760 .content .navigationBar, SPAN.calItemEmpty, TD.calDayCellEmpty { 761 color: #b0b0b0; 762 } 763 764 /* Tables & forms */ 765 /* IE <= 6 is so bad with this that you can't merge with the following rule */ 766 INPUT[type="text"], INPUT[type="password"], INPUT[type="button"], 767 INPUT[type="submit"], INPUT[type="reset"], INPUT[type="file"] { 768 color:black; 769 background-color: #d3d3d3; /* lightgrey */ 770 } 771 772 INPUT.text, INPUT.password, INPUT.button, 773 INPUT.submit, INPUT.reset, INPUT.file, 774 SELECT, TEXTAREA { 775 color:black; 776 background-color: #d3d3d3; /* lightgrey */ 777 } 778 779 INPUT:focus, SELECT:focus, TEXTAREA:focus, INPUT.focus, FORM .focus { 780 background-color: #f5f5f5; /* whitesmoke */ 781 } 782 783 /* some theme set a border on INPUT which is not pretty for radio/checkbox */ 784 INPUT[type="radio"], INPUT[type="checkbox"] { 785 border: none; /* <= Opera needs this */ 786 } 787 788 INPUT.radio, INPUT.checkbox { 789 border: none; /* <= IE6 needs this */ 790 } 791 792 /* rate buttons displayed like links */ 793 INPUT.rateButton, INPUT.rateButtonSelected, INPUT.rateButtonStarFull, INPUT.rateButtonStarEmpty { 794 color:inherit; 795 background-color:transparent !important; /* Konqueror doesn't accept transparent here */ 796 } 797 798 .errors { /* Errors display */ 799 color: red; 800 background-color: #ffe1e1; 801 font-weight: bold; 802 margin: 5px; 803 border: 1px solid red; 804 background-image: url(icon/errors.png); 805 background-repeat: no-repeat; 806 background-position: top right; 807 padding: 10px 50px 10px 10px; 808 } 809 810 /* Informations box in administration */ 811 .infos { 812 color: #002000; 813 background-color: #98fb98; /* palegreen */ 814 background-image: url(icon/infos.png); 815 background-repeat: no-repeat; 816 background-position: top right; 817 margin: 5px; 818 padding: 10px 50px 10px 10px; 819 } 820 821 /* Header message like upgrade or adviser mode */ 822 .header_msgs { 823 text-align:center; 824 font-weight: bold; 825 color:#696969; /* dimgray */ 826 background-color: #d3d3d3; 827 margin: 1px; 828 padding: 1px; 829 } 830 831 /* Header notes box in public/administration */ 832 .header_notes { 833 border: 1px solid #aaaaaa; /* border color and style */ 834 text-align: center; 835 background-image: url(icon/note.png); 836 background-repeat: no-repeat; 837 background-position: top left; 838 font-weight: bold; 839 margin: 14px; 840 padding: 5px 00px 0px 0px; 841 } 842 843 LEGEND { 844 font-style: italic; 845 } 846 847 /*calendar*/ 848 SPAN.calItem, SPAN.calItemEmpty, 849 TD.calDayCellEmpty, TD.calDayCellFull { 850 border: 1px solid gray; 851 }
Note: See TracChangeset
for help on using the changeset viewer.