Ta strona używa ciasteczek (cookies), dzięki którym nasz serwis może działać lepiej. Dowiedz się więcej Rozumiem

Zmienne less.css

Tworząc szablon mamy możliwość skonfigurowania bocznego panelu w taki sposób aby możliwe było zmienianie szablonu graficznego, kolorów wielkości czcionki oraz innych parametrów. Aby system zadziałał należy stworzyć w folderze szablony folder css_less a w nim plik less.css w podanej ścieżce ./data/themes/ourtemplate/css_less/less.css

W tym pliku możemy spokojnie tworzyć nasze style oraz na samej górze możemy deklarować zmienne które wykorzystamy później w naszym kodzie. Windu rozpoznaje zmienne w specjalny sposób

Ze składnią less.css możemy zapoznać się na stronie http://lesscss.org/

Zasadniczo możemy definiować dowolne zmienne jednak tylko te zaczynające się od @e- są dalej interpretowane przez Windu.

Na drugim miejscu mamy możliwość zdefiniowania typu edytora, do dyspozycji mamy
  • @e-color-nazwazmiennej - pojawi się panel wyboru koloru
  • @e-normalsize-nazwazmiennej - suwak do wielkości z zakresem 0-800 i skokiem co 10
  • @e-smallsize-nazwazmiennej - suwak do wielkości z zakresem 0-100 i skokiem co 1
  • @e-fontsize-nazwazmiennej - suwak do wielkości z zakresem 8-36 i skokiem co 1

Przykładowy kod CSS
@e-fontsize-basic-font: 16px;
@e-smallsize-padding: 20px;
@e-smallsize-border-radius: 10px;

@e-color-basic: #c49b06;
@color-basic-light: (@e-color-basic + #333);

@e-color-bg: #404040;
@e-color-bg-container-box: #0d0d0d;

body{
    background-color: @e-color-bg;
    font-size: @e-fontsize-basic-font;
    line-height: 160%;
    color:difference(@e-color-bg-container-box, #ffffff);
}
h1,h2,h3,h4,h5,h6{
    color:@color-basic-light!important;
    font-family: 'Open Sans', sans-serif;
    font-weight:300;
}
a{
    color:@e-color-basic;
    -webkit-transition: all .06s ease-in-out;
    -moz-transition: all .06s ease-in-out;
    transition: all .06s ease-in-out;    
}
a:hover{
    color:@e-color-basic + #444;
    text-decoration: none;
}
h4,.carousel-caption h4 {
    font-size: (@e-fontsize-basic-font * 2);
    margin-bottom:@e-fontsize-basic-font;
}
.big-box{
    background-color: @e-color-bg-container-box;

    -webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.1);    

    margin-top:@e-smallsize-padding * 2;
    margin-bottom:(@e-smallsize-padding);
    
    -webkit-border-radius: @e-smallsize-border-radius;
    -moz-border-radius: @e-smallsize-border-radius;
    border-radius: @e-smallsize-border-radius;    
}

Centrum pomocy

Masz problem techniczny?

Poradniki wideo