Join Now

Click here to join our
growing community:

JOIN LOGIN



Forum

New Topic
My Topics
Search


Comments

Changing Cart Colors
September 28
Onboarding Sequence
September 23
Social Module
September 23
Getting Class Setup
September 22
Question box on posts
September 17




Copyright © 2020
Terms of Use
Privacy Policy
BoltWire

Pages with different banners

Posted 11/28/20 by Kasey Norton

How do I create different headers for different pages? I want to keep the same layout/skin for each page but I want to design header graphics unique to many of the individual pages in my main links.


Comments



Posted by Dan Vis on 08/21/20
No problem. :)
Posted by Kasey Norton on 08/20/20
That worked! Thank you so much!
Posted by Dan Vis on 08/20/20
No problem Kasey. Here's what you did. You changed "banner" to the mission graphic, rather than saving it to page "mission.banner". Remember, banner shows on any page without a more local zone page. So if you only want the banner on mission pages, you don't put it on banner, you put it on mission.banner.

And if you only want it on dog pages, you put it on animals.dogs.banner. That will show up on animals.dogs page, animals.dogs.chihuahua page and so on. Unless of course there is a animals.dogs.chihuahua.banner page. Get it?

I copied banner to mission.banner and then used the undo action to restore the original banner page and I think everything is working again. You'll get this! :)
Posted by Kasey Norton on 08/20/20
I think I should clarify since I have a habit of not clearly saying what I'm attempting to say. :) My goal is to have the Home page have the original banner and the other tabs would each have their own banner.
Posted by Kasey Norton on 08/20/20
Dan I forgot to tag you! And also wanted to reiterate how grateful I am for all your help!
Posted by Kasey Norton on 08/20/20
Didn't confuse me at all! And thank you! It worked great for the blog page but when I went in and updated the mission page it changed all the others, as well. So the blog banner is showing correctly and the mission banner actually is, too, but then the other links all show the same as the mission page.
Posted by Dan Vis on 08/20/20
Ok Kasey, I've renamed this forum topic. Hope that didn't confuse you. :)

I've also edited your two skins so the banner is now a zone, not a block. Again, the difference is, a block is the same for every page (like your sitemap at the bottom) and a zone varies depending on the page your are on.

By default your skins will use page "banner". But if you create a hierarchical page like blog.banner or mission.banner or whatever.banner, then it will use THOSE pages instead of banner. You can even create a page like animals.dogs.coyotes.banner and it will override the animals.banner or animals.dogs.banner, etc. In other words, BoltWire finds the closest match to fill that zone.

You can see the code I put in page "banner" and compare it with page "blog.banner" (that's the one I did for you) so you can see how easy it is to create these. You should be able to create other banners using these as examples.

Note that I set the image on banner to a width of 100% (of the available space) using our alternate, more advanced markup, because it is actually too big for the space available. The blog image fit fine, so I just used the simpler markup there.

Let me know if you have any troubles creating these, or if yo have any questions.

PS. You'll want to remove the banner image from your "mission" for example, or you will have a double image. One from the banner zone and one from the main zone.
Posted by Kasey Norton on 08/19/20
Dan Okay yes it would be the banner then. I just want to be able to change the banner graphic on certain pages. :)
Posted by Dan Vis on 08/19/20
Lets define what you mean by header Kasey. If you look at your skin html file (in the site.skins section) you'll see several blocks.

tabs along the top (block.tabs)
the action bar (action.tabs)
the banner along the top (block.neotop)
then the main page zone which has a header, main, and footer zone.
then there's block.signup
and block.bottom (your sitemap)

The header is the small part at the top of each page which usually supplies the page title, and maybe some other things. The graphic along the top is in the banner block, that's something else.

So if you want to change the graphic (banner) we can convert that into a zone and it will do what you want. Or if you want to add a picture over each header (and keep the page title below it, we can do that too.

Wish you could sketch it out on a piece of paper and shoot me a picture so I know exactly what you want, and the part you want changing.

If the above makes sense you may be able to clarify what you want. Sorry it's a little tricky figuring out what you want. But we can do whatever you want--I just need to know what it is. :)
Posted by Kasey Norton on 08/19/20
Dan I imagine you thinking I was a bit odd for having such a huge graphic there on the youth page. 😂 I actually just loaded that there to see if we liked it as a header so it was sized to fit the head area. I have another one loaded just to check and I left it there this time so you could see what I mean. If you look at this page page and imagine the oversized graphic sliding up into the place of the existing header above it (with the existing header removed) that is what I'm going for.

I think this ⬇️ is what I'm asking....

If you don't want a standard header in a section, but want to put something different on every page, you simply empty the contents of the header zone and then put the graphic you want on each page. Not my recommendation, but it's certainly doable.

But I'm not sure how to empty the contents of the header zone. I'm actually not even sure how to access the header zone because when I go in through "zones" that area isn't clickable. I have all the graphics made already because I kept them uniform and just went in and changed the titles so it only took a few minutes.

I read through the Welcome Tour again about the page heirarchies. I think I may have to read it several more times to truly begin to get it but I see this:

In addition to view and edit permissions, you can customize their headers, footers, and side menus, create specialized actions, enable various plugins, or skins, and set various configuration options as well, for any group of pages you wish. Learning to use page hierarchies effectively can make web administration much simpler, and accomplish some amazing effects. We'll look at a couple examples in the next guide.

If I canfigure out how to access the header zone on a particular page (I can find it, just can't edit it) then I may be able to figure it out! :)
Posted by Dan Vis on 08/18/20
Hi Kasey. I'm not 100% sure what you mean exactly but if you want to put graphics in the header for various sections of your site (like a blog graphic on all your blog pages) you put the graphic in blog.header. Same with other sections.

Be sure to go back and reread the section on page names in the Welcome Tour. Especially the section on hierarchical page names and how they relate to zones. This is a very important and powerful concept in BoltWire.

If you don't want a standard header in a section, but want to put something different on every page, you simply empty the contents of the header zone and then put the graphic you want on each page. Not my recommendation, but it's certainly doable.

I'd also suggest, if you are just talking simple boxes like you have for the blog right now, you can create them dynamically which would be MUCH easier. Try putting something like this:
<div style='width: 400px; height:50px; padding: 20px; margin: 20px auto; border: 2px red solid; font-size: 200%; font-weight: bold; color: blue;'>
<center>SOME HEADER</center>

on a testpage in your site, and see what happens. Here's what this one looks like, but you can tweak it however you want by fiddling with the numbers and colors. Then when you get it how you want, we can create a class so you just have to do

<div class=fancybox>
SOME HEADER
</div>

Creating all those graphics can be time consuming and it's hard to get them all right. The youth one for example was way too big and I had to resize it in the code to get it to fit. But I think your site will look better if there's a consistency to it.

Just my thoughts. Anyway, reread that section of the welcome tour and then let me know if you need additional help with something specifically.




Join Us

To read more posts, or to leave a comment, join our FREE community...

JOIN NOW