CSS File එකකින් බුකිය profile එක ලස්සන කර ගන්නේ කොහොමද.?

බුකියට අලුතින්ම එකතු වුන option එකක් තමයි CSS file එකක් පාවිච්චි කරලා profile එකේ design එක වෙනස් කරන එක.

බුකියට අලුතින්ම එකතු වුන option එකක් තමයි  CSS file එකක් පාවිච්චි කරලා  profile එකේ  design එක වෙනස් කරන එක. මුලින්ම කියන්න ඕනි මේ option එක තාම ෆේස්බුක් එකේවත් නෑ.  Web design ගැන දන්න යාලුවෝ නම් දන්නවා මොකක්ද මේ  CSS කියන්නෙ කියලා.

CSS එහෙමත් නැත්නම් Cascading Style Sheet කියලා කියන්නේ  web design වලදි පාවිච්චි කරන programming language එකක්. කෙටියෙන්ම කිව්වොත් CSS වලින් කරන්නේ  HTML වලින් ලියපු script එකක් තවදුරත් ලස්සන කරන එකයි. CSS කියන්නේ ටිකක් සංකීර්ණ language එකක්. ඉතින් මම අද ඔයාලට CSS උගන්වන්න යන්නේ නෑ.

මම අද ඔයාලට දෙන්නේ ඔයලගේ බුකිය profile එක ලස්සන කරගන්න පුලුවන් මම හදපු සරල CSS template එකක්. මෙකේ සමහර දේවල් ඔයලටත් වෙනස් කරගන්න පුලුවන් වෙන්න මම ඒවා code එක ලග විස්තර කරලා තියෙනවා.

ඔයලට කරන්න තියෙන්නේ පහල තියෙන code ටික copy කරලා Notepad එකකට paste කරලා දීලා තියෙන උපදෙස් අනුව code ටික ඔයාලා කැමති විදිහට වෙනස් කරගන්න එක. ඊට පස්සේ file එක save කරන කොට file එකේ නමේ අගට .css කියලා ගහලා save කරන්න. Eg:- MyStyle.css
අන්තිමට කරන්න තියෙන්නෙ බුකියට log වෙලා settings --> design ගිහින් CSS file එක upload කරල save කරන එක.

හරි එහෙනම් ප්‍රශ්න තියේනම්  හරි මේක තව ලස්සන කර ගන්න ඕනිනම් හරි comment එකක් දාලා අහන්නකෝ ... එහෙනම් ජය වේවා..!

/* Bukiya CSS template by Kasun Chaturanga */

/* Profile Picture */

.profile-container .card.hovercard .user-avatar img {
                          width: 100%;
                          box-shadow: 5px 5px 8px 0 rgba(0,0,0,.3);
                          border-radius:10%; /* Profile picture එකේ හැඩය වෙනස් කරන්න (0 - 50%) */
                          border:1px solid #ddd; /* Profile picture එක වටේ තියෙන බෝඩර් එකේ size එක වෙනස් කරන්න "5px" වෙනස් කරන්න. පාට වෙනස් කරන්න "#fff" වෙනස් කරන්න  */
                        padding:5px;
                        background:#fff;
}

/* Profile name */
.profile-container .card.hovercard .info .title a{
                        font-family:"Georgia"; /* Profile name එකේ  font එක වෙනස් කරන්න */
}

/* Post heading */
.post .post-heading{
        background:#202D3A; /* Post hedding එකේ පාට වෙනස් කරන්න */
        /* Post hedding එකට image එකක් දාන්න ඕනි නම් මෙහෙම වෙනස් කරන්න background:url("image එකට path එක") top repeat-x; */
        height:70px; /* Post hedding එකේ උස වෙනස් කරන්න */
        -webkit-border-radius: 6px 6px 0 0;
        -moz-border-radius: 6px 6px 0 0;
        border-radius: 6px 6px 0 0;
        border-left: 1px solid #202D3A;
        border-top: 1px solid #202D3A;
        border-right: 1px solid #202D3A;
        display:block;
        padding:12px 15px;
        box-shadow: 0 0 3px #a5a9ab;
}

/* Post heading font */
.post .post-heading .meta .title a{
                font-family:"Times New Roman"; /* Post heading එකේ  font එක වෙනස් කරන්න */
                color:#fff;
                margin-right:-7px;
}

/* Post heading font hover */
.post .post-heading .meta .title a:hover{
                    text-decoration:none!important;
                    color:#CACAD9;

}

/* Post heading avatar */
.post .post-heading .avatar{
            border:3px solid #fff;
}

/* Post description */
.post .post-description{
            background:#E6EAEA; /* පාට වෙනස් කරන්න */
            border-left: 1px solid #a5a9ab;
            border-right: 1px solid #a5a9ab;
            border-bottom: 1px solid #a5a9ab;
            -webkit-border-radius: 0 0 6px 6px;
            -moz-border-radius: 0 0 6px 6px;
            border-radius: 0 0 6px 6px;
            padding:15px 15px 5px;
            box-shadow: 0 0 3px #a5a9ab;
}

/* Post description font */
.post .post-description p{
            font-family: "Times New Roman", Times, serif;
            font-size:14px; /* Post description එකේ font size වෙනස් කරන්න */
            color:#555; /* Post description එකේ font පාට වෙනස් කරන්න */
            overflow:hidden;
            word-wrap:break-word;
            border-left: 5px solid #a5a9ab;
            background:#fff;
            padding:5px;
}

.post .post-description p a{
            font-style: italic;
            color:#2C3945;
}

.post .post-description p a:hover{
             text-decoration:none!important;
            color:#CACAD9;            
}

/* Post stat items */
.post .post-description .stats .stat-item{
                    display:inline-block;
                    padding:3px 7px;
                    font-size:12px;border:0;
                    color:#555;
}

/* Post file */
.post .post-file{
        max-height:400px;
        background:#E6EAEA; /* පාට වෙනස් කරන්න */
        width:100%;
}

.wo_post_fetch_link .post-fetched-url-con img {
                        position: absolute;
                        display: block;
                        left: 0;
                        right: 0;
                        top: 0;
                        bottom: 0;
                        width: 100%;
                        height: auto;
                        margin: auto;
}

.post-fetched-url .fetched-url-text {
                margin-top: 5px;
                margin-bottom: 0;
                margin-right: 0;
                margin-left: 0;
                border-left: 5px solid #a5a9ab;
                background:#ffffff;
}

.post-fetched-url .fetched-url-text:hover {
                background:#CACAD9;
}

/* Post footer */
.post .post-footer{
        border-top:1px solid #a5a9ab;
        padding:10px;
        background:#E6EAEA; /* පාට වෙනස් කරන්න */
        -webkit-border-radius: 0 0 6px 6px;
        -moz-border-radius: 0 0 6px 6px;
        border-radius: 0 0 6px 6px;
        box-shadow: 0 0 3px #a5a9ab;
}

#wo_comment_combo{
        border-top: 1px solid #CACAD9;
}

.main-color, .small-text a{
                color: #ffffff!important;
}

/* Seperation lines */
hr{
    border-top: 1px solid #CACAD9; /* size එක වෙනස් කරන්න "1px" වෙනස් කරන්න. පාට වෙනස් කරන්න "#f4f4f4" වෙනස් කරන්න  */
}

/* Number of likes, dislikes, comments */
.post .post-description .post-actions .stat-item{
                    margin-top:10px!important;
                    background:#E6EAEA; /* පාට වෙනස් කරන්න */
                    border:1px solid #a5a9ab; /* බෝඩර් එකේ size එක වෙනස් කරන්න "1px" වෙනස් කරන්න. පාට වෙනස් කරන්න "#a5a9ab" වෙනස් කරන්න  */
                    -webkit-border-radius: 5px;
                    -moz-border-radius: 5px;
                    border-radius: 5px;
                    box-shadow:inset 2px 2px 6px rgba(100, 100, 100, 0.3), inset -2px -2px 6px rgba(100, 100, 100, 0.3);
}

/* Profile background */
body{
    background:#E6EAEA!important;
    background-image:url("https://drive.google.com/uc?export=download&id=1AYTvYzo7jSvX6wiCE54kRfcSTR1EXOF5")!important;
    background-position:left top!important;
    background-repeat: repeat!important;
}

/* Post buttons */
#wo_post_stat_button .stat-item{
                font-weight:700;
                line-height:14px;
                padding:10.1px 5px 7.4px;
                transition:all .1s ease-in-out;
                background:#E6EAEA; /* පාට වෙනස් කරන්න */
                color:#787878; /* Button එකේ font පාට වෙනස් කරන්න */    
                text-shadow:0px 1px 0px #fff;    
                border:1px solid #a5a9ab;
                -webkit-border-radius: 5px;
                -moz-border-radius: 5px;
                border-radius: 5px;
                box-shadow:none;
}

/* Post buttons hover */
#wo_post_stat_button .stat-item:hover{
                  background:#CACAD9; /* Button උඩට mouse එක ගෙනිච්චහම පාට වෙනස් වෙන්න */
                  border:1px solid #878b8d;
                  color:#6a6a6a;
}

/*Button size and font size for pc*/
@media only screen and (max-width: 3000px){
                #wo_post_stat_button .stat-item{font-size:13px;width:24%;}                
}

/*Button size and font size for mobile*/
@media only screen and (max-width: 480px) {
        #wo_post_stat_button .stat-item{font-size:10px;width:22%;}
}

/* About panel */
.list-group{
    background:#E6EAEA; /* පාට වෙනස් කරන්න */
    border:1px solid #a5a9ab; /* බෝඩර් එකේ size එක වෙනස් කරන්න "1px" වෙනස් කරන්න. පාට වෙනස් කරන්න "#a5a9ab" වෙනස් කරන්න  */
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    box-shadow: 0 0 3px #a5a9ab;
}

.list-group-item{
        background:#E6EAEA; /* පාට වෙනස් කරන්න */
        font-color:#fff; /* about panel එකේ font පාට වෙනස් කරන්න */
}

/* Profile completion bar */
ul.profile-completion-bar{
            background:#E6EAEA; /* පාට වෙනස් කරන්න */
            border:1px solid #a5a9ab; /* බෝඩර් එකේ size එක වෙනස් කරන්න "1px" වෙනස් කරන්න. පාට වෙනස් කරන්න "#a5a9ab" වෙනස් කරන්න  */
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
}

ul.profile-completion-bar li.completion-step{
                    background:#E6EAEA; /* පාට වෙනස් කරන්න */
}

ul.profile-completion-bar li.percentage-bar h4{
                    background:#E6EAEA; /* පාට වෙනස් කරන්න */
}

ul.profile-completion-bar li.completion-bar{
                    background:#E6EAEA; /* පාට වෙනස් කරන්න */
}

ul.profile-completion-bar li.completion-bar div.completion-bar-status{
                        background:#2C3945!important;
}

.login input:focus, ul.profile-completion-bar li.completion-bar div.completion-bar-wrapper {
        border-color: #0e3af6 !important;
        border-top-color:#2C3945!important;
        border-right-color:#2C3945!important;
        border-bottom-color:#2C3945!important;
        border-left-color:#2C3945!important;
}

.wo_user_profile .user-bottom-nav ul{
                background:#E6EAEA;
                border:1px solid #a5a9ab;
                -webkit-border-radius: 5px;
                -moz-border-radius: 5px;
                border-radius: 5px;
}

/* Bukiya CSS template by Kasun Chaturanga */

/* Publisher box */
textarea.postText{
        box-shadow: 0 0 3px #a5a9ab;
        
}

/* About panel  එකේ icon වල පාට වෙනස් කරන්න */
.right_user_info li svg.feather.feather-heart{color:#D90000;}

.right_user_info li svg.feather.feather-user{color:#B2B200;}

.right_user_info li svg.feather.feather-edit-3{color:rgb(35, 150, 243);}

.right_user_info li svg.feather.feather-book{color:rgb(107, 55, 107);}

.right_user_info li svg.feather.feather-globe{color:rgb(204, 131, 23);}

.right_user_info li svg.feather.feather-eye{color:rgb(76, 175, 80);}

/* Search box */
input.search-for-posts {
            border:1px solid #CACAD9;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
}

/* Navigation bar */
.navbar-default{
        background:url("#202D3A); /* පාට වෙනස් කරන්න */
}

/* Navigation bar search box */
.search-container .search-input {
                color:#000000!important;
                background:#ffffff!important; /* පාට වෙනස් කරන්න */
}

/* ikes, dislikes, comments, shares icon වල පාට වෙනස් කරන්න */
svg.feather.feather-thumbs-up{color:rgb(35, 150, 243);}

svg.feather.feather-thumbs-down{color:rgb(204, 131, 23);}

svg.feather.feather-message-circle{color:rgb(76, 175, 80);}

svg.feather.feather-share-2{color:rgb(107, 55, 107);}

.wo_post_fetch_link .url {
        opacity:0.0;
}

/* | Kasun Chaturanga | 2018.05.11 | */