Docs

[fernandocd79]

Hi Support,

I’d like to lower the margins (top, bottom, left and right) of textbox (see attachment) for the whole theme (see attachment). In other words, i’d like the text in the textbox be close to the top, bottom, right and left lines of the box. How could I get this?

Also, how could I make the border lines thicker/bolder?

Thanks in advance

Fernando

[Nico]

Hi There,

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

Thanks.

[fernandocd79]

Hi Support,

You are right. Here it goes: http://www.spanishgurus.com

Thanks

[Christopher]

Hi there,

To remove margin from headings, add class="man" attribute to heading tag.

e.g : <h4 class="man" style="text-align: center;">Fill in the form with your inquiry and we will get back to you in <strong>less than 24 hours</strong>:</h4>

Please add class="man" to <p> tags to remove bottom margin.

Hope it helps.

[fernandocd79]

Hi Support,

I actually want to remove the margins for the data-entry boxes of the contact form (see attachment)

Actually, how should I create a new class (say manual-adjustment) so I can adjust the top, bottom, right and left margins of the data-entry boxes in contact forms?

Thanks

Fernando

[Rupok]

Hi Fernando,

Thanks for updating. Do you really want to remove the border? In that case you can add this under Custom > CSS in the Customizer.

.wpcf7 select, .wpcf7 textarea, .wpcf7 input[type="text"], .wpcf7 input[type="password"], .wpcf7 input[type="datetime"], .wpcf7 input[type="datetime-local"], .wpcf7 input[type="date"], .wpcf7 input[type="month"], .wpcf7 input[type="time"], .wpcf7 input[type="week"], .wpcf7 input[type="number"], .wpcf7 input[type="email"], .wpcf7 input[type="url"], .wpcf7 input[type="search"], .wpcf7 input[type="tel"], .wpcf7 input[type="color"] {
  border: medium none;
}

Hope this helps.

Cheers!

[fernandocd79]

Hi Support,

Thanks for the code. (1) But what I want to do is remove is the margin between all the boxes in the site. I’ve sent two self-explanatory screenshots. Ideally, I will be able to control the gap between the text and the border.

(2) By the way, how can I increase the strength of the width of border line. I’m sending an screenshot of how it’s done in Word.

Regards and thanks in advance

Fernando

[Friech]

Hi Fernando,

#1 The gap of the text and border is determined by the height of the field itself. You can utilize the custom css below to control the said gap.

.wpcf7 input[type="text"],
.wpcf7 input[type="password"],
.wpcf7 input[type="datetime"],
.wpcf7 input[type="datetime-local"],
.wpcf7 input[type="date"],
.wpcf7 input[type="month"],
.wpcf7 input[type="time"],
.wpcf7 input[type="week"],
.wpcf7 input[type="number"],
.wpcf7 input[type="email"],
.wpcf7 input[type="url"],
.wpcf7 input[type="search"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="color"] {
    max-height: 40px;
    border-width: 2.25pt;
}

#2 You can adjust the border-width: 2.25pt; on the above css code.

Hope it helps, Cheers!

[fernandocd79]

Hi Support,

Thanks so much.

I still have some questions:
– How to apply reduce the margins in other data-entry boxes of the site such as Ess. Grid filters (See filter in https://www.spanishgurus.com/blog/), or in filter in the blog search function (https://www.spanishgurus.com/blog/), or in enter email address (https://www.spanishgurus.com/blog/dele-exam/), or in Newsletter registration (bottom of https://www.spanishgurus.com/blog/)

– In Contact Form 7, in the types select and text area, the max-height: 40px and border-width: 2.25pt doesn’t seem to work although I added this code (.wpcf7 input[type=”textarea”],.wpcf7 input[type=”select”]). See attachment

Additionally, I know how to change the border width, but how can I change the color of the border line of the data-entry fields?

Thanks and regards

Fernando

[Friech]

Hi Fernando,

Yes, the given css code above is specific for contact form 7 input fields. To make the style global, please update the code to:

body textarea,
body select,
body input[type="text"],
body input[type="password"],
body input[type="datetime"],
body input[type="datetime-local"],
body input[type="date"],
body input[type="month"],
body input[type="time"],
body input[type="week"],
body input[type="number"],
body input[type="email"],
body input[type="url"],
body input[type="search"],
body input[type="tel"],
body input[type="color"] {
    max-height: 40px;
    border-width: 2.25pt;
}

Hope it helps, Cheers!

[fernandocd79]

Hi Support,

Thanks for the code. For some reason it’s not working (see attachments)

Additionally, I know how to change the border width, but how can I change the COLOR of the border line of the data-entry fields?

Thanks and regards

Fernando

[Rupok]

Hi there,

Thanks for updating. I can’t see the code on your site, so check if you saved this correctly or not. Also you are using a cache plugin that’s minifying too much. It might cause the issue as well.

You can use border-color: #333; to specify the border color or use the border color and width together :

select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input {
    border: 1px solid #333!important;
}

Hope this helps.

Cheers!

[fernandocd79]

Thanks Rupok 🙂

[Christopher]

You’re welcome.

[usfinancial]

Hey I am having a similar problem. I am using the CSS code

.wpcf7 input[type=”text”],
.wpcf7 input[type=”password”],
.wpcf7 input[type=”datetime”],
.wpcf7 input[type=”datetime-local”],
.wpcf7 input[type=”date”],
.wpcf7 input[type=”month”],
.wpcf7 input[type=”time”],
.wpcf7 input[type=”week”],
.wpcf7 input[type=”number”],
.wpcf7 input[type=”email”],
.wpcf7 input[type=”url”],
.wpcf7 input[type=”search”],
.wpcf7 input[type=”tel”],
.wpcf7 input[type=”color”]
.wpcf7 input[type=”select”]{
max-height: 50px;
border-width: 2.5pt;
border-color: black;
}

It works for all the areas besides the input type select. You can see this on http://www.usfinacial.com/purchase

I do not know what I am doing wrong.. This might be a stupid question. Any help would be appreciated.

[Author]

Posts