Customizing SMF > Modifications and Packages
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: ---$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:';
--- End code ---
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 :P 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:
--- Quote from: perro88 on January 28, 2008, 06:18:17 PM ---this is nice :P 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)?
--- End quote ---
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:
--- Quote from: butchs on January 28, 2008, 10:17:09 PM ---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.
--- End quote ---
big thanks
Navigation
[0] Message Index
[#] Next page
Go to full version