I would like to insert a style tag with inline CSS to the file html.html.twig
I'm running Drupal 8 with Bartik theme.
I want it to look something like this in the front end.
<style media="all">
html{background:#fff;color:#000;}body{margin:0;}...
</style>
I have tried this solution.
<style media="all">
{% include directory ~ '/sites/default/files/css/inline.css' ignore missing %}
</style>
But then I only get the response <style media="all"></style>
I have tried to add custom CSS as a library and it works fine, but I want the CSS outside the <css-placeholder token="{{ placeholder_token }}"> (if I want to move it).
Nah, don't do that.
The right way is to create a sub-theme (with Bartik as base) and add your styles from there: https://www.drupal.org/docs/8/theming-drupal-8/adding-stylesheets-css-and-javascript-js-to-a-drupal-8-theme
Alternatively you could do that from within a custom module, too: https://www.drupal.org/docs/8/creating-custom-modules/adding-stylesheets-css-and-javascript-js-to-a-drupal-8-module
If you still insist adding inline CSS, that would be like following:
<style>{{ source('sites/default/files/css/inline.css') }}</style>
Related
The css properties of a post are related to post and post-content classes if I am not wrong so if I override some of their properties this will apply to all posts in my site.
I would like to apply apply some css properties only to a particular post, how can I do this?
Solution 1: extra css file
The nicest way to do this is with page resources. You can walk over the files in the page bundle and look for a CSS file. You should then add the CSS file to your head/content using:
{{ with .Resources.GetMatch "*.css" }}
<style>{{ .Content | safeCSS }}</style>
{{ end }}
Solution 2: body class
A simpler (but messier) way is to add a class to your body. This looks like this:
<body class="{{ File.BaseFileName }}">
This will add a class to the body with the slug of your page. This way you can apply page specific styling, by adding rules to your main stylesheet.
I'm using twbs bootstrap 3.3.6 with Meteor and trying to style a <fieldset>.
However when I use the Chrome inspector it says that the style is coming from bootstrap.css even though I have tried using class-specific and id-specific css.
My style sheet is in the application root, as suggested by some answers.
I'm very new to meteor and css so I could be making a novice error.
Otherwise, what's the best practice to override bootstrap css settings?
Generally if you want to override the css you should put your css file after all of the other files like the bootstrap css because css starts from top to bottom so the bottom lines are the ones that will be executed, example:
<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="css/your-css.css" />
Also you can add !important at the end of every css line to give that style the top priority no matter of the line index, example:
.someclass {
color: red!important;
}
You can either override the specific property on the same class in your css...
.btn {
background-color: #fff !important;
}
...create an inheritance map so that it only applies to the element inside another specific element...
div.classForSpecificContainer btn {
background-color: #fff !important;
}
or specify your own class and add it to the element in question
myOverrideClass {
background-color: #fff !important;
}
The.. important part is that you use !important; to prevent Bootstrap from overriding it. That will generally solve the problem even if the CSS files load in the incorrect order, but not always. I have made a habit of prefixing my CSS files in the same folder with z- to make sure they get loaded last if I'm using something like Meteor that merges and compresses the CSS.
This seems to be a common problem in Meteor because of the way their build injects the merged stylesheet into the top of the html <header> instead of the bottom. There is a merged PR that looks like it will be available in 1.6.2 that allows you to put a pseudo tag anywhere in the <head> you want the merged css injected.
Example: proposed availability in 1.6.2 - PR already merged
<head>
<link rel='stylesheet' type='text/css' href='some-cdn.bootstrap.css'/>
<meteor-bundled-css/>
</head>
That will work once the merged PR is included in the next build.
Until then...
SOLUTION 1: If you're using the bootstrap LESS or SCSS files, you can just import it into your client/main.less or client/main.scss file and then import your override file after this. It looks like you're using pre=compiled css though, so move to SOLUTION 3.
SOLUTION 2: Use !important on the end of your lines... BAD not recommended practice. If you use important you break the cascade.
SOLUTION 3: Put you third-party library overrides files in your public folder and manually <link> it below the bootstrap <link> in your head. I suggest this for now.
with symphony framework I did dump assets assets:install.
css file is hard copied to /web/bundles/appbundle/css/style.css I guess for background image in css I should have a relative path to reach outside of /web/ folder like this?
background-image: url(../../../../bundles/appbundle/images/top_bg.jpg);
but it doesn't work yet, I have filter='cssrewrite' in css tag too. probably I have to add that I am only editing the css file located at the path above after assets install, I did not edit the one in /Acme/Bundle/Resources/public/css any more. Then I did run assets:dump, now in /web/ folder there are two folders for images and css, I looked at new css and see the path became like this:
background-image: url(../../bundles/applicationadmin/images/top_bg.jpg);
But still all images are broken. I search stackoverflow and found this question, but still have problem. what else should I do?
please advice.
First of all, make sure that your css and images are inside correct folder.
src/AppBundle/Resources/public/css/style.css
src/AppBundle/Resources/public/images/top_bg.jpg
After you run assets assets:install, check if there is a folder on your web directory. It have to be a identical copy from Resources/public.
web/bundles/app/css/style.css
web/bundles/app/images/top_bg.jpg
And your style.css file should look like this:
background-image: url("../../images/top_bg.jpg");
However, if you are configuring the css directly on twig template, the url is different:
<style>
div { background-image: url("/bundles/app/images/top_bg.jpg"); }
</style>
To make it work in twig try this
<div class="container" style="background-image:url('{{ asset('bundles/appbundle/images/top_bg.jpg') }}')"> ,
of course presuming that you have installed the bundle's web assets under a public web directory.
I solve this issue with the following steps:
First let Webpack do his work.
Let's copy all the file to the public/build directory (images and css files)
Next step is to include the css style via twig/smarty in your template
Immediately after the "link" tag, you should open a "script" tag and overwrite all affected styles. In Twig you can work with the "asset" function to load the corresponding URLs from the manifest
i.e:
<link type="text/css" rel="stylesheet" rev="stylesheet" href="{{ asset('/build/css/header.css') }}">
<style >
.header { background-image: url('{{ asset('build/img/logo.png') }}') !important; }
</style>
Your background image is correct changed. The output looks like:
<link type="text/css" rel="stylesheet" rev="stylesheet" href="/build/css/header.5c7b2ca6.css">
<style >
.header { background-image: url('/build/img/logo.bb1272f9.png') !important; }
</style>
This is not the best way to work with Webpack. However, this is an interim solution to refactor outdated code. The next step should be to create entrypoints and build the style using SCSS. Webpack then takes care of the correct use of assets in the styles.
I have included a bootstrap stylesheet in a PHP-File, which I only need for one div. Problem: It should only affect this one div. To achieve that, I placed a link to another CSS before and after the bootstrap-stylesheet as you can see below. But it seems that bootstrap.css still affects some elements outside that div. How can I prevent it from doing it?
<link rel="stylesheet" href="style/style-1.css" type="text/css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css">
<div class="container">
...
</div>
<link rel="stylesheet" href="style-1.css" type="text/css">
There is one feature in CSS called "scoped css" ... it is not well supported (Fireofx only, I believe ... and I think it's better this way)... It allows to say that a stylesheet applies only to a single element.
In your case, but I definitely do not recommend it, you could do something like :
<div class="container">
<style scoped>
//... copy content from bootstrap stylesheet
</style>
</div>
See here for an example : http://css-tricks.com/saving-the-day-with-scoped-css/
or here : https://developer.mozilla.org/en-US/docs/Web/HTML/Element/style#A_scoped_stylesheet
Check here to know which browsers support it : http://caniuse.com/#feat=style-scoped
The concept of loading a secondary CSS file after the bootstrap CSS file would be to override certain elements and create your own styles. However, since you only want to take one element from the bootstrap CSS file, you will have to override ALL the other elements if you don't want to see the bootstrap styles on your other elements. This I DON'T recommend.
My suggestion is to examine the styling for the certain element that you want to use from bootstrap and then just recreate it in your own CSS file.
In my source, I have the following code:
<style>
/*Twenty Twelve fixes and other theme fixes and styles :( */
.flex-caption {
background: #000;
-ms filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C000000,endColorstr=#4C000000);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C000000,endColorstr=#4C000000);
zoom: 1;
}
/*...*/
</style>
This is not within my personal CSS file and i have no idea where this is being pulled from.
I am linking to my external CSS file as per Wordpress Codex to include a stylesheet as per below:
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" />
What do I need to do to remove this CSS?
EDIT*
this has now been fixed.
It looks like you started with either WordPress's TwentyTwelve theme, or another theme which inherited from it and made changes from there. If you look at /wp-content/themes/head.php I think you may find the offending styles in there.
If it's not in your CSS it's probably in header.php
Go to Appearance > Editor > Header (header.php)
I have figured what was generating this and removed. It was a plugin, and it was one that I'm not using.
NextGEN gallery plug in generates this.