Changeset 8119 for trunk/themes/default


Ignore:
Timestamp:
Dec 14, 2010, 7:45:52 AM (14 years ago)
Author:
rvelices
Message:

css sprites - almost done - still to implement nice colors and hover effect for clear and sylvia

Location:
trunk/themes/default
Files:
3 deleted
5 edited

Legend:

Unmodified
Added
Removed

  • trunk/themes/default/iconset.css

    r8091 r8119  
    6666.pwg-icon-repeat-stop {background-position: -182px -130px}
    6767
     68.pwg-icon-map {background-position: 0 -156px}
    6869
    69 A.pwg-button {
    70         border: 1px solid blue;
     70
     71A.pwg-state-default:hover {
     72        border: 0 !important; /*don't add bottom border on hover*/
    7173}
    72 
    73 .pwg-state-default:hover {
    74         border-color: green;
    75 }

  • trunk/themes/default/template/picture.tpl

    r8066 r8119  
    1 
    21{* Example of resizeable *}
    32{*
    … …  
    3938
    4039<div id="imageToolBar">
    41   <div class="randomButtons">
    42     {if isset($U_SLIDESHOW_START) }
    43       <a href="{$U_SLIDESHOW_START}" title="{'slideshow'|@translate}" rel="nofollow"><img src="{$ROOT_URL}{$themeconf.icon_dir}/start_slideshow.png" class="button" alt="{'slideshow'|@translate}"></a>
    44     {/if}
    45     {if isset($U_METADATA) }
    46       <a href="{$U_METADATA}" title="{'Show file metadata'|@translate}" rel="nofollow"><img src="{$ROOT_URL}{$themeconf.icon_dir}/metadata.png" class="button" alt="metadata"></a>
    47     {/if}
    48     {if isset($current.U_DOWNLOAD) }
    49       <a href="{$current.U_DOWNLOAD}" title="{'download this file'|@translate}"><img src="{$ROOT_URL}{$themeconf.icon_dir}/save.png" class="button" alt="{'download'|@translate}"></a>
    50     {/if}
    51     {if isset($PLUGIN_PICTURE_ACTIONS)}{$PLUGIN_PICTURE_ACTIONS}{/if}
    52     {if isset($favorite) }
    53       <a href="{$favorite.U_FAVORITE}" title="{if $favorite.IS_FAVORITE}{'delete this image from your favorites'|@translate}{else}{'add this image to your favorites'|@translate}{/if}"><img src="{$ROOT_URL}{$themeconf.icon_dir}/{if $favorite.IS_FAVORITE}del_favorite{else}favorite{/if}.png" class="button" alt="favorite" title="{if $favorite.IS_FAVORITE}{'delete this image from your favorites'|@translate}{else}{'add this image to your favorites'|@translate}{/if}"></a>
    54     {/if}
    55     {if !empty($U_SET_AS_REPRESENTATIVE) }
    56       <a href="{$U_SET_AS_REPRESENTATIVE}" title="{'set as album representative'|@translate}"><img src="{$ROOT_URL}{$themeconf.icon_dir}/representative.png" class="button" alt="{'representative'|@translate}"></a>
    57     {/if}
    58     {if isset($U_ADMIN) }
    59       <a href="{$U_ADMIN}" title="{'Modify information'|@translate}"><img src="{$ROOT_URL}{$themeconf.icon_dir}/preferences.png" class="button" alt="{'edit'|@translate}"></a>
    60     {/if}
    61     {if isset($U_CADDIE) }{*caddie management BEGIN*}
    62 {combine_script id='core.scripts' load='async' path='themes/default/js/scripts.js'}
     40        <div class="actionButtons">
     41{if isset($U_SLIDESHOW_START)}
     42                <a href="{$U_SLIDESHOW_START}" title="{'slideshow'|@translate}" class="pwg-state-default pwg-button" rel="nofollow">
     43                        <span class="pwg-icon pwg-icon-slideshow">&nbsp;</span><span class="pwg-button-text">{'slideshow'|@translate}</span>
     44                </a>
     45{/if}
     46{if isset($U_METADATA)}
     47                <a href="{$U_METADATA}" title="{'Show file metadata'|@translate}" class="pwg-state-default pwg-button" rel="nofollow">
     48                        <span class="pwg-icon pwg-icon-camera-info">&nbsp;</span><span class="pwg-button-text">{'Show file metadata'|@translate}</span>
     49                </a>
     50{/if}
     51{if isset($current.U_DOWNLOAD)}
     52                <a href="{$current.U_DOWNLOAD}" title="{'download this file'|@translate}" class="pwg-state-default pwg-button" rel="nofollow">
     53                        <span class="pwg-icon pwg-icon-save">&nbsp;</span><span class="pwg-button-text">{'download'|@translate}</span>
     54                </a>
     55{/if}
     56{if isset($PLUGIN_PICTURE_ACTIONS)}{$PLUGIN_PICTURE_ACTIONS}{/if}
     57{if isset($favorite)}
     58                <a href="{$favorite.U_FAVORITE}" title="{if $favorite.IS_FAVORITE}{'delete this image from your favorites'|@translate}{else}{'add this image to your favorites'|@translate}{/if}" class="pwg-state-default pwg-button" rel="nofollow">
     59                        <span class="pwg-icon pwg-icon-favorite-{if $favorite.IS_FAVORITE}del{else}add{/if}">&nbsp;</span><span class="pwg-button-text">{'Favorites'|@translate}</span>
     60                </a>
     61{/if}
     62{if isset($U_SET_AS_REPRESENTATIVE)}
     63                <a href="{$U_SET_AS_REPRESENTATIVE}" title="{'set as category representative'|@translate}" class="pwg-state-default pwg-button" rel="nofollow">
     64                        <span class="pwg-icon pwg-icon-representative">&nbsp;</span><span class="pwg-button-text">{'representative'|@translate}</span>
     65                </a>
     66{/if}
     67{if isset($U_ADMIN)}
     68                <a href="{$U_ADMIN}" title="{'Modify information'|@translate}" class="pwg-state-default pwg-button" rel="nofollow">
     69                        <span class="pwg-icon pwg-icon-edit">&nbsp;</span><span class="pwg-button-text">{'edit'|@translate}</span>
     70                </a>
     71{/if}
     72{if isset($U_CADDIE)}{*caddie management BEGIN*}
    6373<script type="text/javascript">
    6474{literal}function addToCadie(aElement, rootUrl, id)
    6575{
    6676if (aElement.disabled) return;
    67 aElement.disabled=true; 
     77aElement.disabled=true;
    6878var y = new PwgWS(rootUrl);
    6979
    7080y.callService(
    71   "pwg.caddie.add", {image_id: id} ,
    72   {
    73     onFailure: function(num, text) { alert(num + " " + text); document.location=aElement.href; },
    74     onSuccess: function(result) { aElement.disabled = false; }
    75   }
    76   );
     81        "pwg.caddie.add", {image_id: id} ,
     82        {
     83                onFailure: function(num, text) { alert(num + " " + text); document.location=aElement.href; },
     84                onSuccess: function(result) { aElement.disabled = false; }
     85        }
     86        );
    7787}{/literal}
    7888</script>
    79       <a href="{$U_CADDIE}" onclick="addToCadie(this, '{$ROOT_URL|@escape:'javascript'}', {$current.id}); return false;" title="{'add to caddie'|@translate}"><img src="{$ROOT_URL}{$themeconf.icon_dir}/caddie_add.png" class="button" alt="{'caddie'|@translate}"></a>
    80     {/if}{*caddie management END*}
    81   </div>
    82   {include file='picture_nav_buttons.tpl'|@get_extent:'picture_nav_buttons'}
     89                <a href="{$U_CADDIE}" onclick="addToCadie(this, '{$ROOT_URL|@escape:'javascript'}', {$current.id}); return false;" title="{'add to caddie'|@translate}" class="pwg-state-default pwg-button" rel="nofollow">
     90                        <span class="pwg-icon pwg-icon-caddie-add">&nbsp;</span><span class="pwg-button-text">{'caddie'|@translate}</span>
     91                </a>
     92{/if}{*caddie management END*}
     93        </div>   
     94
     95        {include file='picture_nav_buttons.tpl'|@get_extent:'picture_nav_buttons'}
    8396</div> <!-- imageToolBar -->
    84 
    85 {include file='picture_toolbar.tpl'}
    8697
    8798<div id="theImage">

  • trunk/themes/default/template/picture_nav_buttons.tpl

    r7877 r8119  
    1   <div class="navButtons">
    2 
     1<div class="navigationButtons">
    32{if $DISPLAY_NAV_BUTTONS or isset($slideshow)}
    4 {if isset($last)}
    5   <a class="navButton" href="{$last.U_IMG}" title="{'Last'|@translate} : {$last.TITLE}" rel="last"><img src="{$ROOT_URL}{$themeconf.icon_dir}/last.png" class="button" alt="{'Last'|@translate}"></a>
     3{if isset($slideshow)}
     4{if isset($slideshow.U_INC_PERIOD)}
     5        <a href="{$slideshow.U_INC_PERIOD}" title="{'Accelerate diaporama speed'|@translate}" class="pwg-state-default pwg-button">
     6                <span class="pwg-icon pwg-icon-clock-minus">&nbsp;</span><span class="pwg-button-text">{'Accelerate diaporama speed'|@translate}</span>
     7        </a>
    68{else}
    7   <a class="navButton"><img src="{$ROOT_URL}{$themeconf.icon_dir}/last_unactive.png" class="button" alt=""></a>
     9        <span class="pwg-state-disabled pwg-button">
     10                <span class="pwg-icon pwg-icon-clock-minus">&nbsp;</span><span class="pwg-button-text">{'Accelerate diaporama speed'|@translate}</span>
     11        </span>
    812{/if}
    9  
    10 {if isset($next)}
    11   <a class="navButton" href="{$next.U_IMG}" title="{'Next'|@translate} : {$next.TITLE}" rel="next"><img src="{$ROOT_URL}{$themeconf.icon_dir}/right.png" class="button" alt="{'Next'|@translate}"></a>
     13{if isset($slideshow.U_DEC_PERIOD)}
     14        <a href="{$slideshow.U_DEC_PERIOD}" title="{'Accelerate diaporama speed'|@translate}" class="pwg-state-default pwg-button">
     15                <span class="pwg-icon pwg-icon-clock-plus">&nbsp;</span><span class="pwg-button-text">{'Accelerate diaporama speed'|@translate}</span>
     16        </a>
    1217{else}
    13   <a class="navButton"><img src="{$ROOT_URL}{$themeconf.icon_dir}/right_unactive.png" class="button" alt=""></a>
    14 {/if}
    15 
    16 {if isset($slideshow.U_START_PLAY)}
    17   <a class="navButton" href="{$slideshow.U_START_PLAY}" title="{'Play of slideshow'|@translate}"><img src="{$ROOT_URL}{$themeconf.icon_dir}/play.png" class="button" alt="{'Play of slideshow'|@translate}"></a>
    18 {/if}
    19 
    20 {if isset($slideshow.U_STOP_PLAY)}
    21   <a class="navButton" href="{$slideshow.U_STOP_PLAY}" title="{'Pause of slideshow'|@translate}"><img src="{$ROOT_URL}{$themeconf.icon_dir}/pause.png" class="button" alt="{'Pause of slideshow'|@translate}"></a>
    22 {/if}
    23 
    24 {if isset($U_UP) and !isset($slideshow)}
    25   <a class="navButton" href="{$U_UP}" title="{'Thumbnails'|@translate}" rel="up"><img src="{$ROOT_URL}{$themeconf.icon_dir}/up.png" class="button" alt="{'Thumbnails'|@translate}"></a>
    26 {/if}
    27  
    28 {if isset($previous)}
    29   <a class="navButton" href="{$previous.U_IMG}" title="{'Previous'|@translate} : {$previous.TITLE}" rel="prev"><img src="{$ROOT_URL}{$themeconf.icon_dir}/left.png" class="button" alt="{'Previous'|@translate}"></a>
    30 {else}
    31   <a class="navButton"><img src="{$ROOT_URL}{$themeconf.icon_dir}/left_unactive.png" class="button" alt=""></a>
    32 {/if}
    33  
    34 {if isset($first)}
    35   <a class="navButton" href="{$first.U_IMG}" title="{'First'|@translate} : {$first.TITLE}" rel="first"><img src="{$ROOT_URL}{$themeconf.icon_dir}/first.png" class="button" alt="{'First'|@translate}"></a>
    36 {else}
    37   <a class="navButton"><img src="{$ROOT_URL}{$themeconf.icon_dir}/first_unactive.png" class="button" alt=""></a>
    38 {/if}
    39 
    40 
    41 {if isset($slideshow.U_START_REPEAT)}
    42   <a class="navButton" href="{$slideshow.U_START_REPEAT}" title="{'Repeat the slideshow'|@translate}"><img src="{$ROOT_URL}{$themeconf.icon_dir}/start_repeat.png" class="button" alt="{'Repeat the slideshow'|@translate}"></a>
    43 {/if}
    44 
    45 {if isset($slideshow.U_STOP_REPEAT)}
    46   <a class="navButton" href="{$slideshow.U_STOP_REPEAT}" title="{'Not repeat the slideshow'|@translate}"><img src="{$ROOT_URL}{$themeconf.icon_dir}/stop_repeat.png" class="button" alt="{'Not repeat the slideshow'|@translate}"></a>
    47 {/if}
    48 
    49 {if isset($slideshow)}
    50   {if isset($slideshow.U_DEC_PERIOD)}
    51     <a class="navButton" href="{$slideshow.U_DEC_PERIOD}" title="{'Accelerate diaporama speed'|@translate}"><img src="{$ROOT_URL}{$themeconf.icon_dir}/dec_period.png" class="button" alt="{'Accelerate diaporama speed'|@translate}"></a>
    52   {else}
    53     <a class="navButton"> <img src="{$ROOT_URL}{$themeconf.icon_dir}/dec_period_unactive.png" class="button" alt=""></a>
    54   {/if}
    55 
    56   {if isset($slideshow.U_INC_PERIOD)}
    57     <a class="navButton" href="{$slideshow.U_INC_PERIOD}" title="{'Reduce diaporama speed'|@translate}"><img src="{$ROOT_URL}{$themeconf.icon_dir}/inc_period.png" class="button" alt="{'Reduce diaporama speed'|@translate}"></a>
    58   {else}
    59     <a class="navButton"> <img src="{$ROOT_URL}{$themeconf.icon_dir}/inc_period_unactive.png" class="button" alt=""></a>
    60   {/if}
     18        <span class="pwg-state-disabled pwg-button">
     19                <span class="pwg-icon pwg-icon-clock-plus">&nbsp;</span><span class="pwg-button-text">{'Accelerate diaporama speed'|@translate}</span>
     20        </span>
    6121{/if}
    6222{/if}
    63 
    64   </div>
     23{if isset($slideshow.U_START_REPEAT)}
     24        <a href="{$slideshow.U_START_REPEAT}" title="{'Repeat the slideshow'|@translate}" class="pwg-state-default pwg-button">
     25                <span class="pwg-icon pwg-icon-repeat-play">&nbsp;</span><span class="pwg-button-text">{'Repeat the slideshow'|@translate}</span>
     26        </a>
     27{/if}
     28{if isset($slideshow.U_STOP_REPEAT)}
     29        <a href="{$slideshow.U_STOP_REPEAT}" title="{'Not repeat the slideshow'|@translate}" class="pwg-state-default pwg-button">
     30                <span class="pwg-icon pwg-icon-repeat-stop">&nbsp;</span><span class="pwg-button-text">{'Not repeat the slideshow'|@translate}</span>
     31        </a>
     32{/if}
     33{if isset($first)}
     34        <a href="{$first.U_IMG}" title="{'First'|@translate} : {$first.TITLE}" class="pwg-state-default pwg-button">
     35                <span class="pwg-icon pwg-icon-arrowstop-w">&nbsp;</span><span class="pwg-button-text">{'First'|@translate}</span>
     36        </a>
     37{else}
     38        <span class="pwg-state-disabled pwg-button">
     39                <span class="pwg-icon pwg-icon-arrowstop-w">&nbsp;</span><span class="pwg-button-text">{'First'|@translate}</span>
     40        </span>
     41{/if}
     42{if isset($previous)}
     43        <a href="{$previous.U_IMG}" title="{'Previous'|@translate} : {$previous.TITLE}" class="pwg-state-default pwg-button">
     44                <span class="pwg-icon pwg-icon-arrow-w">&nbsp;</span><span class="pwg-button-text">{'Previous'|@translate}</span>
     45        </a>
     46{else}
     47        <span class="pwg-state-disabled pwg-button">
     48                <span class="pwg-icon pwg-icon-arrow-w">&nbsp;</span><span class="pwg-button-text">{'Previous'|@translate}</span>
     49        </span>
     50{/if}
     51{if isset($slideshow.U_START_PLAY)}
     52        <a href="{$slideshow.U_START_PLAY}" title="{'Play of slideshow'|@translate}" class="pwg-state-default pwg-button">
     53                <span class="pwg-icon pwg-icon-play">&nbsp;</span><span class="pwg-button-text">{'Play of slideshow'|@translate}</span>
     54        </a>
     55{/if}
     56{if isset($slideshow.U_STOP_PLAY)}
     57        <a href="{$slideshow.U_STOP_PLAY}" title="{'Pause of slideshow'|@translate}" class="pwg-state-default pwg-button">
     58                <span class="pwg-icon pwg-icon-pause">&nbsp;</span><span class="pwg-button-text">{'Pause of slideshow'|@translate}</span>
     59        </a>
     60{/if}
     61{if isset($U_UP) and !isset($slideshow)}
     62        <a href="{$U_UP}" title="{'Thumbnails'|@translate}" class="pwg-state-default pwg-button">
     63                <span class="pwg-icon pwg-icon-arrow-n">&nbsp;</span><span class="pwg-button-text">{'Thumbnails'|@translate}</span>
     64        </a>
     65{/if}
     66{if isset($next)}
     67        <a href="{$next.U_IMG}" title="{'Next'|@translate} : {$next.TITLE}" class="pwg-state-default pwg-button pwg-button-icon-right">
     68                <span class="pwg-icon pwg-icon-arrow-e">&nbsp;</span><span class="pwg-button-text">{'Next'|@translate}</span>
     69        </a>
     70{else}
     71        <span class="pwg-state-disabled pwg-button pwg-button-icon-right">
     72                <span class="pwg-icon pwg-icon-arrow-e">&nbsp;</span><span class="pwg-button-text">{'Next'|@translate}</span>
     73        </span>
     74{/if}
     75{if isset($last)}
     76        <a href="{$last.U_IMG}" title="{'Last'|@translate} : {$last.TITLE}" class="pwg-state-default pwg-button pwg-button-icon-right">
     77                <span class="pwg-icon pwg-icon-arrowstop-e"></span><span class="pwg-button-text">{'Last'|@translate}</span>
     78        </a>
     79{else}
     80        <span class="pwg-state-disabled pwg-button pwg-button-icon-right">
     81                <span class="pwg-icon pwg-icon-arrowstop-e">&nbsp;</span><span class="pwg-button-text">{'Last'|@translate}</span>
     82        </span>
     83{/if}
     84{/if}
     85</div>
    6586
    6687<script type="text/javascript">// <![CDATA[ {literal}

  • trunk/themes/default/template/slideshow.tpl

    r8066 r8119  
    1515</div>
    1616
    17 {include file='picture_toolbar.tpl'}
    18 
    1917<div id="theImage">
    2018  {$ELEMENT_CONTENT}

  • trunk/themes/default/theme.css

    r8091 r8119  
    135135UL.categoryActions LI {
    136136        display: inline;
    137 }
    138 
    139 UL.categoryActions A IMG, UL.categoryActions A {
    140         border: 0;
    141         margin-bottom: -5px;
    142137}
    143138
    … …  
    344339#imageToolBar {
    345340        text-align: center;
    346         position: relative;
    347341        clear: both;
    348342        margin-bottom: 4px;
    … …  
    351345}
    352346
    353 #imageToolBar A, #imageToolBar IMG {
    354         display: block;
    355         border: 0;
    356         margin: 0; padding: 0;
    357 }
    358 #imageToolBar A { width: 48px; }
    359 #imageToolBar IMG { margin: 2px auto; }
    360 #imageToolBar .randomButtons A { float: left; }
    361 #imageToolBar .navButtons    A { float: right; }
     347#imageToolBar .actionButtons { float: left; }
     348#imageToolBar .navigationButtons   { float: right; }
     349#imageToolBar .pwg-button {width:42px;}
     350
    362351
    363352#theImage {
    … …  
    729718 * Default colors
    730719 */
    731 #imageToolBar * {
    732         background: inherit;
    733 }
    734 
    735 /* So that non-links are slightly greyed out */
     720
     721 /* So that non-links are slightly greyed out */
    736722.content .navigationBar, .calItemEmpty, TD.calDayCellEmpty {
    737723        color: #b0b0b0;
Note: See TracChangeset for help on using the changeset viewer.