I'm working on a client's website using the Wordpress Divi theme https://www.nationwidescents.com/ I didn't use it but I've ran into a few troubles customizing things that disagree with this theme (has anyone else had that issue?)
So in the footer on the bottom right, I'm trying to add the mailchimp signup box. It's there now but I want the width to be wider (100%). I've tried in-line css on the embed code and also trying these class tags with the width CSS in the additional CSS:
.input#mce-EMAIL.email
#mce-EMAIL.email
.email
#mce-EMAIL
.mc_embed_signup_scroll
Still haven't cracked it. any suggestions?
Could you please try:
#mc_embed_signup input#mce-EMAIL {
width: 100%;
}
The thing with your selector is that they all match, BUT there is already a selector with a "width: 50%" attribute: #mc_embed_signup input.email
This selector overrides your selectors and therefore the 50% remained. You could use this calculator to check or read up on CSS specificity.
Hope this helps!
Related
I'm trying to fix an alignment issue that's caused by a row of social media share buttons, specifically the code generated by the Google+ button. I didn't set this site up and I'm not sure how the button was implemented, only know that it was part of an AddThis plugin or something.
The Google+ button seems to automatically generate a div with inline CSS styling:
<div class="google_plusone_iframe_widget" style="width:90px;height:25px;">
I need to get rid of the width and height, but how can I override it externally? I've tried the following but it didn't work:
div.google_plusone_iframe_widget[style] {width:auto!important; height:auto!important;}
Does anyone know how I can do that? Thank you in advance! Here is the page for reference, I am referring to the top left social media buttons:
http://www.canadianoutback.com/events/crime_investigators.php
Your CSS selector should be:
.google_plusone_iframe_widget {width:auto !important; height:auto !important;}
Remove that [style] attribute in your selector, and there's no need to specify the div tag.
Try to add this code #leftNav .addthis_toolbox .google_plusone_iframe_widget {width:auto!important; height:auto!important;} to make it.
Could please try this once #leftNav a.addthis_button_google_plusone .google_plusone_iframe_widget[style] {width:auto!important; height:auto!important;}
Please do try with this
#leftNav a.addthis_button_google_plusone.at300b .google_plusone_iframe_widget {
width: auto !important;
height: auto !important;
}
If it is inside iframe we can't apply any style or script for it.
How I can remove space between wordpress Divi theme's sections?
Vasili has a great answer, however, when you view the properties of a row/column in the Divi builder - you will see two rows of settings for Custom Margin and Custom Padding. These will be under the regular options on some elements, and under Advanced Design Settings on others.
By default those are left blank, however that does NOT mean that they are set to 0. If you change the padding on top/bottom and margin on top/bottom to 0 you should be able to remove the space without having to use code, and a ton of CSS !important tags.
As a general rule of thumb, avoid !important tags as much as possible. Overwriting certain rows in DIVI is not always going to be effective - you may have a row where you need padding on one page, and twenty that you don't on others. I would suggest trying to do as much as possible through the builder, if that is what you are using to build the page.
To make this more useful for beginners.
Without using code you can try if just putting another row within the same section is enough for you.
If not we could do what poostchi has done we can change the css for the section.
Now if you go to your website and right click a section and select inspect element (assuming your browser is chrome) you will see your section coded like this.
<div class="et_pb_section et_section_regular" style="background-color:#2388e0;">
<div class="et_pb_row">
<div class="et_pb_column et_pb_column_4_4">
<div class="et_pb_text et_pb_bg_layout_dark et_pb_text_align_left">
This is row 1 section 1
</div> <!-- .et_pb_text --><div class="et_pb_text et_pb_bg_layout_light et_pb_text_align_left">
this is row 2 of section 1
</div> <!-- .et_pb_text -->
</div> <!-- .et_pb_column -->
</div> <!-- .et_pb_row -->
</div>
Here we see they are using the class et_pb_section
clicking on the class name will show the class css code which has the 50 pixels padding value:
.et_pb_section {
padding: 50px 0;
position: relative;
}
So all we have to do is overwrite the padding value there to 0 which was what pootschi has done.
.et_pb_section{
padding-top: 0px !important;
}
the !important tells css to overwrite with this.
But by doing this ALL your sections DIVI defined padding value will be overwritten.
So what if you only want to reduce a gap for only a specific section?
Divi has included the css ID an css CLASS to allow better customization over their sections an modules. You can find this by clicking on the edit button of our section.
CLASS method
Give your section a CSS CLASS name: reduce_top_padding_here
then you can do this.
.reduce_top_padding_here {
padding-top: 0px !important
}
Now where do we put this css code?
Divi has allowed easy css edit by going into
Appearance > Divi Theme Options > General Settings >
scroll down to find "Custom css" (paste the code in here.)
Explanation:
Here you have created your own css class. So ONLY the section or module that you give this class name to, will inherit this css display instruction to give the top padding 0 pixels. Instead of over writing DIVI's main .et_pb_section class.
Note the dot in front of the class name means in css that name is a class.
So summary to edit a specific section
1- Give your section a CSS CLASS
2- then define that CSS class value in divi theme options > "custom css"
I'm not sure if Divi theme had this at the time but if you go to the Divi Theme Customizer > General Settings > Layout Settings there's Section Height and Row Height.
For mobile go to the Divi Theme Customizer > Mobile Styles, Phone and Tablet both have section and row heights.
You still may need some CSS.
I just found it!
.et_pb_section{
padding-top: 0px !important;
}
I would like to expand on what Vasili has shared, in order to provide a more complete answer (especially regarding the exclusion of full width sections).
I suspect Alex Seidler's answer has missed the point. I suspect the questioner wants to remove this padding site wide. Doing that via the Divi builder, as he suggested, is going to be very tedious and will in fact introduce a lot more (Divi generated) additional CSS to the site, including all the !important tags (regarding that, see the last note at the end of this answer).
Just as Vasili and the person who asked the question has pointed out, the following code will override the padding on all sections.
.et_pb_section{
padding-top: 50px !important;
}
Note, that 54px top and bottom is currently the default on screens over 1350px. 4% is the default on screens 981p and less. I say "currently" because I recall it used to be 50px. It might still be 50%. Whatever the case, reduce this according to your needs. The questioner wants all spacing removed, in which case set it to padding-top: 0 !important.
Excluding full-width sections
The above-mentioned change may have some undesirable effects if you use any full width sections. If that occurs, you may want to exclude those sections, with the following:
:not(.et_pb_fullwidth_section).et_pb_section {
padding-top: 50px !important;
padding-bottom: 50px !important;
}
Remember, this will impact all rows, within all sections.
Specific Sections only
If you want to only override the padding on specific sections, use the suggestion made by Vasili in his answer.
Reducing Row padding
Anyone wanting to reduce the default section vertical padding might also find themselves wanting to reduce Row vertical padding.
For that, add this CSS to your child-theme styles.css file:
.et_pb_row { padding-top: 30px !important; }
30px is the default. Reduce this to suit your needs.
Specific Rows only
To reduce specific rows only, you can either do it on a row-by-row basis in the Divi Builder "Design" tab for the row(s) in question, or you can give the rows a unique class (in the "Advanced" tab of the row settings), and then apply the settings to that class in your your child-theme styles.css file. This is the same process as changing specific sections. For example, give the rows the class `row-reduced-top-padding' and then it the styles.css file:
.row-reduced-top-padding { padding-top: 10px !important; }
The advantage of this method is it is much faster to adjust the settings later on, especially if you've applied this to quite a few rows.
Avoiding !important, not possible
As for the comment from Alex Seidler about avoiding using the !important tag: Whilst it's true it's best to avoid this, in this situation it's unavoidable. Last time I checked, even Divi itself will use the !important tag when you make changes to the margins and padding of sections and rows via the Divi Builder. This is because it is also having to over-ride the site-wide defaults, which have already been declared by Divi.
I'm working on a Wordpress site and I'm quite new to this framework. There's some CSS on my page that's causing each "row of content" to have a 35px margin between it. This appears to be in a css class called wpb_row in a js_composer.css file. I'm not sure if this is some standard CSS class for Wordpress or if there's a global "have margin between each layer of content" setting.
Unfortunately I don't have 10 rep so I can't post an image of the page that's causing the issue but I can link to an image of where the issue is http://i.imgur.com/vEyznRn.png?1 and the url for the site is http://am12.siteground.biz/~youbambu/ecorecycling/
What's the best way to override a CSS class within Wordpress from a standard point of view? I've tried adding custom css to override this and remove the margin-bottom: 35px; in Appearence->Editor->Stylesheet.
Is it possible to either override this CSS in one global area? I'm using a theme called Picasso in wordpress if that's any help, but I don't see how to override this CSS.
To overrride the css use !important. So adding the following to your stylesheet should remove the margin bottom:
.vc_row.wpb_row.vc_row-fluid {
margin-bottom: 0 !important;
}
Is it possible to either override this CSS in one global area? I'm using a theme called >>Picasso in wordpress if that's any help, but I don't see how to override this CSS.
I would be careful editing/modifying there because I suspect you will lose these changes/modifications on theme updates (which Picasso auto updates).
The theme has a designated place located at Theme Options > Tools > Custom CSS. The adjustments you add here are loaded on every page, just like the stylesheet in editor. Furthermore, these changes are not cleared upon update.
Just my two cents, hope it helps.
You can easily achieve this goal. This is not a WordPress standard or something.
you can edit js_composer.css and change what you want. OR
you can override this css rule adding a new role after js_composer.css loads. Something like:
<style>
.wpb_row { margin-bottom: 0px!important }
</style>
I've been customizing a one-page-design wordpress template (see http://ggc.inductiveplay.com) - it pulls up a floating button on the home page that :should: scroll down to the next section (#menu), but for some reason it keeps pointing to the 3rd section (#location).
I'd like to just override the link in CSS where I'm customizing the button size/appearance and assume I just have bad syntax here:
.a-btn {
padding: 2px 12px !important;
margin-bottom: 5px !important;
opacity: .8;
z-index: 1;
href="#menu";
}
If there's a quick fix for this I'd love to know, otherwise I'd love any insights on where the link is being set/computed on the site.
You can add things before and after a HTML element in css. But you can't change a link using CSS.
The below is bad CSS syntax:
href="#menu";
To add things before something in CSS you can have a HTML element like:
<div class="sample-text"></div>
Then using the following CSS:
.sample-text:before {
content:"blah blah";
}
Instead of "blah blah" you can have something else.
You can't use HTML in the CSS so you can't do what you want, but this is the closest you can get to it.
However you can change links using javascript.
Also you can only use z-index if you specify a position:relative, position:absolute or position:fixed.
I am developing a website on wordpress using the theme "Virtue". I have added custom css to change the appearance/behaviour of some elements.
Here is a link to the site: http://deepdive.ma/test5182/
When I open the site, the custom css is not accounted for.
To take a specific example: the menu should be in a light blue color (#e7ecf1), but it is white.
When I use DOM inspector:
The content of my custom css is included in head, including css for the class .headerclass;
But the styling element 'header class="banner headerclass" role="banner"' does not refer to it. It only refers to elements.style, then to external style sheets (default.css; virtue.css; ...).
It's probably something stupid but I really can't find the problem. Anyone can help with this?
You're not properly closing .home .page .wide. You need the closing } in Line 32.
.home .page .wide{
width: 80%;
max-width: 700px;
left:auto;
right:auto;
}
A suggestion: why not customize the theme's CSS instead of dropping the new CSS inline in the HTML document. It'll avoid major headaches.