Rollover buttons!? Flash, Gif, el. dyligt...

Frågor kring teman (forumets design) för phpBB 2.0.x.

Moderator: Moderatorgrupp

Lazzz
Aktiv medlem
Aktiv medlem
Inlägg: 42
Blev medlem: 2004-04-20 08:25
Svar: 0

Rollover buttons!? Flash, Gif, el. dyligt...

Inlägg av Lazzz »

Kan man ha det på phpBB.
Bäst och fråga innan.

Sitter o pillar mer o mer o sjunker sakta men säkert ner i "träsket". :roll:
Har mest pillat med färgerna o ngr ICONer har man ändrat också.

Här är chaoset än så länge.
http://www.eoguild.se/forum/

Saken är den att jag vill ha så likt en speciell template som vi använder i spelet, samma stil.
Så skulle vara juste om det gick att använda rolloverknappar på;
Bild
Bild
Så jag fick samma stil som jag kommer att ha på sidan;
http://www.eoguild.se

Fixar phpBB det?!
O i så fall vad?!
Är det Flash/Fireworks som gäller...?!
Användarens profilbild
Kail
Administratör
Administratör
Inlägg: 2935
Blev medlem: 2003-06-03 13:53
Svar: 0
Ort: Linköping/Stockholm

Inlägg av Kail »

Helt möjligt:
http://www.jakob-persson.com/styles_dem ... um.php?f=1

Flash är nog en sämre idé. Javascript är det som gäller.
Jakob Persson - Grundare av phpBB Sverige - IT-konsult - http://www.jakob-persson.com
The Complete phpBB Template Design Guide
Lazzz
Aktiv medlem
Aktiv medlem
Inlägg: 42
Blev medlem: 2004-04-20 08:25
Svar: 0

Inlägg av Lazzz »

Ah...
Hmmm...
För kolla runt lite med Java i så fall.
Inte direkt van att använda det.

Är ditt "Demo" av den sidan inte komplett eller är det ngt jag saknar?(Har I.E+6)
För jag såg inga "rollover" effekter på ngn av knapparna när jag kolla runt?
Men strålande skön layout/temp., men misstänker att du hört den ngr ggr. förut! ;)
Användarens profilbild
Kail
Administratör
Administratör
Inlägg: 2935
Blev medlem: 2003-06-03 13:53
Svar: 0
Ort: Linköping/Stockholm

Inlägg av Kail »

Det blev visst fel:
http://www.jakob-persson.com/styles_dem ... ex.php?s=9

Det där temat ska det vara.
Jakob Persson - Grundare av phpBB Sverige - IT-konsult - http://www.jakob-persson.com
The Complete phpBB Template Design Guide
Lazzz
Aktiv medlem
Aktiv medlem
Inlägg: 42
Blev medlem: 2004-04-20 08:25
Svar: 0

Inlägg av Lazzz »

Ah...!
Ja det var lite mer förståligt. :)

Är det ett javascript per knapp då?
I så fall... Kan jag ladda ner den där temp. o låna just den biten av dig?
Användarens profilbild
Kail
Administratör
Administratör
Inlägg: 2935
Blev medlem: 2003-06-03 13:53
Svar: 0
Ort: Linköping/Stockholm

Inlägg av Kail »

Kika på HTML-koden så ser du. Kolla även i cfg-filerna. Det går bra att låna koden om du vill.
Jakob Persson - Grundare av phpBB Sverige - IT-konsult - http://www.jakob-persson.com
The Complete phpBB Template Design Guide
Lazzz
Aktiv medlem
Aktiv medlem
Inlägg: 42
Blev medlem: 2004-04-20 08:25
Svar: 0

Inlägg av Lazzz »

Suttit lite med koden nu och försökt med din kod.
Måste missa ngt visentligt.

För den kan inte hitta bilderna?!
Jag tog helt brutalt och använde copy/paste och gjorde gif bilder med samma namn som dina.

Fokuserade på viewforum_body i första hand för att fixa New Topic knappen.

Gick in i Template/Subsilver/viewforum_body filen.
Letade upp raden där knappen för New Topic är.
<td align="left" valign="middle" width="50"><a href="{U_POST_NEW_TOPIC}"><img src="{POST_IMG}" border="0" alt="{L_POST_NEW_TOPIC}" /></a></td>
Och lånade raden ifrån din SpacePilot3k design.
<td align="left" valign="middle" width="50"><a href="{U_POST_NEW_TOPIC}" onMouseOver="rollover('top_newtopic','{POST_IMG}_on.gif');" onMouseOut="rollover('top_newtopic','{POST_IMG}_off.gif');"><img name="top_newtopic" src="{POST_IMG}_off.gif" border="0" alt="{L_POST_NEW_TOPIC}" /></a></td>
Kopierade den och sen helt enkelt klistrade in den över den gamla original knappkoden utan rollover. Laddade upp bilderna (Med samma namn som dina bilder) och den ändrade viewforum_body filen.
Men inget hände.
Eller ja... Det blev ingen knapp alls utan bara ett rött X.
Den undre new topic knappen pillade jag inte på, men ändrades.
Så img. sök vägen måste vara korrekt efter som den hittade 1 ny knapp?!

Sen kom jag på att du nämnde cgf-filerna.
Gick in och letade överallt där i din SpacePilot3K cgf fil.
Jag hittade;
$images['post_new'] = "$current_template_images/{LANG}/post";
Men ingen kod för de 2 andra bilderna, post_on/post_off

Så din och subsilver verkar vara identiska?!
Vad är det jag missat... Antingen så är det ngt jätteenkelt som jag bara missar, eller så är det ngn text rad i ngn helt annan fil som jag inte vet om.

Har du ngn ide Kail!


Tack föresten så JÄTTEmkt för att jag fick pilla runt med dina kodrader o låna dom.
Kommer fixa till så länk till din hemsida dyker upp nere i textraden...
Så fort jag listar ut hur! :roll:
Lazzz
Aktiv medlem
Aktiv medlem
Inlägg: 42
Blev medlem: 2004-04-20 08:25
Svar: 0

Inlägg av Lazzz »

Testade helt brutalt att copy/paste hela filerna...
Alltså byta ut orginalfilerna mot dina;
viewforum_body (orginal) >> Spacepilot3k
Samma med cgf filerna... ena bilden dök nu öpp... Men bara mouseout bilden.
Får ingen rollover effekt.

Så antar det är ngnannanstans jag missar! :?
Användarens profilbild
Kail
Administratör
Administratör
Inlägg: 2935
Blev medlem: 2003-06-03 13:53
Svar: 0
Ort: Linköping/Stockholm

Inlägg av Kail »

Jag minns inte exakt hur jag gjorde men jag var inne i CFG-filen och mekade en massa. Det hela är egentligen ett fult hack för att det ska fungera som tänkt.
Jakob Persson - Grundare av phpBB Sverige - IT-konsult - http://www.jakob-persson.com
The Complete phpBB Template Design Guide
Lazzz
Aktiv medlem
Aktiv medlem
Inlägg: 42
Blev medlem: 2004-04-20 08:25
Svar: 0

Inlägg av Lazzz »

Jao... misstänker att det BORDE ligga i CFG-filen.
Men undrar om den är komplett i nerladdningsfilen;
define(TEMPLATE_CONFIG, TRUE);

$current_template_images = $current_template_path . "/images";

$images['icon_quote'] = "$current_template_images/{LANG}/icon_quote.gif";
$images['icon_edit'] = "$current_template_images/{LANG}/icon_edit.gif";
$images['icon_search'] = "$current_template_images/{LANG}/icon_search.gif";
$images['icon_profile'] = "$current_template_images/{LANG}/icon_profile.gif";
$images['icon_pm'] = "$current_template_images/{LANG}/icon_pm.gif";
$images['icon_email'] = "$current_template_images/{LANG}/icon_email.gif";
$images['icon_delpost'] = "$current_template_images/icon_delete.gif";
$images['icon_ip'] = "$current_template_images/{LANG}/icon_ip.gif";
$images['icon_www'] = "$current_template_images/{LANG}/icon_www.gif";
$images['icon_icq'] = "$current_template_images/{LANG}/icon_icq_add.gif";
$images['icon_aim'] = "$current_template_images/{LANG}/icon_aim.gif";
$images['icon_yim'] = "$current_template_images/{LANG}/icon_yim.gif";
$images['icon_msnm'] = "$current_template_images/{LANG}/icon_msnm.gif";
$images['icon_minipost'] = "$current_template_images/icon_minipost.gif";
$images['icon_gotopost'] = "$current_template_images/icon_minipost.gif";
$images['icon_minipost_new'] = "$current_template_images/icon_minipost_new.gif";
$images['icon_latest_reply'] = "$current_template_images/icon_latest_reply.gif";
$images['icon_newest_reply'] = "$current_template_images/icon_newest_reply.gif";

$images['forum'] = "$current_template_images/folder_big.gif";
$images['forum_new'] = "$current_template_images/folder_new_big.gif";
$images['forum_locked'] = "$current_template_images/folder_locked_big.gif";

$images['folder'] = "$current_template_images/folder.gif";
$images['folder_new'] = "$current_template_images/folder_new.gif";
$images['folder_hot'] = "$current_template_images/folder_hot.gif";
$images['folder_hot_new'] = "$current_template_images/folder_new_hot.gif";
$images['folder_locked'] = "$current_template_images/folder_lock.gif";
$images['folder_locked_new'] = "$current_template_images/folder_lock_new.gif";
$images['folder_sticky'] = "$current_template_images/folder_sticky.gif";
$images['folder_sticky_new'] = "$current_template_images/folder_sticky_new.gif";
$images['folder_announce'] = "$current_template_images/folder_announce.gif";
$images['folder_announce_new'] = "$current_template_images/folder_announce_new.gif";

$images['post_new'] = "$current_template_images/{LANG}/post";
$images['post_locked'] = "$current_template_images/{LANG}/reply-locked";
$images['reply_new'] = "$current_template_images/{LANG}/reply";
$images['reply_locked'] = "$current_template_images/{LANG}/reply-locked";

$images['pm_inbox'] = "$current_template_images/msg_inbox.gif";
$images['pm_outbox'] = "$current_template_images/msg_outbox.gif";
$images['pm_savebox'] = "$current_template_images/msg_savebox.gif";
$images['pm_sentbox'] = "$current_template_images/msg_sentbox.gif";
$images['pm_readmsg'] = "$current_template_images/folder.gif";
$images['pm_unreadmsg'] = "$current_template_images/folder_new.gif";
$images['pm_replymsg'] = "$current_template_images/{LANG}/reply.gif";
$images['pm_postmsg'] = "$current_template_images/{LANG}/msg_newpost";
$images['pm_quotemsg'] = "$current_template_images/{LANG}/icon_quote.gif";
$images['pm_editmsg'] = "$current_template_images/{LANG}/icon_edit.gif";
$images['pm_new_msg'] = "";
$images['pm_no_new_msg'] = "";

$images['topic_watch'] = "";
$images['topic_un_watch'] = "";
$images['topic_mod_lock'] = "$current_template_images/topic_lock.gif";
$images['topic_mod_unlock'] = "$current_template_images/topic_unlock.gif";
$images['topic_mod_split'] = "$current_template_images/topic_split.gif";
$images['topic_mod_move'] = "$current_template_images/topic_move.gif";
$images['topic_mod_delete'] = "$current_template_images/topic_delete.gif";

$images['voting_graphic'][0] = "$current_template_images/voting_bar.gif";
$images['voting_graphic'][1] = "$current_template_images/voting_bar.gif";
$images['voting_graphic'][2] = "$current_template_images/voting_bar.gif";
$images['voting_graphic'][3] = "$current_template_images/voting_bar.gif";
$images['voting_graphic'][4] = "$current_template_images/voting_bar.gif";
Det är ju speciellt det här avsnittet;
$images['post_new'] = "$current_template_images/{LANG}/post";
$images['post_locked'] = "$current_template_images/{LANG}/reply-locked";
$images['reply_new'] = "$current_template_images/{LANG}/reply";
$images['reply_locked'] = "$current_template_images/{LANG}/reply-locked";
Ser inte ett spår av de bilderna som har _on & _off på slutet i sitt namn?!
Alltså rolloverknapparna! :?

Surt e det.... hehe...
Alla andra bilder finns utan just on/off varianterna.

Får fortsätta pilla runt.

För det är väll bara i antingen CFGn & viewforum_body som påverkar rollover effekten?!
viewforum_body skickar en "signal" till CGFn som talar om vart bilden finns....
Men iofs...
Bilderna står ju inte nämnda I CFG filen, så den borde ju inte hitta ngt?!
Är du säker på att CFGn är den samma på Demo sidan som på Nerladdningsfilen?
Användarens profilbild
Kail
Administratör
Administratör
Inlägg: 2935
Blev medlem: 2003-06-03 13:53
Svar: 0
Ort: Linköping/Stockholm

Inlägg av Kail »

Kod: Markera allt

$images['post_new'] = "$current_template_images/{LANG}/post";
$images['post_locked'] = "$current_template_images/{LANG}/reply-locked";
$images['reply_new'] = "$current_template_images/{LANG}/reply";
$images['reply_locked'] = "$current_template_images/{LANG}/reply-locked";
Som du sa, de saknar ändelser, resten ligger i tpl-filerna:

Kod: Markera allt

<a href="{U_POST_NEW_TOPIC}" onMouseOver="rollover('bottom_newtopic','{POST_IMG}_on.gif');" onMouseOut="rollover('bottom_newtopic','{POST_IMG}_off.gif');"><img name="bottom_newtopic" src="{POST_IMG}_off.gif" border="0" alt="{L_POST_NEW_TOPIC}" align="middle"/></a>&nbsp;&nbsp;&nbsp;<a href="{U_POST_REPLY_TOPIC}" onMouseOver="rollover('bottom_postreply','{REPLY_IMG}_on.gif');" onMouseOut="rollover('bottom_postreply','{REPLY_IMG}_off.gif');"><img name="bottom_postreply" src="{REPLY_IMG}_off.gif" border="0" alt="{L_POST_REPLY_TOPIC}" align="middle" /></a>
Jakob Persson - Grundare av phpBB Sverige - IT-konsult - http://www.jakob-persson.com
The Complete phpBB Template Design Guide
Lazzz
Aktiv medlem
Aktiv medlem
Inlägg: 42
Blev medlem: 2004-04-20 08:25
Svar: 0

Inlägg av Lazzz »

Grnf....
Så det skall inte finns ngn rad som typ;
$images['post_new'] = "$current_template_images/{LANG}/post_on";
$images['post_new'] = "$current_template_images/{LANG}/post_off";
??
Det skall TPL filen kunna fixa själv?
*suck*
Gör knepigt.

Fick ett tips om att göra Fireworks knappar istället.
Har ju iofs inte det, men har ngr kopisar som sitter en hel del med det o flash (http://www.lunafix.com).

Är en fireknapp "tung".
Alltså den där rolloverknappen typ hemsidan är typ 2-3kb.
Hur skulle en fireworks version vara!?
Användarens profilbild
Kail
Administratör
Administratör
Inlägg: 2935
Blev medlem: 2003-06-03 13:53
Svar: 0
Ort: Linköping/Stockholm

Inlägg av Kail »

Förstår du koden jag postade ovan? Det är ett enkelt script. Sätt dig in i det förstår du hur det går till.
Jakob Persson - Grundare av phpBB Sverige - IT-konsult - http://www.jakob-persson.com
The Complete phpBB Template Design Guide
Lazzz
Aktiv medlem
Aktiv medlem
Inlägg: 42
Blev medlem: 2004-04-20 08:25
Svar: 0

Inlägg av Lazzz »

Jao...
Jag förstår principen. Är dock lite osäker på tecknen.
Är som sagt en hängiven DMMX användare. Aldrig lärt mig kod än på annat sätt än ifrån det. Du vet, man skriver o designar. Sen hela tiden tittar på hur koden utvecklas och lär sig utifrån det.
Även ifrån färdiga scripts samma sak, ändra en siffra här o där och ser vad skillnaden blir. Men ibland blir det lite svårt efter som jag inte alltid vet exakt vad vissa saker är tillför. :?

Hoppas du ursäktar min "dumhet"! ;)

Jag är ju van vid DMMX rollover variant;
<td width="13%"><a href="http://www.eoguild.se" target="_self" onMouseOver="MM_swapImage('lenkar','','bild/knappar/Mlenkar2.jpg',1)" onMouseOut="MM_swapImgRestore()"><img src="bild/knappar/Mlenkar1.jpg" name="lenkar" width="100" height="16" border="0" onMouseOver="MM_showHideLayers('lenk','','show')" onMouseOut="MM_showHideLayers('lenk','','hide')"></a></td>
Som ser ut så där.
Den liknar ju din kod, men ändå inte riktigt. (Som sagt... För mig är allt kod, ser ingen skillnad på vad som är java, php, etc.)

För att plocka upp en bild ifrån en folder så är ju det;
'bild/knappar/Mlenkar2.jpg'
Som gäller... I din kod så är det ju;
'{POST_IMG}_off.gif'
, där själva {POST_IMG} är signalen som hämtar ifrån CFG-filen?!
Så i mitt huvud vill jag då skriva (Ja enfaldigt! Men va faen!);
'/forum/templates/subSilver/images/lang_english/post.gif'
, o hoppa över CFGn...
Men funkar ju då inte inte?!

Sen har vi ju då CFG.
Den här raden;
$images['post_new'] = "$current_template_images/{LANG}/post";
$images['post_new'] uppfattar jag som namnet på /post bilden.

Så då tkr så kanske en av mina nya rader borde vara;
$images['post_newon'] = "$current_template_images/{LANG}/post_on";
Men ändå förvirrande, då du inte använder det för det första...
Sen i koden står det src="{POST_IMG}_off.gif.
Men CFGn heter ju 'post_new'.

Jaja...
Jag förstår om du inte orkar förklara.
Är bara lite vetgirig för mitt eget bästa ibland o lite väl enivs! ;)
Användarens profilbild
Kail
Administratör
Administratör
Inlägg: 2935
Blev medlem: 2003-06-03 13:53
Svar: 0
Ort: Linköping/Stockholm

Inlägg av Kail »

Jag använder också DWMX ruskigt mycket men jag började för hand och det har varit en stor tillgång att inte vara beroende av DWMX utan snarare ha det som ett stöd.

Kod: Markera allt

<a href="{U_POST_NEW_TOPIC}" onMouseOver="rollover('bottom_newtopic','{POST_IMG}_on.gif');" onMouseOut="rollover('bottom_newtopic','{POST_IMG}_off.gif');"><img name="bottom_newtopic" src="{POST_IMG}_off.gif" border="0" alt="{L_POST_NEW_TOPIC}" align="middle"/></a>&nbsp;&nbsp;&nbsp;<a href="{U_POST_REPLY_TOPIC}" onMouseOver="rollover('bottom_postreply','{REPLY_IMG}_on.gif');" onMouseOut="rollover('bottom_postreply','{REPLY_IMG}_off.gif');"><img name="bottom_postreply" src="{REPLY_IMG}_off.gif" border="0" alt="{L_POST_REPLY_TOPIC}" align="middle" /></a>
Som du säger så lagras filnamnen i CFG-filen. Varför har jag då valt att använda mig av den? Jo, för att tillåta språkstöd. Vad phpBB:s template parser gör är att den läser i bildvariabelvärdena från CFG-filen, slår samman de med det aktuella språket, detta värde hamnar då i {POST_IMG}.
Säg vi kör svenska:

Kod: Markera allt

$images['post_new'] = "$current_template_images/{LANG}/post";
Tillsammans med lang_swedish och SpacePilot3K ger:
SpacePilot3K/images/lang_swedish/post
I koden som generas står det alltså (kod som phpBB skapat är röd, jag hara bara fyllt i de värden som är relevanta):
<a href="..." onMouseOver="rollover('bottom_newtopic','SpacePilot3K/images/post_on.gif');" onMouseOut="rollover('bottom_newtopic','SpacePilot3K/images/post_off.gif');"><img name="bottom_newtopic" src="SpacePilot3K/images/post_off.gif" border="0" alt="..." align="middle"/></a>alt="..." align="middle" /></a>
Senast redigerad av Kail den 2004-08-05 15:50, redigerad totalt 1 gånger.
Jakob Persson - Grundare av phpBB Sverige - IT-konsult - http://www.jakob-persson.com
The Complete phpBB Template Design Guide
Skriv svar

Vilka är online

Användare som besöker denna kategori: 2 och 0 gäster