lloydo3000

Hi Seb,

You can try the below code, make sure to test it in lots of browsers. You might have to alter the 36em in some cases (it is for browsers which don’t understand vh — 100vh means 100% of viewport height).

Cheers,
Lloyd

/* give section some height or 100vh if supported by browser */
.header-content-wrap {
    background: transparent; /* optionally remove dark shading from photo */
    padding: 0 !important;
    display: table;
    height: 36em;
    height: 100vh;
    width: 100%;
}
/* position content vertically */
.header-content-wrap .container {
    display: table-cell;
    vertical-align: middle;
}

This information has been repeated many times, if you’d just looked or searched for background you’d find the following CSS:

body.custom-background {
    background-size: cover !important;
    background-position: center !important;
}

Depending on your image, you may wish to use a different position. Here is the CSS documentation on background-position:
https://www.w3schools.com/cssref/pr_background-position.asp

If you are not using a child theme, you can add this code using a plugin for custom CSS such as Jetpack or this one:
https://www.ads-software.com/plugins/simple-custom-css/

* N.B. There is a strange bug with fullscreen background images on mobile, so while this will work on desktops, at the moment it doesn’t work on mobile.

Hey, well done! The new logo looks great ??

The green ribbon is section.separator-one and the red ribbon is section.purchase-now

You can use these to add a background image using CSS, but it will replace the colour.

To have a colour overlaid on top of an image, the colour needs to be in a separate element (a child of the parent with the image). E.g.

<section>
    <div>
        content of ribbon
    </div>
</section>

To edit this code, you need to make a child theme and edit your version of front-page.php

Normally you achieve this by using CSS3 cover, which intelligently sets whichever side is longer to 100%

body.custom-background {
    background-size: cover !important;
    background-position: center center !important;
}

However there is currently a problem with this…
https://www.ads-software.com/support/topic/background-image-size-on-mobile

To update this, I think the reason is that the image resizes to cover the full height of the body (~3000 px) instead of the viewport?

There is another thread full of examples here
https://www.ads-software.com/support/topic/background-image-is-not-responsive

Yes this is true, for me as well. I have not found a way to fix it yet.

It occurs on everything from Windows Phones to iPads.

Obviously, I’m already using

body.custom-background {
    background-size: cover !important;
    background-position: center center !important;
}

On a related note, the zerif.js file only adds an event listener to buttons in header

This means that buttons elsewhere (e.g. ribbons) will not smooth scroll.

@gouravwptech, can you include these buttons next time you update the theme?

I’m reluctant to do too much customisation because I don’t want to break the theme on updates.

That is another question, when you post the changelog, can you please include which files are changed? It will make updates easier for those with child themes in case something breaks.

anujagg, just like with regular WP posts, the information you enter in the Customiser is stored in your database.

If you’re curious what the structure of the database looks like, you can use phpMyAdmin if your server uses cPanel. It’s mySQL ??

If you follow the instructions here I think Chouby would be very happy to include Kalaallisut!
https://polylang.wordpress.com/documentation/contribute/

I have always written my own themes so I’m not so familiar with the process. Try to see if you can find more info and examples on the internet or contact the theme developer. Since you have paid for it you are entitled to support!

You are right to use a child theme to modify the CSS. Use Firebug or other development tools to select the flags by using the arrow button then clicking there. You will notice the HTML structure is like this (very simplified)

<ul>
    <li>
        <a>HOME</a>
    </li>
    <li>
        <a>WORK etc.</a>
    </li>
    <li class="lang-item">
        <a><img>FLAG</img></a>
    </li>
</ul>

I am guessing you need to modify the li with class lang-item. Abbreviated to li.lang-item. Firebug changes the page as you modify the code so you can see what looks right. Use it with trial and error then paste the code into your child CSS.

You’re welcome ?? If your question was answered, can you please mark this topic “Resolved”?

For (a) & (b) I suggest you look here:
https://www.ads-software.com/support/topic/how-to-translate-the-read-more-to-3-languages%e2%80%8b%e2%80%8b?replies=2#post-6162311

For (c) I suggest you use Firebug or equivalent to look at the li.lang-item and see if you need to change the vertical-align, height or line-height.

Somehow this problem has gone. Either updating to 1.6 or resetting my nav menus did the trick.

First make translations of each page from inside WordPress:
https://wpformation.com/wp-content/uploads/2014/09/article-plusieurs-langues-11.jpg

More information here:
https://wpformation.com/polylang-plugin-multilangues/