Changing spacing of elements/logo size?

Howdy mate, sure – please share a link to your website so I can suggest some CSS code for you ??

Alex

https://ausbiotic.com/

So yeah, logo size when using the logo function and move the sub bar to just under it if possible. Obviously I can adjust exact values myself

Thanks man!

I think issue is with your logo as there is big transparent space around the actual image: check out this screen https://imgur.com/a/IgVYmm2

If I set a logo on my dev it looks okay: https://niteothemes.com/dev/?cmp_preview=true

To tweak the logo size, you can use this CSS code (these are the default values):

.logo-wrapper img {
    max-width: 700px;
    max-height: 270px;
}

But I would suggest to crop your logo first

Alex

I’ll try do that, otherwise I’ll integrate the logo into the backround directly. Cheers

OK, perfect, I am cmarking as resolved then – feel free to ask any question or reopen ??

A.

Hi Alex,

Thank you so much for this great plugin!

I would also be interested in a way to adjust the spacing between the elements (Text Logo and Subscribe Form) or actually in a way to change the vertical position of the elements.

Is there also a simple way to change the Text of the “Subscribe” button?

And what is the recommended resolution and file size and codec for the background video?

Best,
Chris

• This reply was modified 6 years, 8 months ago by 70ph.

Hey Chris, to change the spacing you need to insert some custom CSS – I could suggest you something but I need to see your website first.

Navigate to CMP Settings > Translation to change text of the button or any other text.

Regarding the background video – I am not sure about codecs and others stuff but generally it is recommended to keep it as small as possible – you do not want your users to wait forever to page load – I would say ~10MB – 20MB should be the max size. Or simply upload it to YouTube and use that instead – it will be much faster for your users (if your video is long or big).

Alex

Hey Alex,

Thank you for your help!

The website is not online, yet. If you could help me out with some lines of CSS code, wouldn’t it be possible for me to adjust the numbers / spacing?

Chris

Yup, what CMP theme do you use?

Hi Alex,

I use WordPress, latest version. And I am using your COUNTDOWN Theme, with the actual counter being disabled.

Is it also possible to make the background of the email-form completely transparent and to leave only the outline of the Subscribe-button – or to make the outline transparent as well?

It would also be great to have the option to disable or adjust the line break of the Text Logo.

All the best,
Chris

• This reply was modified 6 years, 7 months ago by 70ph.
• This reply was modified 6 years, 7 months ago by 70ph.

..I think I also found a small bug: The phrase “Please insert valid Email address.” won’t be translated. All other translations work perfectly.

Hope this doesn’t make me sound too whiney. Great plugin!

OK, last one, hopefully. I don’t know how difficult it is and I don’t want to be demanding.. but is there a way to change the style and the spacing of the text inside the email form. the default text and the user input.

hey Chris, thanks for addressing translation bug!

To change spacing between elements you could try this code ( and play with 1em number ):

.inner-content > * {
    margin: 1em 0;
}

to reset text logo margins to 0 use this:

.text-logo {
margin: 0em 0;
}

to make inputs transparent:

input {
    background: transparent!important;
}

To change text in form, go again to translation and look for ‘Insert your email address.’

You can also address change font-size and etc by addressing form input like this;

input[type="email"] {
    font-size: 1em;
    letter-spacing: 1px;
}

regarding the text logo – do you want to breaking word or letters or non breaking?

Hope that helps..

It would be still better if you can provide your website address, even if it is not published yet – I can always preview it like this: https://yourdomain.com/?cmp_preview=true

cheers Alex

Hi Alex,

thank you very much for your help! I really appreciate it. And sorry for the late reply.

So, here is the coming soon page so far goo.gl/Dicxbw
Works quite well.

What’s still missing, is the option to keep the e-mail input field transparent all the time. By now, it turns yellow if someone choses a saved e-mail address from the drop down list and then it stays yellow after a valid e-mail address was submitted.

Also, the option to have a “non-breaking” text logo would be great on smaller screens.

Cheers!
Chris

Hi Chris, for the autocomplete, it is kinda tricky, as it probably works only in Chrome but you can try to use this code.

:-webkit-autofill,
:-webkit-autofill:hover, 
:-webkit-autofill:focus {
background: transparent;
border:none;
}

But I am not sure if it still works in newer version of Chrome…

And regarding non-break text logo, you can use this:

.text-logo {
    white-space: nowrap;
}

But I do not advise it, as it will render the text outside of device screen. It would be better to use an image instead of text.

Alex

• This reply was modified 6 years, 7 months ago by NiteoThemes.