Hi
Just trying out Blocs and so far so good. There are some styling issues I am running into while trying to style the form like this one
How can I change the focus state?
I can link to my site if that helps
thanks
Hi
Just trying out Blocs and so far so good. There are some styling issues I am running into while trying to style the form like this one
How can I change the focus state?
I can link to my site if that helps
thanks
Hi Daniel @danniboy
Not sure what you mean by focus state ? Do you mean hover ?
A link would be great and if you can exactly describe what you would like to achieve from the site ceda-nepal?
MDS
Thanks for your reply
The focus selector
Here is a link to a simplified copy of my project Dropbox - test.bloc.zip - Simplify your life
Here is a screenshot of my form
As far as what I want to copy from the ceda-nepal I want the fields and button (hover in the case of the button) to behave in a similar way ie get a little brighter when active. You can see from my screenshot that the field background turns white and there is this blue border around that I would like to remove. I am sure I could do it manually though.
Okay I had a first look at your file. It appears you have created many custom classes however have not applied them to the correct elements. For instance, you have a class form-input which is applied to DIVs instead of input and a class form applied to input.
You can check on the left hand side where the classes have been applied.
Additionally, you have set your button and text in white whilst the cedar-nepal is set in grey and the hover state in white. You will need to set your button and text in grey for normal state if you want to have the same effect.
Unfortunately, I am pretty busy at this time but willing to send you back a “corrected” file tomorrow if you can wait. Let me know.
MDS
Hi guys,
I didn’t check your project files but made a quick tutorial and a demo .bloc
Form-style.bloc (199.6 KB)
Cheers / Johny
thank you for making and sharing the video.
The bloc link it not setup correctly
Thanks so much. This solves it completely. One final question what about the blue outline of each field you have selected? You can see it around the message field when there are 5 seconds left in the clip
@MDS thanks. Yeah I know the classes are all over the place and its shoddy.
Hi Johny @Jakerlund
@KBConcepts is saying that the link for the bloc does not work - it goes straight to Page not found.
BTW thanks for the video.
MDS
I found it in the console. Its from the Bootstrap styles but I cant find how to override it in Blocs.
box-shadow: 0 0 0 .2rem rgba(201, 255, 5, 0.25);
I figured it out. Its .form-control:focus and normal state.
Am I wrong in thinking that Blocs should show the styles from Bootstrap in the class editor so you can see what you are changing from?
The form works fine if you configure the “Send To” field and upload it to your web host.
It won’t work locally since it need php on the server to handle the form.
Here’s how you get rid of that blue “field select” border.
Cheers / Johny
Hi Johny @Jakerlund
I have no issue with your form
It is the link of the bloc you uploaded in your post that does not work as @KBConcepts pointed out. If we click on the demo bloc link you provided in your post…
we get the following error:
MDS
Hi @MDS
Ok, now i get it.
That’s wierd, it’s just a .bloc file uploaded to this forum.
Lets try it agian… (with the blue selection border removed)
Form-style-2.bloc (200.7 KB)
And here’s a responsive .bloc with the “name” and “e-mail” fields in a two column layout (like the original site) and swapping to a one column layout on mobile.
Form-style-4.bloc (201.1 KB)
Excellent. Thanks
Excellent thread on contact form styling.
Just wondering how to make the option select bric have a white background?
Thanks!