Custom Topbars

The Sample TopBars are generated from this file: ../wp-topbar/lib/samples/sample_topbars.json

To create your own samples, you can first create them as normal TopBars. Then export your existing TopBars as a JSON file and then replace the file above with your file. Make sure to put any images in the ../samples directory. You might have to edit the JSON file to fix any image file locations.

Note that with every upgrade, the sample_topbars.json file will be replaced.

Bob

Thanks Bob, will give it a look and see what I can do.

I’ve coded up a way to have your own custom TopBars added to the Samples tab.

Here is the FAQ entry. This will come out in v. 5.17:

First create all the TopBars you want as custom Samples. Then export the TopBars in the JSON format. Now, create a location on your server to store the files. For example ../wp/wp-content/plugins/wp-topbar-samples. Next rename the export file to custom_topbars.json. Now move that file, plus any images you need into the directory you created. Finally, go to the General Settings Tab and enter the URL for the directory in the "Custom Samples URL" field. Now, the TopBar will first display the Standard samples then the TopBars from your custom_topbars.json file. You can then copy these new TopBars just like the Standard samples.

harley130, try version 5.17. I just pushed it out.

I’ll give it a spin when I return home from Christmas vacation.

In your above post, you say after creating the toolbar (which I would do in Photoshop)to export it in .json format. What program will export in the .json format. I’m not familiar with the format and I don’t see where PS will export in the json format.

So, I understand that you created a background image for a TopBar to be used in by plugin.

To add this background image into the samples, you need to create a TopBar in the plugin — adding your background image to it (using the TopBar Text & Image tab). Adjust your settings to get the TopBar how you want it to look.

Then, you can export all of your Plugins using the Export Tab and selecting the JSON option.

Now, you can upload that JSON file and all images to a directory on your webserver. You’ll need to rename the file per the FAQ.

Finally, go to Global Settings and enter in the URL of the directory that has the JSON file and associated images. That URL goes into the Custom Samples URL field.

Now, you can go to the Samples Tab and your TopBar(s) will show up there.

Does this answer your question?

Bob