ilch Forum » Ilch Clan 1.1 » Design und Templates » CSS einbinden mit JKHub Bar

Geschlossen
  1. #1
    User Pic
    Draakoor Mitglied
    Registriert seit
    26.07.2016
    Beiträge
    16
    Beitragswertungen
    1 Beitragspunkte
    Hallo Leute,

    ich möchte gerne die JKHub Bar in eine Box einbinden, leider muss ich davor einen Code in die Styles.css schreiben, aber ich weis nicht wo oder in welche bei Ilch.

    Könnte da jemand helfen?

    Anleitung für die JKAHub-Bar: Klick mich

    MFG

    Draakoor


    verwendete ilch Version: 1.1 P

    betroffene Homepage: thegermanfortress.de/
    0 Mitglieder finden den Beitrag gut.
  2. #2
    User Pic
    Mairu Coder
    Registriert seit
    16.06.2006
    Beiträge
    15.253
    Beitragswertungen
    366 Beitragspunkte
    Letztendlich ist egal, in welche CSS Datei du es einfügst, du könntest auch eine Neue dafür erstellen.

    Am Ende muss diese im Designs eingebunden werden, dazu gibt es mehrere Wege.

    Die sinnvollste ist wohl, es in deiner Box einzubinden, dann ist es an der Stelle, womit es zusammenhängt.

    Dazu in der deiner Box, folgenden Code verwenden.

    $ILCH_HEADER_ADDITIONS .= '<link rel="stylesheet" type="text/css" href="pfad/zur/datei.css">'


    Falls du keine neue Datei erstelle willst, kannst du es "einfach" in die include/designs/PA-Designs-RoundCorner/css/master.css des Designs einfügen.


    Zuletzt modifiziert von Mairu am 26.07.2016 - 06:38:05
    Und auch immer mal ein Blick auf die FAQ werfen. | Mairus Ilchseite
    0 Mitglieder finden den Beitrag gut.
  3. #3
    User Pic
    Draakoor Mitglied
    Registriert seit
    26.07.2016
    Beiträge
    16
    Beitragswertungen
    1 Beitragspunkte
    Hab ich gemacht jetzt sieht das aber so aus:


    Ich hab folgendes eingetragen:
    $ILCH_HEADER_ADDITIONS .= '<link rel="stylesheet" type="text/css" href="http://thegermanfortress.de/include/designs/PA-Designs-RoundCorner/css/jk.css">'
    <body onload="init_bar()">
    <script async src="http://assets.jkhub.org/bar/jkhub_bar.js"></script>
    </body>
    0 Mitglieder finden den Beitrag gut.
  4. #4
    User Pic
    Mairu Coder
    Registriert seit
    16.06.2006
    Beiträge
    15.253
    Beitragswertungen
    366 Beitragspunkte
    Hätte vielleicht gleich den Link aufrufen sollen.

    Da steht doch eigentlich überhaupt nur was von CSS und JS, dafür musst du doch eigentlich keine Box erstellen!?

    Das kannst du eigentlich direkt in der genannten index.htm vom Design einfügen.

    Dort gibt es sowohl den <body> als auch den </body> Tag, wo du die Verändungen durchführen kannst.
    Und auch immer mal ein Blick auf die FAQ werfen. | Mairus Ilchseite
    0 Mitglieder finden den Beitrag gut.
  5. #5
    User Pic
    Draakoor Mitglied
    Registriert seit
    26.07.2016
    Beiträge
    16
    Beitragswertungen
    1 Beitragspunkte
    Wenn ich das in den Body der index.htm packe wird die Leiste garnicht angezeigt. Muss ich vielleicht dann die CSS-Datei wo anders reinpacken?
    0 Mitglieder finden den Beitrag gut.
  6. #6
    User Pic
    Mairu Coder
    Registriert seit
    16.06.2006
    Beiträge
    15.253
    Beitragswertungen
    366 Beitragspunkte
    Nein, die muss da auch mit rein, in den Bereich zwischen <head> und </head>.

    Und du hast auch das <body> durch <body onload="init_bar()"> ersetzt?

    Wenn das nicht geht ggf. stattdessen am Ende der vor </body>

    <script async src="http://assets.jkhub.org/bar/jkhub_bar.js"></script>
    <script>init_bar();</script>


    einfügen.
    Und auch immer mal ein Blick auf die FAQ werfen. | Mairus Ilchseite
    0 Mitglieder finden den Beitrag gut.
  7. #7
    User Pic
    Draakoor Mitglied
    Registriert seit
    26.07.2016
    Beiträge
    16
    Beitragswertungen
    1 Beitragspunkte
    Ich habs jetzt zum laufen bekommen aber, man sieht das die CSS-Datei geladen wird, der Text wird nicht unsichtbar und die Leiste verschwindet beim neuladen der Seite bzw wechslen ins Forum etc.
    0 Mitglieder finden den Beitrag gut.
  8. #8
    User Pic
    Mairu Coder
    Registriert seit
    16.06.2006
    Beiträge
    15.253
    Beitragswertungen
    366 Beitragspunkte
    Eigentlich dachte ich, dass es nicht so schwer ist, das umzusetzen.

    Hier mal, wie es richtig ist. Hab die angepassten Zeilen mal markiert.

    Alternativ zu Zeile 87 könnte oder müsste in Zeile 35
    <body onload="init_bar()">
    stehen.

    Hoffe, du hast die Anleitung der Seite nun verstanden, da steht ja direkt da, suche nach XXX und ersetze durch YYY und nicht nicht füge YYY irgendwo ein zwinker

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-loose.dtd">
    
    <html>
    <head>
    	<title>{TITLE}</title>
    	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    	<link rel="stylesheet" type="text/css" href="include/designs/PA-Designs-RoundCorner/css/master.css">
    	<link rel="stylesheet" type="text/css" href="include/designs/PA-Designs-RoundCorner/css/jk.css">
        <script type="text/javascript" src="include/includes/slider/js/jquery-1.9.1.min.js"></script>
    	<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.min.js"></script>
        <script type="text/javascript" src="include/designs/PA-Designs-RoundCorner/js/jquery.reveal.js"></script>
    	<script type="text/javascript" src="include/includes/slider/js/jssor.core.js"></script>
    	<script type="text/javascript" src="include/includes/slider/js/jssor.utils.js"></script>
    	<script type="text/javascript" src="include/includes/slider/js/jssor.slider.js"></script>
        <script type="text/javascript" src="include/designs/PA-Designs-RoundCorner/js/switchbox.js"></script>
    <link rel="stylesheet" href="include/includes/slider/js/slider.css" type="text/css" />
    <!-- Images Uploader -->
    <link href="include/admin/weplay/css/style.css" rel="stylesheet" />
    <!-- Images Uploader -->
    
    <script type="text/javascript" src="include/includes/js/jquery.js"></script>
    <script type="text/javascript" src="include/includes/js/messenger.js"></script>
    
    <link rel="SHORTCUT ICON" href="include/images/favicon/tgf.ico">
    <link type="text/css" rel="stylesheet" media="all" href="include/includes/css/messenger/chat.css" />
    <link type="text/css" rel="stylesheet" media="all" href="include/includes/css/messenger/screen.css" />
    
    <!--[if lte IE 7]>
    <link type="text/css" rel="stylesheet" media="all" href="include/includes/css/messenger/screen_ie.css" />
    <![endif]-->
    
    
    </head>
    <body>
    
    <div id="fb-root"></div>
    <script>(function(d, s, id) {
      var js, fjs = d.getElementsByTagName(s)[0];
      if (d.getElementById(id)) return;
      js = d.createElement(s); js.id = id;
      js.src = "//connect.facebook.net/de_DE/sdk.js#xfbml=1&version=v2.7";
      fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));</script>
    <div id="wraphead">
     <div id="headerbg"></div>
    </div>
    <div id="wrap">
     <div id="head"></div>
     <div id="headm">{_boxes_rc-dropdown}</div>
     <div id="lastbox">
      <div id="slider">{_boxes_pinturaslider_1.0}</div>
      <div id="rc-sbox">{_boxes_rc-sbox}</div>
      <div id="rc-sbox-button">
       <div id="rc-sbox-lfb"><a class="switchb" href="javascript:void(0);" onClick="togglesboxswitch(1);"><img src="include/designs/PA-Designs-RoundCorner/img/lfbutton.png" onmouseover="this.src='include/designs/PA-Designs-RoundCorner/img/lfbuttonh.png'" onmouseout="this.src='include/designs/PA-Designs-RoundCorner/img/lfbutton.png'" border="0"></a></div>
       <div id="rc-sbox-lnb"><a class="switchb" href="javascript:void(0);" onClick="togglesboxswitch(2);"><img src="include/designs/PA-Designs-RoundCorner/img/lnbutton.png" onmouseover="this.src='include/designs/PA-Designs-RoundCorner/img/lnbuttonh.png'" onmouseout="this.src='include/designs/PA-Designs-RoundCorner/img/lnbutton.png'" border="0"></a></div>
     </div>
     </div>
     <div id="content">
      <div id="con">
       <div id="boxm">
        {_list_menunr1@
         <div id="boxhead"><span id="menuhead">%1</span></div>
         <div id="boxmid">%2</div>
         <div id="boxfoot"></div>
        }
       </div>
       <div id="con-inhalt"><div style="width:100%;">{EXPLODE}</div></div>
      </div>
     </div>
     <div id="footer">
      <div id="footleft">{_boxes_rc-fleft}</div>
      <div id="footmid">
       <div id="f1">{_boxes_pa_weplaybox}</div>
       <div id="f2">&copy; Copyright by: <a href="http://www.pintura-arts.de">Pintura-Arts</a> | Design & Code by: <a href="http://pintura-arts.de/index.php?teams">LastChaos</a> | 
            Script by: <a href="http://www.ilch.de">Ilch</a></div>
      </div>
      <div id="footright">{_boxes_rc-fright}</div>
     </div>
    </div>
    <div id="rc-quick">{_boxes_rc-quick}</div>
     {_if_{SESSION_AUTHRIGHT}<='-1'}<div style=" position:fixed; right:0; top:129px; height: 55px"><a class="box" href="index.php?user-3"><img height="55" width="57" src="include/designs/PA-Designs-RoundCorner/img/quick/logout.png" onmouseover="this.src='include/designs/PA-Designs-RoundCorner/img/quick/logouth.png'" onmouseout="this.src='include/designs/PA-Designs-RoundCorner/img/quick/logout.png'" alt="Anmelden" border="0"></a></div>{/_endif}
     <div id="myModal" class="reveal-modal">{_boxes_rc-login}<a class="close-reveal-modal">&#215;</a></div>
     <div id="myModalts" class="reveal-modalts">{_boxes_rc-teamspeak}<a class="close-reveal-modal">&#215;</a></div>
    
    <script async src="http://assets.jkhub.org/bar/jkhub_bar.js"></script>
    <script>init_bar();</script>
    </body>
    </html>
    
    
    
             <!--
    					{_list_DDDmenupoint@
    					  <strong><big>&middot;</big></strong>
                <a %1 class="box" href="%2">%3</a>
                <br />
    					}
              //-->
              
              <!-- beispiel:
                [null, '%3', '%2', '%1', null|],|,
              -->
              <!--           anfang        +     link                |ende |teilende|teilee  -->
              <!-- horizontaler menupunkt -->
              {_list_hmenupoint@<li><a target="%1" class="box" href="%2">%3</a>|</li>|<br />|</ul></li>}
              <!-- horizontaler menupunkt anfang -->
              {_list_hmenubegi@<ul>}
              <!-- horizontaler menupunkt ende -->
              {_list_hmenuende@</ul>}
              
              <!-- vertikaler menupunkt -->
              {_list_vmenupoint@<li><a target="%1" class="box" href="%2">%3</a>|</li>|<br /><ul>|</ul></li>}
              <!-- vertikaler menupunkt anfang -->
              {_list_vmenubegi@<ul>}
              <!-- vertikaler menupunkt ende -->
              {_list_vmenuende@</ul>}
    Und auch immer mal ein Blick auf die FAQ werfen. | Mairus Ilchseite
    0 Mitglieder finden den Beitrag gut.
  9. #9
    User Pic
    Draakoor Mitglied
    Registriert seit
    26.07.2016
    Beiträge
    16
    Beitragswertungen
    1 Beitragspunkte
    1:1 von dir übernommen und es geht immer noch nicht >.<
    0 Mitglieder finden den Beitrag gut.
  10. #10
    User Pic
    Mairu Coder
    Registriert seit
    16.06.2006
    Beiträge
    15.253
    Beitragswertungen
    366 Beitragspunkte
    Hast du auch die Alternative getestet?

    Ansonsten lösch mal das async aus Zeile 86. Dann sollte es gehen.
    Und auch immer mal ein Blick auf die FAQ werfen. | Mairus Ilchseite
    1 Mitglieder finden den Beitrag gut.
  11. #11
    User Pic
    Draakoor Mitglied
    Registriert seit
    26.07.2016
    Beiträge
    16
    Beitragswertungen
    1 Beitragspunkte
    Danke geht jetzt.

    PS: Wäre noch toll wenn du dir das anschauen könntest.

    MFG

    Draakoor
    0 Mitglieder finden den Beitrag gut.
Geschlossen

Zurück zu Design und Templates

Optionen: Bei einer Antwort zu diesem Thema eine eMail erhalten