One has a ConvertKit form, that was added using ConvertKit plugin, and uploaded on a widget as follows
After applying some styles, when I am logged in, the form looks like this
However, when I log out, there are some default styles being loaded and the form ends up looking like this
How does one remove ConvertKit default stylings?
There may be different ways of removing the default styles applied by ConvertKit. I have tried the following, but with no success:
Inspecting the form in the front-end, one sees that inside a form with the class "seva-form formkit-form", apart from two div, one has a style element., as follows
<form class="seva-form formkit-form">
<div class="formkit-background">...</div>
<div data-style="minimal">...</div>
<style>...</style>
As I have seen that removing the style block <div data-style="minimal">...</div> solves the issue with the form, tried, as per #m4n0's suggestion applying .formkit-form div[data=style="minimal"] { display: none; }, but it didn't solve the problem.
Based on your changing requirements that we discussed through comments:
form.formkit-form[data-uid="3624b8b144"] {
border: transparent;
margin: 0 auto; /* To center the form, you can also use flexbox centering */
}
/* I had to increase the specificity of the below selector because there are other selectors acting on it */
form.formkit-form div.formkit-powered-by-convertkit-container a.formkit-powered-by-convertkit {
display: none; /* To hide the copyright but check how their licensing works */
}
.formkit-guarantee a {
color: #fff; /* To change the color of privacy link */
}
Output:
Related
Let's assume that the user can add styles for every component in admin panel and I get it as string in my Node server:
const stylesFromAPI = ".p { color: red } .bg { background: lime }";
How to prefix this styles before append to my document to avoid conflicts?
I need something like CSS modules but working with strings (not as module loader):
const stylesFromAPI = css(".p { color: red } .bg { background: lime }"); // returns hashedClassname685946898456
<SomeCompontent className={stylesFromAPI} />
produces:
<style>
.hashedClassname685946898456 .p { color: red }
.hashedClassname685946898456 .bg { background: lime }
</style>
<div class="hashedClassname685946898456"></div>
Shadow DOM seems like a reasonable option here. You can create your style tags with inside the shadow DOM without having to deal with any selector prefixes. For example, using the react-shadow package:
import root from 'react-shadow';
Then in JSX, something like:
<root.div>
<style type="text/css">
{/* CSS string here */}
</style>
<div>
{/* Stuff here */}
</div>
</root.div>
Check out a working example of this here: https://github.com/joshdavenport/stack-overflow-61566764-react-css-shadow-dom
The main downside here is your styles from outside the shadow DOM will not apply. Those using the shadow DOM for components see this as a good thing, those simply trying to scope CSS do not. Not sure what it is you're scoping, so I can't really tell if that would be an issue for you.
If it is, you could re-import your styles within the shadow DOM, though I can't really point out how to do that without knowing what bundler is in use and how it is in use.
Alternatively you could pull apart your imported CSS using the css package, iterate over the selectors prefixing all with a randomly generated class, and then re-stringify.
Vaadin text field has a default underline. I want to remove it.
I am using it inside of a Vaadin combo box.
In dev tools I can see that a div with the attribute part="input-field" is the cause.
Setting it to display: none; works in the browser.
I can't seem to target it with code. I've tried the following:
`[part="input-field"] {
display: none !important;
}
.vaadin-text-field-container [part="input-field"] {
display: none !important;
}`
Add Viritin add-on (use latest version) to your project, and configure:
TextField field = new MTextField().withSpellCheckOff();
OR
you can use the low level API to configure the html element:
new HtmlElementPropertySetter(yourTextInputComponent).setProperty(
"spellcheck", false);
I solved it by adding this module to the HTML file.
I placed this above the first script tag in the file.
<dom-module id="vaadin-text-field-module" theme-for="vaadin-text-field">
<template>
<style>
div::before, div::after {
display: none;
}
</style>
</template>
:before is the underline before the input has a value and :after is the line after.
Therefore this would disable both.
[part="input-field"] disabled the input and the value was not seen after selection.
I have a set of div whose visibility is set to either hidden or visible. Based on this css visibility property i need to add the css property on those div, like
<div class="div-class" style="color:#ff0000; margin: 0px 10px; visibility:hidden;">
[Block of Code]
</div>
Now i need to define the following in style.css file.
.div-class:visible {top:10px;left:50px;}
.div-class:hidden {top:0px;left:0px;}
Is this possible???
yes with css attributre selectors you can do it
try the below css:
.div-class[style*="visible"] {
color: green;
}
.div-class[style*="hidden"] {
color: red;
}
What you are trying to do is not "really" possible.
I mean it's ill thought by design in the first place.
Even Vamsikrishna's solution might not work as expected.
If you set the overflow property to hidden via javascript or inline styles, the .div-class[style*="hidden"] rule will apply since the style attribute will contain the hidden string.
Moreover , setting inline styles on html elements is bad practice itself in most cases.
I suggest you try and learn css principles a little more.
I'd do the following:
HTML
<div class="div-class div-hidden">
[Block of Code]
</div>
CSS
.div-class {color:#ff0000; margin: 0px 10px; top:10px;left:50px;}
.div-hidden {visibility:hidden;}
.div-class.div-hidden {top:0px;left:0px;}
Then you can use javascript to toggle the "div-hidden" class.
You can do something using attrchange - a jQuery plugin ,
like this:
Add "attrchange" script into HTML page like
In Javascrip catch event
var email_ver_input = $("input#email_ver_input.verifyInput");
email_ver_input.attrchange({
trackValues: true,
callback: function (event) {
if (email_ver_input.is(":visible")){
$("#inputcode_wrap").show();
}
}
});
Is there a way that I can select a textarea such that $('#id_of_textarea').val() in jQuery will be ''? I tried using :empty. I saw that CSS provides a way to select empty inputs because the text is in the value attribute ([value=""]). Is there an attribute for the text in a textarea?
I'm looking for a selector that will work with CSS, not just jQuery.
Best solution I can think of is a CSS 3 workaround. Set the field to required (and unset it on submit if need be). Then you can use
textarea:invalid { /* style here... probably want to remove box-shadow and such */ }
this works in recent browsers except edge (at the moment):
textarea:placeholder-shown {
/* this should be active only when area is empty and placeholder shown */
}
so with jQuery for example you can pick all empty textareas:
$('textarea:placeholder-shown').val()
https://developer.mozilla.org/en/docs/Web/CSS/:placeholder-shown
If you're using React, then this is the solution:
textarea:not(:empty) {
// Apply css here
}
For instance,
/* Apply style when textarea contains text */
textarea:not(:empty) {
border: 6px solid blue;
padding: 6px;
}
Working demo:
Textarea - Select empty textarea using CSS
Note: While this works perfectly in React (because of re-painting caused by state update), It does not provide the same response if implemented using Vanilla HTML + CSS.
This works fine, as with input:
<textarea name="comment" id="comment" class="authority_body-input" data-val="{$form.comment}" onkeyup="this.setAttribute('data-val', this.value);">
textarea.authority_body-input:not([data-val=""]):not(:focus) {
color: red;
}
You can use the :empty css pseudo-class.
See an example in jsfiddle.
In the example there is a button for dynamically add new empty textareas to the DOM, so you can see that the new elements also are affected with the pseudo-class.
The code in the example was tested in Firefox 5.0, Opera 11.50 and Chromium 12.
Also, you can see a good description for the :empty pseudo-class here.
For those who are using AngularJS, you can use ng-class in your view to add a class to your textarea to know if it is empty or not.
HTML :
<textarea ng-model="myForm.myTextArea"
ng-class="(myForm.myTextArea.length)?'not_empty':'empty'">
</textarea>
CSS :
textarea.empty {
background-color:red;
}
textarea.not_empty {
background-color:blue;
}
Here is a jsfiddle.
I'm trying to create a menu system, which is dynamically resizes itself horizontally to fill out depending on how many "li" entries there are, I'm dynamically creating the webpages with XSLT. My thoughts are whether this is possible todo within CSS?
Here's my CSS specifically for the HTML page
nav[role="navigation"] li {
float: left;
width: 10.00%; /* I want to dynamically set this width */
}
Snippet of HTML in question
<nav role="navigation" count="2"><?xml version="1.0" encoding="utf-8"?>
<ul>
<li>
Movies
</li>
<li>
News
</li>
<ul>
</nav>
My thoughts are of whether something like this would be possible to call the CSS with a parameter, or am I going against it's declarative ways?;
nav[role="navigation"] li param {
float: left;
switch(param)
{
case : 5
{
width: 20.00%;
}
case : 3
{
width: 33.33333%;
}
}
}
CSS is not a programming language. CSS3 has a bit of logic here or there, but no switch().
For your purposes, the simplest solution by far is a touch of javascript, supplied here assuming that you use jQuery:
var $navLis = $('nav[role=navigation] > ul > *');
$navLis.addClass('count'+$navLis.length); // add a class to every li indicating
// total number of list items
Then in your CSS:
nav[role=navigation] li { /* default styling & width */ }
nav[role=navigation] li.count2 { /* your conditional styling */ }
nav[role=navigation] li.count5 { /* your conditional styling */ }
/* etc */
or just set the width directly with jQuery:
$navLis.style('width', (100/$navLis.length)+'%');
If you demand pure CSS, then get out your logic hat and look over the CSS3 selectors specification. You can construct some Byzantine and rather brittle CSS code to fake logic, such as the following selector.
nav[role=navigation] li:first-child + nav[role=navigation] li:last-child {
/* matches last of two items if a list has only two items */
}
If you're using a CMS that knows how many items it is going to be putting in the list, then you can get fancy on your server backend by adding little bits of PHP to your CSS:
<?php header('Content-type: text/css');
if (isset($_GET['navcount']) && $_GET['navcount'] != "") {
$navcount = $_GET['navcount'];
} else { $navcount = 5.0; } // Default value
?>
/* ... your css code here... */
nav[role="navigation"] li {
float: left;
width: <?php echo (100.0/$navcount); ?>%;
}
Then you request the CSS/PHP script like this from your HTML:
<link rel="stylesheet" type="text/css" href="/path/to/style.php?navcount=5" />
There's a few great tools out there for writing stylesheets that mix down nicely into CSS, and some even provide PHP implementations to do so dynamically. The strongest CSS extension right now is Sass, which has just the sort of syntax that you're looking for. I'd recommend using Sass through Compass, which is a framework for Sass that really gives it some teeth. You can parse Sass into CSS on-the-fly in PHP using phamlp
Although Compass (and Sass) are awesome tools, plugging them into an existing project could be more trouble than its worth. You might just want to do simple logic using Javascript.
have you tried LESS?
LESS extends CSS with dynamic behavior
such as variables, mixins, operations
and functions. LESS runs on both the
client-side (IE 6+, Webkit, Firefox)
and server-side, with Node.js.
It is not possible with simple CSS.
But for this specific example, you might look at the display: table-cell; property.