[Bài thi thiết kế] "Phong cách teen" - Văn Hoài | Blog

Thi thiết kế theme

[Bài thi thiết kế] "Phong cách teen" - Văn Hoài

Jul 31, 2012 2:01 PMPublicPageviews 2161 34

Trackback from

Mùa hè oi bức các bạn tuổi teen cảm thấy thoải mái hơn khi dùng những hình ảnh trẻ trung, kết hợp nhiều màu sắc lạ mắt đem lại sự tự tin và yêu đời hơn, vì thế mà Hoài đã nghĩ ra ý tưởng và đã cho ra sản phẩm theme theo " Phong Cách TuổiTeen"...

Code Theme:

body{background:transparent url(http://a.imageshack.us/img526/5030/nendo.jpg);}

.yut-btn-light
{background:transparent
url(http://a.imageshack.us/img849/3459/hungno17.png)
no-repeat;height:26px;width:67px;border:none;}

.yut-btn-light a {color:fff;}

.widget h3{display:none;}

#w-profile-name{text-align:center;}

#w-profile-img-root{background:url(http://i1179.photobucket.com/albums/x385/khoc_thamboy05/th_s1.png)
center no-repeat;height:144 px;}

#w-profile-img-ctn img{height:0px;width:0px;}

#w-profile-status .status-bubble {background:transparent;}

#w-profile-card .status {width:150px;border:2px dashed #FFCE9E;color:#333;}

#w-profile-card
.profile
.ico{background:url(http://files.myopera.com/giobinhminh/albums/6578782/GBM-info.gif)
no-repeat;width:18px;height:26px;}

#w-profile-card{margin-left:0px!important;padding-bottom:0px;}

#w-profile-card .bd, #widget-recentVisitor .bd{padding:0px 10px;}

#w-profile-card

.status{background:url(http://i8.glitter-graphics.org/pub/761/761208civf7vumcn.gif)
repeat;border-color:#8a4313;}

#widget-recentPost li{background:url(http://i.imgur.com/Wat1f.gif) no-repeat left;list-style:none;padding-left:12px;}

#hd, #asb-uh, #asb-nav, #asb-menu li.current, #asb-menu li{background:transparent;}

#hd, #asb-uh, #asb-menu li.first, #asb-menu li, #asb-menu li a{border:none!important;}

#asb-menu li{display:none;border:0px;}

#asb-nav-logo{display:none;}

#asb-nav-search{display:none;}

#asb-nav li.nav-item a.nav-link {color:#000000;font-size:14px;}

#blog-title{display:none;}

#blog-description{display:none;}

a, .common-text-color {color:#2b2b2b;text-decoration:none;}

a:hover, .common-text-color:hover{color:#0a5ad1;text-decoration:none;}

#widget-recentPost h3 {font-size:0px;}

#widget-recentVisitor h3 {font-size:0px;}

#widget-recentComment h3 {font-size:0px;}

#widget-category h3 {font-size:0px;}

#widget-statistic h3 {font-size:0px;}

#widget-calendar h3 {font-size:0px;}

#widget-photoslide h3 {font-size:0px;}

#widget-following h3 {font-size:0px;}

#yui-main .yui-b {width:620px !important;padding:0 0 0 27px;}

#yui-main{margin-top:10px;}

.sidebar{border:none;background:transparent;}

.yui-b #sidebar2, .widget{border-top:none;}

#hd{margin-bottom:0px;}

a{color:#514A46;font-family:proxima-nova, sans-serif;}

.yui-b #sidebar1, .yui-t6 .yui-b {width:200px;}

.widget{margin-top:0px;}

.widget-first-of-type {margin-top:0px!important;}

.widget

.hd{background:url(http://a.imageshack.us/img23/910/vanhoaitopnhotren1.png)
no-repeat center top;height:36px;width:200px;}

#widget-category
.hd{background:url(http://a.imageshack.us/img191/3254/64635167038849905456.png)
no-repeat center top;height:36px;width:200px;}

#widget-recentPost
.hd{background:url(http://a.imageshack.us/img27/3082/32340158447427840138.png)
no-repeat center top;height:36px;width:200px;}

#widget-statistic
.hd{background:url(http://a.imageshack.us/img341/4058/69202052381196679657.png)
no-repeat center top;height:36px;width:200px;}

#widget-photoslide
.hd{background:url(http://a.imageshack.us/img19/9689/86619414624526516018.png)
no-repeat center top;height:36px;width:200px;}

#widget-recentComment

.hd{background:url(http://a.imageshack.us/img41/5770/06846969843006224054.png)
no-repeat center top;height:36px;width:200px;}

#widget-following .hd{background:no-repeat center top;height:36px;width:200px;}

#widget-profile

.hd{background:url(http://a.imageshack.us/img28/152/44193877656831478711.png)
no-repeat center top;height:36px;width:200px;}

.widget
.bd{padding:00px 10px;background:transparent
url(http://a.imageshack.us/img546/9130/49899084169351918600.png)
repeat-y center top;width:180px;}

.widget {padding:10px 10px 10px
10px;background:transparent
url(http://a.imageshack.us/img84/9316/57454149366943212376.png)
no-repeat center bottom;width:200px;}

.widget h3{text-align:center;font-size:11px;color:white;}

#article-list{background:transparent;border:none;padding:0 10px 0 10px;}

#article-listing .article {width:600px;}

#article-listing
.article .title
{font-size:17px;background:url(http://i1159.photobucket.com/albums/p632/leha1980/acontrangtri/hieunghnhtimbay.gif)
no-repeat center bottom;font-family:Times MS;color:#005eeb;padding:7px
0px 7px 0px;}

#article-listing .article {border-top:0px;padding:10px 0px 10px 0px;}

#article-listing
.article .tag
.ico{background:url(http://i1052.photobucket.com/albums/s455/hhung_photos/icon_tag.gif);width:45px;height:22px;}

#article-listing .img-wrap img{max-width:90%;float:left;height:120px;width:120px;padding:15px 0px 0px 10px;}

#article-list{

background:transparent;border:0px;}

#article-listing .article{

padding-top:0px!important;border-top:0px;position:relative;background:url(http://a.imageshack.us/img545/2539/nenentryvanhoai.png)
no-repeat center;height:235px;width:620px;margin-bottom:10px;}

#article-listing .article .meta, .article .tag, #article-listing .emotion, .article .category{

display:none;}

#article-listing .img-wrap{

float:left;width:150px;margin-left:15px;}

#article-listing .img-wrap img{

max-width:100%;width:100%;}

#article-listing .article .summary{

display:none;}

#article-listing .article .summary-short{

display:block!important;width:390px;float:right;margin-right:35px;height:90px;overflow:hidden;}

#article-listing .article .title{

padding:13px 0px 11px 65px;}

#article-listing .article .hd {

position:absolute;top:2px;right:0px;z-index:1;width:90px;}

#article-listing .img-wrap{height:120px;}

#article-listing .img-wrap img{height:100%;}

#article-listing
.article .more
{margin-left:55px;background:url(http://a.imageshack.us/img24/6237/xemthema.png)
no-repeat center left;width:15px;height:15px;padding-left:15px;}

#article-listing
.article
.more:hover{margin-left:55px;background:url(http://a.imageshack.us/img256/1802/xemthemb.png)
no-repeat center left;width:15px;height:15px;padding-left:15px;}

#article-single .article .content{width:600px;}

#article-single .actions {border-bottom:none;text-align:center;}

#article-single{background:transparent;border:none;}

#article-single .bd{padding:0 0 0 10px;}

#article-single
.article-ft{width:600px;height:40px;background:transparent
url(http://i289.photobucket.com/albums/ll215/rainnysunday/291288gxi9bk9vig.gif)
no-repeat center;padding:0px;}

#article-single #socialGroup-bottom {padding:0px;}

#article-supplement.new-style-supplement{background:transparent;border:none;}

#comment-form {background:transparent;}

#comment-textarea{background:transparent;width:450px;height:90px;}

#comment-list .comment-reply{background:transparent;}

Article top nav{}

#article-carousel li{width:150px !important;height:235px !important;margin-right:15px !important;float:left;overflow:hidden;}

#article-carousel li .img-wrap img{height:120px !important;width:150px !important;}

#article-carousel li .img-wrap{width:150px !important;}

#article-navigation .hd, #article-navigation .ft {font-size:0px;}

#article-top-nav
.ft .action-carousel-show, #article-carousel .ft
.action-carousel-hide{width:75px;height:22px;background:#a7f0fa;color:#616161;text-transform:uppercase;}

#article-navigation{margin:10px 10px 10px 10px;background-color:transparent;border:1px dashed #979393;}

#article-bottom-nav{margin:0px 5px 10px 5px;border:1px dashed #979393;}

#pagination-bottom{background:transparent;border:none;}

.yut-pg-container .pg-previous,

.yut-pg-container .pg-next,

.yut-pg-container .pg-page,

.yut-pg-container
.pg-break{border:0px;background:transparent
url(http://a.imageshack.us/img809/2299/sotrang.png) no-repeat
center;display:inline-block;vertical-align:middle;height:30px;width:30px;line-height:30px;margin-right:5px;font-size:13px;color:white;font-weight:bold;border:0px;}

.yut-pg-container .pg-previous:hover,

.yut-pg-container .pg-next:hover,

.yut-pg-container .pg-page:hover,

.yut-pg-container
.pg-break:hover{border:0px;background:transparent
url(http://a.imageshack.us/img407/4069/hoversotrang.png) no-repeat
center;display:inline-block;vertical-align:middle;height:30px;width:30px;line-height:30px;margin-right:5px;font-size:14px;color:#ff0000;font-weight:bold;border:0px;}

.yut-pg-container
.pg-current-page
{font-size:15px;color:000;font-weight:bold;border:0px;background:transparent

url(http://i1052.photobucket.com/albums/s455/hhung_photos/hover-so-trang.png)
no-repeat center;}

#widget-recentVisitor .bd li{margin:4px 14px;}

#widget-recentVisitor
.bd
li{background:url(http://nm7.upanh.com/b5.s27.d1/31fc45eaefbd3ad57ab32707efa0cdee_45423097.imgkhachmoivao.png)
no-repeat center;width:56px;height:56px;}

#widget-recentVisitor .bd .profile-img {margin:4px 4px;}

#widget-recentVisitor .bd .ico,

#widget-recentVisitor .bd .nickname{display:none;width:1px;height:1px;}

#widget-recentVisitor .hd a {margin:5px 0px;}

#widget-statistic .bd dt {margin-left:17px;margin-right:10px;}

#widget-statistic
.bd dd {background:transparent
url(http://i118.photobucket.com/albums/o93/olympia41124/Yahoo_360plus/Icon/14.gif)
no-repeat center left;margin:0px 0 6px 0;}

.asb-searchbox{width:200px !important;height:auto;padding-top:325px;padding-left:712px;}

.asb-searchbox span.yut-btn-search button{background:transparent;}

.asb-searchbox

span.yut-btn-search{background:url(http://a.imageshack.us/img18/4573/iconsearchbox.png)
no-repeat;height:22px;width:24px;}

.asb-searchbox span.yut-btn-search,

.asb-searchbox input{border:1px solid #8c8c8c;}

#emotion-carousel
.emotion-content .att1, #article-single span.att1, #article-listing
span.att1{background:url(http://www.krassota.com/i/smile/022.gif);width:35px;height:30px;}

#emotion-carousel
.emotion-content .att2, #article-single span.att2, #article-listing
span.att2{background:url(http://www.krassota.com/i/smile/035.gif);width:41px;height:30px;}

#emotion-carousel
.emotion-content .att3, #article-single span.att3, #article-listing
span.att3{background:url(http://www.krassota.com/i/smile/058.gif);width:32px;height:30px;}

#emotion-carousel
.emotion-content .att4, #article-single span.att4, #article-listing
span.att4{background:url(http://www.krassota.com/i/smile/036.gif);width:29px;height:30px;}

#emotion-carousel
.emotion-content .att5, #article-single span.att5, #article-listing
span.att5{background:url(http://www.krassota.com/i/smile/014.gif);width:30px;height:30px;}

#emotion-carousel
.emotion-content .att6, #article-single span.att6, #article-listing
span.att6{background:url(http://www.krassota.com/i/smile/006.gif);width:31px;height:30px;}

#emotion-carousel
.emotion-content .att7, #article-single span.att7, #article-listing
span.att7{background:url(http://www.krassota.com/i/smile/011.gif);width:32px;height:30px;}

#emotion-carousel
.emotion-content .att8, #article-single span.att8, #article-listing
span.att8{background:url(http://www.krassota.com/i/smile/008.gif);width:41px;height:30px;}

#emotion-carousel
.emotion-content .att9, #article-single span.att9, #article-listing
span.att9{background:url(http://www.krassota.com/i/smile/020.gif);width:32px;height:30px;}

#emotion-carousel
.emotion-content .att10, #article-single span.att10, #article-listing
span.att10{background:url(http://www.krassota.com/i/smile/015.gif);width:37px;height:30px;}

#emotion-carousel
.emotion-content .att11, #article-single span.att11, #article-listing
span.att11{background:url(http://www.krassota.com/i/smile/039.gif);width:37px;height:30px;}

#emotion-carousel
.emotion-content .att12, #article-single span.att12, #article-listing
span.att12{background:url(http://www.krassota.com/i/smile/013.gif);width:34px;height:30px;}

#hd {border-bottom:0px;background:url(http://a.imageshack.us/img201/262/bannertop1.png) no-repeat center;height:550px;}

#doc3 {background:url(http://a.imageshack.us/img690/2407/midm.png) repeat-y top center;}

.yut-pg-container .pg-current-page{background-color:#ff7700;border:1px solid #ff7700;}

#ft
{background:url(http://a.imageshack.us/img853/9950/bannerduoi1.png)
no-repeat;height:200px;width:1000px;font-size:0px;border:0px;padding:0 0
0 0;}

#ft li .divider {display:none;}

#emotion-carousel,
#article-top-nav
{background:url(http://a.imageshack.us/img542/6601/entryvanhoai.png)
no-repeat center;height:250px;border:none;}

#article-single.bd,
#article-list, #article-supplement
{background:url(http://a.imageshack.us/img12/8232/rai19.png)
repeat;border:none;}

.sidebar {background:url(http://a.imageshack.us/img12/8232/rai19.png) repeat;border:none;}

#pagination-bottom,
#article-bottom-nav
{background:url(http://a.imageshack.us/img11/1747/nencuoivanhoai1.png)
no-repeat center;height:260px;border:none;}

#vanhoai-blog{position:absolute;top:138px;left:0px;width:100%;}

#menu{width:970px;margin:0 auto;}

ul#mn{top:341px;left:35px;float:left;width:970px;text-transform:uppercase;white-space:nowrap;font-family:sans-serif;font-weight:400;font-size:13px;text-decoration:none;height:40px;background:transparent;position:relative;}

ul#mn
li{float:left;height:40px;padding:0px 0px 0px
0px;border:0px;margin-top:0px!important;width:auto;text-align:center;font-weight:bold;background:transparent;height:40px;}

ul#mn li a{padding:12px 15px 0 15px;display:block;color:#fff;text-decoration:none;}

ul#mn
li:hover
{background:url(http://nn9.upanh.com/b6.s28.d1/55c3b8ca919ff150dc4644c0e005239d_45994699.untitled.png)
left top no-repeat;border:0px;color:#fff;}

ul#mn li:hover a{color:#fff;}

ul#mn
li ul.mn_con
{text-transform:capitalize;font-size:12px;padding:0px;display:none;height:27px;line-height:27px;padding:0px;position:absolute;left:auto;top:40px;color:#666;border:1px
solid #999;border-top:0px;margin-top:0px!important;}

ul#mn li
ul.mn_con li
{border:none;margin-top:0px!important;padding-top:0px!important;height:25px!important;width:auto;background:#4FAAF0;border:1px
solid #FFF;}

bottom

ul#mn li ul .mn_con li a{padding-top:4px!important;display:block;}

ul#mn li:hover ul{display:block;}

ul#mn li ul a {display:inline;}

ul#mn li ul a:hover {text-decoration:none;color:#666;}

ul#mn li ul li:hover{background:#2F7DD6;color:white;}

ul#mn li ul li:hover a{color:white;}

</style>

Note: Vì mình không hiểu nhiều code cho lắm nên làm theme nhiều khi cũng hạn chế nhiều ý tưởng, bạn nào thành thạo code thì chỉnh sửa lại cho phù hợp với bạn nhé!.
Thời gian hạn hẹp nên chắc mình mang theme này đi dự thi Theme cho đông vui,có gì các bạn ủng hộ cho Hoài với nhé .

Bản quyền Theme: Văn █•█oài--Blog