I am trying to customize one field of a discussion forum in SharePoint, basically i want
to resize (maker bigger) the body Field.
I think this can be done applying a new css specific to that field but i am not sure how to do this, becuase it's seem that some other css are overlapping the one that i created and that’s why mine is not applied.
Any ideas on how to solve this issue?
have you tried adding a !important after the css rule?
like
.bodytxt
{
height: 300px !important;
}
Related
I've been trying out Docusaurus for doing some documentation. Only problem is that I'd like more space for the page itself rather than the side bar/toc. I'm using preset-classic. I've tried overriding --doc-sidebar-width in custom.css but nothing changes. Is there another way to do this?
You are in the right path, just add !important.
For others who may need this. In the file .\src\css\custom.css, add:
:root {
--doc-sidebar-width: 220px !important;
}
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 have placed images on wordpress page templates without any inline style attribute but its seem wordpress automatically add style tag with width and height set to zero.
<img src="wp-content/themes/ecoblog/images/hiw-image-1.png" style="width: 0px; height: 0px;">
Sometimes height is set to its original dimentsions and sometimes after complete refresh its values are zero.
What is causing this?
Please help me out. Thanks in advance.
Maybe it is caused by incorrect CSS. Zero values should not have dimensions, like px or pt. Like this:
<img src="wp-content/themes/ecoblog/images/hiw-image-1.png" style="width:0; height:0;">
this is because of template CSS styles are override your image style properties ..,the easy way is to wrap your image content and give div id and put your style code in template CCS file
inside(style.css)
it works as:
.class{
width:20px !important;
height:20px !important;
}
or if you want to remove Inline CSS completely , This inline css may be in .php files or in.js files.
You can search style in whole project , it is easier to search if you are using netbeans code editor.
Hope it may resolve.
How do I override the css of a fancybox?
I'm building a website that uses fancybox on two different pages, and I want to override the fancybox css on one of these pages so the arrows are pushed outside of the box.
IE I would like to impart these properties on the fancybox:
.fancybox-prev {
left: -80px !important;
}
.fancybox-next {
right: -80px;
}
I can't figure out how to accomplish this and solutions to other relevant stackoverflow problems don't work. I'm sure there's a simple way to do it.
Can anybody help me out?
$('.fancybox-prev').attr('style', 'left: -80px !important');
$('.fancybox-next').attr('style', 'right: -80px');
You have to remember about hirarchy of the CSS. Inline CSS are the most important ones, external CSS will be read second.
When it comes to the latter, they are read from the top of your CSS file. So writing the style, which you want to use to override a previous one, below, should do the work just fine.
Secondly, you can always use jQuery to do that. ShaggyInjun gave a good example. You should be able to do that by using $(selector).css();.
if using fancybox v1.3.4 check:
http://fancybox.net/faq No.8 .... it also might be useful to check this.
if using fancybox v2.x check :
https://stackoverflow.com/a/8672001/1055987
Basically, you have to set a CSS inline declaration AFTER you have loaded the fancybox css file in order to override those properties.
I'm using jquerys autocomplete widget but I'm having a few issues trying to style the box that drop down when you search for something.
I'm trying to move the box down a bit and change the border/bg color but some JS is adding in some embedded styles which are overriding my .css styles. But I can't find it.
I'v based mine off this one.
<ul class="ui-autocomplete ui-menu ui-widget-content" role="listbox" aria-activedescendant="ui-active-menuitem" style="z-index: 11; display: block; width: 139px; top: 44px; left: 1101px; "><li class="ui-menu-item" role="menuitem">
In order to avoid using !important you could add your styles with jQuery and override them in that way.
$('ul.ui-autocomplete').css({
color: 'red'
});
Another solution would be to remove the style attribute from the ul.
$('ul.ui-autocomplete').removeAttr('style');
Without seeing your css styles, or the order you are loading the .css files, you could override the styles by using Firebug to inspect which classes are applied, and adding !important; to your main css styles.
Ex.
ul.ui-autocomplete {
color: red !important;
}
The best way you can combat this is to properly track down if your jQuery plugin has any parameters to help you, or strip the JS yourself and add your own CSS styles.
The above !important; rule can be a nightmare, it is a hack in a sense - but it may work for you.
Try to add margin-top and margin-left in your css
Overriding the top and left value is no good, because it is calculated in regard to the text field it derives from.
I'm really not a pro in jquery but I take a look around in the example you sent and the style of the menu is all givent by a menu style sheet (jquery.ui.menu.css). Look at the link below and there is some info that can help you I think.
http://docs.jquery.com/UI/Menu#theming
You will be able to customize the look and feel of your dropdown in these class.
«If a deeper level of customization is needed, there are widget-specific classes referenced within the jquery.ui.menu.css stylesheet that can be modified.» From jquery website.
try using position or append to option...
you can refer here...
http://jqueryui.com/demos/autocomplete/#option-position
Check out the file jquery.ui.theme.css,
the class .ui-widget-content near the top can be used to put a background colour on the autocomplete search results box, borders and positioning can also be tweaked through this class.