- This topic has 11 replies, 3 voices, and was last updated 7 years, 5 months ago by
.
Hi,
How have you applied the css ? There’s a lot of way to do it and I will guide you to 3 of them:
1) Add your custom css in your theme’s custom css (if possible), using the good selector for your different elements. The reference is the Method 1 here. All your different selectors can be find in the advanced settings of an element.
2) You can add an html element to the form (select it from the “More” section) and apply your style into it, using the good selector for your different elements. The reference is the Method 2 here. All your different selectors can be find in the advanced settings of an element.
3) Style the element directly in the Settings > Advanced of each elements applying the css. You can see an example here for styling an element.
Maybe your styling was interfering with the dropdown menu. We will fix this first and then dropdown. Don’t be shy if you need help with custom css.
Regards,
Félix
Hi,
Don’t forget that the Global CSS Styles applies to all the fields of the same type in one form. To use this, choose your element, click on the “+ CSS” and add the css in that writing form:
text-align:center;For example, if you want to reduce the height of the paragraph element text, you can add :
height: 50px;To change the text size :
font-size: 8px;
To change alignment (centering) :text-align: center;
To change the text color (in this case to red) :color: red;You have to apply these to the right element.
I suggest you use each element’s advanced settings instead of using Global Styling. You can choose on which part of the element you want to apply styling. Let’s say you want to change the text color of your textarea placeholder, you could add this css
color: red;to the textarea input.Hope this helps,
Regards,Félix
Hi,
1) It’s conflicting with your theme’s css. Try to add
.selection-box:after {height: 28px; border-bottom: solid 1px #CCC;}to your custom css.2) Apply this style to your custom css:
.iphorm_1_1-element-spacer{ background-color: white; box-shadow: 0 2px 2px -2px rgba(50, 50, 50, 0.5); padding: 10px; margin-bottom: 10px; border: solid 1px rgba(50, 50, 50, 0.5); }And this style to your custom css :
.iphorm-element-text .iphorm_1_1 { background-color: rgb(241, 249, 255); border: 1px solid rgb(199, 199, 199); }3) In Settings – Style – Global Styling – Add a style – Add Submit button inner wrapper. Add the CSS:
float: none; margin: 0 auto;4) Add this CSS to the submit button inside em (you’ll probably need to add the background-color to the span too) :
background-color : red;
padding: 20px;It will add 20px padding on all sides of the text. Let me know if you need more.
Regards,
Félix
Hi,
It’s conflicting with theme’s css. You can see it it works when you comment out the css applied to the .selection-box in your theme’s css.
.selection-box { position:relative; clear:both; } .selection-box:before, .selection-box:after { content:""; pointer-events:none; position:absolute; } .selection-box:before { z-index:1; right:17px; top:5px; bottom:0px; height:0px; margin:auto; border-left:7px solid transparent; border-right:7px solid transparent; border-top:7px solid; } .selection-box:after { width:48px; height:48px; right:0px; top:1px; border-left:1px solid; border-right:1px solid; } .selection-box select { margin-top:0px; }You could just comment out this styling. You can then remove the css I told you to add for the selector and it will work. Remember to use a child theme if modifying the theme.
Hope this helps !
Félix
- You must be logged in to reply to this topic.