Skocz do zawartości

Jak dodać menu z okrągłymi ikonami do headera? MyBB


0ffline
 Udostępnij

Rekomendowane odpowiedzi

  • Ekspert

Musisz edytować te szablony:

  • header
  • header_menu_calendar
  • header_menu_memberlist
  • header_menu_portal
  • header_menu_search

Do header dokładasz dodatkowe menu. Natomiast, żeby było tak jak chcesz, musisz edytować dodatkowo CSSa: #menu > li > a (~67 linijka global.css)

Edytowane przez Salvation
Odnośnik do komentarza
Udostępnij na innych stronach

Szkoda zapychać serwer tymi obrazkami, żeby to chociaż było css-sprites.

Zrób sobie kopię zapasową header i global.css. Zrobiłem wersję z wykorzystaniem FontAwesome.

fragment header do podmiany:

<ul id="menu">
	<li>	
		<a href="http://cs-wariaci.pl/#">
        <i class="fa fa-ban"></i>
        <br>AMXBans
      </a>
    </li>
    <li>
      <a href="http://cs-wariaci.pl/#">
        <i class="fa fa-user-plus"></i>
        <br>Rekrutacja
      </a> 
    </li>
  	<li>
      <a href="http://cs-wariaci.pl/memberlist.php">
        <i class="fa fa-users"></i>
        <br>Użytkownicy
      </a>
  	</li>
	<li>	
		<a href="http://cs-wariaci.pl/index.php">
        <i class="fa fa-home"></i>
        <br>Strona główna
      </a>
  	</li>
</ul>

fragment global.css do podmiany:

#menu {
    padding: 2px 6px;
    list-style-type: none;
    line-height: 20px;
    border-radius: 5px;
    float: left;
    background: rgba(0,0,0,0.35);
}

#menu > li {
    float: right;
    margin-top: 2px;
    margin-right: 5px;
}

#menu > li > a {
    display: inline-block;
    padding: 0px 10px;
    text-decoration: none;
    text-align: center;
    color: #fff;
    font-family: "Roboto Condensed",Arial !important;
    font-weight: bold;
}

#menu > li > a > i {
    border-radius: 50%;
    background: #262626;
    padding: 8px;
    font-size: 40px;
    text-align: center;
    color: rgba(0,0,0,0.6);
    margin-bottom: 5px;
    box-shadow: 2px 2px 2px #000;
    width: 44px;
    transition: ease-in-out 0.5s;
}

#menu > li > a > i:hover {
    background: #9B0000;
    color: rgba(0,0,0,0.8);
}

do #content dopisz:

margin-top: 50px;

podmień wszystko zaczynające się od #menu

(nie wiem dlaczego w szablonie elementy listy muszą być pisane w odwrotnej kolejności )

Bez tytułu.png

Odnośnik do komentarza
Udostępnij na innych stronach

za pomocą pseudoklasy before, aczkolwiek kompletnie nie widzę sensu

html

<div class="ikona1"></div>

css

.ikona1:before {
color: #FF7C00;
content: "\f00c";
font-family: FontAwesome;
text-decoration: none;
}

zawartość "content" to id ikony

https://astronautweb.co/snippet/font-awesome/

tu masz wszystkie id, skopiuj sobie id do content i potem baw się stylizacją

nie ruszaj font-family: FontAwesome;

Odnośnik do komentarza
Udostępnij na innych stronach

Problem wciąż nierozwiązany? Dodaj swoją odpowiedź

Jeśli chcesz dodać odpowiedź, zaloguj się lub zarejestruj nowe konto. Jedynie zarejestrowani użytkownicy mogą komentować zawartość tej strony.

Zarejestruj nowe konto

Załóż nowe konto. To bardzo proste!

Zarejestruj się

Zaloguj się

Posiadasz już konto? Zaloguj się poniżej.

Zaloguj się
 Udostępnij

×