ওয়ার্ডপ্রেসের Blank থিম তৈরি [পর্ব-০৮] :: style.css নিয়ে কাজ

ওয়ার্ডপ্রেসের Blank থিম তৈরি

আসসালামুআলাইকুম, আশা করি সবাই ভালো আছেন। ওয়ার্ডপ্রেসের Blank থিম তৈরির অষ্টম পর্বে আপনাকে স্বাগতম। আজকে আমরা style.css নিয়ে কাজ করবো। প্রথমে চলুন আগে কোডটুকু দেখে নেই:

/*
Theme Name: BLANK Theme
Theme URI: http://www.themedomain.com
Description: This is just a BLANK starter WordPress Theme template -- WordPress v3.5.1
Author: Author Name
Author URI: http://www.authordomain.com
Version: 1
*/

@media screen {

* {
	margin: 0;
	padding: 0;
	}
body {
	background: white;
	font: 14px/1.4 Georgia, Serif;
	}
.screen-reader-text {
	position: absolute;
	left: -9999px;
	top: -9999px;
	}
.clear {
	clear: both;
	}
.group:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
	}
* html .group, *:first-child+html .group {
	zoom: 1;
	} /* First selector = IE6, Second Selector = IE 7 */

#page-wrap {
	width: 960px;
	margin: 20px auto;
	}

h1, h2, h3 {
	font-weight: normal;
	margin: 0 0 10px 0;
	}
h1 { }
h2 { }
h3 { }

p {
	margin: 0 0 10px 0;
	}
a { }
a:hover { }

blockquote { }
blockquote p { }

ul, ol {
	margin: 0 0 10px 0;
	}

.post { }

.entry { }
.entry a { }
.entry a:hover { }

pre { }
code, tt { }

#meta { }
.postmetadata { }

#sidebar { }

.navgation { }
   .next-posts { }
   .prev-posts { }

#searchform { }
	#s { }
	#searchsubmt { }

ol.commentlist { list-style: none; }
ol.commentlist li { }
ol.commentlist li.alt { }
ol.commentlist li.bypostauthor { }
ol.commentlist li.byuser { }
ol.commentlist li.comment-author-admin { }
ol.commentlist li.comment { border-bottom: 1px dotted #666; padding: 10px; }
ol.commentlist li.comment div.comment-author { }
ol.commentlist li.comment div.vcard { }
ol.commentlist li.comment div.vcard cite.fn { font-style: normal; }
ol.commentlist li.comment div.vcard cite.fn a.url { }
ol.commentlist li.comment div.vcard img.avatar { float:right; margin: 0 0 10px 10px; }
ol.commentlist li.comment div.vcard img.avatar-32 { }
ol.commentlist li.comment div.vcard img.photo { }
ol.commentlist li.comment div.vcard span.says { }
ol.commentlist li.comment div.commentmetadata { }
ol.commentlist li.comment div.comment-meta { font-size: 10px; }
ol.commentlist li.comment div.comment-meta a { color: #ccc; }
ol.commentlist li.comment p { }
ol.commentlist li.comment ul { }
ol.commentlist li.comment div.reply { font-size: 11px; }
ol.commentlist li.comment div.reply a { font-weight: bold; }
ol.commentlist li.comment ul.children { list-style: none; margin: 10px 0 0; }
ol.commentlist li.comment ul.children li { }
ol.commentlist li.comment ul.children li.alt { }
ol.commentlist li.comment ul.children li.bypostauthor { }
ol.commentlist li.comment ul.children li.byuser { }
ol.commentlist li.comment ul.children li.comment { }
ol.commentlist li.comment ul.children li.comment-author-admin { }
ol.commentlist li.comment ul.children li.depth-2 { border-left: 5px solid #555; margin: 0 0 10px 10px; }
ol.commentlist li.comment ul.children li.depth-3 { border-left: 5px solid #999; margin: 0 0 10px 10px; }
ol.commentlist li.comment ul.children li.depth-4 { border-left: 5px solid #bbb; margin: 0 0 10px 10px; }
ol.commentlist li.comment ul.children li.depth-5 { }
ol.commentlist li.comment ul.children li.odd { }
ol.commentlist li.even { background: #fff; }
ol.commentlist li.odd { background: #f6f6f6; }
ol.commentlist li.parent { border-left: 5px solid #111; }
ol.commentlist li.thread-alt { }
ol.commentlist li.thread-even { }
ol.commentlist li.thread-odd { }

form { }
input[type=text] { }
textarea { }

} /* END screen media */

@media print {

.do-not-print {
	display: none;
	}
#comments {
	page-break-before: always;
	}

body {
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	line-height: 1.4;
	word-spacing: 1.1pt;
	letter-spacing: 0.2pt;
	font-family: Garamond,"Times New Roman", serif;
	color: #000;
	background: none;
	font-size: 12pt;
	}
h1,h2,h3,h4,h5,h6 {
	font-family: Helvetica, Arial, sans-serif;
	}
h1 {
	font-size: 19pt;
	}
h2 {
	font-size:17pt;
	}
h3 {
	font-size:15pt;
	}
h4,h5,h6 {
	font-size:12pt;
	}
code {
	font: 10pt Courier, monospace;
	}
blockquote {
	margin: 1.3em;
	padding: 1em;
	}
img {
	display: block;
	margin: 1em 0;
	}
a img {
	border: none;
	}
table {
	margin: 1px;
	text-align:left;
	}
th {
	border-bottom: 1px solid #333;
	font-weight: bold;
	}
td {
	border-bottom: 1px solid #333;
	}
th, td {
	padding: 4px 10px 4px 0;
	}
caption {
	background: #fff;
	margin-bottom: 2em;
	text-align: left;
	}
thead {
	display: table-header-group;
	}
tr {
	page-break-inside: avoid;
	}
a {
	text-decoration: none;
	color: black;
	}

} /* END print media */

কমেন্ট করা জায়গায় প্রথমে থিমের নাম, থিমের লিঙ্ক, থিমের বর্ণনা, থিম যে তৈরি করবে তার নাম, প্রস্তুতকারকের লিঙ্ক ও থিমের ভার্সন দিতে হয়। এগুলো আপনি যখন থিমটি এক্টিভ করবেন, তখন ড্যাশবোর্ডে এই তথ্য গুলো প্রদর্শন করবে। অন্য কোথাও নয়। তবে কিছু ওয়েবসাইট আছে যার মাধ্যমে থিম সম্পর্কে জানা যায়, সেসব ওয়েবসাইটও এখান থেকে তথ্য গুলো জোগার করে। কোন ওয়েবসাইট কি থিম ব্যবহার করছে তা জানার একটি সুন্দর ওয়েবসাইট হলো: whatwpthemeisthat.com টেকটিউনসে কমেন্টে কিছু উল্টা-পাল্টা কোড চলে আসছে, এটি আসলে নিচের ছবির মত হবে। এই বিষয়ে মডারেটরের সাহায্য কামনা করছি।

এরপর এখানে টেকটিউনসের মত কমেন্ট করার একটি সুন্দর ডিজাইন দেওয়া আছে। আর বাকি অংশের ডিজাইন আপনার প্রয়োজন মত করে নিবেন।

এই ধরনের বাংলা ভিডিও টিউটোরিয়াল দেখতে চাইলে "ফ্রী বাংলা টিউটোরিয়াল" ওয়েবসাইটটি তো আছেই।

Level 0

আমি Atique। বিশ্বের সর্ববৃহৎ বিজ্ঞান ও প্রযুক্তির সৌশল নেটওয়ার্ক - টেকটিউনস এ আমি 11 বছর 11 মাস যাবৎ যুক্ত আছি। টেকটিউনস আমি এ পর্যন্ত 24 টি টিউন ও 83 টি টিউমেন্ট করেছি। টেকটিউনসে আমার 1 ফলোয়ার আছে এবং আমি টেকটিউনসে 0 টিউনারকে ফলো করি।


টিউনস


আরও টিউনস


টিউনারের আরও টিউনস


টিউমেন্টস