Jump to content

Archived

This topic is now archived and is closed to further replies.

mouflon

Fun with infoboxes

Recommended Posts

I'm working on the look and feel of a couple of stores. Content not there yet, still working on the designs and building buttons.

 

test1.quarterstaff.ca is clean lines, using stylesheets to create a 3D chiseled look, also using the news module.

 

www.villagecraftandcandle.com/catalog I've been playing with adding image wrappers to the infoboxes. If anyone is interested I can package up the technique.

 

What do you think?


Unexpect the Expected

Share this post


Link to post
Share on other sites

Mouflon,

 

Those are both very cool! I really like the chiseled look. The image wrapped boxes is a little slow to load but, not real bad. Wrap 'em up!

 

PS- The creature that is taking over in Winnipeg has spread....there are 16 assorted creatures like that at my house... :D


Kim

~~~~~~~~~~~~~

Share this post


Link to post
Share on other sites

Thanks, Kim - could you have another look at the village craft and candle store. I've put in an image preloader that may just speed things up (I honestly have no idea), seeing as how there are really only 6 images other than product images, but they are presented 10 or twelve times. I'm connected directly to the web server through a high speed wireless link, so I don't really get to see if things are slow or not. I guess there are disadvantages....... :wink:


Unexpect the Expected

Share this post


Link to post
Share on other sites

hey don't take what Kim says on speed to heavy :lol:

 

she's on dial-up and well quite frankyl everything loads SLLOOOWWW on dial-up... I can say this coming from a region where dial-up was our only choice, so I personally know quite well how slow it is and can be. Now on a massive partial DS3 at college here...

 

and Kim, don't mean to pick on you personally... I'm just pointing out that it's kind of moot to point out something loading slow on dial-up when slowness is the exact nature of dial-up... Now if a webpage takes longer than 30 seconds to completely load on dial-up then that I can certainly understand.

 

having said that, I like the infobox images ALOT better... the "chizeled" effect just looks like a plain HTML table with a border of about 4 or 5 to me... kind of 1995 and more or less tacky (sorry but that's just my opinion). I've "wrapped" infoboxes in images for a few sites myself... very easy to do and gives the site that extra feeling of personality & unity.


The only thing necessary for evil to flourish is for good men to do nothing

- Edmund Burke

Share this post


Link to post
Share on other sites

Hiya!

The store is great - I love the deisgn of the candles one, the other is nearly the stock design, but the 3D effect is great!

 

Is their any chance you can package these into a contribution?

 

Thanks,

Warren

Share this post


Link to post
Share on other sites
hey don't take what Kim says on speed to heavy  

 

she's on dial-up and well quite frankyl everything loads SLLOOOWWW on dial-up...

 

That was exactly my point - I'm not on dialup, but the majority of folks out there still are, so it is important that we design sites with this in mind. While I have long since stopped catering to IE or Netscape browsers ver 4 and earlier (stats here show that less than 2% of visitors to all of the domains hosted here use these), but there's still lots of areas without access to broadband. (I still remember the days of cruising the BBS's with a 300 baud modem on my Z80 CP/M machine.)

 

the "chizeled" effect just looks like a plain HTML table with a border of about 4 or 5 to me

Yup, point taken, it is just plain old HTML tables, except using stylesheet generated borders instead of the "borders=" tag (Lots more control. If it was just the "borders" tag, every cell would be outlined.) I just wanted to show that you can take a basically "stock" store and fancy it up a little just using stylesheets and a minimum of graphics.

 

I will post the "wrapping" technique once I get into a readable format. As Joshua points out, it is fairly simple.


Unexpect the Expected

Share this post


Link to post
Share on other sites

Very nice, I am interested if you could send me those techniques!


Russ

 

"To the man who only has a hammer in the toolkit, every problem looks like a nail."

 

Abraham Maslow

Share this post


Link to post
Share on other sites

Good Morning Mouflon!

 

I took a second look at the candle shop and the image preloader did make a difference.....It was not real slow to start with but, that made a big difference in the speed and rather than loading one image at a time the whole lot pops up at once......You have to get rid of the purple buttons though... :D


Kim

~~~~~~~~~~~~~

Share this post


Link to post
Share on other sites
You have to get rid of the purple buttons though... :D

 

I second the motion.


The only thing necessary for evil to flourish is for good men to do nothing

- Edmund Burke

Share this post


Link to post
Share on other sites
......You have to get rid of the purple buttons though... :D

 

Awww.... I thought they added to the overall charm of the store -- OK, I guess I'll change them. :wink: This means I actually have to finish making the new buttons. :?

As to the image preloader, thanks for checking it out. It was a very quick hack just to test it out, and it runs every time a page loads. I'm going to throw some logic in so that the script only gets executed once per session, so the images only get loaded once. Hopefully that will make it even better.

 

BTW, the alien on the Quarterstaff page is one of by brother's flock, all of whom are scheduled to "star" in a new movie being shot in Winnipeg.


Unexpect the Expected

Share this post


Link to post
Share on other sites
BTW, the alien on the Quarterstaff page is one of by brother's flock, all of whom are scheduled to "star" in a new movie being shot in Winnipeg.

 

That is so neat! He is an Orange Wing Amazon, right? What other kinds does he have?


Kim

~~~~~~~~~~~~~

Share this post


Link to post
Share on other sites

Quote from my brother:

 

Give the lady a cigar.

 

Sophie is indeed an orange wing amazon. attached are photos of:

Trinculo, a sun conure (he is orange mostly)

Cali, a peach front conure,

and we also have 3 lovely budgies

So here's your cigar:

birdies.jpgcigar.jpg


Unexpect the Expected

Share this post


Link to post
Share on other sites

Mouflon,

 

Please tell your brother that he can see many of my flock on my site.....They are my research and developement team.

 

Ah....a good cigar, Thanks!


Kim

~~~~~~~~~~~~~

Share this post


Link to post
Share on other sites

Here's what I did for the stylesheet bordered boxes. Note the colours are specific that site. If no border colour is specified, the border colours show correctly using IE, but using Mozilla or Phoenix, they just show as thick black lines.

 

TD.headerBar {

 font-family: Verdana, Arial, sans-serif;

 font-size: 10px;

 color: #000000;

 font-weight : bold;

  border-top: 3px groove;

 height: 16px

}



.infoBox {

 background: #E9E3DE;

  border-top: 3px groove;

 border-left: outset #FCFAF8;

 border-right: outset #E9E3DE;

 border-bottom: outset #E9E3DE;

}



TD.listingBox {

 background: #E9E3DE;

 border-top: inset #FCFAF8;

 border-left: inset #FCFAF8;

 border-right: inset #E9E3DE;

 border-bottom: inset #E9E3DE;

}



TD.infoBoxHeading {

 font-family: Verdana, Arial, sans-serif;

 font-size: 10px;

 font-weight: bold;

 text-align : center;

 background: #bbc3d3;

 color: #000000;

 background-image : url(images/infobox/bar.gif);

 border-top: outset #FCFAF8;

 border-right: outset #DDD9D5;

 border-left: outset #DDD9D5;

}

TD.pageHeadingInfo {

 font-family: Verdana, Arial, sans-serif;

 font-size: 20px;

 font-weight: bold;

 color: #9a9a9a;

 border-top: outset #FCFAF8;

 border-right: outset #E9E3DE;

 border-left: outset #E9E3DE;

}

TD.productInfo {

 background: #D6CBC2;

 font-family: Verdana, Arial, sans-serif;

 font-size: 11px;

 line-height: 1.5;

 border-top: outset #FCFAF8;

 border-left: outset #FCFAF8;

 border-right: outset #E9E3DE;

 border-bottom: outset #E9E3DE;

}

Here are the various border styles you can use:

 

none

No border.

hidden

Same as 'none', but in the collapsing border model, also inhibits any other border.

 

dotted

The border is a series of dots.

 

dashed

The border is a series of short line segments.

 

solid

The border is a single line segment.

 

double

The border is two solid lines. The sum of the two lines and the space between them equals the value of 'border-width'.

 

groove

The border looks as though it were carved into the canvas.

ridge

The opposite of 'groove': the border looks as though it were coming out of the canvas.

 

inset

In the separated borders model, the border makes the entire box look as though it were embedded in the canvas. In the collapsing border model, same as 'groove'.

 

outset

In the separated borders model, the border makes the entire box look as though it were coming out of the canvas. In the collapsing border model, same as 'ridge'.


Unexpect the Expected

Share this post


Link to post
Share on other sites

The boxes are nice but my status bar says;

Loaded 0 out of 8 images [0%].

 

The "No image available" graphic is so distorted I couldn't read it until I clicked to enlarge it.


Xamu

Share this post


Link to post
Share on other sites

×