YOOtheme Pro is here! The best WordPress and Joomla theme. Learn more

Avatar franziska Yootheme asked

[FAQ] Venice Theme

1. What do I need to keep in mind when adding an external video to my slideshow?


Venice is using Widgetkit 2, allowing you to present videos in a Slideshow. It works pretty great. However, you need to observe a few rules. This is an example of how the path needs to look like in order for the video to be displayed correctly.

http://www.youtube.com/watch?v=CmC4gFdZ4y8&autoplay=1&loop=1&controls=0&showinfo=0&playlist=CmC4gFdZ4y8&start=100

or in Vimeo.

http://vimeo.com/149795583?title=0&byline=0&autoplay=1&loop=1&setVolume=0  

If you're using a YouTube video, make sure you copy the path from the browser's address bar and not the embed code you will get when using the Share button. Otherwise Widgetkit's api will not apply correctly.

You also need to add the parameters that you see in the example:

autoplay=1 - automatically play the video on load

controls=0 - this is to hide the videobar

showinfo=0 - hide information like video title and uploader

loop=1/ playlist=my-video-id - replay the video again and again, it's important that you also add the playlist parameter and set it to your video's id (that's the sequence of characters and numbers in the video url). Otherwise the video will not loop.

start= - start time of the video in seconds

You can find more YouTube parameters here and on Vimeo here.

If you add a video url, Widgetkit will automatically provide a poster image field. Here you can upload the image that you want to be displayed on phones and tablets instead of the video, as mobile devices don't allow autoplay to prevent loading huge video data at the expense of the users cellular network quota.

For more information, also have a look at the Widgetkit 2 documentation.


2. I want my fullscreen Slideshow not to take up full viewport height.


Step 1:

Open the Widgetkit administration of your slideshow and open the General tab. In the HTML class input you can type your own custom class, like .tm-my-fullscreen-slideshow, so your modifications won't affect every slideshow that is set to fullscreen.

Step 2:

Add the following to your theme's css/custom.css:

.tm-my-fullscreen-slideshow .uk-slideshow-fullscreen,  
.tm-my-fullscreen-slideshow .uk-slideshow-fullscreen > li {  height: my-height; }

or

Follow the documentation to add your own custom LESS folder and add the code snippet from above in your /less-custom/theme.less file. Don't forget to compile LESS or none of your changes will take effect.


3. How do I add my own image to the block-image section?


Add the following to your theme's css/custom.css file (making sure you add the correct path for your image):

.tm-block.tm-block-image { background-image: url('your-image-path'); }

Alternatively you could create your own style and add your own bg.jpg image to a corresponding images/your-style/block_image folder that you need to create as well. That's the most non-destructive and update proof way to apply customizations.

The easiest way would be to just replace the image of the style that you are currently using. However this will be overwritten whenever you update the theme, so I wouldn't really recommend it, except for testing purposes.

To apply the block image to a section, just go Go to Venice > Layouts in WordPress or Template Manager > yoo_venice > Options > Layouts in Joomla and set the Background to Image for your position in the Position Appearance section.

Image


4. How can I replicate the Travel Diaries Part aka how can I use the Venice Bonus Switcher?


Venice features a bonus Switcher Widget. In Widgetkit 2 bonus widgets are fully integrated into the theme, so you don't have to do anything else for it to work. When hitting the Widgetkit button, just choose Switcher Venice and start configuring the widget.

For information on how to use the widget in a different theme, check out this post.


5. My logo is too big to fit on top of the menu in fullscreen position. What should I do?


You need to adjust the spacing of the navbar and logo in order for the logo to fit.

Add this to your theme's css/custom.css file to push down your navbar (these are example values, you can modify these to your needs):

@media (min-width: 960px) {

    .tm-navbar:not(.uk-navbar-attached) { top: 150px; }

}

The logo needs to be pulled up correspondingly:

.tm-navbar:not(.uk-navbar-attached) .tm-nav-logo { top: -100px; }

or

Follow the documentation to add your own custom LESS folder and add the code snippet from above in your /less-custom/theme.less file. Don't forget to compile LESS or none of your changes will take effect.

We are considering swapping these values with variables in the next theme update, so you can adjust them through the customizer.


6. How does the logo work in Venice?


In Venice we're using an SVG (Scalable Vector Graphic) for the logo. As vector graphics do, SGVs remain crisp, no matter how you scale them and you can create and modify them in common vector programs, like Adobe Illustrator. But they also have the advantage that you can color them via CSS.

Just create your own vector logo in Adobe Illustrator. Then go to File > Save As and choose SVG"** as file format. When saving, a dialog box will open called SVG Options. At the bottom there's a button called SVG Code... Copy the code from <svg> until </svg> and paste that in your logo module/widget.

The theme will now automatically apply its own logo color, which can be adjusted in the Customizer.

For more information on SVGs, check out the Pocket Guide to Writing SVG by Joni Trythall.


7. How can I use the different navbar styles?


Go to Venice > Layouts in WordPress or Template Manager > yoo_venice > Options > Layouts in Joomla, scroll down to Navigation and check the preferred options for your specific layout.

Image


8. How can I use the different blog layouts?


Go to Venice > Layouts in WordPress or Template Manager > yoo_venice > Options > Layouts in Joomla, scroll down to Article Style and check the preferred options for your specific layout.

Image

  • Tutorial
  • Venice

Edited

26 Answers

4

Avatar franziska Yootheme answered

@ellenvandrunen
By default this layout can't be applied to a ZOO blog, because the theme only overrides Joomla article styling. If you are confident with your coding skills, you could try and apply the layout to ZOO yourself. In your Joomla installation you will find the UIkit template for the ZOO blog view: media/zoo/applications/blog/templates/uikit. You could copy the template and modify it to fit your needs. The ZOO documentation gives you a brief guide on how to create a new template.
The Joomla blog override can be found in yoo_venice/layouts/article.php and the related styling in yoo_venice/less/theme.less. Please understand that I can't give you more detailed instructions for this.

Edited

3

Avatar ella.fernandez answered

Does point 3. How do I add my own image to the block-image section ... apply to the triangle in my screenshot? Image

Which I believe is created using the code below:
<div class="tm-cover-content tm-cover-content-4 uk-flex uk-flex-center uk-flex-middle">

If not, how can I replace that triangle with my own image?

2

Avatar sjoerd.de.wit answered

Hi Franziska,

I was wondering why you developers do not build the specific blog layouts for ZOO too. I mean it is your own product. I would make more use if I could and I would like to let my clients use it more too.

Groeten

Btw: Thanks for the great tutorial.

Edited

2

Avatar mauro.miotello answered

Hi @franziska, thanks for this very useful FAQ
I've tried to use svg code generated from my adobe AI 2014.1.1 but it does'nt work, this is the code:

<svg version="1.1" id="Livello_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 728.5 515.9" enable-background="new 0 0 728.5 515.9" xml:space="preserve">
<text transform="matrix(1 0 0 1 154.7393 177.1738)" font-family="'Montserrat-Regular'" font-size="24">BIASIO GOLF - VILLA DEGLI OLMI</text>
</svg>

Instead the demo Venice code is working fine on my page

Are there some special settings about AI to generate the right SVG code ?

Thanks

Edited

1

Avatar franziska Yootheme answered

@sjoerd.de.wit
Even though ZOO is our product, it's not the same product as the themes and can be bought separately. We can't create a blog layout within the theme that will be applied to ZOO as well, because it has its own structure. And it would unnecessarily bloat ZOO to provide the special blog layout of every theme we've ever made with the extension, especially for people who might be using the ZOO, but not the themes themselves. As I mentioned here you can create your own template with the same layout for ZOO.

@bertrand
I can't tell for sure, but I don't think so. You can check out the available YouTube parameters here. Mind that a Widgetkit slideshow will always mute YouTube videos, regardless of the parameters you apply.

Edited

0

Avatar ellenvandrunen answered

Thanks! Question, does the blog layout (point 8 ) also apply to Zoo Blog? And can I create the same Homepage with these blocks of articles by using Zoo Blog? Or do I need to use the Joomla articles/categories?

Edited

0

Avatar franziska Yootheme answered

@ella.fernandez
What you are referring to isn't made with the block image section. That's a Widgetkit Slideshow overlay. I recommend you set up a demo package (or for WordPress) to see how the demo content was created.

@gianluca.sabino
This isn't really related to the FAQ. Please open a new question and provide some more information on your issue. For more information on how to use the support system, take a look at the Help section.

0

Avatar bertrand answered

Franziska, do you confirm that youtube doesn't provide with parameter to control the volume of the video?

0

Avatar reto.heinz answered

after installing widgetkit 2.1 the fullscreenvideo isn't fullscreen anymore. what is the problem?

0

Avatar hobnil.sanchez answered

Hi I tried everything but I can not show my video fullscreen slide venice template. I followed all the steps of the tutorial and nothing. See here: http://cmstraining.es

Any idea ... Thanks,

0

Avatar e.glais answered

Hi Franziska,
I have a problem with the VENICE template (great template though) now that I installed the latest Widgetkit 2.2.1 for Joomla 3.X (of the march 27th) (because the previous didn't propose the "settings" menu).
No problem during the install, but now that it's installed, the Fullscreen video on the frontpage slideshow doesn't work anymore...

Thanks in advance for your help.

Emilien

Edited

0

Avatar william.thivierge answered

Hi

I absolutly love the youtube video in the background for desktop views. My only problem with is is autoPlay is not availlable on mobile android but somehow on tablets the video is still being presented but with a youtube play button.

Which breaks the fun a lot.

Is there anything we can do about it ? Can we have the phone view on tablets as well ?

Here is what it looks like

https://www.dropbox.com/s/cczfp3zkurnkhdi/20150503_131816.jpg?dl=0

Thanks

0

Avatar jasper answered

I just had an error that was solved by Support-Lucas.

We discovered that using TinyMCE as the editor was injecting unwanted code on the module when it was being saved out.

Please make a note that TinyMCE should NOT be used as an editor for this reason. It will break things.

In my case, it added <h3> tags around a [widgetkit] expression and broke the widget. It did this when I saved and closed the module, so I was unaware of it.

So for any Venice (or any other theme actually), make sure you set your Global Configuration to NOT USE TinyMCE. According to Lucas, CodeMirror is sufficient, so I am using that for now.

0

Avatar dan.naylor answered

  1. How do I add my own image to the block-image section?

Add the following to your theme's css/custom.css file (making sure you add the correct path for your image):

.tm-block.tm-block-image { background-image: url('your-image-path'); }

This works for the desktop site, but the mobile site retains the theme block-image. Is there something more I need to do so that my new block image appears on the mobile responsive website as well?

Edit: Found the problem. I had the logo adjustment recommended above "@media (min-width: 960px) {" without the close bracket, which was including my custom block image in the screen width limitation.

Edited

0

Avatar moses.scott.93 answered

I would like to change the height of fullscreen in the Venice theme.

I do not know how to find the themes __css/custom.css file.

When I look for a custom.css file it does not appear n the web server.

How can i make the widget in the fullscreen position a little shorter?

Thanks,
Moses

0

Avatar matthew.woodring answered

Is this widget kit with media using youtube or viemo coded to mute all the volume? I can not get any volume to work.

0

Avatar rosa.pla answered

Great FAQs and great answers. Thanks!

Related to FAQ 1, I did everything you said and it works OK, except for the loading time of each of the 3 videos, which sometimes leaves the whole slideshow area in black and with the Youtube clock (meaning that the video is loading...)... Here you have our site so that you know what I mean: http://new.ausmar.com/en/

Is there any way I can solve this?

Thanks,
Rosa

0

Avatar jose.a.suarez answered

@hobnil.sanchez
you just need to go to the Modules Manager and activate the Prepare Content button in advanced options, this will prepare the content of the WK to be shown.
hope it helps.

Edited

0

Avatar prozac answered

Navbar covers anchor how can i prevent this "closest offset" did not works for me

0

Avatar judith.schmidt.25 answered

Hi, I've followed your description for "2. I want my fullscreen Slideshow not to take up full viewport height." But without any effect.

Is there anything I also have to take care in the Slideshow Widgetkit, except inserting the special HTML class?

Regards
Judith

0

Avatar paul.starr answered

I have a question is it possible in Venice template to have a different logos show at different actions? The main logo show when full screen is showing but a different logo shows when you scroll down?

The problem I have is my clients logo is doesn't stand out on full screen so I put an outer glow and drop show on it but when I scroll down it doesn't look good because drop shadow looks bad on white background.

Also I have another issue I can't seem to get rid of margin or padding at the top of full screen position at top of page.

Here's my demo
http://109.73.230.225/~htademo2

Paul

Edited

0

Avatar finisterrae answered

@franziska What if I have to work with Facebook videos?... I created a ZOO item and the source of the video has to be a Facebook video. The problem is when I display the full item instead of the video I see a message "No video selected"... of course when I see the item there is the URL.

Please help me with this issue

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