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.
Related
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>
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'm trying to add a dynamic class in Angular template and set a style attributes accordingly.
HTML would be -- <body class="{{ product-id }}">
CSS would be --
product-id : { color: #ccc; }
Where product-id would be a dynamic value.
What would be the best method to do this? I want to be able to have this be a selector I could use for various element locations within the page which is why ng-style isn't working for me.
I think the best approach for what you're looking for is the ng-class directive which allows you to set different dynamic classes based on $scope variables.
You can check out the docs for ng-class here.
Hope that helps you out!
Say I have 2 sites, http://1.example.com, http://2.example.com.
My issue is this : I am to dynamically add content to 1.example.com and 2.example.com, as part of this dynamic content addition I need to download and apply a css file via javascript. Now there is a <hr> tag in my dynamic content I'd like to style. When I apply this on 1.example.com, all works fine, but when I try to apply it to 2.example.com, the issue is that 2.example.com has a stylesheet that already defines stylerules for the <hr> tag. Like say padding. I don't want to override the properties manually. Is there a way to ignore <hr> styles defined in 2.example.com for my dynamic content and only apply styles I downloaded?
Be more specific. Learn about CSS specificity to override styles.
You could, for example, add a class to the <hr> and style that.
Try like this,
You may find parent div in your dymanic content,
For example: .parent-div hr{ your styles }
Today I changed the wordpress theme of my blog but the table, td style in the theme style file is messing up the whole Google custom results. I know one solution is to remove all those styles from the file and let Google use its own style. But I also want to keep those for the tables which I occasionally use in my posts.
Can anyone help me how to keep the existing table, td style of my theme while forcing the Google custom search engine to ignore these classes and load its own??
for example you set TD class like this
.td_class { background-color:red}
you can add the class name to your table and set td_class as child class
.table_class {}
.table_class .td_class {background:red}
EDIT
if you don't want to change each tables classes , you can do it on-the-fly with jQuery Selectors
for example your code is like this :
<html>
<div id="MainDiv">
<table>......</table>
<table>......</table>
<table>......</table>
</div>
//goole code here // separated from MainDiv
</html>
you can use this code to change table's class
$(#MainDiv table).each(function(){
$(this).addClass('addClass')
});