Is it possible to add a fourth tab to a “wonderbanner”? While trying to edit our homepage, we encounter a large item that has 3 clickable tabs. Each tab has some text, a large image and a contact form. I checked and this is an html asset that makes reference to a java script “wonderbanner”. We understand how to make changes to the content on each tab, and it is as simple as adding content to a “banners template” housed in a “banners” folder. The question is, can we add a fourth tab to the wonderbanner/html item on the homepage? How would we go about doing so? The screen shots below should do a much better job of explaining and I will be happy to answer any questions
There are a couple components to the banner. It’s relatively easy to work with if you know CSS.
The piece on the page involves the HTML block you identified and the Auto-List beneath it. The auto-list loads in the page data for the banner pages displayed. Check and make sure the auto-list isn’t limited to 3 items. If it is, increase it to the number you want. This setting is controlled by the Layout configuration for the Page Auto-List widget.
To create a new banner, you just need to create a new page in the banner folder. If you preview the home page after creating the banner page, it should show up in the list. The caveat is the styling of the bottom paging section. For your implementation, the paging labels at the bottom of the banner are set by filling out the simple text widget on the banner page. The css, however, is set to a specific size per item to create the 3 item wide paging section at the bottom that you see. If you add a fourth one, you will need to modify the CSS to resize the paging labels accordingly.
If you open one of the other banner pages, you will see how the image and rich text widgets are populated for the banners. That should help with that piece.
I see, so this is a CSS function. I did reformat the auto list to include 4 instead of 3 items, so all set there. I am also aware of how to build the banners, so no problem there either.
However, I am a little hung up on the CSS. Could you give me an idea of what I might be looking to edit in the css to change the width of the labels? Unfortunately, I don’t really know css. I understand exactly what needs to be done for the desired result, I just don’t know what edits to make to get there. Thank you for the response!
In the banner there should be a section with a class of “paging” or something similar on it. Each of those items inside that area will have a class on them. In that implementation, I think each tab at the bottom is actually an anchor tag with styles on it.
If you have a web developer tool to inspect the elements, I would suggest using that (something like FireBug) to see what the CSS settings are. Really, the only thing you will need to change is the width.
I’ve taken over for Joe and am working with the same “wonderbanner.” We switched out the banner images for new designs but now the banner images are no longer linked to their corresponding pages? Could you explain how to go about linking them?
The banner images, on the slides themselves, should be rich text widgets. Select the image in the rich text widget and click on the Add/Edit Hyperlink button in the rich text widget. On the right of the URL field is the browse button, allowing you to double click through a list of your site folders to select the page you want to link to.
