I have a MailChimp 4 WordPress signup form embedded in a widget. I am trying to place a border around either the form or the widget on https://www.taastrategies.com/blog/. I used Inspect to identify the form's class as "mc4wp-form mc4wp-form-2449", then added the following to >Appearance >Customize >Additional CSS provided by Generate Press:
/* border around mc4wp form */
.mc4wp-form mc4wp-form-2449 {
border: 2px solid;
}
No border appears ... what am I missing here? Thanks.
You are not hitting the right element. It should be aside#mc4wp_form_widget-2. Try this code below:
aside#mc4wp_form_widget-2 {
border: 1px solid violet;
padding: 29px;
}
Related
I am unable to add borders to the tabulator table using the tabulator 4.2.3 css file.
I've tried changing the -is-bordered classes but the displayed table show no border. I find the Bulma theme pleasing but need borders to make it more table and data entry friendly for my users.
CSS section referenced below:
.tabulator.is-bordered {
border: 1px solid black;
}
.tabulator.is-bordered .tabulator-header .tabulator-col {
border-right: 1px solid black;
}
.tabulator.is-bordered .tabulator-tableHolder .tabulator-table
.tabulator-row .tabulator-cell {
border-right: 1px solid black;
}
I thought I would have 1px Black border around each cell and header, but it still shows as no border.
The is-bordered class is working in v 4.4.3.
Are you sure you are only including the tabulator_bulma.css. if you include the tabulator.css as well the two will fight against each other.
I'm looking for a way to remove the border around the event picture and event title on my main Page ( ofen49ers.de ).
Adding a custom class to the section and changing the border value to 0 dosen't seem to work. Maybe someone has an idea to remove the border.
Here the CSS I used:
.custom-class-event-front {
border: 0px !important;
}
You can try this
.fusion-events-shortcode .fusion-events-thumbnail, .fusion-events-shortcode .fusion-layout-column .fusion-column-wrapper {
border-width: 0!important;
}
<style>
.post-content .fusion-column-wrapper,
.fusion-events-thumbnail.hover-type-none
{
border: none !important;
}
</style>
Custom CSS in WordPress while I'm trying to apply bottom border for posts in home page, border is applied to all posts in the page, I need a border for only few posts.
Code I used:
.post { border-bottom: 2px solid #dbdbdb !important; }
Just create a new class and add it to the post that you want to have with border-bottom.
.border {
border-bottom: 2px solid #dbdbdb !important;
}
-- UPDATE --
I just copy-pasted his code, use this:
.border {
border-bottom: 2px solid #dbdbdb;
}
If you need the border-bottom for only few post. You have multiple post and give the posts with which you want the border-bottom another class.
Say all your all post has .post you could add another class to those you want border-bottom.
I am using this snippet to get a line above the header that shows on all of my pages. I use wordpress.
/* line at the top */
body, body.fixed_width {
border-top: 4px solid #000;
}
I want to show this at the top of one page only or lets say on the top of the home page only. Is this possible?
Simply use this
body.fixed_width {
border-top: 4px solid #000;
}
It will show only in that page where you use .fixed_width class in a body tag
Most themes put the body of the home page in a class called home.
Try this:
body.home, body.fixed_width.home {
border-top: 4px solid #000;
}
I would like to "graphically disable" a combobox in extjs by appling a CSS class to remove the borders while the user does not click on it.
How can I apply this CSS class? It is not the border of the field but of a wrapper which wrap both field and picker.
(I have the same problem for datefield)
Ext applies special CSS classes when fields are focused, so that's rahter easy to do focus-dependent styling. Use dev tools to explore the markup and see what you need to change.
For example, for removing all visual clues that it is a field from a combo that is not focused, use this CSS (example fiddle):
.custom-combo .x-form-field:not(.x-field-form-focus) {
border: 1px solid transparent;
background: none;
}
.custom-combo .x-form-item-body:not(.x-form-trigger-wrap-focus) .x-form-trigger {
background: none;
border-bottom: 1px solid transparent;
}
I use border: 1px solid transparent instead of border: 0 to prevent a 1px offset when the combo get focused.