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>
Related
I Dont want this Span saying Taxes are included in the sale of this product, because this is an un-taxable product. My plan is just to change the color of text to hide it, but I cant seem to find the right area to change it.
Im using WordPress minimalist
Please follow the steps below to achieve what you want:
If you do not already have a child theme, create one with the name
YourThemeName-child in wp-content/themes. Replace YourThemeName
with the name of your theme.
Copy the CSS style from your main theme to your child theme.
Find the class of the element you want to hide by:
In Chrome: Right click on the element you want to hide and click on Inspect Element. From the console on the right, copy the CSS class of the element.
In your child theme CSS (the one that you copied from the main theme) add this code:
.element-class {
color: #ffffff;
}
/* Use !important if changes do not show. Refrain from using !important unless absolutely necessary */
Or if you want to not display it completely:
.element-class {
display: none;
}
/* Use !important if changes do not show. Refrain from using !important unless absolutely necessary */
To answer your question in the comments, yes, creating a new CSS file in child theme will override the main theme CSS.
Hope this helps.
What is the proper way to set all blog posts to have a certain background in WordPress?
Sometimes this depends on the theme but you can achieve this in your CSS. Check to see that your blog posts are adding a particular class to the body tag and then do something like this in your theme's CSS file:
.single-post, .single, .post { background-color: #ff9900; }
That above CSS sets the background color of the page to a certain color, but it only applies to pages that have that CSS class present. I would check your active theme and also refer to the documentation on post classes to be on the safe side.
Hi guys i've been working for this for days and searching the net for help but unluckily I don't find one. Here's my problem, I know that wordpress has a built-in background image when you click the appearance. I also tried editing in the CSS but when I put the code
background-image: url(image/3.jpg) in the body but when I see it it didn't appear. I think that the theme Accelerate has a code that has a fixed white image, How is this?
Their may be background image or no back ground image in wordpress according to the theme you are currently working with. Anyway you can add background image inside the body of a page in wordpress by the following ways :
Select css class from "main.css" located wp-contents/themes/your-current-theme/css/main.css, inside css edit "body" as
body{
/*...propeties..*/
background-image:url(back-img-url);
}
if it overridden by default images of your theme can use this instead of above
body{
/*...propeties..*/
background-image:url(back-img-url) !important;
}
In case you are using a custom template inside wordpress find the body class from the css you are using and change this as above.or using image inside page with img tag then make direct changes for this.
I resolved this by clicking Theme Options -> Design and choose the "Boxed Layout" instead of Wide Layout
I have created a UI (for wordpress plugin) in which I give user choice to add text, image, and video in a div ( lets call this div, container).
I have been working on it for a quite sometime. I recently added tinyMCE (WYSIWYG editor) to add text inside container.
Now, I realized that I did a big mistake. The text user writes is being overridden by css rules defined for wp admin panel.
for example,
User enters <h1>Hello</h1> (with the help of tinyMCE), and then I grab that content from tinyMCE and append that in the container.
But here the problem arises, wordpress's admin css can have css rule like this,
h1 {
color : #d6d6d6;
line-height: 40px;
font-size: 30px;
}
So, it looks different in tinyMCE and in my container. (as tinyMCE's code is inside iframe and that remains unaffected by wordpress's css rules, but my container doesnt)
I want something so that any element inside container remains unaffected by wordpress's admin css.
I know a good solution would be putting container inside iframe. But I have written a lot of code without thinking of an iframe and I would need 3-4 days just to adjust everything for iframe. There may be some cross browser issues.
I can reset some wordpress rules, but it will fail sometimes, as user may enter anything. I need something fullproof.
well if you want to undo a specific rule (say the h1 rule you mentioned) you can use css to override it by being more specific.
.container h1 {
color:#000000;
line-height: 24px;
font-size: 24px;
}
This will overwrite the css rule you mentioned with the given values but only when the element is inside the container class, (I'm guessing at the default values you want to use.)
Unfortunately you would have to add in an undo rule for everything that wordpress's admin css changes.
Another possible solution is to edit the page tinyMCE returns in it's frame to add in wordpress's CSS file. This means the end user will see the same formatting when they enter the information as when it gets posted.
Do you have code-level access to the iframe contents tinyMCE creates?
Use !important in your CSS document. This way your CSS will not be overridden as it takes precence over everything, including inline styles.
h1 {
color:#ff0 !important;
}
I am using the plugin: "Wordpress Contact Form 7".
I want to override the CSS that the plugin uses with my own CSS.
I want to do this in such a way that even if I update this plugin, or change my theme, my changes will still remain.
What is the best way to do this?
So far I have been trying to edit style.css of my theme. But this has produced inadequate results. Since style.css may be loaded before the css of the plugin, the css may be overridden by the plugin. It works only if I specify properties for things that have not been defined in the plugin css.
If you only have a few modifications to apply, by far the simplest way to override a plugin's stylesheet is to add body in front of the element you are targeting within your style.css file. Adding body adds CSS specificity to the selector, allowing it to override the original styling. Like Reyzis say.
body .plugin-class {
font-size: 30px;
}
have you tried this for example?
body {
background-color: red !important;
}
edit: sorry - fixed