YZ. FotoFolio V1 Teması Çıktı!

Merhaba Arkadaşlar. Bugün Size Bir WordPress Temasını Nasıl TrGG Yani Bedava-Sitem.Com Temasına Çevirdiğimi Anlatıcam ve Tasarımı Da Vericeğim Tabi Ki De.
Tasarımı Çevirmede Daha Çok Acemiyim Yani Bugün,Bu Gece Başladım ve Başardım...
Kendim Bizzat Titizlikle Kodlamaya Çalıştım.
Hemen Hoşuma Giden Bir Tasarımı Aldım ve Kodladım . B-Tasarımına Çevirdim.
Tasarımın Örnek Görüntüsü Zaten Ekranda Var. Yan Taraftan Bakabilirsiniz.
Kodladığım Tasarımda FotoFlio Kısmını Yani Logosuna Karışmaım Belki Bazıları Simgeyi Beğenir Sadece Yazıyı Değiştirir Diye O Yüzden Ellemedim.
Birde Tasarımda Abuk Sabuk Boş YerLer Çoktu Onları Sildim.
AnaSayfa Bölümünü Boşalttım.
Siz Koyar ve Yazarsanız O Görünsün Diye ....
Hemen Kodları Vereyim...

Tasarım Üstü

</li>
</ul>
</div>
<div class="wordspop">
</div>
</div>

Tasarım Altı

<div class="main grid_17">
  
    </div>
</div>
</div>
</div>
</div>

<div class="clear">
</div>
<div class="footer">
 <center>
   <div class="copy">
Copyright © 2012 Tüm Hakları YazarSayar.Tk’ye Aittir . Site Adı .TrGG</div>
</center>
</div>

</div>
</div>

<script type='text/javascript' src='http://demo.wordspop.com/fotofolio-landscape/wp-content/themes/fotofolio-landscape/libs/wpop/assets/js/webfont-loader.js?ver=3.2.1'></script>
<script type="text/javascript">

var _gaq = _gaq || [];

_gaq.push(['_setAccount', 'UA-24328776-2']);

_gaq.push(['_trackPageview']);

(function() {

var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;

ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';

var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);

})();

</script></body>
</html>

CSS Kodu

h1#title{display: none;}
h2#title span {display: none;}
div.header{display: none;}
li.nav_element{list-style-type: none;}
li.nav_element{display: none;}
/*
Theme Name: Fotofolio Landscape
Theme URI: http://wordspop.com/themes/fotofolio-landscape/
Description: Showcase Wordpress Theme for Visual Worker - Photographer, Graphic Designer, Illustrator.
Version: 1.2.3
Author: Wordspop
Author URI: http://wordspop.com/
Tags: Custom, Gray, Dark
Note: This theme is free for personal use, support us by <a href="">making a donation</a>.<br>For commercial use please <a href="https://www.e-junkie.com/ecom/gb.php?i=637393&c=single&cl=108569" target="_blank">purchase a license</a> as low as $39.
Copyright: © 2010-2011 Wordspop

Licensed under GNU GPL version 2 http://www.gnu.org/licenses/gpl.html
Redistributions of files must retain the above copyright notice.
*/

/* Reset CSS */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
:focus {
	outline: 0;
}
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* Skeleton */
.container {
	background: url(http://img.webme.com/pic/s/serhat97/main-bg-main.jpg) repeat-y center;
}
body.page .container2, body.archive .container2, body.category .container2, body.single .single-blog {
	background: url(http://img.webme.com/pic/s/serhat97/single-bg-center.jpg)  no-repeat center top;
}

.container2 {
	background: url(http://img.webme.com/pic/s/serhat97/main-bg-center.jpg) no-repeat center top;
	padding-top: 30px;
}
.single-blog {
	background: url(http://img.webme.com/pic/s/serhat97/single-bg-center.jpg)  no-repeat center top !important;
}

/* Background and Colors */
body {
	background: url(http://img.webme.com/pic/s/serhat97/main-bg.jpg) repeat;
	/* text-shadow: #000 0 0 0; */
}
a {
	color: #fff;
}
ul.nav a, div.nav ul li a {
	color: #828282;
}
.intro p, .intro-lands p {
	color: #c3c3c3;
}
.section {
	color: #fff;
}
.section a {
	color: #fff;
}
.footer {
	color: #cacbcc;
	background: url(http://img.webme.com/pic/s/serhat97/footer-bg.jpg) repeat-x;
}
.cat-desc {
	color: #C3C3C3;
}

/* Typography */
body {
	font: normal 62.5% Arial, Helvetica, Verdana, Sans-Serif;
}
ul.nav, div.nav ul {
	font-size: 1.2em;
	text-align: right;
	/* text-transform: uppercase; */
}
ul.nav a, div.nav ul a {
	text-decoration: none;
}
.intro p, .intro-lands p {
	font-size: 1.7em;
}
.cat-desc {
	font-size: 1.6em;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
}
.section h2, .latest h2 {
	font-size: 1.7em;
	font-weight: normal;
	text-shadow: 1px 2px 1px #000000;
}
.section ul {
	font-size: 1.2em;
}
.section a {
	text-decoration: none;
}
.exif {
  color: #333;
  text-shadow: 1px 1px #777;
  font-size: 1.1em;
}
.footer {
	font-size: 1.1em;
	text-align: right;
	line-height: 20px;
}

/* Specific Styling */

/* -- Main */
.main {
	padding-left: 5px;
	padding-bottom: 30px;
}
body.home .main {
	padding-bottom: 50px;
}

/* -- Header */

/* -- Navigation */
ul.nav, div.nav ul {
	padding-top: 48px;
	padding-right: 17px;
	float: right;
	width: 200px;
}
ul.nav li, div.nav ul li {
	/*padding: 9px 17px 9px 0;*/
	margin: 4px 0;
}
ul.nav li a, div.nav ul li a {
	padding: 8px 30px 8px 20px;
}
ul.nav li a:hover,
div.nav ul li a:hover,
li.current_page_item a,
.widgz ul li a:hover,
.widgz ul li.current-cat a,
.widgz ul li.cat-item a.active_category,
li.current-cat a,
li.cat-item a.active_category,
li.current-menu-item a,
li.current-category-ancestor a,
li.current-post-ancestor a,
.sf-menu li.sfHover > a {
	background: url(http://img.webme.com/pic/s/serhat97/nav-bg.jpg) right repeat-y;
	-moz-border-radius-topleft: 4px;
	-moz-border-radius-bottomleft: 4px;
	-webkit-border-top-left-radius: 4px;
	-webkit-border-bottom-left-radius: 4px;
	color: #fff;
}
/* Superfish */
.sf-menu a, .sf-menu a:visited {
  display: inherit;
  display: inline;
  color: #828282;
}
.sf-menu ul {
  width: 150px;
}
.sf-menu li {
  padding: 8px 0;
  float: none;
  display: block;
  width: 200px;
  position: relative;
}
.sf-menu li li {
  margin: 0;
  padding: 0;
}
.sf-menu li li a,
.sf-menu li li a:hover {
  padding-top: 9px;
  display: block;
  text-align: left;
  border-radius: 0;
  -moz-border-radius: 0;
  -webkit-border-radius: 0;
}
.sf-vertical li:hover ul,
.sf-vertical li.sfHover ul,
ul.sf-menu li li:hover ul,
ul.sf-menu li li.sfHover ul,
ul.sf-menu li li li:hover ul,
ul.sf-menu li li li.sfHover ul {
  left: 195px;
  top: -3px;
}
ul.sf-menu li li:hover ul,
ul.sf-menu li li.sfHover ul,
ul.sf-menu li li li:hover ul,
ul.sf-menu li li li.sfHover ul  {
  left: 150px;
}
ul.sub-menu {
  background: #424242;
  float: none;
  box-shadow:  1px 1px 2px rgba(0, 0, 0, .5);
  -moz-box-shadow: 1px 1px 2px rgba(0, 0, 0, .5);
  -webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, .5);
  border-radius: 4px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border: 1px solid #373737;
  border-top-color: #505050;
  border-left-color: #505050;
  padding: 2px 0;
}
.sf-sub-indicator {
  text-indent: 0;
}
a > .sf-sub-indicator  {
  top: .65em;
}

/* -- Stage */
.slideshow {
	background: transparent url("http://img.webme.com/pic/s/serhat97/shadow.png") no-repeat bottom center;
	height: 375px;
	overflow: hidden;
}
.slideshow img {
	border: 1px solid #424242;
}
.slideshow .slide {
	background: none !important;
}
.slideshow .slide h2 {
  padding: 12px 10px 8px 10px;
	font-size: 2em;
	color: #fff;
	font-weight: normal;
	letter-spacing: 1px;
	height: 26px;
	float: left;
	position: absolute;
	bottom: 0;
	background: #424242;
}

/* -- Intro */
.intro, .intro-lands {
	background: url(http://img.webme.com/pic/s/serhat97/bg-dark.jpg) repeat;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
}
.intro p, .intro-lands p {
	background: url(http://img.webme.com/pic/s/serhat97/intro-line.gif) repeat;
	line-height: 30px;
	margin: 10px;
}
.intro p a {
	text-decoration: none;
	color: #fff;
}

/* -- Section */
.section {
	padding-top: 40px;
	padding-bottom: 40px;
}

/* -- Category */
.section .category-list {
	margin-left: 0px;
}
.category-list ul {
	padding-top: 10px;
}
.category-list ul li {
	float: left;
	width: 120px;
	padding: 6px 10px 6px 0;
	border-bottom: 1px solid #747577;
}

/* -- Latest */
.latest {
	/* padding-top: 30px; */
	padding-bottom: 25px;
	margin-bottom: 25px;
	background: url(http://img.webme.com/pic/s/serhat97/latest-border.png) no-repeat center bottom;
}
.latest ul {
	padding-top: 20px;
}
.latest ul li {
	float: left;
	padding-right: 7px;
	padding-bottom: 6px;
}
.latest ul li img {
	border: 1px solid #424242;
}
.latest h2, .testimonial h2 {
	color: #333333;
	text-transform: uppercase;
	padding-top: 23px;
	text-shadow: 1px 1px #888888;
	font-weight: bold;
}
/*
.latest .photos {
	background: url(http://img.webme.com/pic/s/serhat97/bg-dark.jpg);
	padding: 10px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
}
*/
.latest .photos a {
	float: left;
	display: block;
	margin-right: 5px;
	margin-bottom: 5px;
}
.latest .photos a img {
	border: 1px solid #424242;
}
.latest .photos a:hover img{
	border-color: #999;
}

/* -- Footer */
.footer {
	padding: 10px;
}

/* -- Wordspop */
.wordspop {
	padding: 100px 45px 5px 0;
}
.wordspop a {
	display: block;
	background: url(http://img.webme.com/pic/s/serhat97/wordspop.png) no-repeat center right;
	width: 92px;
	height: 36px;
	float: right;
	text-indent: -7777px;
}

/* -- Exif */
.exif {
  margin-top: 5px;
}

/* -- Single */
.main h2.title {
	font-size: 2.0em;
	font-weight: normal;
	text-transform: uppercase;
	color: #fff;
	background: url(http://img.webme.com/pic/s/serhat97/title-border.png) repeat-x bottom;
	padding-bottom: 10px;
	margin-bottom: 10px;
	text-shadow: 1px 1px 1px #000;
	font-weight: bold;
}
.single .intro, .page .intro, .cat-desc, .single .intro-lands {
	background: url(http://img.webme.com/pic/s/serhat97/bg-dark.jpg) repeat;
	padding: 10px 10px 10px 10px;
	margin-top: 10px;
}
.main .text {
	padding: 20px 0;
	font-size: 1.4em;
	color: #c4c4c4;
	line-height: 1.8em;
}
.main .text p {
	padding-bottom: 10px;
	color: #fdfdfd;
}
.slide-lands {
	width: 400px;
	float: left;
}
.single .intro-lands {
	width: 250px;
	float: left;
	margin-top: 0px;
}
a.full img {
	border: 1px solid #4C4C4C;
}
/* -- Comments */

.comments {
	
}
.comments h3 {
	color: #333333;
	text-transform: uppercase;
	padding-top: 23px;
	text-shadow: 1px 1px #888888;
}
.comment-post {
	padding:  20px 0;
}
.comment-post .gravatar {
	float: left;
	padding: 0px 10px 10px 0;
}
.comment-post .comment-text {
	font-size: 1.2em;
	padding-right: 20px;
	float: left;
	width: 200px;
	line-height: 20px;
}
.comment-text span {
	color: #1e1e1e;
	font-style: italic;
	font-weight: bold;
}

/* -- Category */
div.this-category div {
	float: left;
	padding-right: 10px;
	padding-bottom: 7px;
}
div.this-category div img {
	border: 1px solid #4c4c4c;
}
div.this-category div a:hover img {
	border: 1px solid #888;;
}
.cat-desc p {
	background: url(http://img.webme.com/pic/s/serhat97/intro-line.gif) repeat;
	line-height: 30px;
}
/* -- Category -- Testimonial */
div.this-category div.testimonials {
	font-size: 1.6em;
	line-height: 1.4em;
	background: url("http://img.webme.com/pic/s/serhat97/bg-dark.jpg");
	padding: 10px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	color: #fff;
}
div.this-category div.client_name {
	font-size: 2em;
	color: #fff;
	text-shadow: 1px 1px 1px #000;
}
div.this-category div.clear {
	float: none;
	padding-bottom: 15px;
}
/* --widgz */
.widgz {
	text-align: right;
	font-size: 1.2em;
	padding-right: 17px;
	padding-top: 20px;
}
.widgz h2 {
	font-size: 1.0em;
	font-weight: normal;
	padding: 5px 30px 5px 5px;
	text-transform: uppercase;
	color: #fff;
}
.widgz ul {
	
}
.widgz ul li {
	/* border-bottom: 1px solid #424242; */
	/* padding: 5px 30px 5px 5px; */
	clear: both;
	margin-bottom: 5px;
	height: 18px;
}
.widgz ul li a {
	color: #828282;
	text-decoration: none;
	padding: 8px 30px 8px 20px;
	display: block;
	float: right;
	margin-bottom: 3px;
}

/* Widgets */
.textwidget {
	padding: 8px 30px 8px 20px;
	color: #828282;
	font-style: italic;
	line-height: 18px;
}
.cat-item {

}

/* Comments - Responds */
#comments {
	
}
ol.commentlist {
	list-style: none;
	padding-top: 12px;
}
ol.commentlist li {
	background: url("http://img.webme.com/pic/s/serhat97/bg-dark.jpg") repeat scroll 0 0 transparent;
	padding: 5px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	font: 1.0em "Lucida Sans Unicode", Arial, Helvetica, Sans-Serif;
	border: 1px solid #222222;
	margin-bottom: 5px;
}
ol.commentlist li.odd {
	background: url("http://img.webme.com/pic/s/serhat97/bg-dark2.jpg") repeat scroll 0 0 transparent;
	border: 1px solid #333;
}
ol.commentlist li cite {
	font-weight: bold;
	font-style: normal;
}
/* Comments - Respond Form */
#respond {
	
}
#respond h3, #comments {
	color: #333333;
	text-transform: uppercase;
	padding-top: 23px;
	text-shadow: 1px 1px #888888;
	font-size: 1.6em;
}
#author, #email, #url, #comment {
	background: url("http://img.webme.com/pic/s/serhat97/bg-dark.jpg") repeat scroll 0 0 transparent;
	border: 1px solid #222;
	padding: 5px;
	color: #efefef;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
}
div.comments-list {
	padding-right: 10px;
}
#comment {
	width: 300px;
}
#commentform {
	padding-top: 10px;
}
.logged-in #commentform p {
	font-size: 1.2em;
}
#commentform p{
	padding: 2px 0;
}
#commentform input:focus, #commentform textarea:focus {
	border: 1px solid #999;
}
#commentform textarea {
	font: 1.0em "Lucida Sans Unicode", Arial, Helvetica, Sans-Serif;
}
img.avatar {
	float: right;
}

/* Testimonial */
.testimonial {
	color: #c3c3c3;
	font: italic 1.2em "Lucida Sans Unicode", Arial, Helvetica, Sans-Serif;
}
.testimonial h2 {
	font: bold 1.2em Arial, Helvetica, Sans-Serif;
	padding-top: 0px;
	padding-bottom: 29px;
	background: url("http://img.webme.com/pic/s/serhat97/testimonial-tick1.png") no-repeat 0 20px;
}
.testimonial p {
	padding: 0 15px;
	background: url("http://img.webme.com/pic/s/serhat97/testimonial-tick2.png") no-repeat bottom right;
	margin-top: -15px;
}
.testimonial p.client-name {
	margin: 0;
	background: none;
	font-weight: bold;
	font-style: normal;
}

/* navigation */
.navigation {
	clear: both;
	font-size: 1.1em;
	padding-top: 30px;
	text-transform: uppercase;
}
.navigation .alignleft {
	float: left;
}
.navigation .alignleft a {
	background: url(http://img.webme.com/pic/s/serhat97/older-bg.png) no-repeat left;
	padding: 25px 30px 25px 20px;
	display: block;
	float: right;
}
.navigation .alignright {
	float: right;
}
.navigation .alignright a {
	background: url(http://img.webme.com/pic/s/serhat97/newer-bg.png) no-repeat right;
	padding: 25px 20px 25px 30px;
	display: block;
	float: right;
}
.navigation a {
	text-decoration: none;
	font-weight: bold;
}
.navigation a:hover {
	color: #999;
}
body.single .navigation {
	padding-top: 10px;
	width: 100%;
}

/* Twitter for Wordpress Plugin Update */
.widgz h2 {
	
}
.widgz h2 a {
	text-decoration: none;
	font-weight: bold;
}
ul.twitter {
	list-style: none;
	padding-right: 30px;
	line-height: 1.4em;
}
ul.twitter li {
	display: inline;
	color: #efefef;
	font-style: italic;
}
ul.twitter li a {
	display: inline;
	float: none;
	padding: 0;
	margin: 0;
}

/* Blog */
.postmain,
.postmain-nosidebar {
	width: 449px;
	float: left;
	padding-right: 10px;
}
.postmain-nosidebar {
  width: 100%;
}
.post {
	clear: both;
	padding-bottom: 10px;
	padding-top: 10px;
	color: #ccc;
	float: left;
	width: 100%;
}
.post .thumbnail {
	width: 100px;
	height: 100px;
	float: left;
	background: #666;
}
.post-content {
	float: left;
	padding-left: 15px;
	width: 100%;
}
body.category .post-content {
	padding-left: 0;
}
.post-content h2 {
	font-size: 1.6em;
	font-weight: normal;
	color: #fff;
}
.post-content h2 a {
	color: #fff;
	text-decoration: none;
}
.post-content h2 a:hover {
	color: #e7e7e7;
}
.post-content p {
	font-size: 1.3em;
	color: #d8d8d8;
}
.post-content .meta, .blogpost .meta {
	text-transform: uppercase;
	font-weight: bold;
	padding: 5px 0;
	border-bottom: 1px solid #999;
	margin: 0 0 5px 0;
	color: #CCCCCC;
}

.blogpost a:hover {
	text-decoration: none;
}
.blogpost p {
	color: #d8d8d8;
	font-size: 1.3em;
	padding: 5px 0;
	line-height: 1.4em;
}
.blogpost {
	padding: 5px;
	/* width: 400px; */
}
.blogpost h3 {
	font-size: 1.8em;
	font-weight: normal;
	color: #fff;
	text-transform: uppercase;
	padding-bottom: 20px;
	padding-top: 10px;
}
.blog .post-content {
    padding-left: 0;
}
.single-blog .wp-post-image {
	float: left;
	padding: 5px 10px 10px 0;
}
.sidebar-blog {
	width: 210px !important;
}
.sidebar-blog .cat-desc {
	font-size: 1.2em;
}
.sidebar-blog .cat-desc a {
	text-decoration: none;
}
.sidebar-blog .cat-desc a:hover {
	text-decoration: underline;
}
.sidebar-blog .cat-desc h2 {
	text-transform: uppercase;
	padding-bottom: 5px;
}
.sidebar-blog .cat-desc .textwidget {
	padding: 0;
}
.sidebar-blog .cat-desc ul li {
	line-height: 1.6em;
}

/* =Images
-------------------------------------------------------------- */

/*
Resize images to fit the main content area.
- Applies only to images uploaded via WordPress by targeting size-* classes.
- Other images will be left alone. Use "size-auto" class to apply to other images.
*/
img.size-auto,
img.size-full,
img.size-large,
img.size-medium,
.attachment img {
	max-width: 100%; /* When images are too wide for containing element, force them to fit. */
	height: auto; /* Override height to match resized width for correct aspect ratio. */
}
.alignleft,
img.alignleft {
	display: inline;
	float: left;
	margin-right: 10px;
	margin-top: 4px;
}
.alignright,
img.alignright {
	display: inline;
	float: right;
	margin-left: 10px;
	margin-top: 4px;
}
.aligncenter,
img.aligncenter {
	clear: both;
	display: block;
  margin: 10px auto;
}
img.alignleft,
img.alignright,
img.aligncenter {
	margin-bottom: 12px;
}
.postmain .wp-caption {
  max-width: 449px !important;
}
.wp-caption-text {
	text-align: center;
	font-size: 1.1em !important;
	font-style: italic;
	margin-top: 5px;
  color: #333333 !important;
  text-shadow: 1px 1px #777777;
}

/* Navigation Pic */
.navpic a img {
	border: 1px solid #4C4C4C;
}
.navpic .alignright a {
	background: url(http://img.webme.com/pic/s/serhat97/image-arrow-right.jpg) no-repeat right center;
}
.navpic .alignleft a {
	background: url(http://img.webme.com/pic/s/serhat97/image-arrow.jpg) no-repeat left center;
}

blockquote {
  background: url(http://img.webme.com/pic/s/serhat97/testimonial-tick1.png) left top no-repeat;
  font-style: italic;
  padding: 0 40px;
}
blockquote cite,
blockquote em,
blockquote i {
  font-style: normal;
}

+ Yorum Yapıldı. + 2 Yorum Yapıldı.

Adsız

1 Ocak 2013 09:36

Güzel olmuş

Unknown

1 Ocak 2013 12:09

Saol .
Küçük Bir Kodlama İşte : )

Yorum Gönder

1-Yorumlarınızda Küfür,Argo Kelimeler Kullanmayın.
2-Kelimelerinizi Doğru ve Teleffuzu Kolay Olanlardan Seçin.
3-Reklam Yapmayın,Sitenizi Tanıtmayın.
4-Alıntı Yapmak Yasaktır. Aksi Takdirde Gereken Yapılır.
5-Yorum Yapan Birine Gönderme Yaparken Önce Onun Adını Yazın.
-------
Lütfen Kurallara Uyun , Uymayanları Uyarın...

YazarSayar