Topic: BoardHover Mod

[butchs]

Link to Mod

aka JMod.

Refresh the browser screen after installation.

Clicking underlined text is a thing of the past.  This mod gives you forum navigation mouse over highlights that allows you to select where to go by clicking anywhere in highlighted "hover" area.  Affected areas are forum topics, subjects, child boards, main messages, members list and message boards.  Clicking in the field will take you to the board, first post, first unread post or last post.

Latest version includes a tableless hover linktree hack that allows the user to click anywhere in the linktree box and to navigate the forum.  Hovering the Linktree can be turned off in the "Admin/Modification Settings/BoardHover" panel.  The Linktree on the first page can also be turned off.

Utilizes Janos Horvath's hover emulation java script for Internet Explorer (IE) compatibility.  It is the users responsibility is to check the site for script updates.

Tested with: Firefox, Opera, Internet Explorer and Safari.

Live Demo:  http://www.eastcoastrollingthunder.com/smf/index.php?action=forum

This mod was written for the default theme for SMF versions prior to 2.0 RC 2 and Curve thereafter.  It can be manually installed in other themes.

The following languages are supported in the "Modification Settings":
o - english
o - english-utf8
o - arabic-utf8
o - bulgarian-utf8
o - chinese-simplified-utf8
o - chinese-traditional-utf8
o - croatian-utf8
o - czech-utf8
o - dutch-utf8
o - french-utf8
o - german-utf8
o - greek-utf8
o - hebrew-utf8
o - hungarian-utf8
o - indonesian-utf8
o - italian-utf8
o - japanese-utf8
o - persian-utf8
o - polish-utf8
o - portuguese_brazilian-utf8
o - portuguese_pt-utf8
o - russian-utf8 (thanks Bugo)
o - serbian_latin-utf8
o - spanish_es-utf8
o - spanish_latin-utf8
o - swedish-utf8
o - thai-utf8
o - turkish-utf8
o - ukrainian-utf8
o - vietnamese-utf8

Code: [Select]

$txt['boardhover'] = 'BoardHover';
$txt['linktree_hover'] = 'Adjust the Linktree settings';
$txt['enable_linktree_hover'] = 'Enable navigation tree hover for all users:';
$txt['disable_linktree_first_page'] = 'Remove navigation tree from front page:';
New and or corrected translations are welcome.

You can change the rest colors in either "index.css" or "style.css" by changing the color code and/or the background-color:

.windowbg2
{
   color: #000000;
   background-color: #f0f4f7;
}

Another method would be to use both the color code and add a image that you created.  For example:

background: #AB72AC url(./images/windowbg_hoverHover.jpg); /* purple */

The hover colors in "boardhover???.css" are as follows:
"windowbg2_hover" edits the child boards and forum subjects.
"stickybg2_hover" is for the forum subject stickies.
"lockedbg2_hover" changes forum locked post.
"approvebg2_hover" and "approvetbg2_hover" changes administrator duties.

To change the color of the Linktree text during hover you will need to edit the"boardhover???.css file(s).  Search for "Start of linktree" to find it.  The css file is structured as follows:

.linktree_border? *

• The border is the container for the whole linktree.  This was streamlined for several browsers so the hovers are loosely contained in the border depending on your browser.  The border is numbered from 0-3.

.linktree_b

• This is the place holder that allows two linktree elements to fit into a row.

.linktree_? *

• This is the default linktree item before the mouse is placed over it.  Change the background here to change the linktree colors in rest.  You will notice that there are 7 of these and the colors typically alternate.  The last one is for the moderator.  The second from the last if for either the moderator or is a normal resting element.  The first one is specific for a single hover like the forum name.

.linktree_?_hover:hover, .linktree_?_hoverHover *

• This is the default linktree hover item after the mouse is placed over it.  The numbers match the items at rest.  Change the background here to change the linktree colors in on mouseover.  You will notice that there are 6 of these and the colors typically alternate.  The last one is for the moderator.  The last one is for either the moderator or is a normal resting element.

* NOTE: ? denotes a number that will change.

The elements are 6 deep.  When this number is exceeded the Linktree reverts back to the standard SMF Linktree.

The forum "current" page must be reloaded in the browser after installation.

[perro88]

this is nice thanks.
Do you know what  changes to make on the css file so it aplies a filter(a bit darker for example) and not a color when hovering(so it works ok on background that uses more than one color)?

[S3NTYN3L]

this is nice thanks.
Do you know what  changes to make on the css file so it aplies a filter(a bit darker for example) and not a color when hovering(so it works ok on background that uses more than one color)?

You could just replace the  background: #hex;  property with:

background: url(images/image_name.extension) #hex repeat-x;


You'd need to create a somewhat transparent repeating image/gradient/whatever to be used on mouse-over.

You'd then upload the new image to the images folder...

[butchs]

I would keep the color as you want and make a filter image with PhotoShop or something like that.  The code will look something like:

.??_hover:hover, .??_hoverHover
{
background-color: #color;
background-image: url(./images/filter.jpg);
}

I am not sure the above will work with all browsers though...

I have been making both the color and image the same color but a different color than the non hover element.  Something like this:

background: #color url(./images/filter.jpg); /* comment */

It is a little work but seems to work with all browsers.

There is a nice css tutor here.

[perro88]

I would keep the color as you want and make a filter image with PhotoShop or something like that.  The code will look something like:

.??_hover:hover, .??_hoverHover
{
background-color: #color;
background-image: url(./images/filter.jpg);
}

I am not sure the above will work with all browsers though...

I have been making both the color and image the same color but a different color than the non hover element.  Something like this:

background: #color url(./images/filter.jpg); /* comment */

It is a little work but seems to work with all browsers.

There is a nice css tutor here.

big thanks

[S3NTYN3L]

I would keep the color as you want and make a filter image with PhotoShop or something like that.  The code will look something like:

.??_hover:hover, .??_hoverHover
{
background-color: #color;
background-image: url(./images/filter.jpg);

You don't need both entries in there...

Just use  background: url(images/image_name.extension) #hex repeat-x;

Notice that both the #hex AND image is in there...

[Fallen Angel]

NICE MOD!

BUT how do I get it to work under a other theme than default?

I'm using DilberMC..

I accached the 3 files i need to change in my theme to get it to work? Can any give the codes and where to put it?? I'm a lil bit newbie in this.. Thanx...

[S3NTYN3L]

This mod makes changes to the following files:
index.template.php
MessageIndex.template.php
BoardIndex.template.php
PersonalMessage.template.php
style.css

The above files SHOULD be found in the custom theme's folder.
I say this because some themes are pretty basic and, if they DO NOT have the files mentioned, rely on those contained in the default theme folder. (basically, as I understand it, they call/link to them)...


This mod was written for the default theme but you can edit it for use with any theme you like.
Just follow the instructions below...

First, UNDO any and all changes this mod may have made while trying to install previously...
Download the mod package to your computer to edit...

Open the file entitled "Profile-Info" in your PHP code editor.

On line 12, edit the following to point to your theme:
<require-file name="pseudo-hover.htc" destination="$boarddir/Themes/default" />
Example:
<require-file name="pseudo-hover.htc" destination="$boarddir/Themes/YOUR_THEMES_NAME" />

Do the same for path found on line 18...


Next, open the file entitled "Modification".

On line 24, you'll find:
<file name="$themedir/index.template.php">

Edit it to point to your theme, like so:
<file name="Themes/YOUR_THEMES_NAME/index.template.php">

Do the same for lines 46, 148, 198 & 208...

Line 046: <file name="$themedir/MessageIndex.template.php">
Line 148: <file name="$themedir/BoardIndex.template.php">
Line 198: <file name="$themedir/PersonalMessage.template.php">
Line 208: <file name="$themedir/style.css">

...would become...

Line 046: <file name="Themes/YOUR_THEMES_NAME/MessageIndex.template.php">
Line 148: <file name="Themes/YOUR_THEMES_NAME/BoardIndex.template.php">
Line 198: <file name="Themes/YOUR_THEMES_NAME/PersonalMessage.template.php">
Line 208: <file name="Themes/YOUR_THEMES_NAME/style.css">

Next, you'll need to edit the colors on lines 214, 215, 227, 228, 240 & 241 to MATCH what your theme's stylesheet is using...
(NOTE: you must look at your themes stylesheet to find this data)...

.windowbg
Lines 214 & 215

.windowbg2
Lines 227 & 228

.windowbg3
Lines 240 & 241

Lines 220, 233, 246 & 250 should be set to whichever color you'd like to use for the "hover" color.


Once that's all done, simply zip the package and install as normal...


IF you get errors regarding the changes this mod makes to your stylesheet, edit the modification file as follows...

On line 212, you should see this:

 <search position="

REPLACE IT, AND EVERYTHING AFTER, WITH THIS, (editing the parts in blue to suit your theme):

 <search position="after"><![CDATA[/* The AJAX notifier */
]]></search>
<add><![CDATA[.windowbg_hover:hover,.windowbg_hoverHover
{
   background: #505050;
}

.windowbg2_hover:hover,.windowbg2_hoverHover
{
   background: #505050;
}

.windowbg_hover3:hover,.windowbg3_hoverHover
{
   background: #505050;
}
.mail_hover:hover,.mail_hoverHover
{
   background: #505050;
}
]]></add>   </operation>
</file>

</modification>



If you feel all this is too much for you, kindly attach the files mentioned at the beginning of this post and I'll make the changes for you.
Also tell me what you want the hover color to be. (In HEX format; #xxxxxx)...

[lookang]

Type     Action     Description
1.    Execute Modification    ./Themes/default/index.template.php    Test successful
2.    Execute Modification    ./Themes/default/MessageIndex.template.php    Test failed
3.    Execute Modification    ./Themes/default/BoardIndex.template.php    Test failed
4.    Execute Modification    ./Themes/default/PersonalMessage.template.php    Test successful
5.    Execute Modification    ./Themes/default/style.css    Test successful
6.    Extract File    ./Themes/default/pseudo-hover.htc

help !

[butchs]

If you have version 1.1.4 of SMF then you have a another mod that is interfering with this mod.  For example, a mod like "stickyFirstPost" modifies "MessageIndex.template.php" and works if installed after "BoardHover" mod but not before.

The easy thing would be to find out which mod is interfering and remove it.  Install BoardHover mod and try to reinstall the interfering mod afterwards.  Chances are it will install like  "stickyFirstPost" did.

Or you can try a manual install.

last but not least, if you list the mods you have I can look at them next weekend.  I will not have access to this site until next Saturday.   

[lookang]

View and Remove Installed Packages
   Mod Name    Version    
1.    YouTube BBC Tag (XHTML Compliant)    1.0    [ Uninstall ]
2.    Clipfish BBC Tag (XHTML Compliant)    1.3    [ Uninstall ]
3.    Ebaums World BBCode    1.1    [ Uninstall ]
4.    mp3 Flash Player BBC Tag (XHTML Compliant)    1.0    [ Uninstall ]
5.    Mp3Tube BBCode    1.0    [ Uninstall ]
6.    MySpace BBC Tag    1.0    [ Uninstall ]
7.    Snapshot BBCode    1.0    [ Uninstall ]
8.    Wikipedia BBCode    1.2    [ Uninstall ]
9.    Enhanced Forum Statistics    1.0    [ Uninstall ]
10.    Zodiac_13Moon    2.2    [ Uninstall ]
11.    blinkbbc    1.0    [ Uninstall ]
12.    Link Thumbnail    1.0    [ Uninstall ]
13.    Most Popular Topic Today    1.0    [ Uninstall ]
14.    Buy Me A Beer    1.1    [ Uninstall ]
15.    SMF File Manager    2.0    [ Uninstall ]
16.    Related Topics    1.2.0    [ Uninstall ]
17.    Simple Award System    1.2.1    [ Uninstall ]
18.    SMF Sitemap    1.2.1    [ Uninstall ]
19.    SMF Trader System    1.1    [ Uninstall ]
20.    SMF-WoW-TalentCalc ver. 0.2    0.2    [ Uninstall ]
21.    SMF Shoutbox    1.16    [ Uninstall ]
22.    SMF 1.0.12 / 1.1.4 / 2.0 b1.1 Update    1.0    [ Uninstall ]
23.    DonationCoder.com SMF Search Enhancement Mod    1.1.9    [ Uninstall ]
24.    User Control Panel By Alan S    1.2    [ Uninstall ]
25.    FontandSizeDropdown_1.2    1.2    [ Uninstall ]
26.    Increase/Decrease Postbox Size    1.0    [ Uninstall ]
27.    Display Age and Location next to posts    1.0    [ Uninstall ]
28.    Profile User Action    1.1    [ Uninstall ]
29.    Auto Embed Video Clips    1.3    [ Uninstall ]
30.    SMF Gallery Lite    1.8.1.1    [ Uninstall ]
31.    Digg Topic    2.0    [ Uninstall ]
32.    Downloads System    1.0.2    [ Uninstall ]
33.    GoogleTagged    1.2    [ Uninstall ]
34.    Pretty URLs - Base    0.7    [ Uninstall ]
35.    Social Bookmarks    1.1    [ Uninstall ]
36.    Topic Ratings    1.03    [ Uninstall ]
37.    Attachments Positioning    1.1    [ Uninstall ]
38.    Fix Message Empty Error For Embed Video Mods    1.0    [ Uninstall ]
39.    iframe BBC Tag by Metal13    1.3    [ Uninstall ]
40.    stage6 BBC Tag by Metal13    1.3    [ Uninstall ]
41.    Colorize Boards    2.0    [ Uninstall ]
42.    Ad Managment    2.3    [ Uninstall ]
43.    MCLegendII    1.1    [ Uninstall ]
44.    Previous and Next Links for Page Index    1.0    [ Uninstall ]
45.    Unique Hit Counter    1.0    [ Uninstall ]
46.    Image Thumbnail BBCode    1.0    [ Uninstall ]
47.    rateTopic    1.0    [ Uninstall ]

sorry i have many mod already but i don't see stickyFirstPost yet.

appreciate your offer and effort. THanks!!

[butchs]

I looked at a few of them and was not able to locate the mod.  You will need to find the one that alters the look and/ or positioning of the categories in the default theme.

[weightman]

This package appears to be screwed up judging by the strange results when uploaded to the package parsers (brings up info about other mods- gallery lite and Youtube BBC code, corrupted package errors, stuff in other languages, etc- different every time seemingly.)

[bassbass]

I found that it conflicts with mod "View Only Board"  i couldn't install the "View Only Board" until i uninstalled the Hover mod, can you look into this and see where the conflict is?

Installing this package will perform the following actions:  Type Action Description
1. Execute Code DB.php 
2. Execute Modification ./Sources/BoardIndex.php Test successful
3. Execute Modification ./Sources/MessageIndex.php Test successful
4. Execute Modification ./Sources/ManageBoards.php Test successful
5. Execute Modification ./Sources/Subs-Boards.php Test successful
6. Execute Modification ./Sources/Load.php Test successful
7. Execute Modification ./Sources/Recent.php Test successful
8. Execute Modification ./Sources/ModSettings.php Test successful
9. Execute Modification ./Themes/default/BoardIndex.template.php Test failed
10. Execute Modification ./Themes/default/MessageIndex.template.php Test failed
11. Execute Modification ./Themes/default/Recent.template.php Test successful
12. Execute Modification ./Themes/default/ManageBoards.template.php Test successful
13. Execute Modification ./Themes/default/style.css Test successful
14. Execute Modification ./Themes/default/languages/ManageBoards.english.php Test successful
15. Execute Modification ./Themes/default/languages/Modifications.english.php Test successful

[butchs]

weightman,
I just checked it and the package on this server is not corrupted.

bassbass,
Making this mod to work with every other mod is impossible.  Your best bet is a manual install.

I will do a small part as an example.  In the "BoardIndex.template.php" you may change...

FROM:

            </span></td>
            <td class="windowbg2" valign="middle" width="22%">
               <span class="smalltext">';

            /* The board's and children's 'last_post's have:
            time, timestamp (a number that represents the time.), id (of the post), topic (topic id.),
            link, href, subject, start (where they should go for the first unread post.),
            and member. (which has id, name, link, href, username in it.) */
            if (!empty($board['last_post']['id']))
               echo '
                  <b>', $txt[22], '</b>  ', $txt[525], ' ', $board['last_post']['member']['link'] , '<br />
                  ', $txt['smf88'], ' ', $board['last_post']['link'], '<br />
                  ', $txt[30], ' ', $board['last_post']['time'];
            echo '
               </span>

TO:

            </span></td>';
            /* The board's and children's 'last_post's have:
            time, timestamp (a number that represents the time.), id (of the post), topic (topic id.),
            link, href, subject, start (where they should go for the first unread post.),
            and member. (which has id, name, link, href, username in it.) */

   if (!empty($board['last_post']['id']))
               echo '
               <td class="windowbg2 windowbg2_hover" valign="middle" width="22%" onclick="window.location.href=\'',$board['last_post']['href'],'\'">
<span class="smalltext">

                  <b>', $txt[22], '</b>  ', $txt[525], ' ', ($board['last_post']['protected'] ? '<span class="vob_protected">' . (empty($modSettings['vob_allowMessageIndexView']) ? $txt['vob_protected'] : $board['last_post']['member']['link']) . '</span>' : $board['last_post']['member']['link']) , '<br />
                  ', $txt['smf88'], ' ', ( $board['last_post']['protected'] ? '<span class="vob_protected">' . (empty($modSettings['vob_allowMessageIndexView']) ? $txt['vob_protected'] : $board['last_post']['link']) . '</span>' : $board['last_post']['link'] ), '<br />
                  ', $txt[30], ' ', $board['last_post']['time'];
   else
            echo '
               <td class="windowbg2" valign="middle" width="22%">
               <span class="smalltext">';
            echo '
               </span>

The bold letters are from the "View Only Board" mod...
 

[weightman]

Hmmm, well I need to install the mod manually because of other mods and neither package parser is able to read it properly. Any chance you could post or PM me all the edits I need to make?

Thanks

[butchs]

S3NTYN3L gave it a shot in a post above. 

If you need more assistance there is a nice tutor on reading xml files by BigGuy at:  SMF Helper: Reading a .xml file

NOTES:
The thing with my mod is that I change a bunch of code in order to get the hover to work properly.  It may be easier to start with my mod and then add other mods to it.  If another mod has more changes then of course us it as the base.

Some portions of the added mods may have to be duplicated depending on their behavior since I was forced to use two variations of the same section:  One with the links and one without links.

You will be cool if the mod you are adding does not effect the links.  If it does you may need to add it's code in two places.

Of course, I recommend you do this on a test server and review all the edited mods for accuracy before you download to your main server.  My test server has saved me several times.   

[58tbird]

Just wanted to let you know that I really like this mod and I highly recommend it! Thank you!

[butchs]

Ah shucks, you are just saying that because we are both T-Bird lovers.   

Seriously, thank you. 

[eNOOBz]

Installing this package will perform the following actions:
   Type    Action    Description
1.    Execute Modification    ./Themes/default/index.template.php    Test successful
2.    Execute Modification    ./Themes/default/MessageIndex.template.php    Test failed
3.    Execute Modification    ./Themes/default/BoardIndex.template.php    Test failed
4.    Execute Modification    ./Themes/default/PersonalMessage.template.php    Test successful
5.    Execute Modification    ./Themes/default/style.css    Test successful
6.    Extract File    ./Themes/default/pseudo-hover.htc    

What should I do?.. please help.