Forums (Obsolete)

Design and CSS styles

Version 6.x > Design and CSS styles > how to develop an image navigation part in a page?

View modes:


Member	steven4733-gmail - 12/14/2011 3:52:24 PM how to develop an image navigation part in a page? Please look at the pic. What I want to do is when people click those small image on top, the big calendar event web part could be updated properly. How to design the top image navigation part? And how to make the canlendar web part updated in the same page. Hope I explained it clearly.


Member	steven4733-gmail - 12/14/2011 4:01:51 PM RE:how to develop an image navigation part in a page? If I design the top part to be the parent page template, the under part to be a document, is that possible? I mean is that possible to put the calendar web part into the document as a field?


Kentico Consulting	kentico_borisp - 12/16/2011 3:49:57 AM RE:how to develop an image navigation part in a page? Hello, You can't put an calendar into a field, however you can create a page template, which will be used on all the documents with an Event calendar on it. That way you will get an Event calendar on all the documents. Best regards, Boris Pocatko


Member	steven4733-gmail - 12/16/2011 10:15:13 AM RE:how to develop an image navigation part in a page? Then how to develop the up navigation part of the page? The images are different, when click the image the details are showed at bottom.


Kentico Consulting	kentico_borisp - 12/19/2011 5:18:38 AM RE:how to develop an image navigation part in a page? Hello, You can use some of our navigation web parts. One example would be to use our CSS List Menu web part. YOu can also specify an image for each menu item in CMSDesk / Content / <your item in the content tree> / Properties / Menu. Best regards, Boris Pocatko


Member	steven4733-gmail - 12/28/2011 4:47:20 PM RE:how to develop an image navigation part in a page? OK, back to the design, I still have question on how to design the page. If I decide to use css menu webpart to display the up part which I think better to use character instead. How to develoop the down part? I just need an idea. Thank you.

Kentico Consulting

Kentico Consulting

kentico_borisp - 1/3/2012 7:26:58 AM

RE:how to develop an image navigation part in a page?

Hello,

If you mean by the "down part" part the detailed calendar, then you can use documents. Every document in the content tree will be a separate calendar with events. Those documents will use the same template so the design of the pages will be the same. You can place specific events underneath the main calendar document, which will be displayed on this calendar.

Best regards,
Boris Pocatko

Member

Member

steven4733-gmail - 1/3/2012 9:13:04 AM

RE:how to develop an image navigation part in a page?

Hi Boris,
Thank you for your patience on this issue. To develop the detailed calendar events as a document type is my initial thought, but you said it is impossible to put the calendar web part as a field of a document. Then how to use it as a document? I understand the upper calendar navigation could be developed using CSS listmenu web part, the underneath using document and develop a transmission to set the lay out. But I don't know how to set that big calendar into a document type. I don't want to create a static calendar jpg image to fill that part. Any idea?

Kentico Consulting

Kentico Consulting

kentico_borisp - 1/4/2012 2:33:13 AM

RE:how to develop an image navigation part in a page?

Hello,

You don't need to use a custom document type to do this, only a standard Page Menu Item. You can create a custom page template with the main calendar placed on it as a web part with a specific configuration (e.g. displaying events underneath the current path - achievable through path expressions). Now every page created with this template, will be configured the same way. So if you place an event underneath it, it will be displayed in the calendar. Your structure will look something like this (the template used is always the same):

<page with navigation>
- <page menu item with calendar template 1>
- - <event 1>
- - <event 2>
- <page menu item with calendar template 2>
- - <event 3>
- - <event 4>
- - <event 5>
- <page menu item with calendar template 3>
- - <event 6>

Best regards,
Boris Pocatko

Member

Member

steven4733-gmail - 1/4/2012 2:31:48 PM

RE:how to develop an image navigation part in a page?

I guess this is the only solution. In order to display the event on the calendar I have to create event-booking while also add event page. So for each event, I create one page and one event. Because there is no way to add event on a page.

Is there any way to set the width and height of the event calendar web part? I found it oversized the outside div.

Kentico Consulting

Kentico Consulting

kentico_borisp - 1/5/2012 4:06:16 AM

RE:how to develop an image navigation part in a page?

Hello,

It's not the only solution, but it's the easiest one and the most flexible one. You could of course create a custom calendar web part, which would take the event date from a custom field from a modified or custom document type, but it would require much more effort.
If you don't require the booking functionality, you could use a simplified approach, where only a document will be displayed in the calendar. In that case, your content tree would look something like this:

<page with navigation>
- <page menu item with calendar template 1 with event details on it>
- <page menu item with calendar template 2 with event details on it>
- <page menu item with calendar template 3 with event details on it>

Regarding the styles, please check this link on how to use skin files. You can also use some debugging tool for getting the classes you need like Firebug for Firefox.

Best regards,
Boris Pocatko

Top