Changeset 9821


Ignore:
Timestamp:
Mar 22, 2011, 3:30:57 PM (9 years ago)
Author:
flop25
Message:

polaroid for thumbnails
polaroid comp. for opera and webkit browsers
medium centered

Location:
extensions/flop_style
Files:
5 edited

Legend:

Unmodified
Added
Removed
  • extensions/flop_style/mainpage_categories/medium_cat.css

    r9720 r9821  
    11/*catégories*/
    2 
    3 
    4 #content ul.thumbnailCategories li {
    5         width:160px;
    6         height:205px;
     2#content .thumbnailCategories {
     3        padding-left:auto;
     4        padding-right:auto;
     5        padding: 5px;
     6        list-style: none outside none;
     7        text-align: center;
     8}
     9#content .thumbnailCategories li {
     10        width: auto;
     11        float: none;
     12        display:inline;
     13        text-align:center;
     14        margin-left:10px;
    715        margin: 5px;
    816        padding: 5px;
    917}
     18
    1019
    1120#content div.thumbnailCategory {
     
    1322        width:100%;
    1423        height:100%;
    15         margin: 0;
     24        margin: 0 auto;
    1625        padding: 0;
    1726        vertical-align:middle;
     
    6473}
    6574
    66 .content div.thumbnailCategory {
    67 /*background-image:none;*/
     75#content div.thumbnailCategory div.illustration img {
     76    height: 96px;
    6877}
  • extensions/flop_style/mainpage_categories/polaroid.css

    r9818 r9821  
    22.content {
    33        display:block;
    4     position: relative;
    5     z-index: 1;}
     4        position: relative;
     5        z-index: 1;
     6}
    67ul.polaroids {
    78        list-style: none;
     
    1516}
    1617ul.polaroids li {
    17     display: inline;
     18        display: inline;
    1819}
    1920ul.polaroids a {
    20     -moz-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25);
    21     -moz-transform: rotate(-2deg);
    22     background: none repeat scroll 0 0 #FFFFFF;
    23     color: #333333;
    24     display: inline;
    25     float: left;
    26     font-family: "Marker Felt",sans-serif;
    27     font-size: 18px;
    28     margin: 0 0 27px 30px;
    29     padding: 10px 10px 15px;
    30     text-align: center;
    31     text-decoration: none;
    32     width: auto;
     21        -moz-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25);
     22        -moz-transform: rotate(-2deg);
     23        -webkit-transition: -webkit-transform .15s linear;
     24        -webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25);
     25        -webkit-transform: rotate(-2deg);
     26        -o-transition: -webkit-transform .15s linear;
     27        -o-box-shadow: 0 3px 6px rgba(0,0,0,.25);
     28        -o-transform:rotate(-2deg);
     29        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25);
     30  text-shadow: 0 1px 1px #CCC;
     31        background: none repeat scroll 0 0 #FFFFFF;
     32        color: #333333;
     33        display: inline;
     34        float: left;
     35        font-family: "Marker Felt", sans-serif;
     36        font-size: 18px;
     37        margin: 0 0 27px 30px;
     38        padding: 10px 10px 15px;
     39        text-align: center;
     40        text-decoration: none;
     41        width: auto;
     42        border:none;
    3343}
    3444ul.polaroids img {
    35     display: block;
    36     margin-bottom: 12px;
    37     width: 190px;
     45        display: block;
     46        margin-bottom: 12px;
     47        width: 190px;
    3848}
    3949ul.polaroids a:after {
    40     content: attr(title);
     50        content: attr(title);
    4151}
    4252ul.polaroids li:nth-child(2n) a {
    43     -moz-transform: rotate(2deg);
     53        -moz-transform: rotate(2deg);
     54        -webkit-transform: rotate(2deg);
     55        -o-transform:rotate(2deg);
    4456}
    4557ul.polaroids li:nth-child(3n) a {
    46     -moz-transform: none;
    47     position: relative;
    48     top: -5px;
     58        -moz-transform: none;
     59        -webkit-transform: none;
     60        -o-transform:none;
     61        position: relative;
     62        top: -5px;
    4963}
    5064ul.polaroids li:nth-child(5n) a {
    51     -moz-transform: rotate(5deg);
    52     position: relative;
    53     right: 5px;
     65        -moz-transform: rotate(5deg);
     66        -webkit-transform: rotate(5deg);
     67        -o-transform: rotate(5deg);
     68        position: relative;
     69        right: 5px;
    5470}
    5571ul.polaroids li:nth-child(8n) a {
    56     position: relative;
    57     right: 5px;
    58     top: 8px;
     72        position: relative;
     73        right: 5px;
     74        top: 8px;
    5975}
    6076ul.polaroids li:nth-child(11n) a {
    61     left: -5px;
    62     position: relative;
    63     top: 3px;
     77        left: -5px;
     78        position: relative;
     79        top: 3px;
    6480}
    6581ul.polaroids li.messy a {
    66     -moz-transform: rotate(-5deg);
    67     margin-left: 160px;
    68     margin-top: -375px;
     82        -moz-transform: rotate(-5deg);
     83        -webkit-transform: rotate(-5deg);
     84        -o-transform: rotate(-5deg);
     85        margin-left: 160px;
     86        margin-top: -375px;
    6987}
    7088ul.polaroids li a:hover {
    71     -moz-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.5);
    72     -moz-transform: scale(1.25);
    73     position: relative;
    74     z-index: 5;
     89        -moz-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.5);
     90        -webkit-box-shadow: 0 3px 6px rgba(0,0,0,.5);
     91        -moz-transform: scale(1.25);
     92        -webkit-transform: scale(1.25);
     93        -o-transform:  scale(1.25);
     94        position: relative;
     95        z-index: 5;
     96        border:none;
    7597}
  • extensions/flop_style/mainpage_categories/polaroid.tpl

    r9818 r9821  
    44{foreach from=$category_thumbnails item=cat}
    55  <li>
    6                         <a href="{$cat.URL}" title="{$cat.NAME|truncate:38:" [...]"|@replace:'"':' '}">
     6                        <a href="{$cat.URL}" title="{$cat.NAME|truncate:20:" [...]"|@replace:'"':' '}">
    77                                <img src="{$cat.TN_SRC}"  alt="{$cat.TN_ALT}" title="{$cat.NAME|@replace:'"':' '} - {'display this album'|@translate}" >
    88                        </a>
  • extensions/flop_style/thumbnails/polaroid.css

    r9818 r9821  
    22.content {
    33        display:block;
    4     position: relative;
    5     z-index: 1;}
    6 ul.polaroids {
     4        position: relative;
     5        z-index: 1;
     6}
     7.navigationBar {
     8        clear:both;
     9}
     10ul.thumbnails {
    711        list-style: none;
    812        overflow: visible;
     
    1418        margin: 0px;
    1519}
    16 ul.polaroids li {
    17     display: inline;
     20ul.thumbnails li {
     21        display: inline;
    1822}
    19 ul.polaroids a {
    20     -moz-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25);
    21     -moz-transform: rotate(-2deg);
    22     background: none repeat scroll 0 0 #FFFFFF;
    23     color: #333333;
    24     display: inline;
    25     float: left;
    26     font-family: "Marker Felt",sans-serif;
    27     font-size: 18px;
    28     margin: 0 0 27px 30px;
    29     padding: 10px 10px 15px;
    30     text-align: center;
    31     text-decoration: none;
    32     width: auto;
     23ul.thumbnails a {
     24        -moz-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25);
     25        -moz-transform: rotate(-2deg);
     26        -webkit-transition: -webkit-transform .15s linear;
     27        -webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25);
     28        -webkit-transform: rotate(-2deg);
     29        -o-transition: -webkit-transform .15s linear;
     30        -o-box-shadow: 0 3px 6px rgba(0,0,0,.25);
     31        -o-transform:rotate(-2deg);
     32        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25);
     33  text-shadow: 0 1px 1px #CCC;
     34        background: none repeat scroll 0 0 #FFFFFF;
     35        color: #333333;
     36        display: inline;
     37        float: left;
     38        font-family: "Marker Felt", sans-serif;
     39        font-size: 18px;
     40        margin: 0 0 27px 30px;
     41        padding: 10px 10px 15px;
     42        text-align: center;
     43        text-decoration: none;
     44        width: auto;
     45        overflow:hidden;
     46        border:none;
    3347}
    34 ul.polaroids img {
    35     display: block;
    36     margin-bottom: 12px;
    37     width: 190px;
     48ul.thumbnails img {
     49        display: block;
     50        margin-bottom: 12px;
     51        width: 118px;
    3852}
    39 ul.polaroids a:after {
    40     content: attr(title);
     53ul.thumbnails a:after {
     54        content: attr(title);
    4155}
    42 ul.polaroids li:nth-child(2n) a {
    43     -moz-transform: rotate(2deg);
     56ul.thumbnails li:nth-child(2n) a {
     57        -moz-transform: rotate(2deg);
     58        -webkit-transform: rotate(2deg);
     59        -o-transform:rotate(2deg);
    4460}
    45 ul.polaroids li:nth-child(3n) a {
    46     -moz-transform: none;
    47     position: relative;
    48     top: -5px;
     61ul.thumbnails li:nth-child(3n) a {
     62        -moz-transform: none;
     63        -webkit-transform: none;
     64        -o-transform:none;
     65        position: relative;
     66        top: -5px;
    4967}
    50 ul.polaroids li:nth-child(5n) a {
    51     -moz-transform: rotate(5deg);
    52     position: relative;
    53     right: 5px;
     68ul.thumbnails li:nth-child(5n) a {
     69        -moz-transform: rotate(5deg);
     70        -webkit-transform: rotate(5deg);
     71        -o-transform: rotate(5deg);
     72        position: relative;
     73        right: 5px;
    5474}
    55 ul.polaroids li:nth-child(8n) a {
    56     position: relative;
    57     right: 5px;
    58     top: 8px;
     75ul.thumbnails li:nth-child(8n) a {
     76        position: relative;
     77        right: 5px;
     78        top: 8px;
    5979}
    60 ul.polaroids li:nth-child(11n) a {
    61     left: -5px;
    62     position: relative;
    63     top: 3px;
     80ul.thumbnails li:nth-child(11n) a {
     81        left: -5px;
     82        position: relative;
     83        top: 3px;
    6484}
    65 ul.polaroids li.messy a {
    66     -moz-transform: rotate(-5deg);
    67     margin-left: 160px;
    68     margin-top: -375px;
     85ul.thumbnails li.messy a {
     86        -moz-transform: rotate(-5deg);
     87        -webkit-transform: rotate(-5deg);
     88        -o-transform: rotate(-5deg);
     89        margin-left: 160px;
     90        margin-top: -375px;
    6991}
    70 ul.polaroids li a:hover {
    71     -moz-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.5);
    72     -moz-transform: scale(1.25);
    73     position: relative;
    74     z-index: 5;
     92ul.thumbnails li a:hover {
     93        -moz-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.5);
     94        -webkit-box-shadow: 0 3px 6px rgba(0,0,0,.5);
     95        -moz-transform: scale(1.25);
     96        -webkit-transform: scale(1.25);
     97        -o-transform:  scale(1.25);
     98        position: relative;
     99        z-index: 5;
     100        border:none;
    75101}
  • extensions/flop_style/thumbnails/polaroid.tpl

    r9818 r9821  
     1{combine_css path="template-extension/flop_style/thumbnails/polaroid.css"}
     2
    13{if !empty($thumbnails)}
    24{strip}{foreach from=$thumbnails item=thumbnail}
    35        <li>
    4                         <a href="{$thumbnail.URL}" title="{if isset($thumbnail.NAME)}{$thumbnail.NAME}{elseif}{$thumbnail.TN_TITLE}{/if}">
     6                        <a href="{$thumbnail.URL}" title="{if isset($thumbnail.NAME)}{$thumbnail.NAME|truncate:11:" [...]"|@replace:'"':' '}{/if}">
    57                                <img src="{$thumbnail.TN_SRC}"  alt="{$thumbnail.TN_ALT}" title="{$thumbnail.TN_TITLE}" >
    68                        </a>
Note: See TracChangeset for help on using the changeset viewer.