amélioration des thèmes
This commit is contained in:
Tom Canac
parent
d8f459769c
commit
ef74392a6f
4 changed files with 223 additions and 249 deletions
|
|
@ -19,7 +19,7 @@ Please enjoy this free script!
|
|||
$thumbs_pr_page = "39"; //Number of thumbnails on a single page
|
||||
$gallery_width = "80%"; //Gallery width. Eg: "500px" or "70%"
|
||||
$backgroundcolor = "white"; //This provides a quick way to change your gallerys background to suit your website. Use either main colors like "black", "white", "yellow" etc. Or HEX colors, eg. "#AAAAAA"
|
||||
$templatefile = "rounded"; //Template filename (must be placed in 'templates' folder)
|
||||
$templatefile = "board"; //Template filename (must be placed in 'templates' folder)
|
||||
$title = "MiniBoardNano gallery"; // Text to be displayed in browser titlebar
|
||||
$author = "John Doe";
|
||||
$folder_color = "black"; // Color of folder icons: blue / black / vista / purple / green / grey
|
||||
|
|
|
|||
|
|
@ -25,37 +25,37 @@
|
|||
background: #E7E6E0;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #333333;
|
||||
font-weight: bold;
|
||||
text-decoration: none;
|
||||
}
|
||||
h1 {
|
||||
margin: 20px 0 0 0;
|
||||
font-family: Georgia, Lucida, serif;
|
||||
font-style: italic;
|
||||
margin: 20px 0 0 0;
|
||||
|
||||
}
|
||||
h1 a{
|
||||
color: #CC2027;
|
||||
}
|
||||
|
||||
body > header{
|
||||
background-color:#FFF;
|
||||
padding: 1px;
|
||||
margin-bottom: 15px;
|
||||
padding: 1px 0 0 0;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
#container, #innerheader{
|
||||
max-width: <% gallery_width %>;
|
||||
margin: 0px auto;
|
||||
}
|
||||
header aside{
|
||||
padding: 2rem 0;
|
||||
}
|
||||
img {
|
||||
border: none;
|
||||
}
|
||||
nav {
|
||||
font-size: 1.3em;
|
||||
padding: 15px 0px;
|
||||
padding-top: 2rem;
|
||||
}
|
||||
body > nav {
|
||||
text-align: center;
|
||||
|
|
@ -106,7 +106,6 @@
|
|||
text-decoration: none;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
/*----responsive----*/
|
||||
#gallery li {
|
||||
width: 24%;
|
||||
|
|
@ -140,11 +139,12 @@
|
|||
<h1><a href="<% gallery_root %>"><% title %></a></h1>
|
||||
<% messages %>
|
||||
<nav role="navigation"><% breadcrumb_navigation %></nav>
|
||||
<aside><% folder_comment %></aside>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main id="container">
|
||||
<header><% folder_comment %></header>
|
||||
|
||||
<ul id="gallery">
|
||||
<% thumbnails %>
|
||||
</ul>
|
||||
|
|
|
|||
|
|
@ -12,171 +12,150 @@
|
|||
<link rel="stylesheet" href="<% gallery_root %>css/mediaboxAdvWhite.css" type="text/css" media="screen" />
|
||||
|
||||
<style type="text/css">
|
||||
html {
|
||||
font-size:62.5%;
|
||||
}
|
||||
|
||||
.clear {
|
||||
clear:both;
|
||||
}
|
||||
|
||||
body {
|
||||
width:100%;
|
||||
margin:0;
|
||||
padding:0;
|
||||
font-family:Helvetica,Arial,sans-serif;
|
||||
font-size:1.5rem;
|
||||
color:#FFF;
|
||||
background:#3B3A37;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration:none;
|
||||
font-weight:bold;
|
||||
color:#FFF;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin:20px 0 0;
|
||||
font-family:Georgia,Lucida,serif;
|
||||
font-style:italic;
|
||||
}
|
||||
|
||||
h1 a {
|
||||
color:#E63D24;
|
||||
}
|
||||
|
||||
body > header {
|
||||
margin-bottom:15px;
|
||||
padding:1px;
|
||||
text-align:center;
|
||||
}
|
||||
|
||||
#container,
|
||||
#innerheader {
|
||||
margin:0 auto;
|
||||
max-width:<% gallery_width %>;
|
||||
}
|
||||
|
||||
img {
|
||||
border:none;
|
||||
}
|
||||
|
||||
nav {
|
||||
padding:15px 0;
|
||||
font-size:1.3em;
|
||||
}
|
||||
|
||||
body > nav {
|
||||
text-align:center;
|
||||
}
|
||||
|
||||
#folder_comment {
|
||||
margin-bottom:10px;
|
||||
}
|
||||
|
||||
#folder_comment a {
|
||||
text-decoration:none;
|
||||
color:#FFCC11;
|
||||
}
|
||||
|
||||
#gallery {
|
||||
margin:0;
|
||||
padding:0;
|
||||
list-style:none;
|
||||
}
|
||||
|
||||
#gallery li,
|
||||
#gallery li img {
|
||||
border-radius:4px;
|
||||
}
|
||||
|
||||
#gallery li {
|
||||
float:left;
|
||||
position:relative;
|
||||
margin:.5%;
|
||||
}
|
||||
|
||||
#gallery li img {
|
||||
width:100%;
|
||||
border-radius:100%;
|
||||
-webkit-box-shadow:0 0 2px -1px #000;
|
||||
box-shadow:0 0 2px -1px #000;
|
||||
}
|
||||
|
||||
#gallery li:hover img {
|
||||
-webkit-box-shadow:0 0 5px 0 #000;
|
||||
box-shadow:0 0 5px 0 #000;
|
||||
}
|
||||
|
||||
#gallery li:hover img,
|
||||
#gallery li img,
|
||||
#gallery li em,
|
||||
#gallery li:hover em {
|
||||
-webkit-transition:all .2s ease-in;
|
||||
-ms-transition:all .2s ease-in;
|
||||
-o-transition:all .2s ease-in;
|
||||
transition:all .2s ease-in;
|
||||
}
|
||||
|
||||
#gallery em {
|
||||
position:absolute;
|
||||
top:-1px;
|
||||
bottom:-1px;
|
||||
zoom:1;
|
||||
width:100%;
|
||||
padding:40% 0;
|
||||
border-radius:100%;
|
||||
text-align:center;
|
||||
font-family:Georgia,Lucida,serif;
|
||||
font-size:2.5rem;
|
||||
font-style:italic;
|
||||
color:#FFF;
|
||||
margin: -0.5px 0 0 -0.5px;
|
||||
border:1px solid black;
|
||||
opacity:0;
|
||||
background:#000;
|
||||
filter:alpha(opacity=0);
|
||||
}
|
||||
|
||||
#gallery li:hover em {
|
||||
zoom:1;
|
||||
opacity:1;
|
||||
filter:alpha(opacity=1);
|
||||
}
|
||||
|
||||
footer {
|
||||
margin:25px 0;
|
||||
text-align:center;
|
||||
}
|
||||
|
||||
footer a {
|
||||
text-decoration:none;
|
||||
color:#666;
|
||||
}
|
||||
|
||||
html {
|
||||
font-size:62.5%;
|
||||
}
|
||||
.clear {
|
||||
clear:both;
|
||||
}
|
||||
body {
|
||||
width:100%;
|
||||
margin:0;
|
||||
padding:0;
|
||||
font-family:Helvetica,Arial,sans-serif;
|
||||
font-size:1.5rem;
|
||||
color:#FFF;
|
||||
background:#3B3A37;
|
||||
}
|
||||
a {
|
||||
text-decoration:none;
|
||||
font-weight:bold;
|
||||
color:#FFF;
|
||||
}
|
||||
h1 {
|
||||
margin:20px 0 0;
|
||||
font-family:Georgia,Lucida,serif;
|
||||
font-style:italic;
|
||||
}
|
||||
h1 a {
|
||||
color:#E63D24;
|
||||
}
|
||||
body > header {
|
||||
padding:1px;
|
||||
text-align:center;
|
||||
}
|
||||
#container,
|
||||
#innerheader {
|
||||
margin:0 auto;
|
||||
max-width:<% gallery_width %>;
|
||||
}
|
||||
#container header {
|
||||
padding:2rem 0;
|
||||
}
|
||||
img {
|
||||
border:none;
|
||||
}
|
||||
nav {
|
||||
padding-top:15px;
|
||||
font-size:1.3em;
|
||||
}
|
||||
body > nav {
|
||||
text-align:center;
|
||||
}
|
||||
#folder_comment {
|
||||
margin-bottom:10px;
|
||||
}
|
||||
#folder_comment a {
|
||||
text-decoration:none;
|
||||
color:#FFCC11;
|
||||
}
|
||||
#gallery {
|
||||
margin:0;
|
||||
padding:0;
|
||||
list-style:none;
|
||||
}
|
||||
#gallery li,
|
||||
#gallery li img {
|
||||
border-radius:4px;
|
||||
}
|
||||
#gallery li {
|
||||
float:left;
|
||||
position:relative;
|
||||
margin:.5%;
|
||||
}
|
||||
#gallery li img {
|
||||
width:100%;
|
||||
border-radius:100%;
|
||||
-webkit-box-shadow:0 0 2px -1px #000;
|
||||
box-shadow:0 0 2px -1px #000;
|
||||
}
|
||||
#gallery li:hover img {
|
||||
-webkit-box-shadow:0 0 5px 0 #000;
|
||||
box-shadow:0 0 5px 0 #000;
|
||||
}
|
||||
#gallery li:hover img,
|
||||
#gallery li img,
|
||||
#gallery li em,
|
||||
#gallery li:hover em {
|
||||
-webkit-transition:all .2s ease-in;
|
||||
-ms-transition:all .2s ease-in;
|
||||
-o-transition:all .2s ease-in;
|
||||
transition:all .2s ease-in;
|
||||
}
|
||||
#gallery em {
|
||||
position:absolute;
|
||||
top:-1px;
|
||||
bottom:-1px;
|
||||
zoom:1;
|
||||
width:100%;
|
||||
margin:-0.5px 0 0 -0.5px;
|
||||
padding:40% 0;
|
||||
border:1px solid #000;
|
||||
border-radius:100%;
|
||||
text-align:center;
|
||||
font-family:Georgia,Lucida,serif;
|
||||
font-size:2.5rem;
|
||||
font-style:italic;
|
||||
color:#FFF;
|
||||
opacity:0;
|
||||
background:#000;
|
||||
filter:alpha(opacity=0);
|
||||
}
|
||||
#gallery li:hover em {
|
||||
zoom:1;
|
||||
opacity:1;
|
||||
filter:alpha(opacity=1);
|
||||
}
|
||||
footer {
|
||||
margin:25px 0;
|
||||
text-align:center;
|
||||
}
|
||||
footer a {
|
||||
text-decoration:none;
|
||||
color:#666;
|
||||
}
|
||||
/*----responsive----*/
|
||||
#gallery li {
|
||||
width: 24%;
|
||||
height: 0;
|
||||
padding-bottom: 24%;
|
||||
width:24%;
|
||||
height:0;
|
||||
padding-bottom:24%;
|
||||
}
|
||||
@media (max-width: 1000px) {
|
||||
@media(max-width:1000px) {
|
||||
#gallery li {
|
||||
width: 32%;
|
||||
padding-bottom: 32%;
|
||||
width:32%;
|
||||
padding-bottom:32%;
|
||||
}
|
||||
}
|
||||
@media (max-width: 800px) {
|
||||
@media(max-width:800px) {
|
||||
#gallery li {
|
||||
width: 48%;
|
||||
padding-bottom: 48%;
|
||||
width:48%;
|
||||
padding-bottom:48%;
|
||||
}
|
||||
}
|
||||
@media (max-width: 450px) {
|
||||
@media(max-width:450px) {
|
||||
#gallery li {
|
||||
width: 100%;
|
||||
padding-bottom: 100%;
|
||||
width:100%;
|
||||
padding-bottom:100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -12,126 +12,121 @@
|
|||
<link rel="stylesheet" href="<% gallery_root %>css/mediaboxAdvWhite.css" type="text/css" media="screen" />
|
||||
|
||||
<style type="text/css">
|
||||
html{
|
||||
font-size: 62.5%;
|
||||
html {
|
||||
font-size:62.5%;
|
||||
}
|
||||
.clear {
|
||||
clear:both;
|
||||
}
|
||||
.clear{clear:both;}
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
font-size: 1.5rem;
|
||||
font-family: Helvetica, Arial, sans-serif;
|
||||
background: #2B2B2B;
|
||||
color: #BBB;
|
||||
width:100%;
|
||||
margin:0;
|
||||
padding:0;
|
||||
text-shadow:0 1px 0 #000;
|
||||
font-family:Helvetica,Arial,sans-serif;
|
||||
font-size:1.5rem;
|
||||
color:#FFF;
|
||||
background:#232321;
|
||||
}
|
||||
|
||||
a, h1 a {
|
||||
color: #CE4D45;
|
||||
font-weight: bold;
|
||||
text-decoration: none;
|
||||
a,
|
||||
h1 a {
|
||||
text-decoration:none;
|
||||
color:#FF0084;
|
||||
}
|
||||
h1 {
|
||||
margin: 20px 0 0 0;
|
||||
|
||||
margin:20px 0 0;
|
||||
font-weight:normal;
|
||||
}
|
||||
|
||||
body > header{
|
||||
padding: 1px;
|
||||
text-align: center;
|
||||
body > header {
|
||||
padding:1px;
|
||||
text-align:center;
|
||||
}
|
||||
#container, #innerheader{
|
||||
/*max-width: <% gallery_width %>;*/
|
||||
margin: 0px auto;
|
||||
#container,
|
||||
#innerheader {
|
||||
margin:0 auto;
|
||||
}
|
||||
img {
|
||||
border: none;
|
||||
#container header {
|
||||
padding:2rem;
|
||||
}
|
||||
nav {
|
||||
font-size: 1.3em;
|
||||
padding: 15px 0px;
|
||||
padding-top:15px;
|
||||
font-size:1.3em;
|
||||
}
|
||||
body > nav {
|
||||
text-align: center;
|
||||
text-align:center;
|
||||
}
|
||||
#folder_comment
|
||||
{
|
||||
#folder_comment {
|
||||
margin-bottom:10px;
|
||||
}
|
||||
#folder_comment a {
|
||||
color: #FFCC11;
|
||||
text-decoration: none;
|
||||
text-decoration:none;
|
||||
color:#FFCC11;
|
||||
}
|
||||
#gallery li:hover img,
|
||||
#gallery li img,
|
||||
#gallery li em,
|
||||
#gallery li:hover em {
|
||||
-webkit-transition:all .2s ease-in;
|
||||
-ms-transition:all .2s ease-in;
|
||||
-o-transition:all .2s ease-in;
|
||||
transition:all .2s ease-in;
|
||||
}
|
||||
|
||||
#gallery {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
#gallery li, #gallery li img {
|
||||
margin:0;
|
||||
padding:0;
|
||||
list-style:none;
|
||||
}
|
||||
#gallery li {
|
||||
float: left;
|
||||
position: relative;
|
||||
float:left;
|
||||
position:relative;
|
||||
overflow:hidden;
|
||||
}
|
||||
#gallery li img{
|
||||
width: 100%;
|
||||
#gallery li img {
|
||||
width:100%;
|
||||
}
|
||||
#gallery em {
|
||||
padding: 40% 0%;
|
||||
display: block;
|
||||
position: absolute;
|
||||
bottom:0px;
|
||||
width: 100%;
|
||||
display:block;
|
||||
position:absolute;
|
||||
top:100%;
|
||||
color: #FFF;
|
||||
background: rgba(0,0,0, .9);
|
||||
text-align: center;
|
||||
font-family: Georgia, Lucida, serif;
|
||||
font-style: italic;
|
||||
font-size: 2.5rem;
|
||||
-webkit-transition: all .2s ease-in;
|
||||
-moz-transition: all .2s ease-in;
|
||||
-ms-transition: all .2s ease-in;
|
||||
-o-transition: all .2s ease-in;
|
||||
transition: all .2s ease-in;
|
||||
bottom:0;
|
||||
width:100%;
|
||||
padding:40% 0;
|
||||
text-align:center;
|
||||
font-family:Georgia,Lucida,serif;
|
||||
font-size:2.5rem;
|
||||
font-style:italic;
|
||||
color:#FFF;
|
||||
background:rgba(0,0,0,.9);
|
||||
}
|
||||
#gallery li:hover em{
|
||||
top:0%;
|
||||
-webkit-transition: all .2s ease-in;
|
||||
-moz-transition: all .2s ease-in;
|
||||
-ms-transition: all .2s ease-in;
|
||||
-o-transition: all .2s ease-in;
|
||||
transition: all .2s ease-in;
|
||||
#gallery li:hover em {
|
||||
top:0;
|
||||
}
|
||||
footer {
|
||||
margin: 25px 0px;
|
||||
text-align: center;
|
||||
margin:25px 0;
|
||||
text-align:center;
|
||||
}
|
||||
|
||||
/*----responsive----*/
|
||||
#gallery li {
|
||||
width: 25%;
|
||||
height: 0;
|
||||
padding-bottom: 24%;
|
||||
width:25%;
|
||||
height:0;
|
||||
padding-bottom:24%;
|
||||
}
|
||||
@media (max-width: 1000px) {
|
||||
@media(max-width:1000px) {
|
||||
#gallery li {
|
||||
width: 32%;
|
||||
padding-bottom: 32%;
|
||||
width:32%;
|
||||
padding-bottom:32%;
|
||||
}
|
||||
}
|
||||
@media (max-width: 800px) {
|
||||
@media(max-width:800px) {
|
||||
#gallery li {
|
||||
width: 48%;
|
||||
padding-bottom: 48%;
|
||||
width:48%;
|
||||
padding-bottom:48%;
|
||||
}
|
||||
}
|
||||
@media (max-width: 450px) {
|
||||
@media(max-width:450px) {
|
||||
#gallery li {
|
||||
width: 100%;
|
||||
padding-bottom: 100%;
|
||||
width:100%;
|
||||
padding-bottom:100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in a new issue