Changing spacing of elements/logo size?

Hi Alex,

Thanks again, also for the advise on the logo.

I tried out the code snippet, but without much success so far.

But then I stumbled upon the possibility to deactivate autofill, which would probably also solve the banana-yellow issue and actually be the even better solution for me.

https://stackoverflow.com/questions/2781549/removing-input-background-colour-for-chrome-autocomplete

-> #44

So I changed the cmp-subscribers.php of your plugin (sorry for that):

<form name=”cmp_subscribe_form” method=”post” action=”admin.php?page=cmp-subscribers”>
<?php $cmp_subs_list_table->display(); ?>
</form>

to

<form name=”cmp_subscribe_form” method=”post” action=”admin.php?page=cmp-subscribers” autocomplete=”off”>
<?php $cmp_subs_list_table->display(); ?>
</form>

But nothing has changed.
Is there a way to deactivate autofill by any chance?

Best,
Chris

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

Howdy Chris, sure no worries about changing PHP files, but be aware they will get replaced by our code every time you update the plugin.

I checked your website source code, and there is no autocomplete parameter on your subscribe form, it looks like this:

<form id="subscribe-form" method="post" class="cmp-subscribe">

I tested it on my dev with <form id="subscribe-form" method="post" class="cmp-subscribe" autocomplete="off"> and it works pretty awesome ??

Alex

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

Hey Alex,

Thanks for checking my source code.
I just copypasted your code and it still doesn’t work here, which is quite confusing. Which file did you edit?

Did you replace

<form name=”cmp_subscribe_form” method=”post” action=”admin.php?page=cmp-subscribers”>
<?php $cmp_subs_list_table->display(); ?>
</form>

by

<form id=”subscribe-form” method=”post” class=”cmp-subscribe” autocomplete=”off”>

in the cmp-subscribers.php ?

Do I also need to chose some specific options in the plugin’s menu to make it work?

This is what my source code looks like now:

<form id=”subscribe-form” method=”post” class=”cmp-subscribe”>
<input type=”hidden” id=”save_options_field” name=”save_options_field” value=”dc154d72e9″ /><input type=”hidden” name=”_wp_http_referer” value=”/” />

<input type=”email” id=”email-subscribe” name=”email” placeholder=”Your email address” required>

<input type=”submit” id=”submit-subscribe” value=”JOIN”>

<div style=”display: none;”>
<input type=”text” name=”form_honeypot” value=”” tabindex=”-1″ autocomplete=”off”>
</div>

<div id=”subscribe-response”></div>

<div id=”subscribe-overlay”></div>

</form>

Have a nice weekend

Chris

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

Hi Chris, you need to edit \inc\class-cmp-render_html.php, where you need to replace

<form id="subscribe-form" method="post" class="cmp-subscribe"> by <form id="subscribe-form" method="post" class="cmp-subscribe" autocomplete="off">

Alex

Hi Alex,

It works, thanks!

But I just found out, that the background-video stutters extremely in Firefox (latest version, 61.0.1, 64 Bit, macOS) and the notebook fan starts howling. I recently updated your plugin. I don’t know if there’s a direct connection, but I guess so. Some days ago, playback was smooth in all browsers. Playback is still perfectly smooth in Chrome, Opera and Safari.

Best,
Chris

Checked on same version of Firefox on my side and your video seems to be smooth.

Could you check this https://originalexe.github.io/vidim/ website? It is a script we are using for background videos, there are few examples running, do they stutters as well?

thanks Alex

Hi Alex,

I tweaked the Custom CSS a bit more and came to this point so far: goo.gl/Dicxbw
Most of the letter-spacing is dynamic now.

What’s still causing me a headache is the JOIN/Submit button. It should be in the same line as the e-mail input field which works well in most cases.
Only if I switch to my mobile device’s small screen in horizontal view, the JOIN/Submit button is positioned in a separate line under the e-mail input field. It’s an Android phone, but I don’t think that matters here. You can also see the same effect by shrinking a desktop browser.

Do you have any clue why this happens?

There might be some code lines which aren’t really necessary. I just tried out several things. Sorry for the mess. Here we are:

.body {
    max-width: 100vw;
	width: 100vw;
    margin: 0
	overflow: hidden;
}
.background-wrapper {
    max-width: 100%;
	width: 100%;
    margin: 0
	overflow: hidden;
}
.inner-wrap {
    max-width: 100%;
	width: 100%;
    margin: 0;
	padding-right:1vw;
	padding-left:1vw;
	overflow: hidden;
}
.inner-content {
   	max-width: 100%;
	width: 100%;
    margin: 0;
	overflow: hidden;
}
.text-logo-wrapper {
	max-width: 100%;
    
    margin: 0;
	overflow: hidden;
}
.text-logo {
	min-width: 0%;
    max-width: 100%;
	font-size: 2vw;
	letter-spacing: 1.74vw;
	overflow: hidden;
}

.inner-content form{
	text-align: center;
}
.cmp-subscribe input[type="submit"]{
	width: 25vw;
	margin-left: 0vw;

	margin-right: -10vw;
}
.cmp-subscribe input[type="email"]{
	width: 75vw;
}

input {
	display: inline;
    background: transparent!important;
	background-blend-mode: transparent!important;
}
input[type="email"] {
    font-size: 1.5vw;
    letter-spacing: 2vw;
	text-indent:0vw;
}
input[type="submit"] {
    font-size: 1.5vw;
    letter-spacing: 2vw;
}

input {
    border: transparent!important;
}

PS.: It also works smoothly in my Firefox now. Must have been some external issue.

Thanks,
Chris

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

You can try this:

@media only screen and (max-width : 520px) {
    input[type="email"],
    input[type="submit"],
    .cmp-subscribe input[type="email"] {display:inline;}
}

Works! Thank you, Alex

May I also ask what might cause the white bar/margin on the right side of the window, next to the background video?

And a bit off topic: Would you recommend a youtube-video-background or a self hosted video?

Yup, remove paddings from this element in your CSS

.inner-wrap {
    padding-right: 1vw;
    padding-left: 1vw;
}

or insert additional CSS to reset it

.inner-wrap {
    padding: 0;
}

Regarding the background video, if the size of the video (not your case) is quite big (more than 10MB) I would suggest YouTube as they have faster servers. But in your case I think it really does not matter. I checked your website speed and it loaded slightly after 500ms, which is great!

Alex

Also works, thanks again!

I was thinking about giving youtube a try, because I had to compress the video in way that makes it very noisy to achieve the loading speed. And youtube might be able to switch between several levels of quality depending on the user’s bandwidth.

Moreover, I have some more issues that I can’t get rid of.
-On my mobile phone the “join/submit” button is positioned just a few pixels lower than the email input field.

-Also on my mobile phone (Android) the active word I’m typing is underlined wich somehow ruins the “floating” character of the layout in my case. I’ve tried to suppress it. WordPress/Android wasn’t too impressed. No effect.

-I also tried to adjust the font-size and letter-spacing in the footer/copyright section relative to the the viewport width. I works in most cases. Only if the window is very wide, a line break occurs. I tried to maximize the footer section to width=100vw without success. I tried the same with the “subscribe-response”-texts. No effect at all.

-Is there way to reduce the distance/space between the headline/title and the e-mail-field+button-line beneath? Is there also a way to adjust the vertical position of both lines?

.body {
    max-width: 100vw;
	width: 100vw;
    margin: 0
	overflow: hidden;
	
	font-size: calc(5px + .8vw);
	letter-spacing: 0.1vw;
	
}
.background-wrapper {
    max-width: 100%;
	width: 100%;
    margin: 0
	overflow: hidden;
}
.inner-wrap {
    max-width: 100%;
	width: 100%;
    margin: 0;
	padding-right:0vw;
	padding-left:0vw;
	overflow: hidden;
}
.inner-content {
   	max-width: 100%;
	width: 100%;
    margin: 0;
	overflow: hidden;
}
.text-logo-wrapper {
	max-width: 100%;
    
    
	overflow: hidden;
}
.text-logo {
	margin: 0.6vw;
	min-width: 0%;
    max-width: 100%;
	font-size: 2vw;
	letter-spacing: 1.75vw;
	overflow: hidden;
	text-align: center;
}

.inner-content form{
	text-align: center;
}
.cmp-subscribe input[type="submit"]{
	width: 25vw;
	margin-left: 0vw;

	margin-right: -14vw;
}
.cmp-subscribe input[type="email"]{
	margin-left: -10vw;
	width: 75vw;
}

.subscribe-response {
	text-align: center;
	font-size: calc(5px + .8vw);
		letter-spacing: 0.1vw;
}
.subscribe-overlay{
	text-align: center;
}
.copyright {
		font-size: calc(5px + .8vw);
		letter-spacing: 0.1vw;
		
	}

.footer{
	width: 100%;
	max-width: 100%;
}

input {
	display: inline;
    background: transparent!important;
	background-blend-mode: transparent!important;
}
input[type="email"] {
    font-size: 2vw;
    letter-spacing: 3vw;
	text-indent:0vw;
	font-weight: 500;
	
}
input[type="submit"] {
    font-size: 2vw;
    letter-spacing: 4.6vw;
	padding-right:0vw;
	margin-right:0vw;
	text-transform: lowercase;
	font-style: italic;
	text-align: right;
	font-weight: 500;
	color: hsl( 0, 0%, 100%);
}

input {
    border: transparent!important;
  border-bottom: none!important;
  box-shadow: none!important;
}

@media only screen and (max-width : 520px) {
    input[type="email"],
    input[type="submit"],
    .cmp-subscribe input[type="email"] {display:inline;}
/*
	.copyright {
		font-size: 2vw;
	}
*/
}

.input-icon::before, input[type="email"], input[type="text"] {
    color: hsl( 0, 0%, 100%);

Sorry for all the questions & Good night/morning:)

Chris

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

Any ideas on maybe one of these questions anyone? A link to some info would be cool enough to start with

Thanks,
Chris