Forum for discussing general topics related to Couch.
10 posts Page 1 of 1
Hi

I am unsure how to do the following within couchcms, can anyone help please and point me in the right direction

1) I need a output like
Code: Select all
<h2 class="text-uppercase mt-20">Cavy <span class="text-theme-colored">Section</span></h2>

The word section is a different colour to the Cavy word. Only way I can think to do it is using richtext box and make the section word a different colour that way and use ignore so it don't need p tags

2) How can I produce this output within a repeatable region within couchcms, I have never done a list structure like this before within couchcms, I can do the basic html list but not a list with a sublist

Code: Select all
<ul class="list">
                <li><strong>Agouti</strong>
                    <ul>
                        <li>Golden</li>
                        <li>Silver</li>
                        <li>Lemon</li>
                        <li>Chocolate</li>
                        <li>Cream</li>
                        <li>Cinnamon</li>
                    </ul>
                </li>
<li><strong>Solid Agouti</strong>
                    <ul>
                        <li>Golden</li>
                        <li>Silver</li>
                        <li>Lemon</li>
                        <li>Chocolate</li>
                        <li>Cream</li>
                        <li>Cinnamon</li>
                    </ul>
                </li>
            </ul>


3) How can I produce this output within a repeatable region within couchcms as well
Code: Select all
<ul class="list">
                <li><strong>Dutch</strong>
                    <ul>
                        <li>Red</li>
                        <li>Black</li>
                        <li>Chocolate</li>
                        <li>Cream</li>
                        <li>Lilac</li>
                        <li>Golden Agouti</li>
                        <li>Chocolate Agouti</li>
                        <li>Silver Agouti</li>
                        <li>Cinnamon Agouti</li>
                        <li>Cream Agouti</li>
                    </ul>
                </li>
                <li>Tortoise &amp; White</li>
                <li>Tricolour</li>
                <li>Bicolour</li>
                <li>Tortoiseshell</li>
                <li>Brindle</li>
                <li>Dalmation</li>
                <li>Roan</li>
            </ul>


Thank you in advance
Had a thought about the ul list structure, wonder if is similar way like the menu structure as found this that KK had done viewtopic.php?f=4&t=8154#p14376

Code: Select all
<cms:nested_pages masterpage='menu/robertaMENU.php' extended_info='1' >
    <cms:if k_level_start >
        <cms:if k_level='0'>
            <ul  id="mainnav">
        <cms:else />
            <ul class="children">
        </cms:if>
    </cms:if>

    <cms:if k_element_start >
        <li><a href="#"><cms:show k_menu_title /></a>
    </cms:if>

    <cms:if k_element_end ></li></cms:if>
    <cms:if k_level_end ></ul></cms:if>
</cms:nested_pages>


Just unsure if would work if was able to transfer that to a repeatable region instead

UPDATE: Think I just found a solution that KK has posted here viewtopic.php?f=2&t=7321#p10317
I am struggling on the last bit, I can't work this bit out

If there is no heading then to close the ul tag of the sublist, below is what I am trying to work out

Code: Select all
<ul class="list">
                <li><strong>Dutch</strong>
                    <ul>
                        <li>Red</li>
                        <li>Black</li>
                    </ul>
                </li>
                <li>Tortoise &amp; White</li>
                <li>Tricolour</li>
            </ul>


I currently have the following

Code: Select all
<ul class="list">
                <cms:show_repeatable 'marked' >
                    <cms:if cur_header != listparentitem>
                        <cms:if cur_header != ''>
                        </ul></li>
                    </cms:if>
               
                <cms:set cur_header=listparentitem />
                <li><strong><cms:show listparentitem/></strong>
                    <ul>
                        </cms:if>
                        <li><cms:show listchilditem/></li>
                <cms:else />
                </ul><li><cms:show listchilditem/></li>
                </cms:show_repeatable>
                    </ul></li></ul>


The above is outputting the following

Code: Select all
<ul class="list">
                                                                           
                                <li><strong>Dutch</strong>
                    <ul>
                                                <li>Red</li>
                                </ul><li>Red</li>
                                                            <li>Black</li>
                                </ul><li>Black</li>
                                                            <li>Chocolate</li>
                                </ul><li>Chocolate</li>
                                                            <li>Cream</li>
                                </ul><li>Cream</li>
                                                            <li>Lilac</li>
                                </ul><li>Lilac</li>
                                                            <li>Golden Agouti</li>
                                </ul><li>Golden Agouti</li>
                                                            <li>Chocolate Agouti</li>
                                </ul><li>Chocolate Agouti</li>
                                                            <li>Silver Agouti</li>
                                </ul><li>Silver Agouti</li>
                                                            <li>Cinnamon Agouti</li>
                                </ul><li>Cinnamon Agouti</li>
                                                            <li>Cream Agouti</li>
                                </ul><li>Cream Agouti</li>
                                                                                    </ul></li>
                                   
                                <li><strong></strong>
                    <ul>
                                                <li>TEST</li>
                                </ul><li>TEST</li>
                                    </ul></li></ul>
Hi,

I have posted another solution in the thread you referred to -
viewtopic.php?f=2&t=7321&p=37097#p37097

Hope it helps. Please try it and let me know.
KK wrote: Hi,

I have posted another solution in the thread you referred to -
viewtopic.php?f=2&t=7321&p=37097#p37097

Hope it helps. Please try it and let me know.


Thank you KK but am struggling with if there is no heading entered then to close the ul tag of the sublist so should look like the following

Code: Select all
<ul class="list">
                <li><strong>Dutch</strong>
                    <ul>
                        <li>Red</li>
                        <li>Black</li>
                        <li>Chocolate</li>
                        <li>Cream</li>
                        <li>Lilac</li>
                        <li>Golden Agouti</li>
                        <li>Chocolate Agouti</li>
                        <li>Silver Agouti</li>
                        <li>Cinnamon Agouti</li>
                        <li>Cream Agouti</li>
                    </ul>
                </li>
                <li>Tortoise &amp; White</li>
                <li>Tricolour</li>
                <li>Bicolour</li>
                <li>Tortoiseshell</li>
                <li>Brindle</li>
                <li>Dalmation</li>
                <li>Roan</li>
            </ul>


With the updated code in the link you provided, I am getting the following outputted

Code: Select all
<ul class="list">
                                                            <li>
                            <strong>Dutch</strong>
                        <ul>
                                                            <li>Red</li>
                                                            <li>Black</li>
                                                            <li>Chocolate</li>
                                                            <li>Cream</li>
                                                            <li>Lilac</li>
                                                            <li>Golden Agouti</li>
                                                            <li>Chocolate Agouti</li>
                                                            <li>Silver Agouti</li>
                                                            <li>Cinnamon Agouti</li>
                                                            <li>Cream Agouti</li>
                                                    </ul>
                        </li>
                                                                                <li>
                            <strong></strong>
                        <ul>
                                                            <li>Tortoise &amp; White</li>
                                                    </ul>
                        </li>
                                                  </ul>


Below is the code I currently have

Code: Select all
<ul class="list">
                <cms:show_mosaic 'markedcontent'>
                    <cms:if k_tile_name='markeditem' >
                        <li>
                            <strong><cms:show listparentitem/></strong>
                        <ul>
                            <cms:show_repeatable 'marked' >
                                <li><cms:show listchilditem/></li>
                            </cms:show_repeatable>
                        </ul>
                        </li>
                    </cms:if>
                </cms:show_mosaic>
              </ul>
The only way I thought of doing it for now is create a second repeatable region for the list that has no heading

The updated code I got now is below and it works, would of just been nice if could have kept it all in one section of code and within the mosiac code if there was no heading, it would close the ul tag of the sublist and put the li tag on the next line directly under the closed ul tag of the sublist

Code: Select all
<div class="col-md-3">
              <div class="esc-heading heading-line-bottom lr-line left-heading">
                    <h4><cms:show marked_heading/></h4>
                </div>
            <ul class="list">
                <cms:show_mosaic 'markedcontent'>
                    <cms:if k_tile_name='markeditem' >
                        <li>
                            <strong><cms:show listparentitem/></strong>
                        <ul>
                            <cms:show_repeatable 'marked' >
                                <li><cms:show listchilditem/></li>
                            </cms:show_repeatable>
                        </ul>
                        </li>
                    </cms:if>
                </cms:show_mosaic>
              </ul>
              <ul class="list">
                  <cms:show_repeatable 'markedtwo' >
                      <li><cms:show markedtwoitemname/></li>
                  </cms:show_repeatable>
              </ul>
          </div>
You can add another 'tile' to mosaic - one that does not have the repeatable-region..
The revised code could then become -
Code: Select all
<cms:mosaic name='content' label='Content'>
    <cms:tile name='item' label='Item'>
        <cms:editable type='text' name='header' label='Header'  />
       
        <cms:repeatable name='info' label='File Info' >
            <cms:editable type='text' name='file_name' label='File Name'  />
            <cms:editable type='text' name='file_size' label='File Size'  />
        </cms:repeatable>
    </cms:tile>
   
    <cms:tile name='item_without_list' label='Item Without List'>
        <cms:editable type='text' name='header' label='Header'  />
    </cms:tile>
</cms:mosaic>

On the frontend -
Code: Select all
<ul class="list">
    <cms:show_mosaic 'content'>
        <cms:if k_tile_name='item' >
            <li>
                <strong><cms:show header /></strong>
                <ul>
                    <cms:show_repeatable 'info' >
                        <li><cms:show file_name /> - (<cms:show file_size />)</li>
                    </cms:show_repeatable>
                </ul>
            </li>
        </cms:if>
       
        <cms:if k_tile_name='item_without_list' >
            <li><cms:show header /></li>
        </cms:if>
    </cms:show_mosaic>
</ul>

Does this help?
Ahh ok cool thank you so much KK, think that will solve the issue and not have to create a second repeatable region

I'll give that a go in about 20 mins and see how I get on and post a update on it. Thank you again KK really appreciate it
Thank you so much KK, it's perfect with adding the extra tile

Another tick for couchcms, keeps getting better the more I learn about these features
Welcome. I am glad it helped :)
10 posts Page 1 of 1