CodeSKN

27/06/2017

css_vs_scss_vs_sass.png
שלום חברים בעקבות כמה בקשות לעיצוב הפרופיל
הכנתי לכם ערכת DEMO לפרופיל שלכם כמו: שינוי הרקע הצבעים וסמלים...

שינוי התמונות

כמו שבתמונה פשוט שימו קישור של תמונה בחלק הרצוי
4TL19VKTSnuaEN-uTLVJOw.png
שינוי הצבעים

שינוי הצבעים הוא כללי לא צריך לחפש אלמנט כדי לשנות את הצבע. פשוט שנו בקוד כאן וזה ישתנה לבד בכל הפרופיל
_tUjxG1-SnmtteC-fBrqGA.png

איך לעשות את הצבע שאתם רוצים לשקוף
כדי לעשות את הצבעים שלכם שקופים שיראו את הרקע פשוט כנסו לפרופיל שלכם ותלחצו על F12 
תקבלו כזה דבר >> 
tGrkKiH1SYW2KWPUmdiEVA.png

 

תלחלחצו על הסמל הזה בחלק העליון בצד שמאל >>

Asq4d1TiSL_BmqdVeXO_Fg.png
ופשוט תבחרו דיב אחד לדוג: >>
J3WJ9BIWS7GIkntNC4C-Qw.png
 







 

ואז למטה יופע לכם כזה >> תלחצו על המרובה השחור וזה
CJFbwS2jRVuwQpGW7xZPIQ.png
ואז יפתח לכם כזה דבר >> וז פשוט תזיזו את העיגול עד השקיפות הרצויה
iPfgQarTSqa2mPvmT92xeg.png

ולקוד של התבנית
 

לתבנית לחצו עליי
/*
# ערכת עיצוב: Profile-Design
# גירסא: 1.0
# תאריך: 09/06/2017
# נוצר ע"י: CodeSKN
*/

// תמונות
$userBg:'https://media-spin.net/old/uploads/editor/02fel1s.jpg'; /*תמונת הרקע*/
$like_img:'https://media-spin.net/old/uploads/editor/0r63gl4.png';/*תמונת הלייק*/
$comment_img:'https://media-spin.net/old/uploads/editor/bzrzkit.png';/*תמונת התגובה*/
/* == תחילת עיצוב ==*/
// צבעים
$bagcolor: rgba(48, 48, 48, 0.9);
$bgtowcolor: rgba(48, 48, 48, 0.8);

.userBg {
    background: #141414 url($userBg) no-repeat top center fixed;
    background-size: cover;
}
#mainNav{
    background: $bagcolor;
    color:#fff;
    .topMenu li a{
        color: #fff;
    }
  .userSpace{
    background: $bagcolor;
    li a{
        color: #fff;
    }
  }
}
#mainSearch{
    input{
        background: $bagcolor;
    }
    i{
        background: $bagcolor;
        padding: 8px;
    }
}
#Header {
    min-height: 480px;
}    
.userDataBar {
    background: $bagcolor;
    box-shadow: 0px 0px 40px 0px #000;
}

.user-info-bar{
  ul{
    li{
      a{
        background: $bagcolor;
        color: white;
        border-top-left-radius: 30px;
        border-top-right-radius: 30px;
        margin: -5px 0px;
      }
    }
  }
}

.userDataBar{
  ul{
    li{
      h1{
        color: #fff;  
        font-family: 'Comfortaa', cursive;
        font-size: 1.8em;
      }
    }
  }
}

.userDataBar{
  ul{
    li{
      span{
        color: #fff;
      }
    }
  }
}

.userProfImg{
  box-shadow: 0px 0px 8px 0px #000;
  border: 3px solid $bagcolor;
}

.holder-text {
    background: rgba(80, 77, 86, 0.9);
    padding: 10px;
    border-radius: 6px;
    margin-bottom: 8px;
    .data-text {
        margin-right: 100px;
        padding: 2px;
        background: $bagcolor;
        min-height: 90px;
      }
      .user-avatar {
         margin-right: 5px;
         margin-top: 2px;
         width: 90px;
         border-radius: 50px;
     }
    .pretext{
      color: #ffffff;
    }
}


#userPost{
    #filterList{
    position: fixed;
    top: 48%;
    left: 0px;
    background: $bagcolor;
    transform: translate(0%, -51%);
    padding: 5px 5px 5px;
    z-index: 8;
}
}
#userPost{
    #filterLis{
     list-style: none;
     margin: 0;
    }
}
#userPost{
    #filterList{
        li {
         border: 1px solid rgba(11, 11, 11, 0.42);
         float: none;
         margin: 0
        }
    }
}
#userData{
  .box{
        background: $bgtowcolor;
        box-shadow: 0px 0px 8px 0px #000;
        border-radius: 15px;
    ul{
      li{
        i{
          background: #312f3a;
          border-radius: 30px;
          
        }
        .tag{
          background: #312f3a;
          border-radius: 30px;  
        }
      }
    }
  }
}

.post section{
  color: #fff;    
  background: $bgtowcolor;
  box-shadow: 0px 0px 8px 0px #000;
  border-radius: 20px;
}

.fa-angle-down:before {
    content: "\f107";
    color: white;
}

.comments-container {
    background: transparent;

}    

.post{
  header{
    h4 {
        color: #fff;
        font-size: 0.9em;
    }
  } 
} 

.post.simple footer {
    border-top: 1px solid #fff;
}

.post footer{
    
    .comments{
        color: #9E9E9E;
    }
}
.comments-container ul li .comment .comment-content footer ul li a {
color: #ffffff;
}
.fa-comment:before {
    content: "";
    background: url($comment_img);
    width: 25px;
    height: 25px;
    background-size: contain;
    display: inline-block;
}
.like {
    color: #fff;
}
.like-holder{
    span {
    color: #fff;
    }
} 
.like:before {
    content: "";
    background: url($like_img);
    width: 25px;
    height: 25px;
    background-size: contain;
    display: inline-block;
}
::-webkit-scrollbar-thumb {
    background-color: $bagcolor;
    box-shadow: 0px 0px 40px 0px #fff;
    outline: 1px solid slategrey;
}

::-webkit-scrollbar-track {
    background: rgb(80, 77, 86);
}

::-webkit-scrollbar {
    width: 1em;
}
#footer {
    background: $bagcolor;
}


כלב מי שלא אוהב אותך

27/06/2017

 ואוו אחי כל הכבוד לך 

CodeSKN

27/06/2017

צוטט: כלב מי שלא אוהב אותך

 ואוו אחי כל הכבוד לך 

תודה^^

MeDuzA

27/06/2017

תודה רבה

CodeSKN

27/06/2017

צוטט: MeDuzA

תודה רבה

בכיף אחי><

TsUNaMy WaVe

27/06/2017

כל הכבוד על ההשקעה!

CodeSKN

27/06/2017

צוטט: TsUNaMy WaVe

כל הכבוד על ההשקעה!

טנקסס:blush:

SnowBlind

27/06/2017

נחמד תודה

UVERworld

27/06/2017

כמה חבל שצריך להוסיף עוד מעבר לתמונה כדיי לעצב את המיקום וETC

Lucci-Kun

27/06/2017

מי שמעוניין, אני יכול לעצב לו

חלילילילה

27/06/2017

צוטט: Lucci-Kun

מי שמעוניין, אני יכול לעצב לו

אני שאלתי אותך משהו בהודעות ועדיין לא ענית

Satan

27/06/2017

לא קראתי את הכול אבל למה כול כך הרבהדברים למה ללמוד קודים אין דרך קלה יותר?

Wonder

16/07/2017

נמחק

Flafy-Chan

31/07/2017

תודה P:

the black kitty

31/07/2017

וואו ממש מושקע D:

PLΛGVE

31/07/2017

צוטט: Lucci-Kun

מי שמעוניין, אני יכול לעצב לו

שלחתי לך הודעה בפרטי ועדיין לא ענית לי.

Lucci-Kun

01/08/2017

צוטט: AngryGr0ud0n

שלחתי לך הודעה בפרטי ועדיין לא ענית לי.

שלחתי לי אתמול.. עכשיו ראיתי... :neutral_face: 

PLΛGVE

01/08/2017

צוטט: Lucci-Kun

שלחתי לי אתמול.. עכשיו ראיתי... :neutral_face: 

אז תענה!

Lucci-Kun

02/08/2017

צוטט: AngryGr0ud0n

אז תענה!

טוב

LuffySenpai

02/08/2017

לא הבנתי כלום  מהמדריך

חלילילילה

02/08/2017

קח מדריך לאיך משתמשים במדריך: (זה מועתק מאיזה פעם אחרת שכתבתי את זה אז תתעלם מהשלב הראשון)

צוטט: ים

לא הבנתי כלום  מהמדריך

1. כנס לקישור לחיץ

2. בסוף ההודעה הראשונה יש "לתבנית לחצו עלי" תלחץ על זה

3. תעתיק את כל מה שנמצא במסגרת השחורה

4. תלחץ על השם שלך למעלה

5. תלחץ על הגלגל שיניים

6. תלחץ על "עיצוב"

7. תלחץ על "פרופיל"

8. תדביק את מה שהעתקת ותשלח

9. כנס לפרופיל שלך

10. תלחץ CTRL F5

אם שום דבר לא השתנה לא עשית משהו טוב