Webboard

Pełna wersja: Przeniesienie menu między stylami
Aktualnie przeglądasz uproszczoną wersję forum. Kliknij tutaj, by zobaczyć wersję z pełnym formatowaniem.
Stron: 1 2
wersja skryptu MyBB:1.6.14
adres forum:kbhl.cba.pl
na czym polega problem (screen, opis, komunikaty, nazwa stylu/theme/szablonu):
Witam, mamy dwa szablony:
1. 'ripz' https://www.sendspace.com/file/9k4bg1
2. http://mods.mybb.com/view/apart-leaf
Prosiłbym uprzejmie, gdyby ktoś znalazł czas, o skopiowanie właściwego skryptu i odpowiednich elementów graficznych potrzebnych do 'przerzucenia' paska menu [Obrazek: o3PM55s.png] ze stylu nr 1 do stylu nr 2 oraz opisanie pokrótce, co gdzie wrzucić, wkleić, wpisać. Prośba dość nietypowa, ale naprawdę dla mnie ważna, będę bardzo wdzięczny z pomoc :)
Tutaj pomagamy z problemami, a nie jest to problem, tylko prośba.


Wytłumaczę: Kopiujesz HTML odpowiadający za to, wrzucasz do Twojego stylu. Teraz kolej na CSS, szukasz użytych nazw/klas/id w kodzie HTML i je okpiujesz.

Możesz też użyć: http://grafifor.pl/Temat-html5-css3-js-r...pdown-menu
Download z tego linku jest ważny? Gdzie go wrzucić?
W sumie wystarczą Ci tylko kody, ale jeśli chcesz mieć ikonki, to wrzuć na FTP, a potem w kodzie podaj prawidłową ścieżkę.
Te ikonki to Font-Awesome, nie ma ich w paczce do pobrania. Jak zainstalować Font-Awesome dowiesz się tutaj: https://webboard.pl/wiki.php?najatwiejsz...stylu.html
W poradniku autora napisane jest
Cytat:Podmienić hrefy i nazwy lików na te z MyBB
Co to znaczy ?
Podstawowa wiedza na temat HTML się kłania...

http://www.w3schools.com/tags/att_a_href.asp
Kod PHP:
<body&nbsp;class="body">
&
nbsp;&nbsp;&nbsp;&nbsp;<!--&nbsp;Container&nbsp;START&nbsp;-->
&
nbsp;&nbsp;&nbsp;&nbsp;<section&nbsp;class="container">
&
nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<!--&nbsp;Menu&nbsp;START&nbsp;-->
&
nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<nav&nbsp;class="css3-menu"><ul>
&
nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<li&nbsp;class="menu-li"><a href="#home"&nbsp;class="active"><i&nbsp;class="fa&nbsp;fa-home"></i></a></li>
&
nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<li&nbsp;class="hoverli&nbsp;menu-li"><a href="#projekty"><i&nbsp;class="fa&nbsp;fa-briefcase"></i>&nbsp;Projekty&nbsp;<i&nbsp;class="fa&nbsp;fa-angle-down"></i></a>
&
nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<ul&nbsp;class="dropdown">
&
nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<li><a href="#projekt01"><i&nbsp;class="fa&nbsp;fa-heart"></i>&nbsp;Lubię&nbsp;to&nbsp;menu</a>
&
nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<li><a href="#projekt02"><i&nbsp;class="fa&nbsp;fa-folder-open"></i>&nbsp;Projekt&nbsp;Dwa</a>
&
nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<li><a href="#projekt03"><i&nbsp;class="fa&nbsp;fa-flask"></i>&nbsp;Eksperyment</a>
&
nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</ul>
&
nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</li>
&
nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<li&nbsp;class="menu-li"><a href="#uslugi"><i&nbsp;class="fa&nbsp;fa-cogs"></i>&nbsp;Usługi</a></li>
&
nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<li&nbsp;class="menu-li"><a href="#galeria"><i&nbsp;class="fa&nbsp;fa-picture-o"></i>&nbsp;Galeria</a></li>
&
nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<li&nbsp;class="menu-li"><a href="#faq"><i&nbsp;class="fa&nbsp;fa-question-circle"></i>&nbsp;FAQ</a></li>
&
nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<li&nbsp;class="menu-li"><a href="#kontakt"><i&nbsp;class="fa&nbsp;fa-envelope"></i>&nbsp;Kontakt</a></li>
&
nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<li&nbsp;class="float-right"><a href="#right"><i&nbsp;class="fa&nbsp;fa-user"></i>&nbsp;Right</a></li>
&
nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<li&nbsp;class="hoverli&nbsp;resp-menu"><a href="#resp-menu"><i&nbsp;class="fa&nbsp;fa-bars"></i>&nbsp;Menu&nbsp;<i&nbsp;class="fa&nbsp;fa-angle-down"></i></a>
&
nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<ul&nbsp;class="dropdown">
&
nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<li><a href="#home"&nbsp;class="active"><i&nbsp;class="fa&nbsp;fa-home"></i>&nbsp;Home</a></li>
&
nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<li><a href="#projekt01"><i&nbsp;class="fa&nbsp;fa-heart"></i>&nbsp;Lubię&nbsp;to&nbsp;menu</a>
&
nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<li><a href="#projekt02"><i&nbsp;class="fa&nbsp;fa-folder-open"></i>&nbsp;Projekt&nbsp;Dwa</a>
&
nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<li><a href="#projekt03"><i&nbsp;class="fa&nbsp;fa-flask"></i>&nbsp;Eksperyment</a>
&
nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<li><a href="#uslugi"><i&nbsp;class="fa&nbsp;fa-cogs"></i>&nbsp;Usługi</a></li>
&
nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<li><a href="#galeria"><i&nbsp;class="fa&nbsp;fa-picture-o"></i>&nbsp;Galeria</a></li>
&
nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<li><a href="#faq"><i&nbsp;class="fa&nbsp;fa-question-circle"></i>&nbsp;FAQ</a></li>
&
nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<li><a href="#kontakt"><i&nbsp;class="fa&nbsp;fa-envelope"></i>&nbsp;Kontakt</a></li>
&
nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</ul>
&
nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</li>
&
nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</ul></nav>
&
nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<!--&nbsp;Menu&nbsp;END&nbsp;-->
&
nbsp;&nbsp;&nbsp;&nbsp;</section>
&
nbsp;&nbsp;&nbsp;&nbsp;<!--&nbsp;Container&nbsp;END&nbsp;-->
</
body
Możecie podać przykład, jak zamienić ? Przez to idiotyczne nbsp juz sie pogubilem (usunalem tylko nbsp miedzy a i href)
Pierw zgraj kod do notepad++ a dopiero potem na swoje forum. nbsp dodało się automatycznie, a tak nie może być.
I mam nadzieję ostatnie moje pytanie, mianowicie, w którym miejscu wkleić ten kod:
Kod PHP:
body class="body">
    <!-- 
Container START -->
    <
section class="container">
        <!-- 
Menu START -->
        <
nav class="css3-menu"><ul>
            <
li class="menu-li"><a href="#home" class="active"><class="fa fa-home"></i></a></li>
            <
li class="hoverli menu-li"><a href="#projekty"><class="fa fa-briefcase"></iProjekty <class="fa fa-angle-down"></i></a>
                <
ul class="dropdown">
                    <
li><a href="#projekt01"><class="fa fa-heart"></iLubię to menu</a>
                    <
li><a href="#projekt02"><class="fa fa-folder-open"></iProjekt Dwa</a>
                    <
li><a href="#projekt03"><class="fa fa-flask"></iEksperyment</a>
                </
ul>
            </
li>
            <
li class="menu-li"><a href="#uslugi"><class="fa fa-cogs"></iUsługi</a></li>
            <
li class="menu-li"><a href="#galeria"><class="fa fa-picture-o"></iGaleria</a></li>
            <
li class="menu-li"><a href="#faq"><class="fa fa-question-circle"></iFAQ</a></li>
            <
li class="menu-li"><a href="#kontakt"><class="fa fa-envelope"></iKontakt</a></li>
            <
li class="float-right"><a href="#right"><class="fa fa-user"></iRight</a></li>
            <
li class="hoverli resp-menu"><a href="#resp-menu"><class="fa fa-bars"></iMenu <class="fa fa-angle-down"></i></a>
                <
ul class="dropdown">
                    <
li><a href="#home" class="active"><class="fa fa-home"></iHome</a></li>
                    <
li><a href="#projekt01"><class="fa fa-heart"></iLubię to menu</a>
                    <
li><a href="#projekt02"><class="fa fa-folder-open"></iProjekt Dwa</a>
                    <
li><a href="#projekt03"><class="fa fa-flask"></iEksperyment</a>
                    <
li><a href="#uslugi"><class="fa fa-cogs"></iUsługi</a></li>
                    <
li><a href="#galeria"><class="fa fa-picture-o"></iGaleria</a></li>
                    <
li><a href="#faq"><class="fa fa-question-circle"></iFAQ</a></li>
                    <
li><a href="#kontakt"><class="fa fa-envelope"></iKontakt</a></li>
                </
ul>
            </
li>
        </
ul></nav>
        <!-- 
Menu END -->
    </
section>
    <!-- 
Container END -->
</
body
w ten header
Kod PHP:
<div id="container">
 

        <
div id="header">
            <
div id="logo">
                <
div class="wrapper">
                    <
center><a href="{$mybb->settings['bburl']}/index.php"><img src="{$theme['logo']}alt="{$mybb->settings['bbname']}title="{$mybb->settings['bbname']}/></a></center>
                </
div>

            <
div id="panel">
                <
div class="upper"><!-- This div(class="upper"is closed in the header_welcomeblock_member and header_welcomeblock_guest templates -->
                    <
div class="wrapper">
                        <
ul class="menu top_links">
 
                            <
li><a href="{$mybb->settings['bburl']}/search.php" class="search">{$lang->toplinks_search}</a></li>
                            <
li><a href="{$mybb->settings['bburl']}/memberlist.php" class="memberlist">{$lang->toplinks_memberlist}</a></li>
                            <
li><a href="{$mybb->settings['bburl']}/calendar.php" class="calendar">{$lang->toplinks_calendar}</a></li>
                                                         

</
ul>
                        {
$welcomeblock}
            </
div>
        </
div>
        <
div id="content">
            <
div class="wrapper">
                {
$pm_notice}
                {
$bannedwarning}
                {
$bbclosedwarning}
                {
$unreadreports}
                {
$pending_joinrequests}
                <
navigation>
            {
$board_messages}
                <
br /> 
tak, żeby mi to ładnie śmigało :)
Kod PHP:
<nav class="css3-menu"><ul>
            <
li class="menu-li"><a href="#home" class="active"><class="fa fa-home"></i></a></li>
            <
li class="hoverli menu-li"><a href="#projekty"><class="fa fa-briefcase"></iProjekty <class="fa fa-angle-down"></i></a>
                <
ul class="dropdown">
                    <
li><a href="#projekt01"><class="fa fa-heart"></iLubię to menu</a>
                    <
li><a href="#projekt02"><class="fa fa-folder-open"></iProjekt Dwa</a>
                    <
li><a href="#projekt03"><class="fa fa-flask"></iEksperyment</a>
                </
ul>
            </
li>
            <
li class="menu-li"><a href="#uslugi"><class="fa fa-cogs"></iUsługi</a></li>
            <
li class="menu-li"><a href="#galeria"><class="fa fa-picture-o"></iGaleria</a></li>
            <
li class="menu-li"><a href="#faq"><class="fa fa-question-circle"></iFAQ</a></li>
            <
li class="menu-li"><a href="#kontakt"><class="fa fa-envelope"></iKontakt</a></li>
            <
li class="float-right"><a href="#right"><class="fa fa-user"></iRight</a></li>
            <
li class="hoverli resp-menu"><a href="#resp-menu"><class="fa fa-bars"></iMenu <class="fa fa-angle-down"></i></a>
                <
ul class="dropdown">
                    <
li><a href="#home" class="active"><class="fa fa-home"></iHome</a></li>
                    <
li><a href="#projekt01"><class="fa fa-heart"></iLubię to menu</a>
                    <
li><a href="#projekt02"><class="fa fa-folder-open"></iProjekt Dwa</a>
                    <
li><a href="#projekt03"><class="fa fa-flask"></iEksperyment</a>
                    <
li><a href="#uslugi"><class="fa fa-cogs"></iUsługi</a></li>
                    <
li><a href="#galeria"><class="fa fa-picture-o"></iGaleria</a></li>
                    <
li><a href="#faq"><class="fa fa-question-circle"></iFAQ</a></li>
                    <
li><a href="#kontakt"><class="fa fa-envelope"></iKontakt</a></li>
                </
ul>
            </
li>
        </
ul></nav>
        <!-- 
Menu END -->
    </
section
dodaj po <div id="container">
Niestety, wygląd na moim forum różni się od oryginału, zamieszczonego w linku, który podany został na początku (załącznik). Chciałbym prosić o pomoc, na temat tego, jak naprawić ten pasek (przede wszystkim chyba trzeba go zwężyć)
global.css:
Kod PHP:
.css3-menu>ul>li>a:hover, .css3-menu>ul>li>a:active, .css3-menu>ul>li>a.active{
    
background#b71ae4;
    
color#fff;

zamień na:
Kod PHP:
.css3-menu>ul>li>a:hover, .css3-menu>ul>li>a:active, .css3-menu>ul>li>a.active{
    
background#b71ae4;
    
color#fff;
    
displayinline;
    
padding18px;

Wielkie dzięki,
kolejna sprawa- w oryginale po prawej stronie paska jest chyba rozwijana opcja panelu uzytkownika? Jak można dodać ją także do mojego menu?
JS, czyli:
Kod PHP:
<script type="text/javascript">
    $(
document).ready(function () {
        $(
".hoverli").hover(
      function () {
         $(
'.dropdown').fadeIn('medium');
      }, 
      function () {
         $(
'.dropdown').fadeOut('medium');
      }
    );

    });
    </
script
zamieniasz na:
Kod PHP:
<script type="text/javascript">
    $(
document).ready(function () {
        $(
".hoverli").hover(
      function () {
         $(
'.dropdown').fadeIn('medium');
      }, 
      function () {
         $(
'.dropdown').fadeOut('medium');
      }
    );
     $(
".hoverli2").hover(
      function () {
         $(
'.dropdown2').fadeIn('medium');
      }, 
      function () {
         $(
'.dropdown2').fadeOut('medium');
      }
    );
    });
  </
script
w CSS odszukaj:
Kod PHP:
.dropdown{
    
displaynone;
    
positionabsolute;
    
left0;
    
top36px;
    
background#444;
    
font-size14px;
}
.
dropdown>li{
    
displayblock;
    list-
stylenone;
}
.
dropdown>li>a:link, .dropdown>li>a:visited{
    
displayblock;
    
color#EFEFEF;
    
width140px;
    
text-decorationnone;
    
padding3px 15px;
    
border-bottomdashed 1px #676767;
}
.
dropdown>li>a:hover, .dropdown>li>a:active{
    
background#b71ae4;
    
color#fff;
    
border-bottomsolid 1px #b71ae4;

zaraz po tym dodaj:
Kod PHP:
.dropdown2 {
    
displaynone;
    
positionabsolute;
    
left0;
    
top36px;
    
background#444;
    
font-size14px;
}
.
dropdown2>li{
    
displayblock;
    list-
stylenone;
}
.
dropdown2>li>a:link, .dropdown2>li>a:visited{
    
displayblock;
    
color#EFEFEF;
    
width140px;
    
text-decorationnone;
    
padding3px 15px;
    
border-bottomdashed 1px #676767;
}
.
dropdown2>li>a:hover, .dropdown2>li>a:active{
    
background#b71ae4;
    
color#fff;
    
border-bottomsolid 1px #b71ae4;


No i to już część główna została zrobiona, zostało nam jedynie działanie:
Tam, gdzie chcesz, by było to wysuwane menu, czyli masz taki kod:
Kod PHP:
<li class="menu-li"><a href="#faq"><class="fa fa-question-circle"></iFAQ</a></li
po menu-li dopisz (oddzielając spacją) hoverli2
Stron: 1 2