Image Rollover

[Becca]

Hello everyone. *Wave* I was wondering if anyone would be interested in helping me to create a template modification that would allow me to create rollovers?

I specifically use the Classic Proboards Menu plugin on most of my themes (I like creating menu buttons, yes, I'm weird), and I used to be able to have a rollover plugin that allowed the user to "highlight" the menu buttons by rolling over the image to another image that I had specified. The plugin worked specifically by having the two words "_on" and "_off" placed at the end of each image so that the plugin would know which image to switch the menu icon to upon rollover. However, since Photobucket went psycho, I now upload all of the menu icons to the theme images tab itself. the problem is that it changes the names I've given the images and so the rollover plugin I used to use no longer works.

What I'm hoping to accomplish is to insert some template changing code that will allow me to add the URLs for the "off" images and upon mouse rollover, change the image to the URLs for the "on" images. I hope that I'm being clear enough, but if not, please feel free to ask me any questions to clarify. For a visual, here is a menu icon I created and beside it is the menu icon I'd like the template mod to replace it with, effectively "highlighting" the menu button chosen:


  


Thank you in advance to anyone willing to help me.

[Retread]

Hey Becca ,

I think there might be a pure CSS solution possible for your rollover exchange using attribute selectors and :hover. We'd need to know more about how the proboards-hosted images are being displayed by the Classic ProBoards Menu plugin. Are they images, or background-images?

I think if they are background-images and the element has a unique title attribute, it would be possible. There would be several lines in your Style Sheet where an element with a specific URL for the background-image title attribute has a different URL defined as the background image on :hover.

You would need one line for each background-image used in the menu. So if you have 15 different buttons, you'll need 15 different lines in the 'exchange' section.

And of course each theme would have different images associated with it. So you'd need create a different exchange section for each of your themes.

[Retread]

Hi Becca

I did some experimentation and came up with a way to do image-swaps on hover and also have the Classic Navigation menu without a plugin.

I made a few modifications to the Forum Wrapper layout template, most notably adding the classes:
nb$[navigation.menu.name] -and- nbutton to the menu items created in the {foreach} loop.

The first one creates a unique class for each item in the Navigation menu, based on the name assigned to it in:
Admin Home> Settings> Forum Settings> Navigation
So if the name was Home the class will be nbHome. Search will be nbSearch, etc.

We can hide the text and apply a unique background-image to the <a> elements in the menu according to the class, then use a different background-image when we hover. Unfortunately we can't force the size to respond to the dimensions of the background-image. We'll need to specify the width. And the width could be different for each image pair.

I could be extremely cumbersome to make all those changes in the css on a Style Sheet, but our old friend the Visual Editor Builder can reduce that to slightly cumbersome.

We'll still need to upload each image through the Visual Editor. We can't just batch load them en-masse. And we can declare the width for the image pair at the same time.

The Visual Editor additions I created reside in a section I named Rollovers. It looks like this:

SPOILER: Click to show

The CSS addition to the Style Sheet looks like this:

SPOILER: Click to show


/**************************************************************************
*                        Navigation Menu Buttons                         *
**************************************************************************/

/* Buttons margins (horizontal) */
@nbutton_horizontal_margin: 1.5px;
.nbutton {margin-left:@nbutton_horizontal_margin; @nbutton_horizontal_margin;}
/*----------------------------------------------------------------*/
/* Active button Opacity */
@nbutton_active_opacity: 50%;
.nbutton {margin-left:@nbutton_horizontal_margin; @nbutton_horizontal_margin;}
/*----------------------------------------------------------------*/
/* Admin Rollover */
@nbAdmin_width: 46px;
@nbAdmin_background_image: url('//storage.proboards.com/7180504/images/HWLqUyKQtDJVsPN0wqbH.png');
@nbAdmin_hover_background_image: url('//storage.proboards.com/7180504/images/unfAFvylhDOgSpGkTTPK.png');
//
a.nbAdmin{
   color:transparent!important;
   font-size:0px!important;
   width:@nbAdmin_width;
   background-image:@nbAdmin_background_image;}
a.nbAdmin.state-active{background-image:@nbAdmin_background_image!important; opacity:@nbutton_active_opacity;}
a.nbAdmin:hover{background-image:@nbAdmin_hover_background_image;}
/*----------------------------------------------------------------*/
/* Bookmarks Rollover */
@nbBookmarks_width: 80px;
@nbBookmarks_background_image: url('//storage.proboards.com/7180504/images/LVEzXrQNKkmjvtCbgSxu.png');
@nbBookmarks_hover_background_image: url('//storage.proboards.com/7180504/images/AYMoCtFfPXvQIsHvKbgj.png');
//
a.nbBookmarks{
   color:transparent!important;
   font-size:0px!important;
   width:@nbBookmarks_width;
   background-image:@nbBookmarks_background_image;}
a.nbBookmarks.state-active{background-image:@nbBookmarks_background_image!important; opacity:@nbutton_active_opacity;}
a.nbBookmarks:hover{background-image:@nbBookmarks_hover_background_image;}
/*----------------------------------------------------------------*/
/* Calendar Rollover */
@nbCalendar_width: 68px;
@nbCalendar_background_image: url('//storage.proboards.com/7180504/images/GACBEIDwblZUpGWPDNHd.png');
@nbCalendar_hover_background_image: url('https://storage.proboards.com/7180504/images/pyckGhaOrZsqaMYGrZvw.png');
//
a.nbCalendar{
   color:transparent!important;
   font-size:0px!important;
   width:@nbCalendar_width;
   background-image:@nbCalendar_background_image;}
a.nbCalendar.state-active{background-image:@nbCalendar_background_image!important; opacity:@nbutton_active_opacity;}
a.nbCalendar:hover{background-image:@nbCalendar_hover_background_image;}
/*----------------------------------------------------------------*/
/* Forum Rollover */
@nbForum_width: 0px;
@nbForum_background_image: url('');
@nbForum_hover_background_image: url('');
a.nbForum{
   color:transparent!important;
   font-size:0px!important;
   width:@nbForum_width;
   background-image:@nbForum_background_image;}
a.nbForum.state-active{background-image:@nbForum_background_image!important; opacity:@nbutton_active_opacity;}
a.nbForum:hover{background-image:@nbForum_hover_background_image;}
/*----------------------------------------------------------------*/
/* Help Rollover */
@nbHelp_width: 36px;
@nbHelp_background_image: url('//storage.proboards.com/7180504/images/mJzLoZCOOEZYeUEjUhha.png');
@nbHelp_hover_background_image: url('//storage.proboards.com/7180504/images/kkWRxEMtWviNsFawMBbO.png');
//
a.nbHelp{
   color:transparent!important;
   font-size:0px!important;
   width:@nbHelp_width;
   background-image:@nbHelp_background_image;}
a.nbHelp.state-active{background-image:@nbHelp_background_image!important; opacity:@nbutton_active_opacity;}
a.nbHelp:hover{background-image:@nbHelp_hover_background_image;}
/*----------------------------------------------------------------*/
/* Home Rollover */
@nbHome_width: 46px;
@nbHome_background_image: url('//storage.proboards.com/7180504/images/HnJxAqBqxvhyAFYPudkn.png');
@nbHome_hover_background_image: url('//storage.proboards.com/7180504/images/MtRrgaUDPOcMnqoIOqml.png');
//
a.nbHome{
   color:transparent!important;
   font-size:0px!important;
   width:@nbHome_width;
   background-image:@nbHome_background_image;}
a.nbHome.state-active{background-image:@nbHome_background_image!important; opacity:@nbutton_active_opacity;}
a.nbHome:hover{background-image:@nbHome_hover_background_image;}
/*----------------------------------------------------------------*/
/* Login Rollover */
@nbLogin_width: 42px;
@nbLogin_background_image: url('//storage.proboards.com/7180504/images/CDrxkZeJrNmSiKIikXty.png');
@nbLogin_hover_background_image: url('https://storage.proboards.com/7180504/images/fUOASlwhzezIDFnbLAGA.png');
//
a.nbLogin{
   color:transparent!important;
   font-size:0px!important;
   width:@nbLogin_width;
   background-image:@nbLogin_background_image;}
a.nbLogin.state-active{background-image:@nbLogin_background_image!important; opacity:@nbutton_active_opacity;}
a.nbLogin:hover{background-image:@nbLogin_hover_background_image;}
/*----------------------------------------------------------------*/
/* Logout Rollover */
@nbLogout_width: 52px;
@nbLogout_background_image: url('//storage.proboards.com/7180504/images/QaloZnQzpCAsMAiSZrkw.png');
@nbLogout_hover_background_image: url('//storage.proboards.com/7180504/images/HVGQbjHPSRZTsvBfELVf.png');
//
a.nbLogout{
   color:transparent!important;
   font-size:0px!important;
   width:@nbLogout_width;
//   height:25px;
   background-image:@nbLogout_background_image;}
a.nbLogout.state-active{background-image:@nbLogout_background_image!important; opacity:@nbutton_active_opacity;}
a.nbLogout:hover{background-image:@nbLogout_hover_background_image;}
/*----------------------------------------------------------------*/
/* Members Rollover */
@nbMembers_width: 69px;
@nbMembers_background_image: url('//storage.proboards.com/7180504/images/NoEFOIRayeWcolDSTkNM.png');
@nbMembers_hover_background_image: url('//storage.proboards.com/7180504/images/JCWdzmQtxUSLtqMuQWPo.png');
//
a.nbMembers{
   color:transparent!important;
   font-size:0px!important;
   width:@nbMembers_width;
   background-image:@nbMembers_background_image;}
a.nbMembers.state-active{background-image:@nbMembers_background_image!important; opacity:@nbutton_active_opacity;}
a.nbMembers:hover{background-image:@nbMembers_hover_background_image;}
/*----------------------------------------------------------------*/
/* Messages Rollover */
@nbMessages_width: 74px;
@nbMessages_background_image: url('//storage.proboards.com/7180504/images/SSihhqayBMlibWKKmZuD.png');
@nbMessages_hover_background_image: url('//storage.proboards.com/7180504/images/CTIieshkiVTGuOXlYGXk.png');
//
a.nbMessages{
   color:transparent!important;
   font-size:0px!important;
   width:@nbMessages_width;
   background-image:@nbMessages_background_image;}
a.nbMessages.state-active{background-image:@nbMessages_background_image!important; opacity:@nbutton_active_opacity;}
a.nbMessages:hover{background-image:@nbMessages_hover_background_image;}
/*----------------------------------------------------------------*/
/* Portal Rollover */
@nbPortal_width: 0px;
@nbPortal_background_image: url('');
@nbPortal_hover_background_image: url('');
//
a.nbPortal{
   color:transparent!important;
   font-size:0px!important;
   width:@nbPortal_width;
   background-image:@nbPortal_background_image;}
a.nbPortal.state-active{background-image:@nbPortal_background_image!important; opacity:@nbutton_active_opacity;}
a.nbPortal:hover{background-image:@nbPortal_hover_background_image;}
/*----------------------------------------------------------------*/
/* Participated Rollover */
@nbParticipated_width: 0px;
@nbParticipated_background_image: url('');
@nbParticipated_hover_background_image: url('');
//
a.nbParticipated{
   color:transparent!important;
   font-size:0px!important;
   width:@nbParticipated_width;
   background-image:@nbParticipated_background_image;}
a.nbParticipated.state-active{background-image:@nbParticipated_background_image!important; opacity:@nbutton_active_opacity;}
a.nbParticipated:hover{background-image:@nbParticipated_hover_background_image;}
/*----------------------------------------------------------------*/
/* Profile Rollover */
@nbProfile_width: 46px;
@nbProfile_background_image: url('//storage.proboards.com/7180504/images/gITvCnIQBdquILEqSdbc.png');
@nbProfile_hover_background_image: url('https://storage.proboards.com/7180504/images/AeWTDhcQn0YlmJmuikqI.png');
//
a.nbProfile{
   color:transparent!important;
   font-size:0px!important;
   width:@nbProfile_width;
   background-image:@nbProfile_background_image;}
a.nbProfile.state-active{background-image:@nbProfile_background_image!important; opacity:@nbutton_active_opacity;}
a.nbProfile:hover{background-image:@nbProfile_hover_background_image;}
/*----------------------------------------------------------------*/
/* Register Rollover */
@nbRegister_width: 60px;
@nbRegister_background_image: url('//storage.proboards.com/7180504/images/EGSRJcuMsNgZMAKfeaey.png');
@nbRegister_hover_background_image: url('https://storage.proboards.com/7180504/images/oMnyyxcWqLhUpfQUkfJC.png');
//
a.nbRegister{
   color:transparent!important;
   font-size:0px!important;
   width:@nbRegister_width;
   background-image:@nbRegister_background_image;}
a.nbRegister.state-active{background-image:@nbRegister_background_image!important; opacity:@nbutton_active_opacity;}
a.nbRegister:hover{background-image:@nbRegister_hover_background_image;}
/*----------------------------------------------------------------*/
/* Search Rollover */
@nbSearch_width: 54px;
@nbSearch_background_image: url('//storage.proboards.com/7180504/images/vmHumrCT0lIfAtxTzlkx.png');
@nbSearch_hover_background_image: url('https://storage.proboards.com/7180504/images/IPiWSxbC0OznaXMLxVms.png');
//
a.nbSearch{
   color:transparent!important;
   font-size:0px!important;
   width:@nbSearch_width;
   background-image:@nbSearch_background_image;}
a.nbSearch.state-active{background-image:@nbSearch_background_image!important; opacity:@nbutton_active_opacity;}
a.nbSearch:hover{background-image:@nbSearch_hover_background_image;}
/*----------------------------------------------------------------*/
/* Spare001 Rollover */
@nbSpare001_width: 0px;
@nbSpare001_background_image: url('');
@nbSpare001_hover_background_image: url('');
//
a.nbSpare001{
   color:transparent!important;
   font-size:0px!important;
   width:@nbSpare001_width;
   background-image:@nbSpare001_background_image;}
a.nbSpare001.state-active{background-image:@nbSpare001_background_image!important; opacity:@nbutton_active_opacity;}
a.nbSpare001:hover{background-image:@nbSpare001_hover_background_image;}
/*----------------------------------------------------------------*/
/* Spare002 Rollover */
@nbSpare002_width: 0px;
@nbSpare002_background_image: url('');
@nbSpare002_hover_background_image: url('');
//
a.nbSpare002{
   color:transparent!important;
   font-size:0px!important;
   width:@nbSpare002_width;
   background-image:@nbSpare002_background_image;}
a.nbSpare002.state-active{background-image:@nbSpare002_background_image!important; opacity:@nbutton_active_opacity;}
a.nbSpare002:hover{background-image:@nbSpare002_hover_background_image;}
/*----------------------------------------------------------------*/
/* Spare003 Rollover */
@nbSpare003_width: 0px;
@nbSpare003_background_image: url('');
@nbSpare003_hover_background_image: url('');
//
a.nbSpare003{
   color:transparent!important;
   font-size:0px!important;
   width:@nbSpare003_width;
   background-image:@nbSpare003_background_image;}
a.nbSpare003.state-active{background-image:@nbSpare003_background_image!important; opacity:@nbutton_active_opacity;}
a.nbSpare003:hover{background-image:@nbSpare003_hover_background_image;}
/*----------------------------------------------------------------*/

I poached some menu buttons from a couple of your Gel-O themes for testing purposes. Take a look at this and let me know if we're headed down the right path: imageswap.boards.net/

[Becca]

Retread, I replied to your PM, so I'll wait for you to answer me there before I go into much here, lol. Coding pretty much overwhelms me, it really is a form of Greek that I can't seem to get my mind to understand. I do not know how the Classic Proboards Menu plugin displays the menu buttons. All I know is that I put the URLs for the buttons into the fields of the plugin and it inserts them for me, hahaha! Once you let me know how to send you the .pbp for the Rollover plugin that Pebbles did, I'll get it sent over to you. Thank you so much for offering to help me on this, it's one of the features of the menu buttons that I really, really miss.

P.S. I went to look at the board where you put the Gel-O buttons and yeah, that is what I'm hoping for. It will display the "off" buttons all the time, but then when you roll the mouse over them, it will change to the "on" button.

[Retread]

Oct 28, 2020 12:33:44 GMT -8 Becca said:

P.S. I went to look at the board where you put the Gel-O buttons and yeah, that is what I'm hoping for. It will display the "off" buttons all the time, but then when you roll the mouse over them, it will change to the "on" button.

Okay, I'm working out a strategy where you would be independent from plugins and your themes will work straight out of the box.

The rollover images strategy I used had the images displayed as background-images for the buttons. But that requires declaring the width.

I'm currently working out the last of the details on a strategy where the images are displayed in the foreground. That means you would just upload each image via the Visual Editor but you won't need to declare the width. That means no typing, just clicking.

How much will you love me if I can make that happen?

[Becca]

Well....I already love you, but if you can make that happen....well.........I'm really going to love love love you.

[Retread]

* Braces for incoming hugs and kisses *

My attempt at using foreground images an eliminating the need for declaring width was successful! When uploading the images, just click the icon in the visual editor and a dialog with your computer will appear. Double-click the icon for the image file in the folder in your computer and the image will upload to the theme. Repeat the process for each image. Then save the theme.

Here's the current status:

I created an experimental version of your Frosted theme. It doesn't require the Classic Proboards Menu plugin or the Easy Image Roll-Overs plugin. It does require the Head Base Side Images (for now). I'll work on figuring out all the tasks HSB does, and build them into the theme.

Meanwhile, here's how it looks:
imageswap2.boards.net

I emailed you the .pbt file and you can toy with that, upload different buttons, etc. Eventually I'll make a 'core' upon which you can create new themes.

Here's how the Nav Bar Buttons section of the Visual Editor looks:

SPOILER: Click to show

res.cloudinary.com/gnuts2/image/upload/v1603990675/support/FrostedExpVE.png

Here's the css related to it:

SPOILER: Click to show

/**************************************************************************
*                        Navigation Menu Buttons                         *
**************************************************************************/
/* Nav Menu buttons horizontal alignment */
@nmenu_alignment: center;
#navigation-menu{text-align:@nmenu_alignment;}
/*----------------------------------------------------------------*/
/* Buttons margins (horizontal) */
@nbutton_horizontal_margin: 1.5px;
.nbutton {margin-left:@nbutton_horizontal_margin; @nbutton_horizontal_margin;}
/*----------------------------------------------------------------*/
/* Active button Opacity */
@nbutton_active_opacity: 50%;
.nbutton {margin-left:@nbutton_horizontal_margin; @nbutton_horizontal_margin;}
/*----------------------------------------------------------------*/
/* Admin Rollover */
@nbAdmin_image: url('//storage.proboards.com/7181092/images/otcFXrvDNllmGJQfWrDh.png');
@nbAdmin_hover_image: url('//storage.proboards.com/7181092/images/QHrmGyPAjqdzFFRDervY.png');
//
a.nbAdmin{
   color:transparent!important;
   font-size:0px!important;
   height:0px!important;
}
a.nbAdmin::after{content: @nbAdmin_hover_image; position:fixed; left:-1000px;}
a.nbAdmin::before{content: @nbAdmin_image;}
a.nbAdmin.state-active::before {content:@nbAdmin_image; opacity:@nbutton_active_opacity;}
a.nbAdmin:hover::before {content:@nbAdmin_hover_image;}
/*----------------------------------------------------------------*/
/* Bookmarks Rollover */
@nbBookmarks_image: url('//storage.proboards.com/7181092/images/ukYrBtRMRpdFOvJRjMnZ.png');
@nbBookmarks_hover_image: url('//storage.proboards.com/7181092/images/Y0IliqTGvyexJAmbgJVZ.png');
//
a.nbBookmarks{
   color:transparent!important;
   font-size:0px!important;
   height:0px!important;
}
a.nbBookmarks::after{content: @nbBookmarks_hover_image; position:fixed; left:-1000px;}
a.nbBookmarks::before{content: @nbBookmarks_image;}
a.nbBookmarks.state-active::before {content:@nbBookmarks_image; opacity:@nbutton_active_opacity;}
a.nbBookmarks:hover::before {content:@nbBookmarks_hover_image;}
/*----------------------------------------------------------------*/
/* Calendar Rollover */
@nbCalendar_image: url('//storage.proboards.com/7181092/images/uSIniyAgVHrmerT0DlUz.png');
@nbCalendar_hover_image: url('//storage.proboards.com/7181092/images/wrjdgLXaFJtAYxikLLfW.png');
//
a.nbCalendar{
   color:transparent!important;
   font-size:0px!important;
   height:0px!important;
}
a.nbCalendar::after{content: @nbCalendar_hover_image; position:fixed; left:-1000px;}
a.nbCalendar::before{content: @nbCalendar_image;}
a.nbCalendar.state-active::before {content:@nbCalendar_image; opacity:@nbutton_active_opacity;}
a.nbCalendar:hover::before {content:@nbCalendar_hover_image;}
/*----------------------------------------------------------------*/
/* Chat Rollover */
@nbChat_image: none;
@nbChat_hover_image: none;
//
a.nbChat{
   color:transparent!important;
   font-size:0px!important;
   height:0px!important;
}
a.nbChat::after{content: @nbChat_hover_image; position:fixed; left:-1000px;}
a.nbChat::before{content: @nbChat_image;}
a.nbChat.state-active::before {content:@nbChat_image; opacity:@nbutton_active_opacity;}
a.nbChat:hover::before {content:@nbChat_hover_image;}
/*----------------------------------------------------------------*/
/* Forum Rollover */
@nbForum_image: none;
@nbForum_hover_image: none;
//
a.nbForum{
   color:transparent!important;
   font-size:0px!important;
   height:0px!important;
}
a.nbForum::after{content: @nbForum_hover_image; position:fixed; left:-1000px;}
a.nbForum::before{content: @nbForum_image;}
a.nbForum.state-active::before {content:@nbForum_image; opacity:@nbutton_active_opacity;}
a.nbForum:hover::before {content:@nbForum_hover_image;}
/*----------------------------------------------------------------*/
/* Help Rollover */
@nbHelp_image: url('//storage.proboards.com/7181092/images/YToKGNhQEbACJWDMtHdh.png');
@nbHelp_hover_image: url('//storage.proboards.com/7181092/images/VIFGPVDzJrIantdegQGF.png');
//
a.nbHelp{
   color:transparent!important;
   font-size:0px!important;
   height:0px!important;
}
a.nbHelp::after{content: @nbHelp_hover_image; position:fixed; left:-1000px;}
a.nbHelp::before{content: @nbHelp_image;}
a.nbHelp.state-active::before {content:@nbHelp_image; opacity:@nbutton_active_opacity;}
a.nbHelp:hover::before {content:@nbHelp_hover_image;}
/*----------------------------------------------------------------*/
/* Home Rollover */
@nbHome_image: url('//storage.proboards.com/7181092/images/cXYxmgVAUjcMFPznMHYf.png');
@nbHome_hover_image: url('//storage.proboards.com/7181092/images/QKgeBlBJMUFYvErZqedb.png');
//
a.nbHome{
   color:transparent!important;
   font-size:0px!important;
   height:0px!important;
}
a.nbHome::after{content: @nbHome_hover_image; position:fixed; left:-1000px;}
a.nbHome::before{content: @nbHome_image;}
a.nbHome.state-active::before {content:@nbHome_image; opacity:@nbutton_active_opacity;}
a.nbHome:hover::before {content:@nbHome_hover_image;}
/*----------------------------------------------------------------*/
/* Login Rollover */
@nbLogin_image: url('//storage.proboards.com/7181092/images/CZgclZuOzehkotFrEZqP.png');
@nbLogin_hover_image: url('//storage.proboards.com/7181092/images/cHwvIfjhATyEIdSIOknK.png');
//
a.nbLogin{
   color:transparent!important;
   font-size:0px!important;
   height:0px!important;
}
a.nbLogin::after{content: @nbLogin_hover_image; position:fixed; left:-1000px;}
a.nbLogin::before{content: @nbLogin_image;}
a.nbLogin.state-active::before {content:@nbLogin_image; opacity:@nbutton_active_opacity;}
a.nbLogin:hover::before {content:@nbLogin_hover_image;}
/*----------------------------------------------------------------*/
/* Logout Rollover */
@nbLogout_image: url('//storage.proboards.com/7181092/images/ucRxrKqcNVAGQc0nsyCY.png');
@nbLogout_hover_image: url('//storage.proboards.com/7181092/images/epcySncrKDFFCOvWfDPx.png');
//
a.nbLogout{
   color:transparent!important;
   font-size:0px!important;
   height:0px!important;
}
a.nbLogout::after{content: @nbLogout_hover_image; position:fixed; left:-1000px;}
a.nbLogout::before{content: @nbLogout_image;}
a.nbLogout.state-active::before {content:@nbLogout_image; opacity:@nbutton_active_opacity;}
a.nbLogout:hover::before {content:@nbLogout_hover_image;}
/*----------------------------------------------------------------*/
/* Members Rollover */
@nbMembers_image: url('//storage.proboards.com/7181092/images/GXztslNInICvRjhRsojW.png');
@nbMembers_hover_image: url('//storage.proboards.com/7181092/images/sOTttmduPHuLYUkRXHAp.png');
//
a.nbMembers{
   color:transparent!important;
   font-size:0px!important;
   height:0px!important;
}
a.nbMembers::after{content: @nbMembers_hover_image; position:fixed; left:-1000px;}
a.nbMembers::before{content: @nbMembers_image;}
a.nbMembers.state-active::before {content:@nbMembers_image; opacity:@nbutton_active_opacity;}
a.nbMembers:hover::before {content:@nbMembers_hover_image;}
/*----------------------------------------------------------------*/
/* Messages Rollover */
@nbMessages_image: url('//storage.proboards.com/7181092/images/OfupTSAWvBdlmxJovi0k.png');
@nbMessages_hover_image: url('//storage.proboards.com/7181092/images/KybPSkAKdpIlvTFf0ca0.png');
//
a.nbMessages{
   color:transparent!important;
   font-size:0px!important;
   height:0px!important;
}
a.nbMessages::after{content: @nbMessages_hover_image; position:fixed; left:-1000px;}
a.nbMessages::before{content: @nbMessages_image;}
a.nbMessages.state-active::before {content:@nbMessages_image; opacity:@nbutton_active_opacity;}
a.nbMessages:hover::before {content:@nbMessages_hover_image;}
/*----------------------------------------------------------------*/
/* Portal Rollover */
@nbPortal_image: none;
@nbPortal_hover_image: none;
//
a.nbPortal{
   color:transparent!important;
   font-size:0px!important;
   height:0px!important;
}
a.nbPortal::after{content: @nbPortal_hover_image; position:fixed; left:-1000px;}
a.nbPortal::before{content: @nbPortal_image;}
a.nbPortal.state-active::before {content:@nbPortal_image; opacity:@nbutton_active_opacity;}
a.nbPortal:hover::before {content:@nbPortal_hover_image;}
/*----------------------------------------------------------------*/
/* Participated Rollover */
@nbParticipated_image: none;
@nbParticipated_hover_image: none;
//
a.nbParticipated{
   color:transparent!important;
   font-size:0px!important;
   height:0px!important;
}
a.nbParticipated::after{content: @nbParticipated_hover_image; position:fixed; left:-1000px;}
a.nbParticipated::before{content: @nbParticipated_image;}
a.nbParticipated.state-active::before {content:@nbParticipated_image; opacity:@nbutton_active_opacity;}
a.nbParticipated:hover::before {content:@nbParticipated_hover_image;}
/*----------------------------------------------------------------*/
/* Profile Rollover */
@nbProfile_image: url('//storage.proboards.com/7181092/images/VrtAQfGWKaRHcfvFSgtV.png');
@nbProfile_hover_image: url('//storage.proboards.com/7181092/images/gUXIgbmUcEjxJb0XXKOp.png');
//
a.nbProfile{
   color:transparent!important;
   font-size:0px!important;
   height:0px!important;
}
a.nbProfile::after{content: @nbProfile_hover_image; position:fixed; left:-1000px;}
a.nbProfile::before{content: @nbProfile_image;}
a.nbProfile.state-active::before {content:@nbProfile_image; opacity:@nbutton_active_opacity;}
a.nbProfile:hover::before {content:@nbProfile_hover_image;}
/*----------------------------------------------------------------*/
/* Register Rollover */
@nbRegister_image: url('//storage.proboards.com/7181092/images/FNRiAON0CAjoiTt0LSdu.png');
@nbRegister_hover_image: url('//storage.proboards.com/7181092/images/csmvKjVbrROA0FtHSiPm.png');
//
a.nbRegister{
   color:transparent!important;
   font-size:0px!important;
   height:0px!important;
}
a.nbRegister::after{content: @nbRegister_hover_image; position:fixed; left:-1000px;}
a.nbRegister::before{content: @nbRegister_image;}
a.nbRegister.state-active::before {content:@nbRegister_image; opacity:@nbutton_active_opacity;}
a.nbRegister:hover::before {content:@nbRegister_hover_image;}
/*----------------------------------------------------------------*/
/* Search Rollover */
@nbSearch_image: url('//storage.proboards.com/7181092/images/fMOhAyVsjbJVETwRwAdj.png');
@nbSearch_hover_image: url('//storage.proboards.com/7181092/images/AoPxvFXpKNEXKumMLHfS.png');
//
a.nbSearch{
   color:transparent!important;
   font-size:0px!important;
   height:0px!important;
}
a.nbSearch::after{content: @nbSearch_hover_image; position:fixed; left:-1000px;}
a.nbSearch::before{content: @nbSearch_image;}
a.nbSearch.state-active::before {content:@nbSearch_image; opacity:@nbutton_active_opacity;}
a.nbSearch:hover::before {content:@nbSearch_hover_image;}
/*----------------------------------------------------------------*/

It was a tricky business to prevent the buttons from 'dancing' when first hovered. Because the hover images aren't cached, the element would collapse while the browser rendered the new image. I cheated and pre-rendered them off-screen so the browser would have them immediately available in cache.

---

---

Moving forward, we need a strategic plan for less common names one might choose to use in the Navigation Menu. It would be cumbersome for you to make and upload buttons for all likely candidates. It would also be difficult to use the Visual Editor Builder to create a new cell each time a less common name is used.

I think maybe we could have two sections to upload images. The first would have the images you will always supply with your themes. The second would have all the less common names covered like 'Portal', 'Chat', 'Rules', and whatever else we can think of. Those cells would be available for a forum owner to upload a custom button or two you would create for them on-request.

---

Once we get all the details worked out and (I write the CSS and build a VE section to replace the HSB plugin), I'll create a 'Core' you can use to update your themes. It would be a matter of copy/paste of the Style Sheet from your old theme into a copy of the 'Core' which has all the Visual Editor pre-built and the Forum Wrapper layout template with the modifications.

Then you'll simply copy/paste the CSS for the Nav Bar Buttons section / HSB section at the end of the Style Sheet.

[Becca]

Retread











....ad infinitum.




You are absolutely amazing. I haven't had a chance to play with it fully yet, but I put it up over at UD's test forum and everything looks great so far. I have to run for now, but I should be back on later this evening. I will have more time to mess around with it and try out the button settings. I'll put it up over at A Walk In The Park and give it a test run. Seriously, though, I'm gonna have to have your babies or something, hahahaha! Thank you so much for putting your time and effort into doing this, it means the world to me.