When you set an extra css class to a CMSField by ->addExtraClass("my-class");, which css file can you edit to set the styling for this new css class?
The only way I see now is by editing either css files in the Framework or CMS folder, something I rather avoid doing.
Is it possible to include a link to a custom css stylesheet in the CMS area where I can place all the css code?
You can load your custom Stylesheet into the CMS by adding the following to your config.yml file:
LeftAndMain:
extra_requirements_css:
- mysite/css/mystyle.css
you can add code like this...
Requirements::customCSS('
#Form_FilterForm .field {
display:inline-block;
width:31%
}
');
...almost anywhere and it will be included.
If these must be in the head tag then...
Requirements::insertHeadTags("
<style>
#Form_FilterForm .field {
display:inline-block;
width:31%
}
</style>
");
Related
I am working on jqGrid. I tried to apply some custom style on jqGrid pager and it is working fine when I put them in style tag of html. Something like given below.
<style>
.ui-paging-pager {
background-color: white !important;
}
</style>
But, when I store them externally in .css file, it is not working. I have created customPager.css file, in which I have stored all the css code for pager and used the path of the css file in html file link.
Can someone tell me where am I wrong and How to store custom css in external file for JqGrid?
Inline styles or those in <style> tags within a document will automatically override externally defined style rules.
However to override a style in an external stylesheet you need to give the rule you define in your own stylesheet a higher specificity. You can do that by including the parent elements in the selector. For example:
#container .foo > .bar .ui-paging-pager {
background-color: white;
}
Also note that the !important rule should be avoided for this reason.
I have wordpress site with some layout.
I need to change some css there, but got troubles overriding it.
Via webbrowser my CSS looks like:
It is places (genetated?) somewhere in theme.
Every time I refresh page I got different 'class-xyz' (on the screen it is: class-GkgfbCohxE) name in #inbound-list
I have added to custom CSS below (changed color):
But this is not loaded.
All structure of this CSS:
Do you know how to enable ovverriding this element?
It depends on the theme and plugin you use.
For my experience, this dynamic inline CSS may come from the page builder you use. If it comes from page builder, please check your page builder and adjust the style.
If you want to overwrite the css, you could simply put !important after the color attributes.
To override this css you need to use any parent id like below or you can apply some id to your body tag and write ur css with its reference
see my ex below
#parent #one li{
color: blue;
}
#one.asd li{
color: red;
}
<div id="parent">
<ul id="one" class="asd">
<li>aaa</li>
<li>bb</li>
<li>adfdf</li>
</ul>
</div>
If it's a your theme styles, you can create a child-theme, then overwrite the styles. You can also use the same selector in the child-theme css, WordPress knows that it has to take the ones from the child-theme.
I am trying to add custom styling to my web app. Here is the link to my code:
https://github.com/SammyAbukmeil/rps-challenge
In layout.erb I have the following:
<head>
...
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/custom.css">
...
</head>
Which should be loading my custom.css file.
In views/index.erb I have an ID of test:
<img class="img-responsive center-block" style="margin-top: 40px" id="test"src="http://i.imgur.com/hSuFTzO.png">
and in css/custom.css I am calling that ID:
#test {
margin-top: 50px;
}
But for some reason it doesn't apply my custom styling, although bootstrap (which is being linked in layout.erb and is adding styling to the .erb files throughout the project) is working.
I've tried looking through similar questions on stack overflow without success, also tried google for how to add custom styling to a bootstrap project - everything I'm doing seems to be correct.
Any advice is greatly appreciated. Thanks!
EDIT: So i checked the console and found this:
...
Status Code: 404 Not Found
Request URL: http://localhost:4567/css/custom.css
...
So I guess I'm not linking it right.
Bootstrap selectors are very specific, for example body > div > img.img-responsive. You need to be more specific in order to override the selector. You can test this by using temporally the !important declaration:
#test {
margin-top: 50px !important;
}
If it overrides, you have a working setup that just needs more specific selectors. After that you should remove the !important declaration and add details to the selector:
body > div > img#test {
margin-top: 50px !important;
}
In Sinatra any static files (such as CSS files) should be in the folder pointed to by the public_folder setting. Usually this is named public. In your server.rb you set it to be public but relative to the projects root.
You need to create a public folder at the top level of your project (next to app, view etc.), move your css directory to it and then change the setting in server.rb so that :public_folder points to it, similar to what you have done with the :views setting:
set :public_folder, proc { File.join(root, "..", "public") }
First You need to understand the hierarchy of CSS
You Can use Firebug (Firefox) to identify that your styling is apply or not also what class is overrating your custom css.
Note: Also avoid adding ID for CSS Styling
You need to override the bootstrap selector.
It is not good practice to use this in your finished website, however you can use !important to over ride other style rules.
Example of Use
.element-class{
width:50%;
}
.element-class{
width:100% !important;
}
The element would have the width of 100% here.
Read more about when to use this on the css-tricks article
I'm creating a plugin and it has it's own css file (compiled from sass)
I was just wondering what the best way to approach would be regarding overriding styles.
For example, I set a H1 style for my plugin. How can I make it so that the user does not override this with their H1 style?
I know I could ask them to add my style sheet last but then my style would override theirs.
How should I approach this?
You can use unique id's or class for your elements.
or best way is
<div id="parentWrapper">
<!-- Your plugin's elements goes here -->
</div>
your stylesheet would be
#parentWrapper h1 { // h1 definition
}
#parentWrapper p {
}
.
.
.
The best way to avoid style collision is to ring-fence your plugin from what a user may be implementing in their own code by adding plugin specific classes to elements.
E.g. you would style h1 by adding a class called say myPlugin-h1
<h1 class='myPlugin-h1'></h1>
You could then either use your plugin to add these styles into the DOM, or require the user chooses where to add them (preferred).
That said..Typically plugins allow users to add a single class to a 'top level' element to denote it should have a plugin applied, and then the plugin stylesheet prefixes elements by this class, or assigns classes to child elements dynamically.
So, in your HTML you may have:
<div class='myPlugin'><!--
content either dynamically added by your plugin or already present
--></div>
Then your plugin CSS would include .myPlugin h1
Just add a class to your h1 tag and that will do the trick.
You do not need to add an !important tag to the <h1>, that will prevent the class to take it's course.
HTML
<h1>Hi</h1>
<h1 class="blue">This</h1>
CSS
h1{
color:red;
}
.blue{
color:blue;
}
And a working demo : http://jsfiddle.net/52Jd5/2/
So I have a CSS for .status-msg-body My blog is hosted in Blogger platform and in that a CSS file is there which cannot be removed. That CSS file contains a CSS for.status-msg-body but I want to change it so I have put an inline to my blog. But that does not works it still shows the CSS specified in the file provide by Blogger by default.
You can try using !important property to override those css styles.
Try including !imporant in every line of your css class.
For instance if you have
.status-msg-body
{
color:Red;
}
and you want it blue, add this class
.status-msg-body
{
color:Blue!important;
}
This will override the existing style.