Skocz do zawartości
  • Przeglądający   0 użytkowników

    Brak zarejestrowanych użytkowników, przeglądających tę stronę.

CzareK

Jak dodać rangi w CSS? [IPS Community Suite 4]

Promowane odpowiedzi

CzareK    4,501

Jak dodać rangi w CSS?

css_rangi.png

 

Instrukcja:

 

s2.png

 

ACP -> Użytkownicy -> Grupy -> Wybierz dowolną grupę (np. Administrator) i kliknij Edytuj -> Ustawienia grupy -> W "Nazwa grupy" dodaj:

<span class='defaultGroup admin'>Administrator</span>

Kliknij przycisk Zapisz.

 

s2.png

 

ACP -> Wygląd -> Style i szablony -> Edytuj HTML i CSS -> Zakładka CSS -> custom -> custom.css -> Wklej poniższy kod

/* Grupy */
.defaultGroup {
  	border-radius: 2px;
    color: #fff;
    display: inline-block;
    font-weight: 500;
    letter-spacing: 0;
    padding: 0 15px;
    text-shadow: none;
    vertical-align: middle;
    font-size: 12px;
    height: 30px;
    line-height: 30px;
  	box-shadow: 0 -3px 0 rgba(0, 0, 0, 0.15) inset;
}
.admin {
 	background-color: #c75050; 
}
.admin:before {
 	 content: "\f005";
  	 font-family: 'FontAwesome';
  	 margin-right: 3px;
}

Kliknij przycisk Zapisz.

 

Jeżeli nie chcemy gwiazdki przed nazwą grupy to należy usunąć z kodu .CSS (w custom.css) klasę .admin:before

 

custom.png

  • Lubię to! 7

Udostępnij tego posta


Odnośnik do posta
Udostępnij na innych stronach
Gość   
Gość

Dodam tylko, że jeżeli ktoś chce, aby taka ranga wyświetlała się tylko w tematach, to wystarczy użyć tego kodu:

/* Grupy */
.ipsComment_author .defaultGroup {
  	border-radius: 2px;
    color: #fff;
    display: inline-block;
    font-weight: 500;
    letter-spacing: 0;
    padding: 0 15px;
    text-shadow: none;
    vertical-align: middle;
    font-size: 12px;
    height: 30px;
    line-height: 30px;
  	box-shadow: 0 -3px 0 rgba(0, 0, 0, 0.15) inset;
}
.ipsComment_author .admin {
 	background-color: #c75050; 
}
.ipsComment_author .admin:before {
 	 content: "\f005";
  	 font-family: 'FontAwesome';
  	 margin-right: 3px;
}

 

Bez tego, moim zdaniem, np. w profilu wygląda to kiepsko :/ 

xddd.png.1dc378f97c04e36fed621f66ede1108

 

  • Lubię to! 1

Udostępnij tego posta


Odnośnik do posta
Udostępnij na innych stronach
Gość
Ten temat został zamknięty. Brak możliwości dodania odpowiedzi.

  • Podobna zawartość

    • Gość
      Przez Gość

       
      Przejdź do:
      Panel administracyjny  Użytkownicy  Grupy użytkowników  Zarządzanie grupami użytkowników
       
      Edytuj wybraną grupę, wyczyść pole Obrazek grupy, do pola Prefix grupy wpisz:
      <span class='defaultGroup admin'> a do pola Sufiks grupy:
      </span>
       
      Następnie do ipb_styles.css dodaj:
      /* Grupy */ ul.basic_info .defaultGroup { border-radius: 2px; color: #fff; display: inline-block; font-weight: 500; letter-spacing: 0; padding: 0 15px; text-shadow: none; vertical-align: middle; font-size: 12px; height: 30px; line-height: 30px; box-shadow: 0 -3px 0 rgba(0, 0, 0, 0.15) inset; } ul.basic_info .admin { background-color: #c75050; } ul.basic_info .admin:before { content: "\f005"; font-family: 'FontAwesome'; margin-right: 3px; }  
      Jeżeli nie chcemy gwiazdki przed nazwą grupy to należy usunąć z kodu .CSS (ipb_styles.css) klasę .admin:before
       
      Instrukcja dla wersji IPS 4  
      Kod rangi został napisany przez @CzareK  
    • Przez CzareK
      Przechodzimy do ACP System Pomoc Wsparcie techniczne Zaznaczamy "Coś nie działa poprawnie." Klikamy przycisk Kontynuuj Gotowe.
       

       

    • Przez Mendelson.
      Poradnik dla osób, które po wgraniu standardowych plików nie mają grafiki.
       
      Wczesniej pamiętaj! Wgraj poprawnie wszystkie pliki z folderu do folderów z serwera ftp!
       
       

      1. Otwórz paczkę ze stylem.
      2. Otwórz plik : reset.css i style.css
      3. Wejdź na swoje forum pod adres : mendeslonporadnik.pl/admin/ zmieniając mendelsonporadnik.pl na swój adres.
      4. Zaloguj się.
      5. Przejdź do style&szablony.
      6. Gdy zaimportowałeś plik szablonu z rozszerzeniem .xml kliknij na BlackPlayer opcje nastepnie wybierz edytuj styl.
      7. Kliknij na nowy arkusz .css
      8. Nadaj mu nazwę kolejno reset.css oraz style.css
      * aby wprowadzić tekst zaznacz "Wpisz podaną przeze mnie zawartość"
      9. Skopiuj zawartość korzystając z plików z pkt. 2.
      10. Przejdź na swoje forum i odśwież je 2-3 x.
       
      by Mendelson. Kopiując podaj autora 
       
       
      W razie nadal występujących problemów pw
    • Przez FiFi.ART
      Siemanko ;p 
      W tym dość długim (bo screeny) poradniku, pokażę Ci jak zrobić taką o to sygnaturkę (patrz dół), z każdym renderem to już tylko zależy od Ciebie kto tam będzie ;p 
       

       
      NIE PYTAJCIE SIĘ CZEMU NA DOLE JEST 5 OSOBNYCH SCREENÓW, BO SAM NWM, NIE MOGĘ ICH USUNĄĆ, BO COŚ SIĘ ZRĄBAŁO 
       
      A więc zacznijmy! 
      -----------------------------------------------------------------------------------------------------------------
      1. Zacznijmy od wymiarów grafiki, polecam ustawienia takie jak screenie na  dole
       

       
       
      2. Następnie wklejamy nasz render, którego chcemy użyć w sygnaturze i tworzymy nową warstwę dając ją na sam dół pod render
       
       

       
       
      3. Następnie wybieramy pędzel i wybieramy takie ustawienia jak na screenie na dole
       
       

       
       
      4. Po wybraniu pędzla, czas wybrać tło naszej sygnatury, w tym wypadku możecie wybrać co wam się podoba
       
       

       
       
      5. Wybieramy kolor i malujemy pasek taki jak na screenie 
       
       

       
       
      6. Kiedy zrobimy jeden pasek, robimy kolejne paski, zmniejszając jasność koloru lub nawet sam kolor i malujemy, ąż będzie całe tło
       
       
      6. 
       
       
      7. Po zrobieniu tła, wybieramy z lewego menu tryb "Smużenie" i wybieramy takie ustawienia jak na dole wybierając pędzel który zaznaczyłem na czerwono i ustawiając intensywność na 40%
       
       

       
       
      8. Kiedy już ustawimy, to po prostu smużymy po tle, aż wszystkie kolory się "zleją" jak na screenie
       
       

       
       
      9. Kiedy juz mamy zrobione tło, to 3 razy powielamy warstwę z renderem, tak aby mieć 4 rendery.
       
       

       
       
      10. Następnie odznaczamy widoczność ostatniego renderu i wybieramy ten powyżej 
       
       

       
       
      11. Następnie wybieramy efekt naszego renderu "Rozjaśnienie liniowe (Dodaj)"
       
       

       
       
      12. Znowu wybieramy tryb "Smużenie" i ustawiamy tak jak przy poprzednim smużeniu lecz lekko mniejszy rozmiar pędzla
       
       

       
       
      13. I robimy to samo co z tłem, czyli smużymy ale render, tak aby się rozlał z tłem, następnie robimy to samo z warstwą wyżej także ustawiając efekt "Rozjaśnienie liniowe (Dodaj)"
       
       

       
       
      14. Warstwę z renderem na samej górze też smużymy ale lekko, ze zmniejszonym pędzlem i lekko "wtapiamy" render w tło az wyjdzie taki efekt jak na dole
       
       

       
       
      15. Po całym smużeniu, tworzymy nową warstwę i wybieramy znowu pędzel, ustawiając jak na dole. Rozmiar na 150 i pędzel z miękką końcówką oraz ustawiając kolor pędzla na czarny
       
       

       
       
      16. Teraz końcówką pędzla robimy obwódkę wokół sygnatur, aby mieć przyciemnione krawędzie sygantury
       
       
       
       
       
      17. Kiedy juz przyciemnimy, to tworzymy nową warstwę i wybieramy Obraz>>Zastosuj obraz...> I nie zmieniając nic klikamy "OK"
       
       

       
       
      18. Utworzył nam sie stock złączony ze wszystkimi warstwami, teraz wybieramy Obraz>>Dopasowanie>>Mapa gradientu...
       
       

       
       
      19. Otwiera nam się okno z gradientami, wybieramy fioletowo-pomarańczowy (jest on standardowym gradientem) i klikamy "OK" 
       
       

       
       
      20. Następnie musimy wybrać efekt tej warstwy z gradientem, więc wybieramy efekt "Łagodne światło"
       
       

       
       
      21. Kiedy zrobimy efekt, to tworzymy znowu nową warstwę i robimy to samo co z ostatnią, czyli Obraz>>Zastosuj obraz...>>OK 
      Po utworzeniu obrazu, wybieramy Obraz>>Dopasowanie>>Filtr fotograficzny i wybieramy "Filtr zimny (80)" i klikamy OK, a następnie znowu ustawiamy efekt warstwy na "Łagodne światło"
       
       

       
       
       
      21. Kiedy zrobimy efekt, to tworzymy znowu nową warstwę i robimy to samo co z ostatnią, czyli Obraz>>Zastosuj obraz...>>OK 
      Po utworzeniu obrazu, wybieramy Obraz>>Dopasowanie>>Czarno-biały i nic nie zmieniając klikamy OK, a następnie ustawiamy efekt warstwy na "Łagodne światło"
       
       
       

       
       
      22. Kiedy mamy już zrobione te 4 warstwy to trzeba zmienić ich wypełnienie, bo mogą być za ciemne. Polecam zmienić wypełnienie pierwszej warstwy na 25%, a trzy warstwy które są pod nią zmienić na 70% lub według własnych upodobań
       
       

       
       
      23.  To już prawie końcówka sygnatury. Teraz możemy dodać texturę na naszą sygnaturę w tym wypadku ja nakładam taką jak na screenie. (na dole możesz pobrać texturę, której użyłem)
       
       

       
       
      24. Nakładając texturę wybieramy efekt "Rozjaśnienie". I to tyle! Twoja sygnatura gotowa! Teraz możesz dodać na nią swój tekst i tyle
       
       

       
      -----------------------------------------------------------------------------------------------------------------
       
      EFEKT KOŃCOWY:

       
      -----------------------------------------------------------------------------------------------------------------
       
      POBIERZ TEXTURĘ: textura.rar
       
      Poradnik wykonany przez fifi.ART
      ZAKAZ KOPIOWANIA!
       
      -----------------------------------------------------------------------------------------------------------------





    • Przez FRACKOWIAK
      Witam, dzisiaj pokażę Wam jak zrobić proste logo! 
       
      1. Tworzymy plik 450px x 150px z przezroczystym tłem.

       
      2. Dajemy szare tło i tworzymy napis.

       
      3. Wybieramy czcionkę, bawimy się kolorami i typografią.

       
      4. Otwieramy jakąś teksturę. Kopiujemy ją, tworzymy nową warstwę i wklejamy.

       
      5. Klikamy na warstwę z teksturą, następnie klikamy prawym przyciskiem myszy i wybieramy Utwórz maskę przycinającą.

       
      6. Ustawiamy na (nakładka, łagodne światło, ostre światło, rozjaśnianie etc.) ostre światło i dajemy krycie 60%.

       
      7. Dodajemy nową warstwę z maską przycinającą i miękkim pędzlem klikamy na nasze logom aby dać trochę światła. Warstwę ustawiamy na łagodne światło.

       
      8. Dodajemy jakieś nasze motto.

       
      9. Zaznaczamy warstwę z teksturą oraz ze światłem i powielamy je. Dajemy je na samą górę i tworzymy maskę przycinającą.

       
      10. Nasze proste logo jest gotowe!  Myślę, że wam pomogłem.

       
      Czcionka użyta w poradniku to Caviar Dreams.
      by SenseiART dla webmasteruj.pl | Zakaz kopiowania bez zgody autora!
  • Ostatnie tematy

×