vBulletin Cyborg Style 3.5.x Button "Portal & Galerie" einfügen

bluebyte · *Last edited by bluebyte : 16.02.2006 at 01:50. Reason: Bug*

Ergebnis

Ich erlaube mir einfach dieses kleine Tutorial, zur Entlastung des vbdesigns Teams.

Einfügen eines zusätzlichen Button/s in das "Header" Template und die entsprechenden Additionen des "Zusätzliche CSS-Definitionen"

Foren Software: vBulletin 3.5.3
Portal Software: vBPortal 3.0 oder vBadvanced CMPS
Forum Style: cyborg-dark-vbulletin-style

Szenario:

Einfügen von Buttons in das "Header" Navigation Menu, hier "Portal und Gallery"

Grundsätzlich gilt zumindenst bei die Cyborg's, das man paarweisse, links und Rechts Buttons einfügt, sonst verschiebt sich die ganze Navigator Slice.

Step 1: wir benötigen das Button Portal und Gallery (im Anhang)

Im Anhang sind zwei jpg Files die die Funktion des "hover Effekt" erfüllen werden.

Normal: c_portal.jpg
Hover: ch_portal.jpg
Normal: c_gallery.jpg
Hover: ch_gallery.jpg

Bitte laden sie in das root (kein forums oder portal/images/) Verzeichnis:

/designs/cyborg-dark

Eueren Webserver.

Step 2:

1. In vBulletin AdminCp einlogen.
2. Styles & Templates
3. Styles verwalten
4. Auswahl von cyborg-dark / Alle Style-Einstellungen / Los

Ganz oben: Globale Templates / header

Am besten alles markieren und in einen Editor einfügen.

Für Gallery:

Suche nach:

Code:

<div class="c_search"><div id="navbar_search"><a class="c_search" href="search.php?$session[sessionurl]" accesskey="4" title="$vbphrase[search]"><span>$vbphrase[search]</span></a><script type="text/javascript"> vbmenu_register("navbar_search", true); </script></div></div>

Füge danach:

Code:

 <!-- Start Button * Gallery * -->
<div class="c_gallery"><a class="c_gallery" href="/gallery/index.php$session[sessionurl]" accesskey="5" title="$vbphrase[gallery]"><span>$vbphrase[gallery]</span></a></div>
    <!-- End Button * Gallery * -->

Für Portal

Suche nach:

Code:

<div class="c_calendar"><a class="c_calendar" href="calendar.php?$session[sessionurl]" title="$vbphrase[calendar]"><span>$vbphrase[calendar]</span></a></div>

Füge danach:

Code:

<!-- Start Button * Portal * -->
<div class="c_portal"><a class="c_portal" href="/$session[sessionurl]" accesskey="5" title="$vbphrase[portal]"><span>$vbphrase[portal]</span></a></div>
<!-- End Button * Portal * -->

Zurück in den "header" einfügen.

Step 3:

Scrolle herunter bis "Zusätzliche CSS-Definitionen"

Am besten alles Markieren und in einen Editor einfügen.

Für Portal und Gallery

suche nach:

Code:

.c_member{ background:url(/designs/cyborg-dark/c_09.jpg);float:left;display:block; width:87px; height:33px; }
.c_member a:hover { background:url(/designs/cyborg-dark/ch_09.jpg); }

Füge danach:

Code:

/** Start Header & Navigation Button * Portal */
.c_portal{ background:url(/designs/cyborg-dark/c_portal.jpg);float:left;display:block; width:86px; height:33px; }
.c_portal a:hover{ background:url(/designs/cyborg-dark/ch_portal.jpg); }
/** End Header & Navigation Button * Portal */

/** Start Header & Navigation Button * Gallery */
.c_gallery{ background:url(/designs/cyborg-dark/c_gallery.jpg);float:right;display:block; width:86px; height:33px; }
.c_gallery a:hover{ background:url(/designs/cyborg-dark/ch_gallery.jpg); }
/** End Header & Navigation Button * Gallery */

Style Speichern, ergebins bewundern !!! (oder BlueByte schimpfen)

Gruß,
BlueByte

is zwar riesig nett von dir hier ein Tutorial zu schreiben aber christian schrieb dir bereits eine Antwort darauf

Quote:

Originally Posted by bluebyte


	Style Speichern, ergebins bewundern !!! (oder BlueByte schimpfen) Gruß, BlueByte

das 2. trifft es schon eher

ich kann dir auch sagen warum:

1. werden sich die Käufer dieses Styles arg wundern warum plötzlich ihre ganze Navileiste verschoben ist denn grundsätzlich gilt bei allen Cyborg Styles (ob nun Einbau im vb oder wbb ist da völig gleich) das man niemals einen Button zusätzlich alleine einfügen soll da es dann zu der oft angesprochenen Verschiebung der Navileiste kommt, also wenn dann bitte immer jeweils pro Seite die gleiche Anzahl Buttons (gleicher Größe) einfügen!!
2. sollte auch überlegt werden wo der Button im Headertemplate eingebaut wird

am besten auf der linken seite vor dem Button Kalender und rechts nach dem Button *Suche* sonst siehst es als Gast net so gut aus (ist aber ansichtssache)

in dem Sinne thx für deinen Posting, aber ausser dem Cyborg Dark haben wir noch eine weitere große Auswahl an Styles für die dann auch noch ein Tutorial geschrieben werden möchte

lach
mfg rene'

bluebyte

Quote:

Originally Posted by Rene


	is zwar riesig nett von dir hier ein Tutorial zu schreiben aber christian schrieb dir bereits eine Antwort darauf das 2. trifft es schon eher ich kann dir auch sagen warum: 1. werden sich die Käufer dieses Styles arg wundern warum plötzlich ihre ganze Navileiste verschoben ist denn grundsätzlich gilt bei allen Cyborg Styles (ob nun Einbau im vb oder wbb ist da völig gleich) das man niemals einen Button zusätzlich alleine einfügen soll da es dann zu der oft angesprochenen Verschiebung der Navileiste kommt, also wenn dann bitte immer jeweils pro Seite die gleiche Anzahl Buttons (gleicher Größe) einfügen!! 2. sollte auch überlegt werden wo der Button im Headertemplate eingebaut wird am besten auf der linken seite vor dem Button Kalender und rechts nach dem Button Suche sonst siehst es als Gast net so gut aus (ist aber ansichtssache) in dem Sinne thx für deinen Posting, aber ausser dem Cyborg Dark haben wir noch eine weitere große Auswahl an Styles für die dann auch noch ein Tutorial geschrieben werden möchte lach mfg rene'

das 2. trifft nicht mehr zu, dafür kamm gleich von dir das tipp "float:right". Das habe ich übersehen.

am sonsten ich studiere diese neue style nur seit einen tag dafür bitte ich um Mildernde Umstände.

Quote:


	in dem Sinne thx für deinen Posting, aber ausser dem Cyborg Dark haben wir noch eine weitere große Auswahl an Styles für die dann auch noch ein Tutorial geschrieben werden möchte lach mfg rene'

nun, für vBulletin 3.5.x und die Cyborg Styles bezüglich dieser Thema hoffentlich habe ich Dir ein wenig Zeit erspart.

Gruß,
BlueByte

WeserInfo

Könnt Ihr mir sagen wo in etwa auf der rechten Seite der Button plaziert wird ? Ich habe jetzt schon rumexperimentiert,, aber niente.

Quote:

Originally Posted by Heldenverband


	Könnt Ihr mir sagen wo in etwa auf der rechten Seite der Button plaziert wird ? Ich habe jetzt schon rumexperimentiert,, aber niente.

Ich versteh jetzt deine Frage nicht, der wird doch immer dort plaziert wo du ihn im Headertemplate einbaust

mfg rene'

WeserInfo

Wenn ich es so mache wie der OBEN genannte Vorschlag landen ja beide Buttons auf der LINKEN seite. Einer muss aber nach rechts. Und da finde ich im HEADER ebent nicht den passenden Platz.

Quote:

Originally Posted by Heldenverband


	Wenn ich es so mache wie der OBEN genannte Vorschlag landen ja beide Buttons auf der LINKEN seite. Einer muss aber nach rechts. Und da finde ich im HEADER ebent nicht den passenden Platz.

Die zusätzlichen Buttons werden dann über die Zusätzlichen CSS einstellungen im ACP --> Style über

Code:

float:right;
float:left;

ausgerichtet, das siehst du wenn du dir die schon bereits eingebauten orginalbuttons in der css anschaust..mfg rene'

WeserInfo

Quote:

Originally Posted by Rene


	Die zusätzlichen Buttons werden dann über die Zusätzlichen CSS einstellungen im ACP --> Style über Code: float:right; float:left; ausgerichtet, das siehst du wenn du dir die schon bereits eingebauten orginalbuttons in der css anschaust..mfg rene'

Vielen dank

Ich habe jetzt zwar noch über EINEM von den beiden Button nen Text ( in diesem Fall arcade ) und weiß gar net woher aber den bekomme ich noch weg

Quote:

Originally Posted by Heldenverband


	Vielen dank Ich habe jetzt zwar noch über EINEM von den beiden Button nen Text ( in diesem Fall arcade ) und weiß gar net woher aber den bekomme ich noch weg

Unterhalb dieser Buttons in den Zusätzlichen css eintragungen gibts da noch die

Code:

.c_user_cp span, .c_register span, .c_member span, .c_calendar span, .c_faq span, .c_search span, .c_new_posts span, .c_menu span, .c_daily_posts span, .c_log_out span, .c_register_right span{display:none;}

und dort mußt du auch die extra Buttons mit einfügen(die css classes findest du im header.tpl. )
mfg rene'

WeserInfo

Quote:

Originally Posted by Rene

Unterhalb dieser Buttons in den Zusätzlichen css eintragungen gibts da noch die

Code:

.c_user_cp span, .c_register span, .c_member span, .c_calendar span, .c_faq span, .c_search span, .c_new_posts span, .c_menu span, .c_daily_posts span, .c_log_out span, .c_register_right span{display:none;}

und dort mußt du auch die extra Buttons mit einfügen(die css classes findest du im header.tpl. )
mfg rene'

Danke dir,

die Buttons liegen jetzt an der korrekten Stelle OHNE das ich die Button hier

Code:

.c_user_cp span, .c_register span, .c_member span, .c_calendar span, .c_faq span, .c_search span, .c_new_posts span, .c_menu span, .c_daily_posts span, .c_log_out span, .c_register_right span{display:none;}

mit eingefügt habe. Denn wenn ich die dort einfüge dann erscheinen die Buttons nicht. Ohne Eintrag erscheinen sie.

Nachtfalke

Also ich hab das Problem mit dem Text über den Buttons auch. Folgendes habe ich eingefügt:
Im header template:

Code:

<!-- impressum -->
 <div class="c_impressum"><a class="c_impressum" href="faq.php?$session[sessionurl]" title="Impressum"><span>Impressum</span></a></div>
<!-- /impressum -->
<!-- forenindex -->
 <div class="c_forenindex"><a class="c_forenindex" href="boardindex.php?$session[sessionurl]" title="Foren"><span>Foren</span></a></div>
<!-- /forenindex -->

Zusätzliches css:

Code:

.c_impressum{ background:url(/designs/cyborg-dark/button_impressum.jpg);float:left;display:block; width:87px; height:33px; }
.c_impressum a:hover { background:url(/designs/cyborg-dark/button_impressum_hover.jpg); }
.c_forenindex{ background:url(/designs/cyborg-dark/button_forum.jpg);float:right;display:block; width:87px; height:33px; }
.c_forenindex a:hover { background:url(/designs/cyborg-dark/button_forum_hover.jpg); }

Die Buttons werden auch ganz prima angezeigt, da ich ja zwei davon eingefügt habe, ist auch nix verschoben. Hab ich was übersehen? Es stehen leider immer noch die Texte über den Buttons ...

Nachtfalke

Mann, manchmal ist man wirklich nur blöd ... Hab's hinbekommen. Die span kiste wars.

HansMuenchen

Hallo,

habe grade versucht mal einen Portal Button einzubauen (jedoch WMP Style).
Hänge leider an der Stelle wo ich im Header was suchen soll (im Editor).
Finde jedoch die Stelle leider nicht wo ich das einfügen kann mit den Buttons.

Hier mal der Header vom WMP Style.

Code:

<!-- logo -->
<a name="top"></a>
<if condition="$ad_location['ad_header_logo']">$ad_location[ad_header_logo]<else /></if>
<div id="head_t_bg">
      <div id="head_t_left">
      <div id="head_t_right">
            <ul class="list_m">
        <if condition="$show['member']">
            <li class="button_usercp"><a class="button_usercp" href="usercp.php$session[sessionurl_q]" title="$vbphrase[user_cp]"><span>$vbphrase[user_cp]</span></a></li>
        </if>
        <if condition="$show['registerbutton']">
            <li class="button_register"><a class="button_register" href="register.php$session[sessionurl_q]" rel="nofollow" title="$vbphrase[register]"><span>$vbphrase[register]</span></a></li>
        </if>
        <li class="button_help"><a class="button_help" href="faq.php$session[sessionurl_q]" accesskey="5" title="$vbphrase[faq]"><span>$vbphrase[faq]</span></a></li>
        <if condition="$show['communitylink'] AND $show['popups']">
            <li class="comm"><a id="community" href="$show[nojs_link]#community" rel="nofollow" accesskey="6"><span>$vbphrase[community]</span></a> <script type="text/javascript"> vbmenu_register("community", true); </script></li>
        <else />
            <if condition="$vboptions['enablememberlist']">
                <li class="button_memberlist"><a class="button_memberlist" href="memberlist.php$session[sessionurl_q]" title="$vbphrase[members_list]"><span>$vbphrase[members_list]</span></a></li>
            </if>
        </if>
        <li class="button_calender"><a class="button_calender" href="calendar.php$session[sessionurl_q]" title="$vbphrase[calendar]"><span>$vbphrase[calendar]</span></a></li>
                
            <if condition="$show['searchbuttons']">
                <if condition="$show['member']">
                <li class="button_getnew"><a class="button_getnew" href="search.php?$session[sessionurl]do=getnew" accesskey="2" title="$vbphrase[new_posts_nav]"><span>$vbphrase[new_posts_nav]</span></a></li>
                <else />
                <li class="button_getdayli"><a class="button_getdayli" href="search.php?$session[sessionurl]do=getdaily" accesskey="2" title="$vbphrase[todays_posts]"><span>$vbphrase[todays_posts]</span></a></li>
                </if>
            <if condition="$show['member']">
                <li class="button_menu"><span id="usercptools"><a href="$show[nojs_link]#usercptools" title="$vbphrase[quick_links]"><span class="bs">$vbphrase[quick_links]</span></a></span> <script type="text/javascript"> vbmenu_register("usercptools", true); </script></li>        
            </if>
                <li  class="button_search"><span id="navbar_search"><a class="button_search" href="search.php$session[sessionurl_q]" accesskey="4" rel="nofollow" title="$vbphrase[search]"><span class="bs">$vbphrase[search]</span></a></span> <if condition="$show['quicksearch']"><script type="text/javascript"> vbmenu_register("navbar_search", true); </script></if> </li>
            </if>
        <if condition="$show['member']">
            <li class="button_logof"><a class="button_logof" href="login.php?$session[sessionurl]do=logout&amp;logouthash=$bbuserinfo[logouthash]" onclick="return log_out('$vbphrase[sure_you_want_to_log_out]')" title="$vbphrase[log_out]"><span>$vbphrase[log_out]</span></a></li>
        </if>
            </ul>

      </div>
      </div>
</div>

<div id="head_b_bg">
      <div id="head_b_left">
      <div id="head_b_right">
            <a href="$vboptions[forumhome].php$session[sessionurl_q]"><img src="/designs/wmp_style/sp.gif" alt="$vboptions[bbtitle]" width="200" height="120" border="0" /></a>
      </div>
      </div>
</div>

<!-- /logo -->
<div class="bo_left_bg">
<div class="bo_right_bg">
            <div class="pages">
            <div class="pagest">
<!-- content table -->
$spacer_open

$_phpinclude_output

$ad_location[ad_header_end]

Kann mir jemand sagen wo ich da das mit dem Button einfügen kann?

Danke schon mal.

Grüße aus Offenburg
Hans

*Christian*

Direkt nach:

Code:

            <ul class="list_m">