![(please configure the [header_logo] section in trac.ini)](http://piwigo.org/screenshots/piwigo_logo_on_white.png){kind=logo}
Changeset 9821
- Timestamp:
- 03/22/11 15:30:57 (2 years ago)
- Location:
- extensions/flop_style
- Files:
-
- 5 modified
-
mainpage_categories/medium_cat.css (modified) (3 diffs)
-
mainpage_categories/polaroid.css (modified) (2 diffs)
-
mainpage_categories/polaroid.tpl (modified) (1 diff)
-
thumbnails/polaroid.css (modified) (2 diffs)
-
thumbnails/polaroid.tpl (modified) (1 diff)
Legend:
- Unmodified
- Added
- Removed
-
extensions/flop_style/mainpage_categories/medium_cat.css
r9720 r9821 1 1 /*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; 7 15 margin: 5px; 8 16 padding: 5px; 9 17 } 18 10 19 11 20 #content div.thumbnailCategory { … … 13 22 width:100%; 14 23 height:100%; 15 margin: 0 ;24 margin: 0 auto; 16 25 padding: 0; 17 26 vertical-align:middle; … … 64 73 } 65 74 66 .content div.thumbnailCategory{67 /*background-image:none;*/ 75 #content div.thumbnailCategory div.illustration img { 76 height: 96px; 68 77 } -
extensions/flop_style/mainpage_categories/polaroid.css
r9818 r9821 2 2 .content { 3 3 display:block; 4 position: relative; 5 z-index: 1;} 4 position: relative; 5 z-index: 1; 6 } 6 7 ul.polaroids { 7 8 list-style: none; … … 15 16 } 16 17 ul.polaroids li { 17 18 display: inline; 18 19 } 19 20 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; 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; 33 43 } 34 44 ul.polaroids img { 35 36 37 45 display: block; 46 margin-bottom: 12px; 47 width: 190px; 38 48 } 39 49 ul.polaroids a:after { 40 50 content: attr(title); 41 51 } 42 52 ul.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); 44 56 } 45 57 ul.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; 49 63 } 50 64 ul.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; 54 70 } 55 71 ul.polaroids li:nth-child(8n) a { 56 57 58 72 position: relative; 73 right: 5px; 74 top: 8px; 59 75 } 60 76 ul.polaroids li:nth-child(11n) a { 61 62 63 77 left: -5px; 78 position: relative; 79 top: 3px; 64 80 } 65 81 ul.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; 69 87 } 70 88 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; 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; 75 97 } -
extensions/flop_style/mainpage_categories/polaroid.tpl
r9818 r9821 4 4 {foreach from=$category_thumbnails item=cat} 5 5 <li> 6 <a href="{$cat.URL}" title="{$cat.NAME|truncate: 38:" [...]"|@replace:'"':' '}">6 <a href="{$cat.URL}" title="{$cat.NAME|truncate:20:" [...]"|@replace:'"':' '}"> 7 7 <img src="{$cat.TN_SRC}" alt="{$cat.TN_ALT}" title="{$cat.NAME|@replace:'"':' '} - {'display this album'|@translate}" > 8 8 </a> -
extensions/flop_style/thumbnails/polaroid.css
r9818 r9821 2 2 .content { 3 3 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 } 10 ul.thumbnails { 7 11 list-style: none; 8 12 overflow: visible; … … 14 18 margin: 0px; 15 19 } 16 ul. polaroids li {17 20 ul.thumbnails li { 21 display: inline; 18 22 } 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; 23 ul.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; 33 47 } 34 ul. polaroids img {35 36 37 width: 190px;48 ul.thumbnails img { 49 display: block; 50 margin-bottom: 12px; 51 width: 118px; 38 52 } 39 ul. polaroids a:after {40 53 ul.thumbnails a:after { 54 content: attr(title); 41 55 } 42 ul.polaroids li:nth-child(2n) a { 43 -moz-transform: rotate(2deg); 56 ul.thumbnails li:nth-child(2n) a { 57 -moz-transform: rotate(2deg); 58 -webkit-transform: rotate(2deg); 59 -o-transform:rotate(2deg); 44 60 } 45 ul.polaroids li:nth-child(3n) a { 46 -moz-transform: none; 47 position: relative; 48 top: -5px; 61 ul.thumbnails li:nth-child(3n) a { 62 -moz-transform: none; 63 -webkit-transform: none; 64 -o-transform:none; 65 position: relative; 66 top: -5px; 49 67 } 50 ul.polaroids li:nth-child(5n) a { 51 -moz-transform: rotate(5deg); 52 position: relative; 53 right: 5px; 68 ul.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; 54 74 } 55 ul. polaroids li:nth-child(8n) a {56 57 58 75 ul.thumbnails li:nth-child(8n) a { 76 position: relative; 77 right: 5px; 78 top: 8px; 59 79 } 60 ul. polaroids li:nth-child(11n) a {61 62 63 80 ul.thumbnails li:nth-child(11n) a { 81 left: -5px; 82 position: relative; 83 top: 3px; 64 84 } 65 ul.polaroids li.messy a { 66 -moz-transform: rotate(-5deg); 67 margin-left: 160px; 68 margin-top: -375px; 85 ul.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; 69 91 } 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; 92 ul.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; 75 101 } -
extensions/flop_style/thumbnails/polaroid.tpl
r9818 r9821 1 {combine_css path="template-extension/flop_style/thumbnails/polaroid.css"} 2 1 3 {if !empty($thumbnails)} 2 4 {strip}{foreach from=$thumbnails item=thumbnail} 3 5 <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}"> 5 7 <img src="{$thumbnail.TN_SRC}" alt="{$thumbnail.TN_ALT}" title="{$thumbnail.TN_TITLE}" > 6 8 </a>
