WebsiteBaker Community Forum

WebsiteBaker Support (2.8.x) => Templates, Menus & Design => Topic started by: NotASingleWhiteFemale on August 22, 2009, 04:10:15 AM

Title: Hunting for a template
Post by: NotASingleWhiteFemale on August 22, 2009, 04:10:15 AM
I'm not good at templates, websites, CSS, HTML or Javascript and don't really have the time nor inclination to learn much about them.

What I'm looking for - and I hope somebody can help - is a template that'll work with WB that has the following attributes:

1. A centred black, shiny button menu at the top.
2. No header.
3. Full width pages,
4. No sidebar.
5. No side menu.
6. No footer.
7. Black background.

Can anybody help?
Title: Re: Hunting for a template
Post by: crnogorac081 on August 22, 2009, 04:24:06 AM
black background outside template orblack inside... Can you draw it in paint or somewhere :)

cheers
Title: Re: Hunting for a template
Post by: NotASingleWhiteFemale on August 22, 2009, 04:56:48 AM
Here, I've made a mockup. The drawing is part of a slideshow held in the wrapper.

The buttons really need an onmouseover event so that they lighten while the mouse is over them.

I suppose the buttons need a bit of black space above them too.

The slideshow slides are 800x533 pixels. I'm aiming to fit the whole page into 800x600.

The menu must be centred - whatever the screen size.


[gelöscht durch Administrator]
Title: Re: Hunting for a template
Post by: crnogorac081 on August 22, 2009, 05:25:44 AM
do you have a submenu ? Write the structure of your full menu please

Attach the button if you want exactly like that (best is if you have photoshop file..)

Content inside (does it effect on shading outside the container ?) Inside is whitte, and outside is totaly black, all background ??

be a little specific, its not much work :) do you need a login, search or something else ?

cheers
Title: Re: Hunting for a template
Post by: NotASingleWhiteFemale on August 22, 2009, 05:35:21 PM
No submenus. It's a very simple site. No login, no search. SEO assist would be nice.

Here're some plain black buttons.

The content is just a slideshow on most of the pages, using the wrapper module and the swissarmy.js slideshow.

One page may have text on it.

On second thoughts - would it be possible to stretch the button from one side to the other of the screen and then to have the menu in white centred over it? IE, have one menu button instead of many?

The background is totally black. The white seen is a slide from the slideshow.

[gelöscht durch Administrator]
Title: Re: Hunting for a template
Post by: crnogorac081 on August 23, 2009, 06:37:42 PM
Quote
On second thoughts - would it be possible to stretch the button from one side to the other of the screen and then to have the menu in white centred over it? IE, have one menu button instead of many?


Not sure what you mean, please draw it simple :)

cheers
Title: Re: Hunting for a template
Post by: NotASingleWhiteFemale on August 23, 2009, 10:35:31 PM
Ok. I was thinking instead of having separate buttons along the top, of having a solid bar where the whole bar could depress on click events. I enclose an up/down PNG.

The text could go from grey to bold white on mouse-over.

That would work quite well.

Other than the buttons, as before, the whole page to be black.

Menu items on the button bar still to be either centred or spread out evenly across the page width. Page width is variable dependent upon the user's monitor and settings.

[gelöscht durch Administrator]
Title: Re: Hunting for a template
Post by: NotASingleWhiteFemale on August 24, 2009, 12:03:37 AM
This is a mockup of the site with just the menu.

[gelöscht durch Administrator]
Title: Re: Hunting for a template
Post by: crnogorac081 on August 24, 2009, 02:13:02 AM
Hi,

Here is the template, in css file you will find comments to for additional adjustments..

cheers

[gelöscht durch Administrator]
Title: Re: Hunting for a template
Post by: NotASingleWhiteFemale on August 24, 2009, 03:19:49 AM
Thank you very much. I need to tweak the button bar a bit - it doesn't look as good as I thought it would. The mechanics of the page are excellent. The only issue is the menu doesn't center well.

http://www.sageworld.co.uk/wb/pages/test.php
Title: Re: Hunting for a template
Post by: crnogorac081 on August 24, 2009, 03:34:15 AM
the menu items starts from left, so you must play a bit with width parameter for that box. Open css file, and find it :)

cheers
Title: Re: Hunting for a template
Post by: NotASingleWhiteFemale on August 24, 2009, 05:59:35 PM
I played around. Here's what I came up with http://farm4.static.flickr.com/3349/3673918744_a1f25b3119.jpg

I gather the menu defaults to the left and there's some trick involving auto margins to get in centred. How on earth do I do that?
Title: Re: Hunting for a template
Post by: crnogorac081 on August 24, 2009, 06:08:14 PM
Try this code for menu:

    left:50%;                /* The box will start at center of screen*/
    position:relative;
    width: 600px;         /* from center it will go for example 600 px, play with this to adjust it to your menu, set the border as 1px to see exactly where your menu ends, then put that widthand remove border */
    margin-left:-300px;  /* this will move your menu left, value must be a half of width above - 300px and that will make it centered*/

p.s.: the pic you attached is not the demo  :-D

cheers
Title: Re: Hunting for a template
Post by: NotASingleWhiteFemale on August 25, 2009, 04:59:06 AM
Thanks. I'll have a play with that tomorrow.

The picture I put earlier is a drawing from a book I'm writing. I didn't have photos on that computer.
Title: Re: Hunting for a template
Post by: NotASingleWhiteFemale on August 25, 2009, 04:29:18 PM
Thanks. I have it looking pretty darned good now: [url removed by admin, not WB anymore]

I need to work on consistency of the slide-shows but the template is fantastic now.
Title: Re: Hunting for a template
Post by: crnogorac081 on August 25, 2009, 05:11:26 PM
I am glad now  :-D

You can post your site in showcase thread :)

cheers
Title: Re: Hunting for a template
Post by: Argos on August 25, 2009, 10:11:57 PM
Thanks. I have it looking pretty darned good now: http://www.sagephotoworld.com/
Eh... I think it looks terrible. There is a black backgrounded iframe with horizontal and vertical scrollbars within a black body that has a scrollbar of its own as well. Then the buttons have an ugly serif font.  :-o
Title: Re: Hunting for a template
Post by: crnogorac081 on August 25, 2009, 10:18:21 PM
Dont tell me, she wanted it that way :)
Title: Re: Hunting for a template
Post by: Argos on August 25, 2009, 10:25:35 PM
Dont tell me, she wanted it that way :)

She wanted THIS? It must be 1995 again...

[gelöscht durch Administrator]
Title: Re: Hunting for a template
Post by: crnogorac081 on August 25, 2009, 10:28:44 PM
lol, you must have a small screen :) anyway she wantet THIS :)

I also dont like it at all, but....you know...."client is allways right" :)

cheers
Title: Re: Hunting for a template
Post by: Argos on August 25, 2009, 10:42:02 PM
17 inch screen, 1024x768. Still quite a regular size. But hey, client is king!
Title: Re: Hunting for a template
Post by: crnogorac081 on August 25, 2009, 10:43:13 PM
 :wink:
Title: Re: Hunting for a template
Post by: NotASingleWhiteFemale on August 26, 2009, 05:14:58 AM
Hmm.... What on earth is going on? It looks like this on my screen...

My screen res on this PC is 1152x864. On my Macbook, it's more.

Clearly something must be done. How can we eliminate the border between the image pane and the sides of the window?

[gelöscht durch Administrator]
Title: Re: Hunting for a template
Post by: crnogorac081 on August 26, 2009, 05:59:15 AM
you cant :) as you requested variable width, and its 80% of screen..

So on 1024 x 768, your width is ~ 800px

See how much width is requiredfor your slideshow script..

cheers
Title: Re: Hunting for a template
Post by: NotASingleWhiteFemale on August 26, 2009, 06:44:40 AM
Hmm...

Here's the slideshow script and associated html..

The images as 800x533.



[gelöscht durch Administrator]
Title: Re: Hunting for a template
Post by: kweitzel on August 26, 2009, 07:31:50 AM
But even on a large screen it does not look OK ... here with 1280 width ...

cheers

Klaus

[gelöscht durch Administrator]
Title: Re: Hunting for a template
Post by: crnogorac081 on August 26, 2009, 10:57:38 AM
she wanted upper menu centered, so she must been change a width of menu to be too short :)
Title: Re: Hunting for a template
Post by: NotASingleWhiteFemale on August 26, 2009, 04:57:11 PM
It looks just fine on my 1280x800 Macbook display.

I can't figure out what's going on. Perhaps WebsiteBaker is the problem and I'd be better off developing a stand-alone website?
Title: Re: Hunting for a template
Post by: crnogorac081 on August 26, 2009, 05:00:20 PM
nope, WB is cool, you just need to change the width of menu from 50% to eg. 80% to fit smaller screens...
Title: Re: Hunting for a template
Post by: Argos on August 26, 2009, 05:06:37 PM
It looks just fine on my 1280x800 Macbook display.

I can't figure out what's going on. Perhaps WebsiteBaker is the problem and I'd be better off developing a stand-alone website?

LOL WB has nothing to do with it, it just shows a template. If the template's not right, WB cannot magically fix it  :-D
Title: Re: Hunting for a template
Post by: Argos on August 26, 2009, 05:12:44 PM
It's an Internet Explorer thing. Other browsers don't show the scroll bars, but IE7 does. It shows a javascript error as well, by the way. And the menu is horrible in all browsers...
Title: Re: Hunting for a template
Post by: NotASingleWhiteFemale on August 26, 2009, 05:14:53 PM
That's wacky.... It works just fine on Firefox with my macbook and my pc.

Here's the CSS file

*
{
padding: 0em;
margin: 0em;
}

body
{
background: #000;
}

p
{
line-height: 1.5em;
margin-bottom: 1.0em;
text-align: justify;
}

a
{
color: #000;
text-decoration: underline;
}

a:hover
{
text-decoration: none; /* underline;*/
}

a:visited
{
text-decoration: none;
}

img
{
border: solid 0px #000;
}

#header
{
width: 100%;
height: 29px;
background: url(img/BG1.JPG) repeat-x;
padding: 0px;
margin: 0px;
}

#menu
{
/* removed width: 50%; /* You can adjust this to set it to your needs*/*/
height: 29px;
/* removed margin: 0 auto; */
padding: 0 10px 0 10px;
left:50%;                /* The box will start at center of screen*/
   position:relative;
   width: 494px;         /* from center it will go for example 600 px, play with this to adjust it to your menu, set the border as 1px to see exactly where your menu ends, then put that widthand remove border */
   margin-left:-247px;  /* this will move your menu left, value must be a half of width above - 300px and that will make it centered*/
}

#menu ul
{
position: absolute;
top: 4px;
}

#menu ul li
{
display: inline;
}

#menu ul li a
{
color: #fff;
font-weight: bold;
padding: 5px 10px 10px 10px;

}

#menu ul li a:hover
{
border-bottom: 2px dotted #000; /* set from fff to 000 to hide */
}

#menu ul li a.menu_current
{
background: transparent url(img/active.JPG) repeat-x;
}

#box
{
width: 100%; /* Set to 80% of screen , if you want you can set it to exact, like 800px */
border: 0px solid #000;
margin: 0 auto;
}

#content
{
padding: 0em 2.0em 0em 2.0em;
background-color: #000;  /* This is background color, set 000 if you want this to be black too */
}

#footer
{
height: 30px;
clear: both;
padding-top: 10px;
background-color: #000;
font-size: 0.8em;
color: #fff;
text-align: center;
}

Title: Re: Hunting for a template
Post by: crnogorac081 on August 26, 2009, 05:20:13 PM
I left you comments :)

See, now width in:

#menu
{
/* removed width: 50%; /* You can adjust this to set it to your needs*/*/ is dissabled, so its 100% of site width :)

The menu should be ok now :)

cheers
Title: Re: Hunting for a template
Post by: NotASingleWhiteFemale on August 26, 2009, 06:05:15 PM
Ok. The 50% is now re-enabled. Does it look any better on tiny screens?
Title: Re: Hunting for a template
Post by: crnogorac081 on August 26, 2009, 06:10:22 PM
You got me wrong :)

You need to dissable that line :) that way If you have too much menu ittems, few last ittems will colapse to seccond row below :)

cheers
Title: Re: Hunting for a template
Post by: NotASingleWhiteFemale on August 26, 2009, 06:25:51 PM
So I have:
Quote
#menu
{
width: 50%; /* You can adjust this to set it to your needs*/
height: 29px;
/* removed margin: 0 auto; */
padding: 0 10px 0 10px;
left:50%;                /* The box will start at center of screen*/
   position:relative;
   width: 494px;         /* from center it will go for example 600 px, play with this to adjust it to your menu, set the border as 1px to see exactly where your menu ends, then put that widthand remove border */
   margin-left:-247px;  /* this will move your menu left, value must be a half of width above - 300px and that will make it centered*/
}

but I need this?
Quote
#menu
{
height: 29px;
padding: 0 10px 0 10px;
left:50%;                /* The box will start at center of screen*/
position:relative;
width: 494px;         
margin-left:-247px; 
}
Title: Re: Hunting for a template
Post by: crnogorac081 on August 26, 2009, 06:40:00 PM
No just leave it that way and we will wait for comments  :)

cheers
Title: Re: Hunting for a template
Post by: NotASingleWhiteFemale on August 26, 2009, 06:58:55 PM
I'm confused now.
Title: Re: Hunting for a template
Post by: Argos on August 26, 2009, 07:03:28 PM
In IE7, the horizontal scrollbar is gone now. The vertical one is still there.
Title: Re: Hunting for a template
Post by: NotASingleWhiteFemale on August 26, 2009, 08:06:26 PM
Hmm.... Looks like WB might not be able to do it then. None of the templates on RVSiteBuilder do anything other than make a hell of a mess. With the hidden problems of WB and IE7 (I use Firefox), it seems pretty much that I'm going to have to dump CMSs and do my own design and coding, which might take a while.
Title: Re: Hunting for a template
Post by: NotASingleWhiteFemale on August 26, 2009, 09:10:55 PM
Add IE8 to the number of browsers that won't work with this template. Ok. Going back to old-school manual websites...

This looks better... [url removed by admin, not WB anymore]

It needs a menu so I can change the slides but that's about all.
Title: Re: Hunting for a template
Post by: crnogorac081 on August 26, 2009, 09:22:12 PM
WB is compatibile as much as you(me, or anyone else) is capable to code it well. So dont blame WB.

your problem is that you have big object for 17" screen (1024 x 768) the scrool bar will appear, as you when you remove address barr and buttons above browser window, and space below window (status bar, tool bar etc..) and objects inside site (header, footer), and considering that your script is 800x533, the vertical scroolbar must appear on smaller screens (768 ....)
Title: Re: Hunting for a template
Post by: Argos on August 26, 2009, 09:35:20 PM
You have to code it so that there is only 1 scrollbar on the right, the normal one. The iframe you apparently use should have a fixed height and width, and should not be compressable. It should also have nothing to do with WB. Although for simpler sites like this, a CMS may be overkill indeed. I love WB, but sometimes it's easier to build a simple static site.
Title: Re: Hunting for a template
Post by: NotASingleWhiteFemale on August 26, 2009, 09:38:51 PM
Yes. I'm going to have to build a static site. I've played with goodness knows how many website design programs and content management systems with various templates and none seem to have helped at all. The nearest good-looking thing is apples .mac website but I'm not paying for two webhosts.
Title: Re: Hunting for a template
Post by: kweitzel on August 26, 2009, 10:05:49 PM
Apologies, but that is just a stupid comment ... if you properly handle your CSS you will get there!

cheers

Klaus
Title: Re: Hunting for a template
Post by: NotASingleWhiteFemale on August 26, 2009, 10:08:19 PM
Nah. Too much work. I'll take a look at Microsoft's Publisher next and see if I can put a website together with that. My wife has a copy.

Failing that, I'll have another go with rvsitebuilder though I fear the templates are pretty horrible.
Title: Re: Hunting for a template
Post by: Argos on August 26, 2009, 10:15:13 PM
You would be better of with actually trying to learn a bit more of the technical aspects of building proper websites, instead of relying on instant website builders. They will probably all be disappointing as they never will be just what you are looking for. You will probably keep banging your head against the wall, unless you get more insight and working knowledge in webdesign.
Title: Re: Hunting for a template
Post by: NotASingleWhiteFemale on August 27, 2009, 05:06:37 PM
I suspect you're probably right there.

I've just had a go with iWeb and it produced a very nice looking site that I could live with. I now have to work out how on earth to get my slideshows into it.
Title: Re: Hunting for a template
Post by: NotASingleWhiteFemale on August 29, 2009, 01:48:15 AM
Well, here's the final result although I may well change the slideshows from Flash to Javascript purely because iPhones can't handle Flash.

[url removed by admin, not WB]
Title: Re: Hunting for a template
Post by: Luckyluke on August 29, 2009, 10:19:14 AM
It looks better so.
But I don't see that this site was created in WB.
I can't locate the admin logon screen. I see no tracks in the template that looks like WB.
Did you change something in .htaccess?

Grtz,
Luc
Title: Re: Hunting for a template
Post by: Argos on August 29, 2009, 10:46:42 AM
It's not WB anymore, but iWeb: <meta name="Generator" content="iWeb 2.0.4" />

I'll close the subject as it's no longer WB related.