Solved Templates

Folium - Coming Soon DEsign

Asked by Jesus Rosado Fernandez 4 years ago Last activity 3 years ago

Hello,

Is there any way to customize the design of the Coming Soon page? You can change things like logo, text etc. in the options of the template but the design or arrangement unfortunately not. Is there possibly a possibility here?

Thanks in advance

Accepted answer

Marked as the solution
Mehtaz Afsana Borsha Staff
3 years ago

For increasing the font size of that you have to use this CSS

span.coming-soon-number{
    font-size:80px !important;
}
span.coming-soon-string{
       font-size:25px !important; 
}

12 more replies

Oldest first Newest first Most helpful
Jesus Rosado Fernandez Asked this
4 years ago

Thank you for the quick reply. As I already wrote, you can activate and adjust certain parameters or information in the options. The design, i.e. the appearance of the "Coming Soon" page, unfortunately not. At least I don't see any possibility on the options page.
Is there no other way to customize the look? Something like background color, font size, etc?

I would only want to customize the look.

Mehtaz Afsana Borsha Staff
4 years ago

You can customize this type of customization by using custom CSS. If you need give me your site URL so that I can check and try to help you.

Jesus Rosado Fernandez Asked this
3 years ago

Hello Mehtaz,

Thank you very much for your help.

As you can see on my page, the "Coming Soon" page is actually completely unformatted.

https://www.iber-datentechnik.de/neu

I would have liked to adjust this a bit. Centered texts, centered logo etc, maybe a different background color, etc.

Where exactly can I make these changes? Which file?

Mehtaz Afsana Borsha Staff
3 years ago

In coming soon page you can only change the logo and background image. But the type which you are looking for you have to do this via CSS.

You can use this custom CSS


html.coming-soon .coming-soon-logo{
    display:block !important;
    margin: 0 auto !important;
}

html.coming-soon .coming-soon-title{
        text-align: center;
}

html.coming-soon .coming-soon-content{
            text-align: center;
}
html.coming-soon{
        background-color: #7ba5f2;
}
html.coming-soon body{
    background-color: #7ba5f2; 
}

Path towards custom CSS: Extensions>Templates>Styles> Click on your current default template name then choose Template Options. Then find custom CSS within the custom code.

Jesus Rosado Fernandez Asked this
3 years ago

Hello Mehtaz,

Thank you very much for your reply. This has already brought me very far and already looks very good. Thank you again for that.

However, I still have one question. How can I still adjust the CountDown in the last line? I would also like to center it and reduce it to 50% of the screen width.

Mehtaz Afsana Borsha Staff
3 years ago

Glad to know that. For count down use this CSS


html.coming-soon #coming-soon-countdown{
        text-align: center;
}
Jesus Rosado Fernandez Asked this
3 years ago · edited

Hello Mehtaz,

Great!!! Thanks a lot :)
Is it possible to reduce the width of the last line, i.e. the line in which the countdown is displayed? Currently the CountDown uses the full width of the page 100% and I would like to use only 60%. Is that possible?

Mehtaz Afsana Borsha Staff
3 years ago

Yes but if we set the width 60% then it will not in centre. So its better to remain it like this.

Jesus Rosado Fernandez Asked this
3 years ago

Ah I see. Thanks again for your Help. I appreciate that very much.
Is there perhaps another way to move the days/minutes/seconds further together and possibly increase the font size of the days/hours/minutes/seconds?

Log in to reply.