This Message Forum is no longer in use

Please use the new Bravenet Help Forums FOUND HERE

General Forum
This Forum is Locked
Author
Comment
Fool Wizard buttons?

Hi Martin, logos on all pages now thank you. That photo is actually from Vernon Park which adjacent to The Park Inn, the landlord is well chuffed.

Anyway, I was just wondering last night if it would be possible to add/replace the way the links look like on the sidebar that take you each page within the site.

Going with the green theme of each page sub-title bars, would it be possible to create simple oblong green buttons with the title of each page in white text? I think that would bring the finish I am looking for.

Thanks,

Navi

PS
An ale man hey? Me too, gravity drawn Real Ale though, not gassy keg ale. Hot Toddies are purely medicinal. Or are they?

PPS
I read the the two posts between yourself and Corwings apropos posting HTML code and getting lost in the ether, how come you can post code with unseemingly no problems? Is there a trick to it, like fooling Wizard?

Re: Fool Wizard buttons?

I just did a quick test. Do you mean something like this?

I have to experiment a little with the button size, and the way Firefox renders the left side of the button, but I think that is what your talking about. However, I have to wait till later to get back to you with the explanation.

Re: Fool Wizard buttons?

That's spot on Martin,

Thanks, I await your next post,

Navi

Re: Fool Wizard buttons?


First I created several buttons (4) using GRSites.com. I settled on a 115 pixel wide by 25 pixel high format. I liked the one named "button_115x25_border.jpg" the best and you can see it in use on my test page. I then uploaded them to my web site and put them in the "theme_images" folder, along with all the other theme images.

You can see the buttons at the top of this post. You can take any one of them, or all of them, by placing your cursor over the button and using your right mouse button.

Then I added some style modifications to accommodate the image. Note that the button images are not active links. They are only added as a background to each of the navigation links. In the listing below, the un-highlighted styles are what you already have in your main content area. The bolded styles are the ones I added to make the buttons appear.

The navigation is made from a HTML list. The black highlighted style adds the button image as a background to the list items for the navigation links. The red highlighted styles are used to change the color of your link text. There are some other crude ways to do this, but this method guarantees that only the navigation link text is changed. All of the link events are set to the same color, white. If you wanted to, you could change the "hover" event to something like yellow, so the visitor will see it highlighted. The blue style is needed to move the button images away from the lift border. Without it, the button image rests against the left border. It still looks OK with it resting on the border, in Internet Explorer. But it looks a little odd in Firefox. Not bad, just odd.



As with the other style settings, these will have to be added to the main content area on each of your pages. But once it added, you shouldn't have to do anything but "publish".

Posting code is initially very simple. You don't necessarily fool the forum, you just learn to work with the forum. But it can get quite complicated to make the forum display what you want. Initially, you replace all instances of the left bracket, "<", with it's Entity Name, "<". This then prevents the forum from trying to interpret the code. Some people also replace the right bracket, ">", with it's Entity Name, ">", but I have not found that necessary.

But as I said, this can get complicated. There are many words, like mouse events, that will not display at all in the forum. So you have to fake it out. Javascript posting presents other problems that are difficult to explain. To see how I posted the code above, use your right mouse button and view the source code for this forum posting.

Re: Fool Wizard buttons?

Hi Martin, I've read your post a few times to digest it, and the button on your test site is perfect with the indented/sunken look. I've copied it from the post and is now in The Park Inn's picture folder.

Now, let me see if I'm going to do this right. I upload the button through File Manager into theme-images, then in Code Editor of the Home Page, copy and paste the string of code you posted at the end of existing code, and voila the button for home Home Page appears in left side-bar with white writing? Repeat for each page?

I'm not sure 'bremen bd bt' font would look right, do I change font in the first lines of code supplied? And to look at the yellow text colour just type yellow in the hover line?

Thanks for all your help Martin,

Navi

Re: Fool Wizard buttons?

Yes, that's pretty much about it. I put the button images in the "theme_images" folder, because that is where the Wizard has most of it's other images. But if you want to put it somewhere else, you would need to adjust the location for the button image.

The styles that I did not highlight in my post, were already on your site. So you are already using the 'bremen bd bt' font, but it's only for the "title" style. It has nothing to do with the font for the link text on the buttons.

Yes, to have the text turn "yellow" on a mouse hover, just replace the current color reference, "#fff", with "yellow". I repeated the style coding below, with the hover changed to yellow. I changed it on my test site as well, so you can see what it is like.


Re: Fool Wizard buttons?

Wow Martin, what a difference those buttons make I'm really pleased with them, thanks very much again for sharing your vast knowledge with such a beginner like myself, it's really appreciated. If I were to add new pages would the links automatically appear in button form? Or would I need to add extra code? If so could you come up with it for me?

Now, I took a look at GRSites and it got me wondering, could I replace the page title 'The Park Inn' text with 'The Park Inn' in a 3d graphic. I was playing around with a text logo and I reckon I could come with something tasteful. What do you think?

Thanks again,

Navi

Re: Fool Wizard buttons?

The style code that you are using now has to be inserted into the main content area for each of your pages. But if you generate another page, that's all you need to do. The setup for one page, is exactly the same for all the pages. The code is designed to apply to all navigation links, so the pages that already have the code, will automatically add the button image behind any menu text. Your using a Wizard Theme which is limited to 7 pages. That's a restriction you can't get around so you only have one page to go.

Replacing "The Park Inn" text with a graphic is really pretty simple. You have already used the "edit site info" link to add a link in the page footer. The "title" and "sub-title" are a little bit easier to work with, because the Wizard doesn't delete the HTML if you return. The code you enter will stay there and exist on all pages. So if you had a graphic named say "parkinn_logo.jpg", you could just upload the image to your "myPictures" or "theme_images" folder, and put a tag in the box that says "site title:". The code might look like this:



After you enter the code, fix the link in your footer, save your changes, and publish.

The code above is exactly 39 characters long and the "site title:" is limited to 40 characters. That is why I used a "relative" reference, instead of the full URL to the image. The code above will fit, without being truncated, but it highlights the importance of keeping your "src" reference small. You can make it even smaller by not putting the image in a folder. If you just uploaded it to the root folder of the web site, you could just use something like the following. The the file name can be longer.


Re: Fool Wizard buttons?

Thanks Martin, as usual I'll chaw on your infomation and try it out. Just one thing though, is there a limit to the size of the image, width and height wise, as in the fountain logo positioned top left of the page?

Thanks,

Navi

Re: Fool Wizard buttons?

Hi again Martin, I played about with it and I think it's what I'm after. What do you think, is it maybe off a little?

Thanks,

Navi