Avatar anne Yootheme asked

[FAQ] NIC & EM Theme

1. Where can I change the aside position alignment?


Please go the Warp UI and open the Layouts section. Select the appropriate "Layout Profile" and scroll down to the Aside Block Section. Besides many other settings like blend modes there you find the aside Width (50%,33%,25%) and Alignment (left,right).

Image

2. Why is my module on the aside position displayed over the entire position width?


By default, a module/widget is centered and fills up the entire Aside position vertically. To enlarge the module to the full height of the Aside position like on the contact page open the Warp Module Manager (Extension > Templates > yoo_nic-em > Modules). Enter tm-aside-fullheight in the module/widget custom class field and your module fill the whole Aside position.

Example Widgetkit widget:

Image

Example Modules/Widget Manager:

Image

3. What if I want a centered module on the Aside position what is not extend over the entire position width?


As mentioned above the modules/widgets published on the aside position fill up the entire Aside position vertically. If you want to publish a centered small content, open the Warp UI go to Modules/Widgets and add within the class field of the appropriate widget/module a UIkit width class.

Image

4. How to enable or set the page-loader?


The page-loader is a custom module/widget position allows you to create custom markup that will then be displayed on any page that the module/widget is published on, while the site is in the process of loading.

  1. Create a new custom module/widget and assign it to the page-loader position
  2. To achieve a small logo animation like in the demo content we used UIkit animation classes

This is the example code from the demo content:

<div class="tm-page-loader-content">  
    <img class="uk-animation-fade" src="images/your-image.svg" width="65" height="50" alt="Demo" style="animation-delay:500ms; ">  
    <h1 class="uk-heading-large uk-margin-top-remove uk-animation-slide-bottom">Your Headline</h1>  
    <div class="uk-animation-fade" style="animation-delay:800ms; ">Subtitle</div>  
</div>  

In this example, the headline smoothly slides in from the bottom because of the uk-animation-slide-bottom class. After a delay, the image below appears with a fade in animation and in the end the subtitle because it has the longest delay which is set for both elements per inline style style="animation-delay:800ms; ".

.tm-page-loader-content
This class centers your content and apply a color. The color can be adjusted within the Customizer search for the @theme-page-loader-color and enter a hexadecimal color value.

5. Recommend Aside Imagesize?


I have used in the demo version an image size of 960 x 1080px. It fits the Aside position perfectly when the aside position move to a teaser position once the browser window gets smaller, it displays the middle/centered part of your image.

6. How to disable "Aside"-position for certain subpages in the template NIC & EM?


The Nic & Em Theme Design is based on the two column layout and you can't have a page without the Aside position. Further, you can shrink the position to 25% or you publish nothing there and just use a background color or image.

7. Pageloader module/widget in other template ?


Take a look at this detailed description to achieve this.

  • Tutorial
  • Nic & Em

Edited

5 Answers

3

Avatar thomas.rabenstein answered

Hi Yootheme team,

I like the new template very much and also found a lot of information in the demo and site description regarding the layout options.
What I am missing is a recommended picture size for the "Aside" view.
Since the aside content automatically flips to a header view once the browser window gets smaller, will the full size picture just shown partly - for instance a s a blog header? In other words, do I add a landscape picture as a blog header image, which will be shown full size "aside" but just partially as a blog header on a smaller screen? Do you have any recommendations (best practise) for these picture sizes x/y/resolution?

Kind regards,
Thomas

Edited

0

Avatar farper answered

No Pagekit version of this one?

0

Avatar kayhan Support answered

@farper there is no Warp for Pagekit yet but Yootheme is working on it.

0

Avatar jgowans answered

Any idea how to center the logo position? Seems like that might be a nice touch when the title meta are both centered.

Know someone who can answer? Share a link to this question via email or twitter.