Ignore:
Timestamp:
Dec 13, 2012, 2:22:28 PM (11 years ago)
Author:
plg
Message:

Deep changes in themes Simple*: for the picture page, we mainly use core
templates instead of specific templates. It means:

  • easier to maintain
  • icons instead of text (may be modified)
  • distorsion bug fixed
Location:
extensions/simple_themes/simple
Files:
3 added
5 deleted
5 edited

Legend:

Unmodified
Added
Removed
  • extensions/simple_themes/simple/js/scripts.js

    r13554 r19421  
    33
    44jQuery(document).ready(function($){
    5   $("#theComments h3").click(function () {
    6     $("#theComments > div").toggle("slow");
     5  jQuery("#comments h3").click(function () {
     6    jQuery("#pictureComments").toggle("slow");
    77  });
    88
  • extensions/simple_themes/simple/local_head.tpl

    r13558 r19421  
    44  {/if}
    55{/if}
     6
     7{combine_script id='jquery.cookie' path='themes/simple/js/jquery.cookie.min.js'}
     8{combine_script id='simple.scripts' load='footer' require='jquery' path='themes/simple/js/scripts.js'}
  • extensions/simple_themes/simple/template/footer.tpl

    r13552 r19421  
    44    {/if}
    55    {'Powered by'|@translate} <a href="{$PHPWG_URL}">Piwigo</a>
    6      - <a href="{$themeconf.url}">{$themeconf.name}</a>
    76    {if isset($U_LOGIN)}
    87    - <a href="{$U_LOGIN}" rel="nofollow">{'Login'|@translate}</a>
  • extensions/simple_themes/simple/theme.css

    r16030 r19421  
    131131  border: 8px #fff solid;
    132132  margin: 0 20px;
    133   max-width: 90%;
    134133}
    135134#theImage p {
     
    209208  color: #00FF00;
    210209  font-weight: bold;
     210}
     211
     212#thePicturePage #comments h3 {
     213  cursor:pointer;
     214}
     215
     216.commentsList .commentElement {
     217  list-style:none;
     218  padding:0.5em 0;
     219}
     220
     221#thePicturePage #comments .description {
     222  padding:0;
     223  border:none;
     224}
     225
     226#theCommentsPage .commentElement .description {
     227  border-top:1px dotted #555;
    211228}
    212229
     
    220237  padding:5px;
    221238  border-top: 1px dotted #606060;
    222 }
    223 
    224 #comments .description {
    225   border-top: 1px dotted #606060;
    226   display: block;
    227   padding: 10px 0;
    228239}
    229240
     
    244255  width: 26px;
    245256}
     257
     258/*
     259 CSS for all pages
     260*/
     261
     262body {
     263  font: 75% "Bitstream Vera Sans", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
     264  margin: 0;
     265  padding: 0;
     266}
     267
     268img { border: 0; }
     269a { text-decoration: none; }
     270hr { border: 1px #999999 solid; }
     271
     272h1, h2, h3 {
     273  margin: 0;
     274  padding: 0;
     275  font-size: 1em;
     276}
     277h1 { font-size: 1.6em; }
     278
     279#menuswitcher {
     280  cursor: pointer;
     281}
     282
     283/* hide javascript stuff */
     284
     285.js #menubar, .js #theComments > div {
     286  display: none;
     287}
     288
     289/* Layout */
     290
     291#the_page {
     292  width: 85%;
     293  margin: 0 auto;
     294  padding: 0;
     295}
     296
     297#theHeader h1 {
     298  padding: 1em 0 0;
     299}
     300#theHeader p {
     301  padding: 0;
     302  margin: 0;
     303}
     304
     305.titrePage {
     306  margin: 1em 0;
     307  line-height: 1.5em;
     308}
     309
     310.titrePage h2 {
     311  margin: 1em 0;
     312  padding: 0;
     313  display: inline;
     314}
     315.subcontent h2 {
     316  margin: 0 0 1em;
     317}
     318
     319.titrePage .button {
     320  float: none;
     321}
     322
     323.titrePage img {
     324  float: left;
     325  max-height: 16px;
     326  margin: 0 5px;
     327}
     328
     329.titrePage .categoryActions {
     330  float: right;
     331  margin: 0;
     332  padding: 0;
     333  list-style: none;
     334  width: auto;
     335}
     336
     337.categoryActions li {
     338  display: inline;
     339}
     340
     341#content {
     342  margin: 1em 0 0;
     343  padding: 1em;
     344}
     345
     346/* tags */
     347
     348.tagLevel5 { font-size: 130%; }
     349.tagLevel4 { font-size: 120%; }
     350.tagLevel3 { font-size: 110%; }
     351.tagLevel2 { font-size: 100%; }
     352.tagLevel1 { font-size: 90%; }
     353
     354#fullTagCloud {
     355  text-align: center;
     356  margin: 1em 2em;
     357}
     358
     359#fullTagCloud span {
     360  white-space: nowrap;
     361  margin: 0 0.5em;
     362}
     363
     364#fullTagCloud a {
     365  padding: 2px;
     366}
     367
     368.tagLetterContent {
     369  width: 100%;
     370}
     371
     372.tagSelection li {
     373  display:  inline;
     374}
     375
     376/* Messages */
     377
     378.errors, .infos {
     379  color: #e04040;
     380  border: 1px dashed;
     381  margin: 1em;
     382}
     383
     384/* Forms */
     385
     386form {
     387  margin: 0;
     388}
     389
     390#content form li, .subcontent form li {
     391  list-style: none;
     392  margin: 0.2em 0;
     393}
     394
     395.property {
     396  display: inline-block;
     397  width: 180px;
     398}
     399
     400#quicksearch {
     401  margin: 1em 0 0;
     402}
     403#quicksearch p {
     404  margin: 0;
     405}
     406#quicksearch #q {
     407  width: 150px;
     408}
     409
     410/* Menubar */
     411
     412#menubar {
     413  margin: 0 2em 0 0;
     414  padding: 0;
     415  float: left;
     416  width: 15%;
     417}
     418
     419#menubar ul {
     420  margin: 0;
     421  padding: 1em 0 1em 2em;
     422}
     423#menubar dd {
     424  margin: 0;
     425  padding: 0;
     426}
     427
     428#menubar ul ul {
     429 margin: 0;
     430 padding: 0 0 0 1em;
     431}
     432
     433/* images thumbnails */
     434
     435#thumbnails {
     436  width: auto;
     437  text-align: center;
     438  padding: 1em 0;
     439}
     440
     441#thumbnails ul, .middle_block > ul {
     442  margin: 0;
     443  padding: 0;
     444  overflow: hidden;
     445  list-style: none;
     446}
     447
     448#thumbnails li, .middle_block > ul li {
     449  margin: 1em;
     450  padding: 0;
     451  display: inline-block;
     452  vertical-align: middle;
     453}
     454
     455.nb-comments, .nb-hits {
     456  font-weight: normal;
     457}
     458.zero {
     459  display: none;
     460}
     461
     462/* categories thumbnails */
     463
     464.thumbnailCategories {
     465  margin: 0;
     466  padding: 0;
     467  overflow: hidden;
     468  list-style: none;
     469}
     470
     471.thumbnailCategories li {
     472  display: inline-block;
     473  overflow: hidden;
     474  vertical-align: top;
     475  margin: 1em;
     476  width: 29%;
     477  text-align: center;
     478}
     479
     480.illustration {
     481}
     482
     483.description {
     484  overflow: auto;
     485}
     486
     487.description h3 {
     488  margin: 0;
     489}
     490
     491.thumbCatDescNfoDate, .thumbCatDescNbImg {
     492  margin: 0;
     493  font-size: 80%;
     494}
     495
     496.thumbCatDesc {
     497  margin: 0;
     498  padding-top: 4px;
     499  word-wrap: break-word;
     500}
     501
     502/* page : title bar */
     503
     504#additional_info {
     505  margin: 1em 5em;
     506}
     507
     508.navigationBar {
     509  padding: 0.5em;
     510  text-align: right;
     511}
     512
     513/* pictures pages */
     514
     515#thePicturePage #content {
     516  background-color:transparent;
     517  border-top:none;
     518  margin:none;
     519  padding:none;
     520}
     521
     522#thePicturePage #theHeader {
     523  display: none;
     524}
     525#thePicturePage #content {
     526  padding: 1em 0 0;
     527}
     528
     529.imageNumber {
     530  float: right;
     531  padding: 0 3px;
     532  font-size: 0.9em;
     533}
     534
     535.navButtons {
     536  font-size: 1.5em;
     537  text-align: center;
     538}
     539
     540#navThumbPrev, #navThumbNext {
     541  text-align: center;
     542  margin: 1em auto;
     543}
     544
     545#imageToolBar {
     546  height: 25px;
     547}
     548/*
     549#imageInfoBar {
     550  float: right;
     551  clear: right;
     552  width: 25%;
     553}
     554
     555#randomButtons ul {
     556  padding: 0;
     557  list-style-type: none;
     558}
     559
     560#imageInfos dt, #imageMeta dt {
     561  font-weight: bold;
     562}
     563#imageInfos dd, #imageMeta dd {
     564  margin-left: 1em;
     565  overflow: hidden;
     566}
     567
     568#theImage {
     569  float: left;
     570  width: 75%;
     571  text-align: center;
     572  padding: 1em 0 2em;
     573  margin: 0 auto;
     574  overflow: hidden;
     575}
     576*/
     577#rateForm {
     578  margin: 0;
     579}
     580#rateForm input, #rateForm input:active {
     581  cursor: pointer;
     582  border: none;
     583  padding: 0;
     584}
     585#rateForm input.rateButtonStarFull  {
     586  background:  url('icon/rating-stars.png') no-repeat scroll -16px center;
     587  width: 16px;
     588}
     589#rateForm input.rateButtonStarEmpty {
     590  background:  url('icon/rating-stars.png') no-repeat scroll 0 center;
     591  width: 16px;
     592}
     593
     594
     595/* slideshow */
     596
     597#slideshow {
     598  margin: 1em auto;
     599}
     600#slideshow .titrePage {
     601  width: 600px;
     602  margin: 0 auto;
     603}
     604
     605#slideshow .navButtons {
     606  display: inline;
     607  font-size: 1em;
     608  float: right;
     609  margin-right: 1em;
     610}
     611#slideshow #theImage {
     612  float: none;
     613  width: 100%;
     614}
     615
     616#slideshow #copyright {display:none;}
     617#slideshow #content {border:none;}
     618
     619/* comments */
     620
     621#theComments h3 {
     622  height: 25px;
     623  line-height: 25px;
     624  padding-left: 1em;
     625  cursor: pointer;
     626}
     627
     628#commentAdd, #commentList {
     629  width: 48%;
     630  padding: 1%;
     631}
     632#commentAdd  { float: left; }
     633#commentList { float: right; }
     634
     635#commentAdd input[type="text"], #commentAdd textarea {
     636  width: 400px;
     637}
     638
     639#commentList ul {
     640  list-style: none;
     641  padding: 0;
     642}
     643#commentList li {
     644  clear: both;
     645  display: block;
     646  border-top: 1px dotted #606060;
     647  padding: 0.5em 0;
     648}
     649#commentList li ul {
     650  list-style-type: none;
     651  padding: 4px;
     652}
     653
     654ul.actions {
     655  float: right;
     656}
     657
     658#commentList .author {
     659  font-weight: bold;
     660  font-variant: small-caps;
     661}
     662#commentList .date {
     663  font-style: italic;
     664}
     665
     666#theCommentsPage #comments li {
     667  list-style: none;
     668  border-top: none;
     669  /* display: table-row; */
     670  min-height:150px;
     671}
     672
     673#theCommentsPage form label {
     674  display: inline-block;
     675  line-height: 25px;
     676}
     677
     678#comments .illustration {
     679  width: auto;
     680}
     681
     682/* calendar */
     683
     684.calendarViews, .calendarCalBar {
     685  margin: 1em 0;
     686}
     687
     688.calCalHead {
     689  font-size: 1.1em;
     690  font-weight: bold;
     691}
     692
     693.calMonth {
     694  width: 80%;
     695  margin: 1em auto;
     696}
     697
     698.calendarBar {
     699  text-align: center;
     700}
     701.calendarBar span {
     702  margin: 0 0.5em;
     703}
     704
     705/* Footer */
     706
     707#copyright {
     708  padding: 2px;
     709  clear: both;
     710}
     711
     712/* PWG stuff */
     713
     714.personal_block { padding: 0 !important; }
     715
     716
     717/*  */
     718
     719@media only screen and (max-width: 957px) {
     720  #the_page {
     721    width: 100%;
     722    margin: 0;
     723  }
     724
     725  #thePicturePage #content {
     726    position: relative;
     727  }
     728
     729  #theHeader { margin: 0 1em; }
     730  .titrePage { margin: 1em; }
     731
     732  #theImage {
     733    width: 100%;
     734    float: none;
     735  }
     736
     737  #imageInfoBar {
     738    float: none;
     739    clear: both;
     740    width: 100%;
     741    margin: 0 10px;
     742  }
     743  #navThumbPrev, #navThumbNext {
     744    float: left;
     745    margin: 1em;
     746  }
     747  .thumbnailCategories li {
     748    width: 45%;
     749  }
     750}
     751
     752@media only screen and (max-width: 520px) {
     753  .thumbnailCategories li {
     754    width: 95%;
     755  }
     756}
     757
     758/* (from elegant) picture page */
     759
     760.contentWithMenu #imageHeaderBar        { padding: 0;}
     761/*
     762#imageHeaderBar                                                 { padding: 0 0 0 10px;}
     763*/
     764#imageHeaderBar                                                 { width: auto;}
     765#imageHeaderBar h2                                      { font-size: 100%; font-weight: inherit;}
     766#imageHeaderBar .browsePath {
     767        display:inline-block;
     768        float:left;
     769        font-size:100%;
     770        text-transform:uppercase;
     771        line-height:20px;
     772        padding: 0;
     773        font-weight:bold;
     774        margin:0;
     775}
     776#imageToolBar .imageNumber                      { display: inline-block; float: right; line-height: 26px; margin: 0 2px 0 0; min-width: 40px; text-align: center;}
     777#imageToolBar                                           { margin-top: -38px; margin-bottom: 0; float: right;}
     778#thePicturePage .pwg-button                     { width: 26px;}
     779#thePicturePage .actionButtons          { margin-right: 26px;}
     780
     781#theImageAndInfos {
     782 background-color:#3f3f3f;
     783 padding:15px 0;
     784 border-top: 2px solid #606060;
     785        display: block;
     786        width: 100%;
     787        position: relative;
     788}
     789#theImage {
     790        display: inline-block;
     791        width: 70%;
     792        vertical-align: top;
     793        overflow: auto;
     794        padding: 10px 0 5px 0;
     795text-align:center;
     796}
     797
     798.rateButtonStarFull                                     { background: url('icon/rating-stars.png') no-repeat -16px center; width:16px;}
     799.rateButtonStarEmpty                            { background: url('icon/rating-stars.png') no-repeat 0 center; width:16px;}
     800
     801
     802/* image infos */
     803
     804#imageInfos {
     805        display: inline-block;
     806        width: 29.5%;
     807        vertical-align: top;
     808        padding-top: 0;
     809        padding-bottom: 5px;
     810        margin: 10px 0 10px 0.5%;
     811        word-wrap:break-word;
     812}
     813
     814#imageInfos .navThumbs                          { width: 260px; height: 130px; margin: auto; padding: 0 5px;}
     815#imageInfos .navThumb                           { position: relative; /* width: 120px; height: 120px; */ margin: 0; overflow: hidden;}
     816#imageInfos #linkPrev                           { float: left;}
     817#imageInfos #linkNext                           { float: right;}
     818#imageInfos .thumbHover                                 { position: absolute; width: 100%; height: 100%;}
     819#imageInfos .prevThumbHover                     { background: transparent url(icon/none.png) no-repeat center center;}
     820#imageInfos .prevThumbHover:hover       { background: transparent url(icon/img_prev.png) no-repeat center center;}
     821#imageInfos .nextThumbHover                     { background: transparent url(icon/none.png) no-repeat center center;}
     822#imageInfos .nextThumbHover:hover       { background: transparent url(icon/img_next.png) no-repeat center center;}
     823
     824#imageInfos dl.imageInfoTable           { display: block; padding: 0 15px; margin: 12px auto;}
     825#imageInfos .imageInfo                          { display: block; line-height: 16px;}
     826#imageInfos .imageInfo dt                               { display: block; font-weight: bold; text-align: left; padding: 0;}
     827#imageInfos .imageInfo dd                       { display: block; text-align: left; margin: 0 0 5px 20px;}
     828#imageInfos h3                                          { margin: 20px 0 10px;}
     829#imageInfos .navThumbs a img {border:2px solid #606060;}
     830#imageInfos .navThumbs a:hover img {border-color:#ccc;}
     831
     832/* image comments */
     833
     834#thePicturePage #comments                       { padding: 2px 5px; background-color:#3f3f3f; border-top:2px solid #606060;}
     835#thePicturePage #comments h3                    { margin: 10px 0;}
     836#thePicturePage #comments form          { margin: 10px 0;}
     837#thePicturePage #comments fieldset              { margin: 0 1em;}
     838
     839.commentshidden #pictureComments                { display: none;}
     840.commentContent .comments_toggle        { cursor: pointer;}
     841
     842#commentAdd, #pictureCommentList        { width: 48%; padding: 0 1%;}
     843#commentAdd                                             { float: left; }
     844#pictureCommentList                                     { float: right; }
     845
     846#commentAdd input[type="text"],
     847#commentAdd textarea {
     848        width: 95%;
     849        font-family: Arial,Helvetica,sans-serif;
     850        font-size: 100%;
     851}
     852
     853#pictureCommentList .commentsOrder      { float: left; margin-bottom: 5px;}
     854#pictureCommentList .navigationBar      { float: right; margin-bottom: 5px;}
     855#pictureComments h4                                     { margin: 0;}
     856#pictureComments form p                         { margin: 5px 0;}
     857#pictureComments form p textarea                { margin: 10px 0;}
     858#pictureComments INPUT                          { margin: 10px;}
     859#pictureComments INPUT[type=submit]     { margin: 0;}
     860.commentElement .description            { padding: 5px;}
     861
     862/* icons */
     863.pwg-icon {
     864        display: inline-block; /*IE6 does not get this correctly*/
     865        text-indent: -9999px; overflow: hidden; background-repeat: no-repeat;
     866        width: 26px; height: 26px; background-image: url(s26/outline_808080.png);
     867        vertical-align: bottom;
     868}
     869.pwg-button-text { display:none; }
     870
     871.pwg-state-disabled .pwg-icon {
     872        opacity: .5;
     873        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
     874        filter: alpha(opacity=50);
     875}
     876
     877.pwg-button {
     878        display: inline-block;
     879        vertical-align: top;
     880  cursor:pointer;
     881}
     882
     883.pwg-icon-home {background-position: -26px 0}
     884.pwg-icon-camera {background-position: -52px 0}
     885.pwg-icon-save {background-position: -78px 0}
     886.pwg-icon-cloud {background-position: -104px 0}
     887.pwg-icon-letters {background-position: -130px 0}
     888.pwg-icon-calendar {background-position: -156px 0}
     889.pwg-icon-camera-calendar {background-position: -182px 0}
     890
     891.pwg-icon-arrow-n {background-position: 0 -26px}
     892.pwg-icon-arrow-e {background-position: -26px -26px}
     893/*.pwg-icon-arrow-s {background-position: -52px -26px}*/
     894.pwg-icon-arrow-w {background-position: -78px -26px}
     895/*.pwg-icon-arrowstop-n {background-position: -104px -26px}*/
     896.pwg-icon-arrowstop-e {background-position: -130px -26px}
     897/*.pwg-icon-arrowstop-s {background-position: -156px -26px}*/
     898.pwg-icon-arrowstop-w {background-position: -182px -26px}
     899
     900.pwg-icon-close {background-position: 0 -52px}
     901.pwg-icon-category-edit {background-position: -26px -52px}
     902.pwg-icon-sort {background-position: -52px -52px}
     903.pwg-icon-sizes {background-position: -78px -52px}
     904.pwg-icon-category-view-normal {background-position: -156px -52px}
     905.pwg-icon-category-view-flat {background-position: -182px -52px}
     906
     907.pwg-icon-caddie {background-position: 0 -78px}
     908.pwg-icon-caddie-add {background-position: -26px -78px}
     909.pwg-icon-caddie-del {background-position: -52px -78px}
     910.pwg-icon-favorite {background-position: -78px -78px}
     911.pwg-icon-favorite-add {background-position: -104px -78px}
     912.pwg-icon-favorite-del {background-position: -130px -78px}
     913.pwg-icon-filter {background-position: -156px -78px}
     914.pwg-icon-filter-del {background-position: -182px -78px}
     915
     916.pwg-icon-camera-info {background-position: 0 -104px}
     917.pwg-icon-representative {background-position: -26px -104px}
     918.pwg-icon-edit {background-position: -52px -104px}
     919.pwg-icon-register {background-position: -78px -104px}
     920.pwg-icon-lost-password {background-position: -104px -104px}
     921
     922.pwg-icon-slideshow {background-position: 0 -130px}
     923.pwg-icon-play {background-position: -26px -130px}
     924.pwg-icon-pause {background-position: -52px -130px}
     925.pwg-icon-stop {background-position: -78px -130px}
     926.pwg-icon-clock-plus {background-position: -104px -130px}
     927.pwg-icon-clock-minus {background-position: -130px -130px}
     928.pwg-icon-repeat-play {background-position: -156px -130px}
     929.pwg-icon-repeat-stop {background-position: -182px -130px}
     930
     931.pwg-icon-map {background-position: 0 -156px}
     932.pwg-icon-globe {background-position: -26px -156px}
     933
     934.pwg-icon                                                                       { background-image: url(../default/s26/outline_808080.png);}
     935A:hover .pwg-icon                                                       { background-image: url(../default/s26/outline_ffffff.png);}
     936
     937/**
     938 * Picture
     939 */
     940#imageHeaderBar {
     941        padding-top: 2px;
     942        padding-bottom: 2px;
     943        margin-bottom:10px;
     944        overflow: hidden;
     945        width: 100%;
     946}
     947
     948#imageHeaderBar .browsePath {
     949        float: left;
     950}
     951
     952#imageToolBar .imageNumber {
     953        float: right;
     954        margin:0 0 0 10px;
     955}
     956
     957#imageHeaderBar H2 {
     958        display: inline;
     959        text-align: center;
     960        padding: 0;
     961}
     962
     963#imageToolBar {
     964        text-align: center;
     965        clear: both;
     966        margin-bottom: 2px;
     967        padding: 0;
     968        height: 28px;
     969}
     970
     971#imageToolBar .actionButtons { float: left; }
     972#imageToolBar .navigationButtons   { float: right; }
     973
     974.switchBox {
     975        padding: 0.5em 5px;
     976        border-radius: 4px;
     977        z-index: 100;
     978        text-align:left;
     979        display: none;
     980        position: absolute;
     981        left: 0; top: 0; /*left, right set through js*/
     982}
     983
     984.switchBoxTitle {
     985  border-bottom:1px solid #ccc;
     986  padding-bottom:5px;
     987  margin-bottom:5px;
     988}
     989
     990.switchBox {
     991  border: none;
     992  background-color: #222;
     993  color:#aaa;
     994  font-size:14px;
     995}
     996
     997.switchBoxTitle {
     998  border-bottom: 1px solid #444444;
     999}
     1000
     1001
     1002.relSwitchBox {
     1003        position: relative;
     1004}
     1005
     1006#infoSwitcher {display:none;}
     1007#pictureComments {display: none;}
     1008.derivativeSizeDetails {display: none;}
  • extensions/simple_themes/simple/themeconf.inc.php

    r13561 r19421  
    55Description: Simple Grey
    66Theme URI: http://piwigo.org/ext/extension_view.php?eid=308
    7 Author: Saïmon
     7Author: Saïmon, plg
    88Author URI: http://saimon.org/
    99*/
Note: See TracChangeset for help on using the changeset viewer.