Okay, so I have just made it through the installation of drupal on the xampp stack on a local server so i can play with creating a website. I have this idea for a restaurant website that will look and work something like the kerobia website (http://materia.kerobia.com/en) which was also created using drupal. Unfortunately an idea is pretty much all I have, and I am severely lacking in the web design skills department. So learning as I go here. Instead I turned to photoshop, and created an image of how the web page will look. It is at http://tinyurl.com/mmkxeg
You can see what parts of the image will eventually turn into links. They are also on the line at the top. Not all of the links are in the image just yet, this is not the finished product.
So now I would like to know what modules/themes etc I will start with to turn this image into a working website. Any help is much appreciated.
By ajlowndes on
Comments
This site is great! Never
This site is great! Never thought that something like that could be done in drupal.
As I can see, this picture is a background picture for #main part of page. There are few blocks, and whole block is one big link. They have transparent image for background. It is made in css, that on hover you see those colored part of main image. And in javascript, you also upload some other colored part of main image. For example, when you hover over "blog" that link will get new background image (size is the same like block), but he'll also upload an image under that block with javascript (that looks like shadow of that neon light).
On the front page you don't have any content in main part of page(center), only blocks on sidebars. So when you click on any of those big-block-links, you'll show your content there. So then you'll have that main part displayed, and he has got that pale background. It is important that you fit your content (whatever it is, view, story....) inside those dimensions, with css or some javascript.
I will try someday to make something like this. But for now I can't tell you more. Just try to follow those explanations and you'll figure out everything else, as you go.
I suggest that you don't have those block-links in the middle of your frontpage. Think that you make one. Not sure how it will work out when you have some content displayed in center.
And thanks for sharing this info (site in drupal that looks like he is in flash) with us.
thanks
thanks for your reply oboskovic, yes your comments help a bit, i guess what I will do is create the back page (including hover images) with css and javascript code, then I put a kind of drupal layer over the top - which is confined to only that little white box in the middle. Not sure how to do that really, but I'm working on it. thanks for your help
I would be glad to help you
I would be glad to help you and watch how you make this site. So when you stuck, or want to talk with some1 about possible solution, let me know here.
Just make front page without any content on it. Make few blocks (that are big links to your content), and place them on leftside bar and rightside bar. Give that pale image to background of your "content" (I mean on "content region" in blocks administration).
And this should do it, at least for the beginning.
okay, one quick question: I
okay, one quick question: I know that in the kerobia site it is pretty important that the middle square (out of the 9 that the main image is made up of) is empty, and that is where the content goes. however, if you look at my photoshop mock-up, the links are all over the place. they will still fit into a 3 x 3 grid, but the middle square is very small, and contains a link. I would like to have the content box (run by drupal) come in front of everything, with a kind of faded or greyed out main image as a background. that way it would look like the entire front page was greyed out, with the content box over the top. The user would then have to click a "close" or "home" link inside the content box to return to the main page's image, where they can click another link.
my question then becomes: can you put a table ON TOP of another table, kind of in front of it, having it either visible (active) or not, depending on whether a user has clicked on a link or not. Or am I constrained in css to just one layer of
Well, if I understood it
Well, if I understood it right, yes , you can make one div over another. For example:
1)
<div id="back">bla...</div><div id="front">bla....</div>you give z-index: 100; in style for #front (this should put div in front)
And then you can make some javascript, that will worked onClick. So when you click Close, to change css style of #front (to make it hidden for example)
2) or you could make some popup, and give him nice style, so that looks like simple div. And when you click on Close, it will close it with window.close().
3) you could search the net, and find some great ajax code for making div to popup and to close it.
Mock ups are up
okay, so I have created some mockups of what the page will look like in photoshop, both of the main page, and after a link is clicked.
they are at http://millarcreekcafe.com/p/main1.html and http://millarcreekcafe.com/p/content1.html
there are also two images which are the same as above, but showing the div tag grid over the top. these are at
http://millarcreekcafe.com/p/main1_grid.html and http://millarcreekcafe.com/p/content1_grid.html
Now from what you have said earlier, the green grid can be overlayed the blue grid by use of the #front tag. And the faded images will need to be loaded seperately and displayed in the appropriate place. Am I still on track here? now my final (but probably not that final) question is: where does drupal fit in? I would like to be able to use drupal to manage the content of the (obvious from pictures) content box, update it quickly and easily etc. installing drupal seems to be no problem following the instructions, but am I just creating a site completely seperate in dreamweaver which means I haven't allowed for drupal at all? still trying to figure out just how drupal works you see...
anyway, hope you like the mockups, i think it looks quite cool anyway.
Well, it could be a big
Well, it could be a big problem if you don't know drupal. It is hard to explain it like this. But in live (if you could find someone), it wouldn't take you more then few days to learn it. But you use dreamweaver, witch makes me think that you are not programmer (that you don't write your own code) so if you don't make .php and .css scripts, than you don't have a chance to do it by yourself.
I'm sure, that if you don't demand that close link in paled div, you could use drupal completely (with javascript for fading effect for changing images on hover). That means, that once, when you click on link, and when paled content shows up, you can't remove it (close it), unless you click on some other link or logo (witch is home link). And that means that you just showed up you page content (about us).
But if you demand that to be closed with "close" link...hmm...think that you need there some codding. Maybe making your own custom module, and make changes in tpl.php files in your theme folder. And if you are not php programmer, you won't succeed.
You question about that paled image, it is image in one piece, and it is used like a background image for content region in drupal
i see what you mean about the close link
going back to the kerobia site example, they do have a "home" link at the top of the content box, which appears to work pretty much the same as my "close" link will. But looking closer at it, it appears as though it is simply a link back to reload the main site from scratch. It just relies on the fact that images etc are already in the system memory at that point, so loading of the main page is fast, so most people won't notice that it's a reload instead of just the content box closing.
That sometimes causes problems for them (e.g. when you click "home" from inside the "band" link, it reloads the page with the default (non-english) language selected). I guess this could be described as a bug for them, but a minor one. I guess once I learn a bit more I will find a way around that.
So before I start coding (and doing it wrong) I will start learning thoroughly about drupal, starting with that "overview" document, and some of the other handbooks. I guess what I will do is create a new theme for drupal, and build my site like that. Sounds hard and will take a long time, because I have a lot of reading to do, but definitely possible.
actually, check this out
do you have firebug running? if so, go to this site http://www.luciliacaesar.be, and have a look around. It is also created with Drupal 6. it's obvious that flash is used a lot in this one, but flash aside, go to the bottom of the page and click on the "credits" link. Then use firebug to see that what comes up is pretty much exactly the sort of thing I want, that doesn't seem to use anything but .js scripts and html and css. I.e. there is no flash in this overlay that I can see. Am I correct? They also have a "close" link at the bottom of the credits box, that closes the opaque overlay and returns to the page content. what do you think, copyable?
This is a lightbox. I used
This is a lightbox. I used drupal lightbox, but only for images. For something like this (displaying content that is not an image), I was making my own php script (to display all that text with links, drupal content that you need to "extract" from database) and (I think) I was using class="ligthbox" or something similar, to display it like that.
But you can always try to copy source of the page where you can see Credits. Then make all urls absolute, and start deleting all the things that you don't need. But delete it one by one, until you stay with credits on page and working lightbox for that link.
Maybe drupal lightbox is now much better, then it was when I used it. So check out, maybe he can show any drupal content like that, not just images.
cool. sorted!
cool. sorted!