Wapkiz এ Trickbd এর মতোন Forum সাইট বানানোর Orginal Css Theme [With Out WikiBN Credit] [Request Tune]

আসসালামু ওয়ালাইকুম। আশা করছি ভালো আসেন। কিছুদিন আগে ওয়াপকিজে ট্রিকবিডির মতোন ফোরাম সাইট বানানোর টিটোরিয়াল দিয়েছিলাম কিন্তু Main Css Theme Encode এ করা ছিল। আর এতে আমার সাইটের ক্রেডিট ছিল। অনেক দিন ধরে অনেকেই আমার কাছ রিকুয়েস্ট করেছেন Trickbd এর Main Css Theme টা শেয়ার দেওয়ার জন্য। আর, তাই আজকের এই টিউনে আমি আপনাদের নিকট Trickbd এর Main Css Theme কোডটি শেয়ার করব। কিন্তু যার Wapkiz এ Trickbd এর মতোন ফোরাম সাইট বানানোর টিউটোরিয়াল গুলোন দেখেননি তারা দেখে নিন -

[ওয়েব ডিজাইন টিটোরিয়াল বাংলা] Wapkiz এ বানান Trickbd এর মতোন ফোরাম সাইট {Proof Part}

[ওয়েব ডিজাইন টিটোরিয়াল বাংলা] Wapkiz এ বানান Trickbd এর মতোন ফোরাম সাইট {Part-1/Settings Change}

[ [ওয়েব ডিজাইন টিটোরিয়াল বাংলা] Wapkiz এ বানান Trickbd এর মতোন ফোরাম সাইট {Part-2/Meta Tag}

[ওয়েব ডিজাইন টিটোরিয়াল বাংলা] Wapkiz এ বানান Trickbd এর মতোন ফোরাম সাইট {Part-3/Header and Footer}

[ওয়েব ডিজাইন টিটোরিয়াল বাংলা] Wapkiz এ বানান Trickbd এর মতোন ফোরাম সাইট {Part-4/Page Design-1}

★Main Part -1★ [ওয়েব ডিজাইন টিটোরিয়াল বাংলা] Wapkiz এ বানান Trickbd এর মতোন ফোরাম সাইট {Part-5/Page Design-2}

[ওয়েব ডিজাইন টিটোরিয়াল বাংলা] Wapkiz এ বানান Trickbd এর মতোন ফোরাম সাইট {Part-6/Login & Reg}

★Last Design★ [ওয়েব ডিজাইন টিটোরিয়াল বাংলা] Wapkiz এ বানান Trickbd এর মতোন ফোরাম সাইট {Part-7/Home page}

{Admin Discussion} Wapkiz এ বানান TrickBD এর মতোন ফোরাম সাইট [Last Part]

TrickBD Css theme for Wapkiz

* { margin: 0; padding: 0 } body { width: 100%; font-family: Verdana, Arial, sans-serif; font-size: 14px; background: #dcdee3 } a { text-decoration: none; color: blue } a:visited { text-decoration: none; color: blue } a:hover { text-decoration: underline; color: blue } .pad4 { padding: 4px } .block_header { background: #f5f5f5 } .header_logo { background: #eee } .header_logo img { max-width: 170px; padding: 3px } .header_logo h1 { color: #000; padding: 5px } .header_logo a:hover { color: #000; text-decoration: none } .block_top_menu { clear: both; background: #23282d } .block_top_menu ul { list-style: none; background: #23282d } .block_top_menu ul li { text-align: center; width: 32%; text-align: center; background: #23282d; display: inline-block } .block_top_menu ul li:hover { background: #333 } .block_top_menu ul li a { padding: 5px 0; color: #bdc1c9; display: inline-block; width: 100%; font-family: verdana } .block_top_menu ul li a:hover { text-decoration: none } .block_fotter { padding: 5px; border-top: 1px solid #ddd; text-align: center; padding-top: 8px } div.block_fotter, div.footer_left, div.footer_left { background: #333 } .block_fotter ul { list-style: none; text-align: left } .block_fotter ul li { display: block; color: #ddd } .block_fotter ul li a { text-align: center; font-size: small; color: #bdc1c9; padding: 2px; display: inline-block } .switch_pc { margin-top: 15px } .switch_pc a { color: #ddd; border: 1px solid #ddd; padding: 2px 0; display: block } .switch_pc a:hover { text-decoration: none } .footer_left { float: left; width: 48% } .footer_right { width: 100% } .login_box { border: 1px solid #ddd; padding: 2px; font-size: 12px; text-align: center; padding: 5px } .say_hi { font-size: 12px } .block_notice { border: 1px solid #ddd } .block_general { border: 1px solid #ddd } .block_general p { padding: 5px } .block_notice p { padding: 5px; font-family: trebuchet ms } .block_posts { border: 1px solid #ddd } .block_single { border: 1px solid #ddd; overflow: hidden } .block_404 { border: 1px solid #ddd; overflow: hidden } .post_paragraph { padding: 5px } .post_paragraph li {} div.post_paragraph { padding: 5px } div.post_paragraph img { margin: 2px 0 } div.post_paragraph p { padding: 5px 0 } .author_single { padding: 2px; border-bottom: 1px solid #ddd } .author_single td { vertical-align: top } .author_single .avatar { padding: 2px; border: 1px solid #ddd } td.avata_post { width: 65px } td.author_name { padding: 5px; float: left } td.right_post_info { float: right; font-size: 13px } div.user_role { font-size: 12px; color: #333 } div.user_role:first-letter { text-transform: uppercase } .post_rate { margin-top: 5px; font-size: 13px } .post_rate a { margin-top: 5px; font-size: 13px; color: #000 } .post_rate a:hover { text-decoration: none; color: #444 } .post_options { padding: 5px; font-size: 14px; background: #f5f5f5; border-top: 1px solid #eee } .rpul {} ul.rpul li { padding: 5px; border-bottom: 1px solid #ddd; display: block; min-height: 65px } ul.rpul li:last-child { padding: 5px; border-bottom: 0 } ul.rpul img { float: left; padding: 1px; border: 1px solid #f4f4f4; margin-right: 3px; width: 60px; height: 60px } ul.rpul p { display: block; font-size: 13px } ul.rpul p a { display: inline-block; font-size: 13px; color: #000 } ul.rpul a { font-size: 15px } .spu { padding: 5px } .block_category { border: 1px solid #ddd } .block_404 p { padding: 5px } .block_404 h1 { padding: 5px } .block_category ul li { padding: 5px; border-bottom: 1px solid #ddd } .block_category ul li:before { content: " › " } .block_category ul li:last-child { padding: 5px; border-bottom: 0 } .block_notice, .block_category, .block_posts, .block_404, .block_general, .block_single, .author_block, .block_comment, .related_post { margin: 4px; background: #fff } .block_notice h2, .block_posts h2, .block_category h2, .block_single>h1, .block_404 h2, .block_general h2, .related_post h3, .author_block h2 { font-size: 15px; background: #f5f5f5; padding: 5px; border-bottom: 1px solid #ddd } .main_nav { display: block; overflow: hidden; background: #333; border-bottom: 2px solid #ff2f2f } .main_nav ul { list-style: none; margin: 0; padding: 0 } .main_nav ul li { float: left; padding: 5px; border-right: 1px solid #222; font-family: trebuchet ms; transition: .3s } .main_nav ul li:hover { background: #ff2f2f } .main_nav a { color: #bdc1c9; line-height: 16px; transition: .3s } .main_nav ul li.trickbd_payment_icon { border-right: 0!important; float: right!important; padding: 0; margin-right: 4px; padding-top: 2px; padding-bottom: 1px } .main_nav ul li.trickbd_payment_icon a { color: #000; font-size: 15px; border-radius: 50%; background: #fff; height: 22px; width: 22px; display: inline-flex; text-align: center; align-items: center; justify-content: center } .main_nav ul li.trickbd_payment_icon:hover { background: #333 } .main_nav ul li.trickbd_payment_icon:hover a { background: #e74c3c; color: #fff } .main_nav a:hover { text-decoration: none; color: #fff } .breadcumbs { background: none repeat scroll 0 0 #f4f4f4; border-bottom: 1px solid #eee; font-size: 12px; padding: 5px } .breadcumbs_single { padding: 5px; margin: 4px; font-size: 12px; background: #f5f5f5; border: 1px solid #ddd } .wp-pagenavi { clear: both; margin: 10px 4px } .wp-pagenavi a, .wp-pagenavi span { background: #fff } .wp-pagenavi span.current { background: #e5e5e5 none repeat scroll 0 0; border: 1px solid #999; font-weight: 400 } .related_post { border: 1px solid #ddd; margin: 4px } div.related_post ul li { border-bottom: 1px solid #f5f5f5; padding: 4px; min-height: 65px } div.related_post ul li:last-child { border-bottom: none; padding: 4px } div.related_post ul li p { font-size: 12px } div.related_post ul li img { border: 1px solid #f4f4f4; float: left; height: 60px; margin-right: 3px; padding: 1px; width: 60px } .author_block { border: 1px solid #ddd } .author_block img { border: 1px solid #ddd; border: 1px solid #f4f4f4; padding: 1px } .author_block td { vertical-align: top } .author_info { padding: 4px; border-top: 1px solid #ddd } .author_info span { color: #333 } .ad_block { border: 1px solid #ddd; background: #f5f5f5 } .ad_block>h2 { border-bottom: 1px solid #ddd; display: inline-block; font-size: 10px; font-weight: 400 } .ad_block ul { list-style: none; margin: 0; padding: 0 } .block_comment { border: 1px solid #ddd } .block_comment h3 { font-size: 15px; background: #f5f5f5; padding: 5px; border-bottom: 1px solid #ddd; margin-bottom: 4px; margin-top: } .commentlist ul, .commentlist ol { list-style: none } .commentlist .children { margin-left: 15px; border-left: 1px solid #e1e1e1 } .comment-body { display: block; padding: 10px; border-bottom: 1px solid #ddd; min-height: 65px; position: relative } .comment-body p { margin-left: 40px } .commentlist .avatar { border: 1px solid #e1e1e1; float: left; padding: 1px } .commentmetadata { margin-top: 3px; display: inline; float: right; position: absolute; right: 0 } .commentmetadata a { color: #757575; font-size: 12px; vertical-align: top } .reply { min-height: 15px } .commentlist .reply a { position: absolute; bottom: 0; right: 0; background: #e7e7e7; padding: 3px 10px; font-size: 11px; color: #000 } .commentlist .reply a:hover { background: #f5f5f5; color: #000; text-decoration: none } .says { display: none } .fn { font-family: sans-serif; font-style: normal; font-weight: 700; margin-left: 7px } .comment-author.vcard { margin-left: 5px } .commentlist p { font-size: 14px; display: block; overflow: hidden; position: relative; padding: 4px } #respond>div { background: none repeat scroll 0 0 #e7e7e7; display: inline-block; float: right; margin-top: -4px; padding: 3px 10px; text-align: right } #cancel-comment-reply a { color: #000 } #cancel-comment-reply a:hover { color: #000; text-decoration: none; background: #f4f4f4 } div.block_comment div#respond h3 { margin-top: 0 } div#respond form#commentform { padding: 5px } div.block_comment textarea#comment { max-width: 90% } div.block_comment form#commentform p { padding: 4px } .post_paragraph img { max-width: 100%; height: auto } .post_paragraph ul { margin: 0 0 10px 5px } .post_paragraph h1 { font-weight: 400; border-bottom: 2px solid lightgrey; display: inline-block; margin: 5px 0 } .post_paragraph h2 { font-weight: 400; border-bottom: 2px solid lightgrey; display: inline-block; margin: 5px 0 } .post_paragraph h3 { font-weight: 400; border-bottom: 2px solid lightgrey; display: inline-block; margin: 5px 0 } .post_paragraph h4 { font-weight: 400; border-bottom: 2px solid lightgrey; display: inline-block; margin: 5px 0 } .post_paragraph h5 { font-weight: 400; border-bottom: 2px solid lightgrey; display: inline-block; margin: 5px 0 } .post_paragraph h6 { font-weight: 400; border-bottom: 2px solid lightgrey; display: inline-block; margin: 5px 0 } .post_paragraph ul li { margin: 0 0 0 25px } .post_paragraph ol li { margin: 0 0 0 25px } .post_paragraph a { color: blue } .commentmetadata { top: 20px; margin-top: 5px } .commentlist p { margin-top: 20px } .comment-body { padding: 5px } .comment-author.vcard { margin-left: 0 } .hot_img { height: 75px } ul.hot_list { list-style: none; display: inline-block; overflow: hidden } ul.hot_list li { float: left; height: 125px; width: 49%; text-align: center; margin-right: 1% } ul.hot_list li:last-child { border-bottom: none } ul.hot_list img { border: 1px solid #f4f4f4; display: block; margin: 0 auto; padding: 1px; width: 100%; height: 100% } ul.hot_list a { font-size: 14px } ul.hot_list a:hover { text-decoration: none } @media only screen and (min-width:480px) and (max-width:767px) { .commentmetadata { top: 0 } .commentlist p { margin-top: 0 } ul.hot_list li { width: 32% } } @media only screen and (min-width:767px) { ul.hot_list li { width: 24% } .adplay_floating-bottom { height: auto!important; width: auto!important } } label { display: block; margin-bottom: 3px } textarea { display: block } input[type=text], textarea, select, input[type=file] { width: 70%; background: #fff; border: 1px solid #dbdbdb; border-radius: 4px; color: #2f3432; padding: 5px; display: block } textarea { height: 300px; width: 90% } input, textarea, select { margin-bottom: 5px; font-family: open sans, sans-serif } form span { color: grey; display: block; font-size: small; margin-bottom: 5px; margin-top: -4px } .list-image { padding: 5px } .list-image input { width: 100px; border-radius: 0; margin-bottom: 8px } .list-image img { display: block; border: 1px solid #dbdbdb; border-bottom: none; margin-bottom: 5px } .list-image .single_image { display: block; width: 120px; float: left; height: 170px } .list-image .single_image img { width: 110px; height: 100px } .media_upload { clear: both } .ugc-inner-wrapper .ugc-input-wrapper input[type=text], .ugc-inner-wrapper .ugc-input-wrapper textarea { width: 80%!important } .ugc-inner-wrapper h2 { padding: 0!important } .ugc-notice { border: none!important; border-radius: 0!important; padding: 5px } .nav_dasboard { background: #f5f5f5 none repeat scroll 0 0; border-bottom: 1px solid #e1e1e1; padding: 0 5px; font-size: 13px } .nav_dasboard a { display: inline-block; padding: 5px 2px; font-size: 14px } b.draft { color: #555; font-family: open sans, sans-serif } ul.rpul p a { color: blue } a.current { color: #000 } .notify, .error { margin: 5px; padding: 5px; background: #fcf8e3; color: #8a6d3b:; border: 1px solid #faebcc; position: relative } .notify.success { background: #dff0d8; border-color: #d6e9c6; color: #3c763d } .error li { list-style: none } .notify li, , .error li { margin-left: 20px } .btn, input[type=submit] { -moz-user-select: none; background-image: none; border: 1px solid transparent; border-radius: 4px; cursor: pointer; display: inline-block; font-size: 14px; font-weight: 400; line-height: 1.42857; margin-bottom: 5px!important; padding: 6px 12px; text-align: center; vertical-align: middle; white-space: nowrap } .btn-primary, input[type=submit] { background-color: #337ab7; border-color: #2e6da4; color: #fff } .btn-default { background-color: #fff; border-color: #ccc; color: #333 } .btn-danger { background-color: #d9534f; border-color: #d43f3a; color: #fff } .btn-info { background-color: #5bc0de; border-color: #46b8da; color: #fff } .btn-success { background-color: #5cb85c; border-color: #4cae4c; color: #fff } .btn-warning { background-color: #f0ad4e; border-color: #eea236; color: #fff } .btn-small { padding: 3px 5px; font-size: 13px } a.btn { color: #fff } a.white-btn { color: #fff } a.btn.btn-primary { color: #fff } a.btn.btn-default, a.black-btn { color: #333 } a.btn:hover, a.white-btn, a.black-btn { text-decoration: none } .margin_top { margin-top: 10px } .margin_bottom { margin-bottom: 10px } .mar5 { margin: 5px } pre, code { background-color: rgba(0, 0, 0, .01); border: 1px solid rgba(51, 51, 51, .1); margin-bottom: 5px; max-width: 100%; overflow: auto; padding: .5em; white-space: pre-wrap; word-wrap: break-word } .notify.success img { height: 20px; position: absolute; right: 0; top: -10px; width: 20px } textarea { display: block; width: 100%; height: 100px; padding: 6px 12px; font-size: 14px; line-height: 1.42857143; color: #555; background-color: #fff; background-image: none; border: 1px solid #ccc } .post_paragraph img { display: block } .trickbd_notification_count { margin-right: -25px } .trickbd_notify { border: none!important; margin: -15px -5px!important } .author_block img, .author_single img { height: 60px; width: 60px } @-webkit-keyframes spinAround { from { -webkit-transform: rotate(0deg); transform: rotate(0deg) } to { -webkit-transform: rotate(359deg); transform: rotate(359deg) } } @keyframes spinAround { from { -webkit-transform: rotate(0deg); transform: rotate(0deg) } to { -webkit-transform: rotate(359deg); transform: rotate(359deg) } } .button { -moz-appearance: none; -webkit-appearance: none; -webkit-box-align: center; -ms-flex-align: center; align-items: center; border: 1px solid transparent; border-radius: 3px; -webkit-box-shadow: none; box-shadow: none; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; font-size: 1rem; height: 2.25em; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; line-height: 1.5; padding-bottom: calc(0.375em - 1px); padding-left: calc(0.625em - 1px); padding-right: calc(0.625em - 1px); padding-top: calc(0.375em - 1px); position: relative; vertical-align: top; -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; background-color: #fff; border-color: #dbdbdb; color: #363636; cursor: pointer; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding-left: .75em; padding-right: .75em; text-align: center; white-space: nowrap } .button:focus, .button.is-focused, .button:active, .button.is-active { outline: none } .button[disabled] { cursor: not-allowed } .button strong { color: inherit } .button .icon { height: 1.5em; width: 1.5em } .button .icon.is-small, .button .icon.is-medium, .button .icon.is-large { height: 1.5em; width: 1.5em } .button .icon:first-child:not(:last-child) { margin-left: calc(-0.375em - 1px); margin-right: .1875em } .button .icon:last-child:not(:first-child) { margin-left: .1875em; margin-right: calc(-0.375em - 1px) } .button .icon:first-child:last-child { margin-left: calc(-0.375em - 1px); margin-right: calc(-0.375em - 1px) } .button:hover, .button.is-hovered { border-color: #b5b5b5; color: #363636 } .button:focus, .button.is-focused { border-color: #3273dc; color: #363636 } .button:focus:not(:active), .button.is-focused:not(:active) { -webkit-box-shadow: 0 0 0 .125em rgba(50, 115, 220, .25); box-shadow: 0 0 0 .125em rgba(50, 115, 220, .25) } .button:active, .button.is-active { border-color: #4a4a4a; color: #363636 } .button.is-text { background-color: transparent; border-color: transparent; color: #4a4a4a; text-decoration: underline } .button.is-text:hover, .button.is-text.is-hovered, .button.is-text:focus, .button.is-text.is-focused { background-color: #f5f5f5; color: #363636 } .button.is-text:active, .button.is-text.is-active { background-color: #e8e8e8; color: #363636 } .button.is-text[disabled] { background-color: transparent; border-color: transparent; -webkit-box-shadow: none; box-shadow: none } .button.is-white { background-color: #fff; border-color: transparent; color: #0a0a0a } .button.is-white:hover, .button.is-white.is-hovered { background-color: #f9f9f9; border-color: transparent; color: #0a0a0a } .button.is-white:focus, .button.is-white.is-focused { border-color: transparent; color: #0a0a0a } .button.is-white:focus:not(:active), .button.is-white.is-focused:not(:active) { -webkit-box-shadow: 0 0 0 .125em rgba(255, 255, 255, .25); box-shadow: 0 0 0 .125em rgba(255, 255, 255, .25) } .button.is-white:active, .button.is-white.is-active { background-color: #f2f2f2; border-color: transparent; color: #0a0a0a } .button.is-white[disabled] { background-color: #fff; border-color: transparent; -webkit-box-shadow: none; box-shadow: none } .button.is-white.is-inverted { background-color: #0a0a0a; color: #fff } .button.is-white.is-inverted:hover { background-color: #000 } .button.is-white.is-inverted[disabled] { background-color: #0a0a0a; border-color: transparent; -webkit-box-shadow: none; box-shadow: none; color: #fff } .button.is-white.is-loading:after { border-color: transparent transparent #0a0a0a #0a0a0a!important } .button.is-white.is-outlined { background-color: transparent; border-color: #fff; color: #fff } .button.is-white.is-outlined:hover, .button.is-white.is-outlined:focus { background-color: #fff; border-color: #fff; color: #0a0a0a } .button.is-white.is-outlined.is-loading:after { border-color: transparent transparent #fff #fff!important } .button.is-white.is-outlined[disabled] { background-color: transparent; border-color: #fff; -webkit-box-shadow: none; box-shadow: none; color: #fff } .button.is-white.is-inverted.is-outlined { background-color: transparent; border-color: #0a0a0a; color: #0a0a0a } .button.is-white.is-inverted.is-outlined:hover, .button.is-white.is-inverted.is-outlined:focus { background-color: #0a0a0a; color: #fff } .button.is-white.is-inverted.is-outlined[disabled] { background-color: transparent; border-color: #0a0a0a; -webkit-box-shadow: none; box-shadow: none; color: #0a0a0a } .button.is-black { background-color: #0a0a0a; border-color: transparent; color: #fff } .button.is-black:hover, .button.is-black.is-hovered { background-color: #040404; border-color: transparent; color: #fff } .button.is-black:focus, .button.is-black.is-focused { border-color: transparent; color: #fff } .button.is-black:focus:not(:active), .button.is-black.is-focused:not(:active) { -webkit-box-shadow: 0 0 0 .125em rgba(10, 10, 10, .25); box-shadow: 0 0 0 .125em rgba(10, 10, 10, .25) } .button.is-black:active, .button.is-black.is-active { background-color: #000; border-color: transparent; color: #fff } .button.is-black[disabled] { background-color: #0a0a0a; border-color: transparent; -webkit-box-shadow: none; box-shadow: none } .button.is-black.is-inverted { background-color: #fff; color: #0a0a0a } .button.is-black.is-inverted:hover { background-color: #f2f2f2 } .button.is-black.is-inverted[disabled] { background-color: #fff; border-color: transparent; -webkit-box-shadow: none; box-shadow: none; color: #0a0a0a } .button.is-black.is-loading:after { border-color: transparent transparent #fff #fff!important } .button.is-black.is-outlined { background-color: transparent; border-color: #0a0a0a; color: #0a0a0a } .button.is-black.is-outlined:hover, .button.is-black.is-outlined:focus { background-color: #0a0a0a; border-color: #0a0a0a; color: #fff } .button.is-black.is-outlined.is-loading:after { border-color: transparent transparent #0a0a0a #0a0a0a!important } .button.is-black.is-outlined[disabled] { background-color: transparent; border-color: #0a0a0a; -webkit-box-shadow: none; box-shadow: none; color: #0a0a0a } .button.is-black.is-inverted.is-outlined { background-color: transparent; border-color: #fff; color: #fff } .button.is-black.is-inverted.is-outlined:hover, .button.is-black.is-inverted.is-outlined:focus { background-color: #fff; color: #0a0a0a } .button.is-black.is-inverted.is-outlined[disabled] { background-color: transparent; border-color: #fff; -webkit-box-shadow: none; box-shadow: none; color: #fff } .button.is-light { background-color: #f5f5f5; border-color: transparent; color: #363636 } .button.is-light:hover, .button.is-light.is-hovered { background-color: #eee; border-color: transparent; color: #363636 } .button.is-light:focus, .button.is-light.is-focused { border-color: transparent; color: #363636 } .button.is-light:focus:not(:active), .button.is-light.is-focused:not(:active) { -webkit-box-shadow: 0 0 0 .125em rgba(245, 245, 245, .25); box-shadow: 0 0 0 .125em rgba(245, 245, 245, .25) } .button.is-light:active, .button.is-light.is-active { background-color: #e8e8e8; border-color: transparent; color: #363636 } .button.is-light[disabled] { background-color: #f5f5f5; border-color: transparent; -webkit-box-shadow: none; box-shadow: none } .button.is-light.is-inverted { background-color: #363636; color: #f5f5f5 } .button.is-light.is-inverted:hover { background-color: #292929 } .button.is-light.is-inverted[disabled] { background-color: #363636; border-color: transparent; -webkit-box-shadow: none; box-shadow: none; color: #f5f5f5 } .button.is-light.is-loading:after { border-color: transparent transparent #363636 #363636!important } .button.is-light.is-outlined { background-color: transparent; border-color: #f5f5f5; color: #f5f5f5 } .button.is-light.is-outlined:hover, .button.is-light.is-outlined:focus { background-color: #f5f5f5; border-color: #f5f5f5; color: #363636 } .button.is-light.is-outlined.is-loading:after { border-color: transparent transparent #f5f5f5 #f5f5f5!important } .button.is-light.is-outlined[disabled] { background-color: transparent; border-color: #f5f5f5; -webkit-box-shadow: none; box-shadow: none; color: #f5f5f5 } .button.is-light.is-inverted.is-outlined { background-color: transparent; border-color: #363636; color: #363636 } .button.is-light.is-inverted.is-outlined:hover, .button.is-light.is-inverted.is-outlined:focus { background-color: #363636; color: #f5f5f5 } .button.is-light.is-inverted.is-outlined[disabled] { background-color: transparent; border-color: #363636; -webkit-box-shadow: none; box-shadow: none; color: #363636 } .button.is-dark { background-color: #363636; border-color: transparent; color: #f5f5f5 } .button.is-dark:hover, .button.is-dark.is-hovered { background-color: #2f2f2f; border-color: transparent; color: #f5f5f5 } .button.is-dark:focus, .button.is-dark.is-focused { border-color: transparent; color: #f5f5f5 } .button.is-dark:focus:not(:active), .button.is-dark.is-focused:not(:active) { -webkit-box-shadow: 0 0 0 .125em rgba(54, 54, 54, .25); box-shadow: 0 0 0 .125em rgba(54, 54, 54, .25) } .button.is-dark:active, .button.is-dark.is-active { background-color: #292929; border-color: transparent; color: #f5f5f5 } .button.is-dark[disabled] { background-color: #363636; border-color: transparent; -webkit-box-shadow: none; box-shadow: none } .button.is-dark.is-inverted { background-color: #f5f5f5; color: #363636 } .button.is-dark.is-inverted:hover { background-color: #e8e8e8 } .button.is-dark.is-inverted[disabled] { background-color: #f5f5f5; border-color: transparent; -webkit-box-shadow: none; box-shadow: none; color: #363636 } .button.is-dark.is-loading:after { border-color: transparent transparent #f5f5f5 #f5f5f5!important } .button.is-dark.is-outlined { background-color: transparent; border-color: #363636; color: #363636 } .button.is-dark.is-outlined:hover, .button.is-dark.is-outlined:focus { background-color: #363636; border-color: #363636; color: #f5f5f5 } .button.is-dark.is-outlined.is-loading:after { border-color: transparent transparent #363636 #363636!important } .button.is-dark.is-outlined[disabled] { background-color: transparent; border-color: #363636; -webkit-box-shadow: none; box-shadow: none; color: #363636 } .button.is-dark.is-inverted.is-outlined { background-color: transparent; border-color: #f5f5f5; color: #f5f5f5 } .button.is-dark.is-inverted.is-outlined:hover, .button.is-dark.is-inverted.is-outlined:focus { background-color: #f5f5f5; color: #363636 } .button.is-dark.is-inverted.is-outlined[disabled] { background-color: transparent; border-color: #f5f5f5; -webkit-box-shadow: none; box-shadow: none; color: #f5f5f5 } .button.is-primary { background-color: #00d1b2; border-color: transparent; color: #fff } .button.is-primary:hover, .button.is-primary.is-hovered { background-color: #00c4a7; border-color: transparent; color: #fff } .button.is-primary:focus, .button.is-primary.is-focused { border-color: transparent; color: #fff } .button.is-primary:focus:not(:active), .button.is-primary.is-focused:not(:active) { -webkit-box-shadow: 0 0 0 .125em rgba(0, 209, 178, .25); box-shadow: 0 0 0 .125em rgba(0, 209, 178, .25) } .button.is-primary:active, .button.is-primary.is-active { background-color: #00b89c; border-color: transparent; color: #fff } .button.is-primary[disabled] { background-color: #00d1b2; border-color: transparent; -webkit-box-shadow: none; box-shadow: none } .button.is-primary.is-inverted { background-color: #fff; color: #00d1b2 } .button.is-primary.is-inverted:hover { background-color: #f2f2f2 } .button.is-primary.is-inverted[disabled] { background-color: #fff; border-color: transparent; -webkit-box-shadow: none; box-shadow: none; color: #00d1b2 } .button.is-primary.is-loading:after { border-color: transparent transparent #fff #fff!important } .button.is-primary.is-outlined { background-color: transparent; border-color: #00d1b2; color: #00d1b2 } .button.is-primary.is-outlined:hover, .button.is-primary.is-outlined:focus { background-color: #00d1b2; border-color: #00d1b2; color: #fff } .button.is-primary.is-outlined.is-loading:after { border-color: transparent transparent #00d1b2 #00d1b2!important } .button.is-primary.is-outlined[disabled] { background-color: transparent; border-color: #00d1b2; -webkit-box-shadow: none; box-shadow: none; color: #00d1b2 } .button.is-primary.is-inverted.is-outlined { background-color: transparent; border-color: #fff; color: #fff } .button.is-primary.is-inverted.is-outlined:hover, .button.is-primary.is-inverted.is-outlined:focus { background-color: #fff; color: #00d1b2 } .button.is-primary.is-inverted.is-outlined[disabled] { background-color: transparent; border-color: #fff; -webkit-box-shadow: none; box-shadow: none; color: #fff } .button.is-link { background-color: #3273dc; border-color: transparent; color: #fff } .button.is-link:hover, .button.is-link.is-hovered { background-color: #276cda; border-color: transparent; color: #fff } .button.is-link:focus, .button.is-link.is-focused { border-color: transparent; color: #fff } .button.is-link:focus:not(:active), .button.is-link.is-focused:not(:active) { -webkit-box-shadow: 0 0 0 .125em rgba(50, 115, 220, .25); box-shadow: 0 0 0 .125em rgba(50, 115, 220, .25) } .button.is-link:active, .button.is-link.is-active { background-color: #2366d1; border-color: transparent; color: #fff } .button.is-link[disabled] { background-color: #3273dc; border-color: transparent; -webkit-box-shadow: none; box-shadow: none } .button.is-link.is-inverted { background-color: #fff; color: #3273dc } .button.is-link.is-inverted:hover { background-color: #f2f2f2 } .button.is-link.is-inverted[disabled] { background-color: #fff; border-color: transparent; -webkit-box-shadow: none; box-shadow: none; color: #3273dc } .button.is-link.is-loading:after { border-color: transparent transparent #fff #fff!important } .button.is-link.is-outlined { background-color: transparent; border-color: #3273dc; color: #3273dc } .button.is-link.is-outlined:hover, .button.is-link.is-outlined:focus { background-color: #3273dc; border-color: #3273dc; color: #fff } .button.is-link.is-outlined.is-loading:after { border-color: transparent transparent #3273dc #3273dc!important } .button.is-link.is-outlined[disabled] { background-color: transparent; border-color: #3273dc; -webkit-box-shadow: none; box-shadow: none; color: #3273dc } .button.is-link.is-inverted.is-outlined { background-color: transparent; border-color: #fff; color: #fff } .button.is-link.is-inverted.is-outlined:hover, .button.is-link.is-inverted.is-outlined:focus { background-color: #fff; color: #3273dc } .button.is-link.is-inverted.is-outlined[disabled] { background-color: transparent; border-color: #fff; -webkit-box-shadow: none; box-shadow: none; color: #fff } .button.is-info { background-color: #209cee; border-color: transparent; color: #fff } .button.is-info:hover, .button.is-info.is-hovered { background-color: #1496ed; border-color: transparent; color: #fff } .button.is-info:focus, .button.is-info.is-focused { border-color: transparent; color: #fff } .button.is-info:focus:not(:active), .button.is-info.is-focused:not(:active) { -webkit-box-shadow: 0 0 0 .125em rgba(32, 156, 238, .25); box-shadow: 0 0 0 .125em rgba(32, 156, 238, .25) } .button.is-info:active, .button.is-info.is-active { background-color: #118fe4; border-color: transparent; color: #fff } .button.is-info[disabled] { background-color: #209cee; border-color: transparent; -webkit-box-shadow: none; box-shadow: none } .button.is-info.is-inverted { background-color: #fff; color: #209cee } .button.is-info.is-inverted:hover { background-color: #f2f2f2 } .button.is-info.is-inverted[disabled] { background-color: #fff; border-color: transparent; -webkit-box-shadow: none; box-shadow: none; color: #209cee } .button.is-info.is-loading:after { border-color: transparent transparent #fff #fff!important } .button.is-info.is-outlined { background-color: transparent; border-color: #209cee; color: #209cee } .button.is-info.is-outlined:hover, .button.is-info.is-outlined:focus { background-color: #209cee; border-color: #209cee; color: #fff } .button.is-info.is-outlined.is-loading:after { border-color: transparent transparent #209cee #209cee!important } .button.is-info.is-outlined[disabled] { background-color: transparent; border-color: #209cee; -webkit-box-shadow: none; box-shadow: none; color: #209cee } .button.is-info.is-inverted.is-outlined { background-color: transparent; border-color: #fff; color: #fff } .button.is-info.is-inverted.is-outlined:hover, .button.is-info.is-inverted.is-outlined:focus { background-color: #fff; color: #209cee } .button.is-info.is-inverted.is-outlined[disabled] { background-color: transparent; border-color: #fff; -webkit-box-shadow: none; box-shadow: none; color: #fff } .button.is-success { background-color: #23d160; border-color: transparent; color: #fff } .button.is-success:hover, .button.is-success.is-hovered { background-color: #22c65b; border-color: transparent; color: #fff } .button.is-success:focus, .button.is-success.is-focused { border-color: transparent; color: #fff } .button.is-success:focus:not(:active), .button.is-success.is-focused:not(:active) { -webkit-box-shadow: 0 0 0 .125em rgba(35, 209, 96, .25); box-shadow: 0 0 0 .125em rgba(35, 209, 96, .25) } .button.is-success:active, .button.is-success.is-active { background-color: #20bc56; border-color: transparent; color: #fff } .button.is-success[disabled] { background-color: #23d160; border-color: transparent; -webkit-box-shadow: none; box-shadow: none } .button.is-success.is-inverted { background-color: #fff; color: #23d160 } .button.is-success.is-inverted:hover { background-color: #f2f2f2 } .button.is-success.is-inverted[disabled] { background-color: #fff; border-color: transparent; -webkit-box-shadow: none; box-shadow: none; color: #23d160 } .button.is-success.is-loading:after { border-color: transparent transparent #fff #fff!important } .button.is-success.is-outlined { background-color: transparent; border-color: #23d160; color: #23d160 } .button.is-success.is-outlined:hover, .button.is-success.is-outlined:focus { background-color: #23d160; border-color: #23d160; color: #fff } .button.is-success.is-outlined.is-loading:after { border-color: transparent transparent #23d160 #23d160!important } .button.is-success.is-outlined[disabled] { background-color: transparent; border-color: #23d160; -webkit-box-shadow: none; box-shadow: none; color: #23d160 } .button.is-success.is-inverted.is-outlined { background-color: transparent; border-color: #fff; color: #fff } .button.is-success.is-inverted.is-outlined:hover, .button.is-success.is-inverted.is-outlined:focus { background-color: #fff; color: #23d160 } .button.is-success.is-inverted.is-outlined[disabled] { background-color: transparent; border-color: #fff; -webkit-box-shadow: none; box-shadow: none; color: #fff } .button.is-warning { background-color: #ffdd57; border-color: transparent; color: rgba(0, 0, 0, .7) } .button.is-warning:hover, .button.is-warning.is-hovered { background-color: #ffdb4a; border-color: transparent; color: rgba(0, 0, 0, .7) } .button.is-warning:focus, .button.is-warning.is-focused { border-color: transparent; color: rgba(0, 0, 0, .7) } .button.is-warning:focus:not(:active), .button.is-warning.is-focused:not(:active) { -webkit-box-shadow: 0 0 0 .125em rgba(255, 221, 87, .25); box-shadow: 0 0 0 .125em rgba(255, 221, 87, .25) } .button.is-warning:active, .button.is-warning.is-active { background-color: #ffd83d; border-color: transparent; color: rgba(0, 0, 0, .7) } .button.is-warning[disabled] { background-color: #ffdd57; border-color: transparent; -webkit-box-shadow: none; box-shadow: none } .button.is-warning.is-inverted { background-color: rgba(0, 0, 0, .7); color: #ffdd57 } .button.is-warning.is-inverted:hover { background-color: rgba(0, 0, 0, .7) } .button.is-warning.is-inverted[disabled] { background-color: rgba(0, 0, 0, .7); border-color: transparent; -webkit-box-shadow: none; box-shadow: none; color: #ffdd57 } .button.is-warning.is-loading:after { border-color: transparent transparent rgba(0, 0, 0, .7) rgba(0, 0, 0, .7)!important } .button.is-warning.is-outlined { background-color: transparent; border-color: #ffdd57; color: #ffdd57 } .button.is-warning.is-outlined:hover, .button.is-warning.is-outlined:focus { background-color: #ffdd57; border-color: #ffdd57; color: rgba(0, 0, 0, .7) } .button.is-warning.is-outlined.is-loading:after { border-color: transparent transparent #ffdd57 #ffdd57!important } .button.is-warning.is-outlined[disabled] { background-color: transparent; border-color: #ffdd57; -webkit-box-shadow: none; box-shadow: none; color: #ffdd57 } .button.is-warning.is-inverted.is-outlined { background-color: transparent; border-color: rgba(0, 0, 0, .7); color: rgba(0, 0, 0, .7) } .button.is-warning.is-inverted.is-outlined:hover, .button.is-warning.is-inverted.is-outlined:focus { background-color: rgba(0, 0, 0, .7); color: #ffdd57 } .button.is-warning.is-inverted.is-outlined[disabled] { background-color: transparent; border-color: rgba(0, 0, 0, .7); -webkit-box-shadow: none; box-shadow: none; color: rgba(0, 0, 0, .7) } .button.is-danger { background-color: #ff3860; border-color: transparent; color: #fff } .button.is-danger:hover, .button.is-danger.is-hovered { background-color: #ff2b56; border-color: transparent; color: #fff } .button.is-danger:focus, .button.is-danger.is-focused { border-color: transparent; color: #fff } .button.is-danger:focus:not(:active), .button.is-danger.is-focused:not(:active) { -webkit-box-shadow: 0 0 0 .125em rgba(255, 56, 96, .25); box-shadow: 0 0 0 .125em rgba(255, 56, 96, .25) } .button.is-danger:active, .button.is-danger.is-active { background-color: #ff1f4b; border-color: transparent; color: #fff } .button.is-danger[disabled] { background-color: #ff3860; border-color: transparent; -webkit-box-shadow: none; box-shadow: none } .button.is-danger.is-inverted { background-color: #fff; color: #ff3860 } .button.is-danger.is-inverted:hover { background-color: #f2f2f2 } .button.is-danger.is-inverted[disabled] { background-color: #fff; border-color: transparent; -webkit-box-shadow: none; box-shadow: none; color: #ff3860 } .button.is-danger.is-loading:after { border-color: transparent transparent #fff #fff!important } .button.is-danger.is-outlined { background-color: transparent; border-color: #ff3860; color: #ff3860 } .button.is-danger.is-outlined:hover, .button.is-danger.is-outlined:focus { background-color: #ff3860; border-color: #ff3860; color: #fff } .button.is-danger.is-outlined.is-loading:after { border-color: transparent transparent #ff3860 #ff3860!important } .button.is-danger.is-outlined[disabled] { background-color: transparent; border-color: #ff3860; -webkit-box-shadow: none; box-shadow: none; color: #ff3860 } .button.is-danger.is-inverted.is-outlined { background-color: transparent; border-color: #fff; color: #fff } .button.is-danger.is-inverted.is-outlined:hover, .button.is-danger.is-inverted.is-outlined:focus { background-color: #fff; color: #ff3860 } .button.is-danger.is-inverted.is-outlined[disabled] { background-color: transparent; border-color: #fff; -webkit-box-shadow: none; box-shadow: none; color: #fff } .button.is-small { border-radius: 2px; font-size: .75rem } .button.is-medium { font-size: 1.25rem } .button.is-large { font-size: 1.5rem } .button[disabled] { background-color: #fff; border-color: #dbdbdb; -webkit-box-shadow: none; box-shadow: none; opacity: .5 } .button.is-fullwidth { display: -webkit-box; display: -ms-flexbox; display: flex; width: 100% } .button.is-loading { color: transparent!important; pointer-events: none } .button.is-loading:after { -webkit-animation: spinAround 500ms infinite linear; animation: spinAround 500ms infinite linear; border: 2px solid #dbdbdb; border-radius: 290486px; border-right-color: transparent; border-top-color: transparent; content: ""; display: block; height: 1em; position: relative; width: 1em; position: absolute; left: calc(50% - (1em/2)); top: calc(50% - (1em/2)); position: absolute!important } .button.is-static { background-color: #f5f5f5; border-color: #dbdbdb; color: #7a7a7a; -webkit-box-shadow: none; box-shadow: none; pointer-events: none } .button.is-rounded { border-radius: 290486px; padding-left: 1em; padding-right: 1em } .buttons { -webkit-box-align: center; -ms-flex-align: center; align-items: center; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start } .buttons .button { margin-bottom: .5rem } .buttons .button:not(:last-child) { margin-right: .5rem } .buttons:last-child { margin-bottom: -.5rem } .buttons:not(:last-child) { margin-bottom: 1rem } .buttons.has-addons .button:not(:first-child) { border-bottom-left-radius: 0; border-top-left-radius: 0 } .buttons.has-addons .button:not(:last-child) { border-bottom-right-radius: 0; border-top-right-radius: 0; margin-right: -1px } .buttons.has-addons .button:last-child { margin-right: 0 } .buttons.has-addons .button:hover, .buttons.has-addons .button.is-hovered { z-index: 2 } .buttons.has-addons .button:focus, .buttons.has-addons .button.is-focused, .buttons.has-addons .button:active, .buttons.has-addons .button.is-active, .buttons.has-addons .button.is-selected { z-index: 3 } .buttons.has-addons .button:focus:hover, .buttons.has-addons .button.is-focused:hover, .buttons.has-addons .button:active:hover, .buttons.has-addons .button.is-active:hover, .buttons.has-addons .button.is-selected:hover { z-index: 4 } .buttons.is-centered { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center } .buttons.is-right { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end } ul.post_moderate { margin-left: 5px } .post_moderate li { display: inline-block } .post_moderate li a:hover { text-decoration: none } .login-box { margin: 5px; border: 1px solid #0088ff; border-radius: 5px 5px 0 0; background: white; } .log { padding: 10px; color: white; font-weight: bold; background: #0088ff; } .login { padding: 10px; border-bottom: 1px solid #ddd; } .login input { width: 100%; border: 1px solid #ddd; padding: 10px; box-sizing: border-box; border-radius: 4px; color: gray; } .login input[type=submit] { border: 0; font-weight: bold; background: #0088ff; color: white; padding: 8px; text-align: center; } .login2 { padding: 6px; background: white; text-align: center; color: black; } .login2 a { color: #0088ff; } .trickbn-link-ad { overflow: auto; padding: 0px; } .trickbn-link-ad a { background: white; color: black; display: block; overflow: hidden; padding: 10px; font-size: 14px; text-align: center; border: 1px solid black; margin: 4px; border-radius: 30px; box-shadow: 1px 1px 1px gray; text-decoration: none; } .trickbn-link-ad a:hover { background: black; color: white; text-decoration: none; } a .rt { float: right!important; } .line { border-bottom: 1px solid gray; position: relative; } .gtx { font-size: 12px; background: white; pading: 4px; left: 0; top: -6px; position: absolute; } .mr4 { margin-right: 4px; } .capital { text-transform: capitalize } .wp-pagenavi span { background: #e5e5e5 none repeat scroll 0 0; border: 1px solid #999; font-weight: 400 } .wp-pagenavi { clear: both } .wp-pagenavi a, .wp-pagenavi span { text-decoration: none; border: 1px solid #bfbfbf; padding: 3px 5px; margin: 2px } .wp-pagenavi a:hover, .wp-pagenavi span { border-color: #000 } .wp-pagenavi span { font-weight: 700 } .si_captcha_small { width: 175px; height: 45px; padding-top: 10px; padding-bottom: 10px; } .si_captcha_large { width: 250px; height: 60px; padding-top: 10px; padding-bottom: 10px; } img#si_image_com { border-style: none; margin: 0; padding-right: 5px; float: left; } img#si_image_reg { border-style: none; margin: 0; padding-right: 5px; float: left; } img#si_image_log { border-style: none; margin: 0; padding-right: 5px; float: left; } img#si_image_side_login { border-style: none; margin: 0; padding-right: 5px; float: left; } img#si_image_checkout { border-style: none; margin: 0; padding-right: 5px; float: left; } img#si_image_jetpack { border-style: none; margin: 0; padding-right: 5px; float: left; } img#si_image_bbpress_topic { border-style: none; margin: 0; padding-right: 5px; float: left; } .si_captcha_refresh { border-style: none; margin: 0; vertical-align: bottom; } div#si_captcha_input { display: block; padding-top: 15px; padding-bottom: 5px; } label#si_captcha_code_label { margin: 0; } input#si_captcha_code_input { width: 65px; } p#si_captcha_code_p { clear: left; padding-top: 10px; } .si-captcha-jetpack-error { color: #DC3232; } .ihdesign-ad { text-align: center; } .user img.avatar { font-size: 0px; } .ad_block { border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; border-left: 1px solid #ddd; border-right: 1px solid #ddd; } .ad_block { margin-top: 4px; margin-right: 4px; margin-bottom: 4px; margin-left: 4px; } .ad_block { padding-top: 4px; padding-right: 4px; padding-bottom: 4px; padding-left: 4px; } .ad_block img { margin: 0 2px 0 2px; } .ad_block_pc { border-top: 0px solid #ddd; border-bottom: 0px solid #ddd; border-left: 0px solid #ddd; border-right: 0px solid #ddd; } .ad_block_pc { margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 0; } .ad_block_pc { padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0; } .ad_block_pc { border-top: 0px solid #ddd; border-bottom: 0px solid #ddd; border-left: 0px solid #ddd; border-right: 0px solid #ddd; } .ad_block_pc { margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 0; } .ad_block_pc { padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0; }

CSS Theme টা অনেক বড় তাই সাবধানতার সাথে কপি করবেন। তবে, আমার মনে হয় এই কপি পেস্টের ঝামেলায় না গিয়ে CSS Theme Import করাটাই বুদ্বিমানের কাজ। আর,
CSS Theme Import Url: http://techlover.wapkiz.mobi/style.css

তো, ট্রিকবিডির Main Css Theme শেয়ার করেই দিলাম এখন আর, আমার সাইটের ক্রেডিট থাকবে না।এই CSS থিমটাকে Modify করে সাইটের ডিজাইন নিজের মতোন করে নিন। আর, ওয়াপকিজের ফুটারের এড কোড হাইড করতে এই টিটোরিয়ালটি ফলো করুন -

Hide Wapkiz Footer AD 100% Working 2019 Method

ভালো থাকুন সুস্থ থাকুন উইকিবিএন এর সাথেই থাকুন। যেকোন সমস্যায় যোগাযোগ করুন আমাদের সাথে - Contact US।