Hi guys!

I have some questions about my problems.

First, how to change something in CSS after I install Couch? I try to change some values in my CSS file, but nothing changed on page.

Second, I have slider (with some text, caption and images) on my page. How can I set, or what should I do so I can change that slider informations through Couch? (how to set editable area for slider)

Thanks !

[KK]

Hello and welcome

how to change something in CSS after I install Couch?

By that did you mean your site's CSS or Couch admin-panel's CSS? Please let us know.

Second, I have slider (with some text, caption and images) on my page. How can I set, or what should I do so I can change that slider informations through Couch? (how to set editable area for slider)

The best way to handle sliders is by using 'repeatable regions' (please see http://www.couchcms.com/docs/concepts/r ... gions.html).

If you have been through our tutorial, the basic strategy remains the same as creating a listing using cms:pages - isolate one single slide, wrap cms:show_repeatable tag around it which will cause the slide to get repeated x number of times (where x is the number or rows in repeatable region table).

Do let us know if you have any difficulty in implementing it.

I mean on my site's CSS.

EDIT: Another question - I don't know what to do with my footer. In footer I have some links and copyright info. So what is the best way to do, so I can change that links later through Couch? How to make them editable?

[KK]

I mean on my site's CSS.

One solution would be to convert the CSS file into a regular Couch template. However, for most purposes it is sufficient to move the relevant CSS rules from the stylesheet into the existing templates. Now we can define editable regions the regular way to edit the values of the rules.

I don't know what to do with my footer. In footer I have some links and copyright info. So what is the best way to do, so I can change that links later through Couch?

The best way would be to use a 'global' template and define the footer/header regions in that.

I suggest you please take a look at our tutorial (specifically http://www.couchcms.com/docs/tutorials/ ... -ends.html) where this is all covered in detail.

Hope this helps.

…how to change something in CSS after I install Couch. I try to change some values in my CSS file, but nothing changed on page.

This doesn't make sense. The presence of Couch has no influence on displaying CSS. You should be able to change styles just like you would on a static HTML page. It sounds more like a problem with browser caching, unrelated to Couch.

You can use Couch to manage styles, i.e. allow a user to manage styles through the admin panel in the way KK describes. But you don't have to.

Hello and welcome

how to change something in CSS after I install Couch?

By that did you mean your site's CSS or Couch admin-panel's CSS? Please let us know.

Second, I have slider (with some text, caption and images) on my page. How can I set, or what should I do so I can change that slider informations through Couch? (how to set editable area for slider)

The best way to handle sliders is by using 'repeatable regions' (please see http://www.couchcms.com/docs/concepts/r ... gions.html).

If you have been through our tutorial, the basic strategy remains the same as creating a listing using cms:pages - isolate one single slide, wrap cms:show_repeatable tag around it which will cause the slide to get repeated x number of times (where x is the number or rows in repeatable region table).

Do let us know if you have any difficulty in implementing it.

I really don't get this with Slider. Can you explain it better?

[KK]

@derKaiser

I am not sure if you went through our tutorials so I'll reiterate - Couch works by getting retro-fitted within existing markups. Which means, any attempt to create a solution in Couch necessarily begins with studying the existing static HTML and then deciding which editable regions to define etc.

Without knowing how your slider is coded there is no way we can offer any kind of detailed solution you are looking for.

Please post in the slider's code here so we can discuss how to handle it with Couch.

Thanks.

Hi derKaiser. Let me see if I can help.

Normally a slider is made up of 2 parts.
1. There is some html code that holds your image, caption, text, whatever else. This code is repeated for the number of items you have in your slider.
2. Some javascript code that animates the slider.

It doesn't really matter exactly how your code works. Couch can be plugged in anywhere. For our purposes we can forget about the javascript and focus on the html.

Let's say you have the following structure in your html:

Code: Select all

<p>Text for the first slide.</p>
<img src="path/to/picture1.jpg" />
<p>Caption for Picture 1</p>

<p>Text for the second slide.</p>
<img src="path/to/picture2.jpg" />
<p>Caption for Picture 2</p>

<p>Text for the third slide.</p>
<img src="path/to/picture3.jpg" />
<p>Caption for Picture 3</p>

You might have 3 or 5 or any number of slides. That's why we want to use a repeatable region. So in your template, you will create a repeatable region with 3 items: image, text, and caption.

Code: Select all

<cms:repeatable name="slider" label='slider' >
    <cms:editable name='slider_image'
       label="Slideshow Image"
       width="640"
       height="430"
       show_preview='1'
       preview_width="150"
       type="image" />
     <cms:editable name='slider_text'
       label="Text"
       type="text" />
   <cms:editable name='slider_caption'
       label="Caption"
       type="text" />
</cms:repeatable>

On the front end you replace the hard coded information with Couch tags.

Code: Select all

<cms:show_repeatable 'slider' >
   <p><cms:show slider_text /></p>
   <img src="<cms:show slider_image />" />
   <p><cms:show slider_caption /></p>
</cms:show_repeatable>

Now Couch will cycle through all of the slides you enter into your admin panel and output them into your slider. It doesn't matter what your actual code is. You just place the cms:show tags wherever you need the items to appear on the front end. It really is very straightforward. Be patient. Use the documentation. Take some time to learn and gain experience. You'll find that Couch is very easy to adapt to your own needs as you learn how to use it.

Good luck and let us know if that helps.

[KK]

@Tim, Excellent explanation
Thank you very much.

@derKaiser
Here is another thread showing the use of repeatable-regions - viewtopic.php?f=2&t=8174

Hi derKaiser. Let me see if I can help.

Normally a slider is made up of 2 parts.
1. There is some html code that holds your image, caption, text, whatever else. This code is repeated for the number of items you have in your slider.
2. Some javascript code that animates the slider.

It doesn't really matter exactly how your code works. Couch can be plugged in anywhere. For our purposes we can forget about the javascript and focus on the html.

Let's say you have the following structure in your html:

Code: Select all

<p>Text for the first slide.</p>
<img src="path/to/picture1.jpg" />
<p>Caption for Picture 1</p>

<p>Text for the second slide.</p>
<img src="path/to/picture2.jpg" />
<p>Caption for Picture 2</p>

<p>Text for the third slide.</p>
<img src="path/to/picture3.jpg" />
<p>Caption for Picture 3</p>

You might have 3 or 5 or any number of slides. That's why we want to use a repeatable region. So in your template, you will create a repeatable region with 3 items: image, text, and caption.

Code: Select all

<cms:repeatable name="slider" label='slider' >
    <cms:editable name='slider_image'
       label="Slideshow Image"
       width="640"
       height="430"
       show_preview='1'
       preview_width="150"
       type="image" />
     <cms:editable name='slider_text'
       label="Text"
       type="text" />
   <cms:editable name='slider_caption'
       label="Caption"
       type="text" />
</cms:repeatable>

On the front end you replace the hard coded information with Couch tags.

Code: Select all

<cms:show_repeatable 'slider' >
   <p><cms:show slider_text /></p>
   <img src="<cms:show slider_image />" />
   <p><cms:show slider_caption /></p>
</cms:show_repeatable>

Now Couch will cycle through all of the slides you enter into your admin panel and output them into your slider. It doesn't matter what your actual code is. You just place the cms:show tags wherever you need the items to appear on the front end. It really is very straightforward. Be patient. Use the documentation. Take some time to learn and gain experience. You'll find that Couch is very easy to adapt to your own needs as you learn how to use it.

Good luck and let us know if that helps.

Here is code of my slider (just first 2 slides):

Code: Select all

 <div id="fragment-1" class="ui-tabs-panel" style="">
          <cms:show_repeatable "slider">
          <img src="<cms:show slider_image/>" alt="slider-slika1" width="670px"; height="250px"; />
            <div class="info" >
              <h2><a href="#"><cms:show slider_text /></a></h2>
              <p><cms:show slider_caption /></p>
            </div> <!-- div info -->
          </cms:show_repeatable>
        </div> <!-- div fragment-1 -->

        <!-- SLIDER SECOND -->
        <div id="fragment-2" class="ui-tabs-panel ui-tabs-hide" style="">
          <cms:show_repeatable "slider">
          <img src="<cms:show slider_image/>" alt="slider-slika1" width="670px"; height="250px"; />
            <div class="info" >
              <h2><a href="#"><cms:show slider_text /></a></h2>
              <p><cms:show slider_caption /></p>
            </div> <!-- div info -->
          </cms:show_repeatable>
        </div> <!-- div fragment-2 -->

So, everything works fine for the 1st slide, but the 2nd slide overlapes the first. So what I need to change that slide 2 separates from 1st slide?

Also, I wanted to create Thumbnail:

Code: Select all

<cms:repeatable name="slider" label="slider">
  <cms:editable name="slider_image"
    label="Slideshow Image"
    width="670"
    height="250"
    show_preview="1"
    preview_width="150"
    type="image"/>
    <cms:editable 
    name="my_image_thumb"
    label="Image Thumbnail"
    desc="Thumbnail of main image"
    width="80"
    show_preview="1"
    assoc_field="slider_image"
    type="thumbnail" />
    <cms:editable name="slider_text"
    label="Text"
    type="text" />
    <cms:editable name="slider_caption"
    label="Caption"
    type="text"/>
  </cms:repeatable>

But the Thumbnail region don't show up on page or on Admin panel.

EDIT: Oh, forget about the thumbnail. I just saw that repeatable tag doesn't support Thumbnail type.