Avatar anne Yootheme asked

[FAQ] Uniq Theme


1. What's the alternative navbar layout?


Uniq theme comes with three different layouts for the main navigation.

Image widget overview
left

Image widget overview
centered

Image widget overview
single row

To pick one of the layouts, go to Uniq > Layouts in WordPress or Templates > yoo_uniq > Options > Layouts in Joomla and scroll down to Navigation.

Here you can also apply a fixed navigation and set the dropdown as well as the menu itself and the footer to full width.


2. How to add an id to menu items to create a one-pager?


Thanks to the Smooth Scroll component from UIkit, you can use Uniq as a slim one-pager.

Joomla:
Menus > Main Menu > New > Menu Item Type: System Links/External URL

To enable the smooth scroll add the site URL or page link and an ID in the link field, for example: your_page#your_id
Image widget overview

Example:
index.php?option=com_content&view=article&id=7&Itemid=101#tm-top-c

WordPress:
Appearance > Menus > Create a new Custom Link

To enable the smooth scroll add the site URL or page link and an ID in the link field, for example: your_page#your_id
Image widget overview

Example:
http://yoursite.com/#tm-top-c


3. How can I enable the custom blog layout?


Image widget overview
Go to Uniq > Layouts in WordPress or Templates > yoo_uniq > Options > Layouts in Joomla, scroll down to Article Style and check the preferred options for your specific layout.


4. What custom classes classes are used in this theme and what do they do?


Here's an overview of useful helper classes used to style our theme demo.

.tm-margin-large-top
This class applies an additional 100px space to the top of an element on medium or large viewports (Tablets, Desktops).

.tm-margin-large-bottom
This class applies an additional 100px space to the bottom of an element on medium or large viewports (Tablets, Desktops).

.tm-panel-large .uk-panel
Increase the padding of the panel to 50px on medium or large viewports (Tablets, Desktops).

.tm-icon-google-plus .tm-icon-facebook .tm-icon-youtube-play .tm-icon-instagram .tm-icon-twitter
These classes apply the appropriate corporate color to each social icon button.

.tm-timeline-avatar
This class applies a circle shape and a border to your image and moves it up by 80px as seen in the About section of the frontpage.


5. How can I apply different stylings to each position block?


Go to Uniq > Layouts in WordPress or Template Manager > yoo_uniq > Options > Layouts in Joomla and scroll down to Block Appearance. Here you can adjust the background color, padding, gutter and content width and apply full width to your position blocks for each layout.
Image widget overview


6. How can I replicate the biography section of the frontpage and the About page.


To create this, we've used the custom .tm-timeline-avatar class and the Description List component](http://getuikit.com/docs/description-list.html) from UIkit as you can see in the example below.
Image widget overview

<div class="uk-panel uk-panel-box">  

    <div class="uk-panel-teaser uk-cover-background uk-position-relative" style="background-image: url('teaser_image.jpg');">  
        <img class="uk-invisible" style="min-height: 200px;" src="teaser_image.jpg" alt="demo">  
    </div>  

    <p class="uk-text-center">  
        <img class="tm-timeline-avatar" src="avatar_image.jpg" width="" height="" alt="" />  
    </p>  

    <div class="uk-align-center uk-width-large-2-3">  
        <dl class="uk-description-list uk-description-list-horizontal tm-margin-large-bottom">  
            <dt>...</dt>  
            <dd>...</dd>  
        </dl>  

    </div>  

</div>

6. On what font is the logo based on?


The font used for the logo is the Montserrat font.


7. How to change the font family of titles ( h2, h3, h4, h5, h6 )


Open the customizer, enable the advanced mode, look for the Headline Base* click on more and look for Heading Small Font Family. There you can enter your font family like this: 'Arial'.

  • Tutorial
  • Uniq

Edited

9 Answers

1

Avatar thomas.p Support answered

hey anne,

thanks for these well described FAQ, a great help!

1

Avatar schmallegger answered

how can i copy the unique gallery style to the sun theme?

1

Avatar mehdi.elourimi answered

Hi, the template have a problem... When you're in "Features" and you go to a onepage's page (home, works, service or about), you arrive in a wrong page... For exemple, you're in "Features" and you click on About, you arrive on "Services" and I've the same problem on my website.
Please, somebody had the same problem as me and can fix it ...?
Thanks all !
Sarah

Edited

0

Avatar fraggleworks answered

In relation to
6 - On Joomla do we just place that code into an article or?

Edited

0

Avatar issam answered

Hello
I tried to change layout to the ( bakery ) and i followed
Templates > yoo_uniq > Options > Layouts > Navigation > bakery and save
because i am using Joomla but nothing changed Always same default layout
Is there any solution to this problem

0

Avatar ubertomondolfi answered

Thanks for the tutorial, great help!

On a one-pager site I'd like to link to a specific module on a certain position. As, for example:

At position top-c there are two modules (stacked): module-1 and module-2

Using index.php?option=com_content&view=article&id=x&Itemid=xxx#tm-top-c will jump to the top of position top-c, thus showing module-1

How can link to jump straight to module-2? (which is also in top-c just under module-1)

Thanks in advance for your help.

0

Avatar prox answered

Hello Anne,

I'm trying to do the one-pager features on my website, but the external link doesn't look the same.
at the end of index.php?option=com_content&view=article&id=7&itemid=101#tm-top-c
it is adding a &itemid=145

which is the second menu item which I try to link to the module for one-pager.

When I hover the second menu item the non-sef url looks like
fr/?itemid=101#tm-top-c&itemid=145

instead of
fr/?itemid=101#tm-top-c or better fr/#tm-top-c

My website is using falang, it may be the reason but I really don't know if falang add this kind of extra itemid to the urls.

Thanks for any help

Best regards,

Patrick

Edited

0

Avatar stefan.lewitas answered

Yup, can confirm Mahdi Elourimes post regarding jumping to the wrong section both on my site and on the demo site...

Anyone from support that addresses this?

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