Jump to content

Search the Community

Showing results for tags 'header'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • General Discussion
    • Announcements
    • Business Discussion
    • Business Services
    • Sell and Buy
  • Themes & templates
    • KVS default theme
    • KVS paysite theme
  • Educational / support
    • Technical Support
    • FAQ
    • Educational Series

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


About Me

Found 1 result

  1. This article provides step by step instruction on how to get categories dropdown in site header. Please note the CSS styles described here are not 100% perfect, as they in some way overlap with styles for upload item dropdown. Please adjust them as needed by your site design. Step 1. Go to Website UI -> Global blocks and click on Add block button at the bottom. In the new block line specify block name as Header Categories and under block type select list_categories. Save. Step 2. Open the newly appeared Header Categories block for editing. Configure block parameters as needed, e.g. items_per_page if you want to limit the number of categories displayed, and other filters if you want to limit which categories are displayed. Enter the following code into template code area and save: {{if count($data)>0}} <li class="drop"> <span>{{$lang.header.primary_menu_categories}}</span> <ul> {{foreach from=$data item="item"}} <li> <a href="{{$lang.urls.videos_by_category|replace:"%DIR%":$item.dir|replace:"%ID%":$item.category_id}}">{{$item.title}}</a> </li> {{/foreach}} </ul> </li> {{/if}} Step 3. Go to Website UI -> Page components -> include_header_general.tpl for editing. Find the <LI> node that renders categories menu item, similar to this: <li {{if $page_id=='categories_videos' || $page_id=='categories_albums'}}class="selected"{{/if}}> <a href="{{$lang.urls.categories_videos}}" id="item6">{{$lang.header.primary_menu_categories}}</a> </li> And replace it with this block insert: {{insert name="getGlobal" global_id="list_categories_header_categories"}} Step 4. To make styles look better, add the following basic styling into your theme CSS file: .navigation .primary .drop > span { display: block; position: relative; background-color: #e0dfdf; padding: 12px 38px 12px 17px; cursor: pointer; } .navigation .primary .drop > span:after { position: absolute; z-index: 1; content: "\e901"; font-family: "icomoon" !important; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-size: 5px; top: calc(50% - 1px); right: 20px; will-change: transform; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform: translateY(-50%) rotate(0); transform: translateY(-50%) rotate(0); -webkit-transition: -webkit-transform 0.3s; transition: -webkit-transform 0.3s; transition: transform 0.3s; transition: transform 0.3s, -webkit-transform 0.3s; } .navigation .primary .drop:hover > span { background-color: #276fdb; color: #fff; } .navigation .primary .drop:hover > span::after { -webkit-transform: translateY(-50%) rotate(180deg); transform: translateY(-50%) rotate(180deg); }
×
×
  • Create New...