commit a6ec321c047b7d264969f1f647b13b563c39dd12 Author: Bruno 21 Date: Sat Jan 5 07:49:43 2019 +0100 First commit Nouveau theme wordpress pour clicclac.info diff --git a/functions.php b/functions.php new file mode 100755 index 0000000..e1f7fc4 --- /dev/null +++ b/functions.php @@ -0,0 +1,242 @@ + +get('Version') ); +} + +add_action( 'wp_enqueue_scripts', 'kktfwp_parent_styles' ); + +/* + * Filter for disabling the update notice in admin panel + * + */ + +//add_filter( 'kkHideUpdateNotice', 'kkHideUpdateNotice' ); + +function kkHideUpdateNotice() { + return true; +} + +/*-----------------------------------------------------------------------------------*/ +/* WRITE YOUR OWN FUNCTIONS BELOW +/*-----------------------------------------------------------------------------------*/ + +/* Returns the name of one random file from within a directory +livre-d-or.php:39: + */ + +function getRandomFile($start_dir) { + + chdir($start_dir); + $dir = opendir('.'); + while (($myfile = readdir($dir)) !==false) { + if ($myfile != '.' && $myfile != '..' && is_file($myfile) && $myfile != 'resource.frk') { + $files[] = $myfile; + } + } + closedir($dir); + chdir('../'); + srand ((float) microtime() * 10000000); + $file = array_rand($files); + return $files[$file]; + } + +function show_bookmark_list(){ ?> + + "../../" . $file_sd, + 'width' => $size_sd[0], + 'height' => $size_sd[1] + ); + } + if (file_exists($file_hd)) { + $th_hd = true; + $size_hd = getimagesize($file_hd, $info); + $thumb['hd'] = array( + 'url' => "../../" . $file_hd, + 'width' => $size_hd[0], + 'height' => $size_hd[1] + ); + } + + if (($th_sd == true) && ($th_hd == true)) { + $standard = $thumb['sd']['url'] . ' 200w, ' . $thumb['hd']['url'] . ' 400w'; + } + elseif ($th_sd == true) { + $standard = $thumb['sd']['url'] . ' 200w'; + } + elseif ($th_hd == true) { + $standard = $thumb['hd']['url'] . ' 400w'; + } + + + $display = '
'; + $display .= ''; + $display .= ''; + $display .= '
' . "\r\n"; + +//echo "display: " . $display; + + return $display; + } + + +/* +*functions.php - displayRetina() displayRetina() +*/ +function date_archive ($chaine) { + $pieces = explode(".", $chaine); + $b = explode("_", $pieces[0]); + $mois = $b[0]; + $an = $b[1]; + $chaine = mois2($mois) . ' '. $an; + return $chaine; + } + + + + + +function preprint($s, $return=false) { + $x = "
"; 
+    $x .= print_r($s, 1); 
+    $x .= "
"; + if ($return) return $x; + else print $x; + } diff --git a/header.php b/header.php new file mode 100755 index 0000000..f518e27 --- /dev/null +++ b/header.php @@ -0,0 +1,97 @@ + +> + + + + + + " type="image/x-icon" /> + + + + + + + + + + + + + + + + + + + + > + + +
+
+ + + + +
+
+
+
+ + + + + + \ No newline at end of file diff --git a/languages/fr_FR.mo b/languages/fr_FR.mo new file mode 100644 index 0000000..e611ae6 Binary files /dev/null and b/languages/fr_FR.mo differ diff --git a/languages/fr_FR.po b/languages/fr_FR.po new file mode 100644 index 0000000..b0e0a2f --- /dev/null +++ b/languages/fr_FR.po @@ -0,0 +1,136 @@ +msgid "" +msgstr "" +"Plural-Forms: nplurals=2; plural=(n > 1);\n" +"Project-Id-Version: TopPic Child\n" +"POT-Creation-Date: 2019-01-04 22:25+0100\n" +"PO-Revision-Date: 2019-01-04 22:48+0100\n" +"Language-Team: Pesenti \n" +"MIME-Version: 1.0\n" +"Content-Type: text/plain; charset=UTF-8\n" +"Content-Transfer-Encoding: 8bit\n" +"X-Generator: Poedit 2.2\n" +"X-Poedit-Basepath: ../..\n" +"X-Poedit-Flags-xgettext: --add-comments=translators:\n" +"X-Poedit-WPHeader: style.css\n" +"X-Poedit-SourceCharset: UTF-8\n" +"X-Poedit-KeywordsList: __;_e;_n:1,2;_x:1,2c;_ex:1,2c;_nx:4c,1,2;esc_attr__;esc_attr_e;esc_attr_x:1,2c;esc_html__;esc_html_e;esc_html_x:1,2c;_n_noop:1,2;_nx_noop:3c,1,2;__ngettext_noop:1,2\n" +"Last-Translator: Pesenti \n" +"Language: fr_FR\n" +"X-Poedit-SearchPath-0: .\n" +"X-Poedit-SearchPathExcluded-0: *.js\n" + +#: functions.php:75 +msgid "January" +msgstr "Janvier" + +#: functions.php:78 +msgid "February" +msgstr "Février" + +#: functions.php:81 +msgid "March" +msgstr "Mars" + +#: functions.php:84 +msgid "April" +msgstr "Avril" + +#: functions.php:87 +msgid "May" +msgstr "Mai" + +#: functions.php:90 +msgid "June" +msgstr "Juin" + +#: functions.php:93 +msgid "July" +msgstr "Juillet" + +#: functions.php:96 +msgid "August" +msgstr "Août" + +#: functions.php:99 +msgid "September" +msgstr "Septembre" + +#: functions.php:102 +msgid "October" +msgstr "Octobre" + +#: functions.php:105 +msgid "November" +msgstr "Novembre" + +#: functions.php:108 +msgid "December" +msgstr "Décembre" + +#: page-ce-mois-ci.php:186 +msgid "The" +msgstr "Le" + +#: page-ce-mois-ci.php:186 +msgid "F j, Y, g:i a" +msgstr "d.m.Y à H:i" + +#: page-ce-mois-ci.php:187 +msgid " at " +msgstr " à " + +#: page-ce-mois-ci.php:187 +msgid "Focal" +msgstr "Focale" + +#: page-ce-mois-ci.php:335 page-ce-mois-ci.php:336 +msgid "Archives" +msgstr "Archives" + +#: page-ce-mois-ci.php:336 +msgid "Help" +msgstr "Aide" + +#: page-ce-mois-ci.php:366 +msgid "Previous Page" +msgstr "Page précédente" + +#: page-ce-mois-ci.php:370 +msgid "Page" +msgstr "Page" + +#: page-ce-mois-ci.php:377 +msgid "Next Page" +msgstr "Page suivante" + +#: page-ce-mois-ci.php:389 page-livre.php:73 page.php:58 +msgid "Pages" +msgstr "Pages" + +#. Theme Name of the plugin/theme +msgid "TopPic Child" +msgstr "" + +#. Theme URI of the plugin/theme +msgid "http://themes.easysite.by/toppic-overview/" +msgstr "" + +#. Description of the plugin/theme +msgid "A child theme of TopPic Theme" +msgstr "Un thème enfant de TopPic thème" + +#. Author of the plugin/theme +msgid "kotofey" +msgstr "" + +#. Author URI of the plugin/theme +msgid "http://www.themeforest.net/user/kotofey" +msgstr "" + +#. Template Name of the plugin/theme +msgid "Guestbook" +msgstr "Livre d'or" + +#. Template Name of the plugin/theme +msgid "Ce-mois-ci" +msgstr "" diff --git a/languages/toppic-child.pot b/languages/toppic-child.pot new file mode 100644 index 0000000..f122511 --- /dev/null +++ b/languages/toppic-child.pot @@ -0,0 +1,138 @@ +#, fuzzy +msgid "" +msgstr "" +"Plural-Forms: nplurals=INTEGER; plural=EXPRESSION;\n" +"Project-Id-Version: TopPic Child\n" +"POT-Creation-Date: 2019-01-04 22:25+0100\n" +"PO-Revision-Date: 2019-01-04 22:24+0100\n" +"Last-Translator: Pesenti \n" +"Language-Team: Pesenti \n" +"MIME-Version: 1.0\n" +"Content-Type: text/plain; charset=UTF-8\n" +"Content-Transfer-Encoding: 8bit\n" +"X-Generator: Poedit 2.2\n" +"X-Poedit-Basepath: ../..\n" +"X-Poedit-Flags-xgettext: --add-comments=translators:\n" +"X-Poedit-WPHeader: style.css\n" +"X-Poedit-SourceCharset: UTF-8\n" +"X-Poedit-KeywordsList: __;_e;_n:1,2;_x:1,2c;_ex:1,2c;_nx:4c,1,2;esc_attr__;" +"esc_attr_e;esc_attr_x:1,2c;esc_html__;esc_html_e;esc_html_x:1,2c;_n_noop:1,2;" +"_nx_noop:3c,1,2;__ngettext_noop:1,2\n" +"X-Poedit-SearchPath-0: .\n" +"X-Poedit-SearchPathExcluded-0: *.js\n" + +#: functions.php:75 +msgid "January" +msgstr "" + +#: functions.php:78 +msgid "February" +msgstr "" + +#: functions.php:81 +msgid "March" +msgstr "" + +#: functions.php:84 +msgid "April" +msgstr "" + +#: functions.php:87 +msgid "May" +msgstr "" + +#: functions.php:90 +msgid "June" +msgstr "" + +#: functions.php:93 +msgid "July" +msgstr "" + +#: functions.php:96 +msgid "August" +msgstr "" + +#: functions.php:99 +msgid "September" +msgstr "" + +#: functions.php:102 +msgid "October" +msgstr "" + +#: functions.php:105 +msgid "November" +msgstr "" + +#: functions.php:108 +msgid "December" +msgstr "" + +#: page-ce-mois-ci.php:186 +msgid "The" +msgstr "" + +#: page-ce-mois-ci.php:186 +msgid "F j, Y, g:i a" +msgstr "" + +#: page-ce-mois-ci.php:187 +msgid " at " +msgstr "" + +#: page-ce-mois-ci.php:187 +msgid "Focal" +msgstr "" + +#: page-ce-mois-ci.php:335 page-ce-mois-ci.php:336 +msgid "Archives" +msgstr "" + +#: page-ce-mois-ci.php:336 +msgid "Help" +msgstr "" + +#: page-ce-mois-ci.php:366 +msgid "Previous Page" +msgstr "" + +#: page-ce-mois-ci.php:370 +msgid "Page" +msgstr "" + +#: page-ce-mois-ci.php:377 +msgid "Next Page" +msgstr "" + +#: page-ce-mois-ci.php:389 page-livre.php:73 page.php:58 +msgid "Pages" +msgstr "" + +#. Theme Name of the plugin/theme +msgid "TopPic Child" +msgstr "" + +#. Theme URI of the plugin/theme +msgid "http://themes.easysite.by/toppic-overview/" +msgstr "" + +#. Description of the plugin/theme +msgid "A child theme of TopPic Theme" +msgstr "" + +#. Author of the plugin/theme +msgid "kotofey" +msgstr "" + +#. Author URI of the plugin/theme +msgid "http://www.themeforest.net/user/kotofey" +msgstr "" + +#. Template Name of the plugin/theme +msgid "Guestbook" +msgstr "" + +#. Template Name of the plugin/theme +msgid "Ce-mois-ci" +msgstr "" diff --git a/page-ce-mois-ci.php b/page-ce-mois-ci.php new file mode 100755 index 0000000..19937ba --- /dev/null +++ b/page-ce-mois-ci.php @@ -0,0 +1,406 @@ + + + + + +
+ + + +
+ +
+ <?php echo esc_attr( $kk_parallax[2] ) ?> +
+ +
+
+ ', '' ); ?> +
+
+ + + +
+ + + +
+ + + +
+ ', '' ); ?> +
+ +
+ + + +
+ + + + + + + + 1000) { + // HD + $hd = '../../zenphoto/cache/photos-du-mois/' . substr($tableau[$i], 0, strlen($tableau[$i]) - 4) . "_FULL_watermark.jpg"; + if (file_exists($hd)) { + $size_hd = getimagesize($hd, $info_hd); + $imgs['img_hd'] = array( + 'url' => $hd, + 'width' => $size_hd[0], + 'height' => $size_hd[1] + ); + } + else { + $imgs['img_hd'] = array( + 'url' => '../' . $photo_du_mois, + 'width' => $size[0], + 'height' => $size[1] + ); + } + // SD + $sd = '../../zenphoto/cache/photos-du-mois/' . substr($tableau[$i], 0, strlen($tableau[$i]) - 4) . "_800_watermark.jpg"; + if (file_exists($sd)) { + $size_sd = getimagesize($sd, $info_sd); + $imgs['img_sd'] = array( + 'url' => $sd, + 'width' => $size_sd[0], + 'height' => $size_sd[1] + ); + } + } + else { + // SD + $sd = '../../zenphoto/cache/photos-du-mois/' . substr($tableau[$i], 0, strlen($tableau[$i]) - 4) . "_800_watermark.jpg"; + if (file_exists($sd)) { + $size_sd = getimagesize($sd, $info_sd); + $imgs['img_sd'] = array( + 'url' => $sd, + 'width' => $size_sd[0], + 'height' => $size_sd[1] + ); + } + $imgs['img_hd'] = array( + 'url' => "", + 'width' => "", + 'height' => "" + ); + } // if ($size[0] > 1000) + + $title = explode('.',$title); + $title = explode('_',$title[0]); + $title = mois2($title[0]) . ' ' . $title[1]; + $imgs['img_sd']['title'] = $title; + + if (isset($info["APP13"])) { + $iptc = iptcparse($info["APP13"]); + + if (isset($iptc['2#120'][0])) $legende = $iptc['2#120'][0]; + else $legende = ""; + if (isset($iptc['2#005'][0])) $titre = $iptc['2#005'][0]; + else $titre = ""; + + $keyword = ""; + if (isset($iptc['2#025'])) { + foreach ($iptc['2#025'] as $key => $val) { + $keyword .= ''; + $keyword .= ', '; + } + $keyword = substr($keyword, 0, -2); + } + + $imgs['img_sd']['legende'] = $legende; + $imgs['img_sd']['titre'] = $titre; + $imgs['img_sd']['keyword'] = $keyword; + } + + $exifInfo = ""; + $exif_array = read_exif_data_raw($file,'EXIF'); + $exifInfo = __('The','toppic-child') . " " .date(__("F j, Y, g:i a",'toppic-child'),strtotime($exif_array['SubIFD']['DateTimeOriginal'])).' - '; + $exifInfo .= $exif_array['SubIFD']['ExposureTime']. __(' at ','toppic-child') .$exif_array['SubIFD']['FNumber'].' - ' .$exif_array['SubIFD']['ISOSpeedRatings'].' ISO - '. __('Focal','toppic-child') .$exif_array['SubIFD']['FocalLength']; + $imgs['img_sd']['exif'] = $exifInfo; + + //preprint($exif_array); + break; + } + $i++; + } + //preprint($imgs); + + ?> + + + + + +
+ + +

Titre

+

Légende

+ + + + + + + + + + + + + '; + ?> + + + + +
+ + +

Titre

+

Légende

+ + +

+ + + + + + + connect_error) { + trigger_error('Database connection failed: ' . $conn->connect_error, E_USER_ERROR); + exit(); + } + $conn->set_charset("utf8"); + + $excquery = "SELECT `id` FROM `" . $table['albums'] . "` WHERE `folder` = '" . $album . "'"; + + if ($result = $conn->query($excquery)) { + $result->data_seek(0); + $row = $result->fetch_row(); + $id_album = $row[0]; + $result->close(); + } + + $conn->close(); + + // Récupérer toutes les fichiers de l'album 'photos-du-mois' ($fichier[]) + + $conn = new mysqli($dbhost, $dbuser, $dbpassword, $zptable); + if ($conn->connect_error) { + trigger_error('Database connection failed: ' . $conn->connect_error, E_USER_ERROR); + exit(); + } + $conn->set_charset("utf8"); + + $pictquery = "SELECT `filename` FROM `" . $table['images'] . "` WHERE `albumid` = ? ORDER BY `date` DESC"; + + $stmt = $conn->prepare($pictquery); + //echo $pictquery; + if($stmt === false) { + trigger_error('Wrong SQL: ' . $pictquery . ' Error: ' . $conn->error, E_USER_ERROR); + } + else { + $stmt->bind_param('i', $id_album); + $stmt->execute(); + $stmt->bind_result($filename); + while ($stmt->fetch()) { + $fichier[] = $filename; + $i++; + //echo $filename; + } + } + $stmt->close(); + + // +?> + + ? Utilisation: cliquer sur une vignette, puis....
"; +$aide .= " -sur ordinateur: naviguer avec les touches flèches droite et gauche, quitter avec ESC.
"; +$aide .= " -sur tablettes et smartphones: balayer l'écran avec un doigt vers la droite ou vers la gauche, ou naviguer avec les touches flèches droite et gauche. Cliquer sur la X pour quitter."; +?> + +
+

+

( ? )

+ + + + + +

+ + +
+ += 2) echo ' '; + +for ($i = 1; $i <= $nbpages; $i++) { + if ($i != $ppage) { + echo ''.$i.'  '; + } + else { + echo "".$i."  "; + } + } + +if ($page < $nbpages) echo ' '; + +?> +
+ +
+ + + + + '', + 'link_before' => '', + 'link_after' => '' + ) + ); + ?> +
+ +
+ + + +
+ + + + \ No newline at end of file diff --git a/page-livre.php b/page-livre.php new file mode 100755 index 0000000..7cbadac --- /dev/null +++ b/page-livre.php @@ -0,0 +1,90 @@ + + + + + +
+ + + +
+ +
+ <?php echo esc_attr( $kk_parallax[2] ) ?> +
+ +
+
+ ', '' ); ?> +
+
+ + + +
+ + + +
+ + + +
+ ', '' ); ?> +
+ +
+ + + +
+ + + + +Livre d\'Or
'; +?> + + + + '', + 'link_before' => '', + 'link_after' => '' + ) + ); + ?> +
+ +
+ + + + + + + + \ No newline at end of file diff --git a/page.php b/page.php new file mode 100755 index 0000000..6de0d76 --- /dev/null +++ b/page.php @@ -0,0 +1,75 @@ + + + + + +
+ + + +
+ +
+ <?php echo esc_attr( $kk_parallax[2] ) ?> +
+ +
+
+ ', '' ); ?> +
+
+ + + +
+ + + +
+ + + +
+ ', '' ); ?> +
+ +
+ + + +
+ + + + + '', + 'link_before' => '', + 'link_after' => '' + ) + ); + ?> +
+ +
+ + + +
+ + + + \ No newline at end of file diff --git a/screenshot.png b/screenshot.png new file mode 100755 index 0000000..89b1ce4 Binary files /dev/null and b/screenshot.png differ diff --git a/style 2.css b/style 2.css new file mode 100755 index 0000000..5a55ec2 --- /dev/null +++ b/style 2.css @@ -0,0 +1,169 @@ +/* +Theme Name: TopPic Child +Theme URI: http://themes.easysite.by/toppic-overview/ +Author: kotofey +Author URI: http://www.themeforest.net/user/kotofey +Description: A child theme of TopPic Theme +Template: toppic +Version: 1.5 +*/ + +/*-----------------------------------------------------------------------------------*/ +/* WRITE YOUR OWN STYLES BELOW +/*-----------------------------------------------------------------------------------*/ + +#randomImg img { + padding: 10px; + background-color: #fff; + border: 1px solid #818181; + margin-right: auto; + margin-left: auto; + display: block; + width: 800px; +} + +.inner-content ul li { + margin-top: 32px; + list-style-type: none; +} + +.inner-content ul li h3 { + margin-bottom: 10px; +} + +.inner-content ul li ul li{ + margin-top: 2px; + margin-bottom: 2px; + list-style-type: none; +} + +.form_newsletter { + padding-left: 30px; +} +/* +.tnp-subscription input[type="email"] { + background-color: transparent!important; + border-color: #444!important; + color: 000!important; + +} + +.tnp-subscription input.tnp-submit { +background-color: #fff!important; + color: #d37657; + width: auto!important; +} + +ul li input.input-email + +input.tnp-email + +*/ + +/* +div.modele { + box-sizing: content-box; + -moz-box-sizing: content-box; + -webkit-box-sizing: content-box; +} +*/ + +#archive { +/**/ + margin: 0 0 80px; +} + +.cadre { + text-align: center; + margin-top: 1em; +} +.cadre img { + padding: 50px; + background-color: #fff; + border: 1px solid #ccc; +} + +.exifs { + text-align: center; + color: #909090; + font-size: smaller; + margin-bottom: 3em; + margin-top: 1em; +} + + +.thumb { + /*float: left; + line-height: 200px;*/ + width: 200px; + height: 200px; + border: 1px solid #ccc; + background-color: #fff; + +} + +.albumdesc { + float: right; + text-align:center; + width: 200px; + padding: 6px 0 0 0; + text-align:center; + vertical-align: middle; +} + + +.albumdesc a, .pagination a { + color: #333; +} + +.gras { + font-weight: bold; +} + +input.search-field { + width: 200px; + height: 24px; + border: 1px dashed #eee; + margin: 0 5px 0 0; + +} + +.albumdesc:hover { + /* + background: #ddd; + color: #333 !important; + border-radius: 0; + */ + font-weight: bold; +} + +.album { + /* Hack pour themes/toppic/css/reset.css */ + box-sizing: content-box; + -moz-box-sizing: content-box; + -webkit-box-sizing: content-box; + /* */ + + float: left; + width: 200px; + height: 200px; + text-align:center; + margin-top: 0; + margin-right: auto; + /* entre 2 rangées d'albums */ + margin-bottom: 25px; + margin-left: auto; + padding: 0px 11px 20px; +} + +.holder { + display:table-cell; + vertical-align:middle; + text-align:center; + height:200px; + width:200px; + background-color: #fff; + border: 1px solid #ccc; +} + + diff --git a/style.css b/style.css new file mode 100755 index 0000000..8b8ae25 --- /dev/null +++ b/style.css @@ -0,0 +1,167 @@ +/* +Theme Name: TopPic Child +Theme URI: http://themes.easysite.by/toppic-overview/ +Author: kotofey +Author URI: http://www.themeforest.net/user/kotofey +Description: A child theme of TopPic Theme +Template: toppic +Version: 1.5 +*/ + +/*-----------------------------------------------------------------------------------*/ +/* WRITE YOUR OWN STYLES BELOW +/*-----------------------------------------------------------------------------------*/ + +#randomImg img { + padding: 10px; + background-color: #fff; + border: 1px solid #818181; + margin-right: auto; + margin-left: auto; + display: block; + width: 800px; +} + +.inner-content ul li { + margin-top: 32px; + list-style-type: none; +} + +.inner-content ul li h3 { + margin-bottom: 10px; +} + +.inner-content ul li ul li{ + margin-top: 2px; + margin-bottom: 2px; + list-style-type: none; +} + +.form_newsletter { + padding-left: 30px; +} +/* +.tnp-subscription input[type="email"] { + background-color: transparent!important; + border-color: #444!important; + color: 000!important; + +} + +.tnp-subscription input.tnp-submit { +background-color: #fff!important; + color: #d37657; + width: auto!important; +} + +ul li input.input-email + +input.tnp-email + +*/ + +/* +div.modele { + box-sizing: content-box; + -moz-box-sizing: content-box; + -webkit-box-sizing: content-box; +} +*/ + +#archive { +/**/ + margin: 0 0 80px; +} + +.cadre { + text-align: center; + margin-top: 1em; +} +.cadre img { + padding: 50px; + background-color: #fff; + border: 1px solid #ccc; +} + +.exifs { + text-align: center; + color: #909090; + font-size: smaller; + margin-bottom: 3em; + margin-top: 1em; +} + +/* +.thumb { + width: 200px; + height: 200px; + border: 1px solid #ccc; + background-color: #fff; + +} +*/ +.albumdesc { + float: right; + text-align:center; + width: 220px; + padding: 6px 0 0 0; + text-align:center; + vertical-align: middle; +} + + +.albumdesc a, .pagination a { + color: #333; +} + +.gras { + font-weight: bold; +} + +input.search-field { + width: 200px; + height: 24px; + border: 1px dashed #eee; + margin: 0 5px 0 0; + +} + +.albumdesc:hover { + /* + background: #ddd; + color: #333 !important; + border-radius: 0; + */ + font-weight: bold; +} + +.album { + /* Hack pour themes/toppic/css/reset.css */ + box-sizing: content-box; + -moz-box-sizing: content-box; + -webkit-box-sizing: content-box; + /* */ + + float: left; + width: 220px; + height: 220px; + text-align:center; + margin-top: 0; + margin-right: auto; + /* entre 2 rangées d'albums */ + margin-bottom: 25px; + margin-left: auto; + padding: 0px 11px 20px; +} + +.holder { + display:table-cell; + vertical-align:middle; + text-align:center; + height:220px; + width:220px; + background-color: #fff; + border: 1px solid #ccc; +} + +