In Wordpress themes, in a first style.css there are the general definitions, in a custom.css you can add own styles.
There, I'd like to address certain single elements like
home .example-class_1 h1 {}
In the theme I'm working with I can't do that inline, so I have to use the custom.css.
Now, instead of repeating all single styles in the bracket I would like to assign the class which has already been defined in the style.css:
.heading-class_1 {font-size:1.2em;font-family: 'Open Sans', sans-serif; etc}
Is there any way to do that? As far as I know
home .example-class_1 h1 { .heading-class_1; }
is not allowed (just to be sure, I tested it, it does not work). Is there a workaround in CSS (not JS)?
Yes there is a way to use nested CSS, you'll have to use an extension, you can learn more about it, check out Sass.
You can't do that by default in CSS but you can use a preprocessor that can do that and then it'll compile it into vanilla (normal) CSS for you.
Check Extend within Sass. That'll do the trick. Other preprocessors out there might be able to do this too, but Sass is a popular choice.
Other than that, you'll have to do:
home .example-class_1 h1 { font-size:1.2em; font-family: 'Open Sans', sans-serif; }
Related
How can I overwrite the .css files from the wp-includes directory?
I have to change the color of the wp-block`s image captions.
This should be done by adding this to my theme`s style.css:
.wp-block-image figcaption {
color: #fff;
}
But there is already a rule for this element in: wp-includes/css/dist/block-library/style.min.css, and it overwrites my rule.
I do not want to use !important, because it is not recommend by Google, is there another method to overwrite these rules?
Thank you
add !important to overwrite:
.wp-block-image figcaption {
color: #fff!important;
}
if the keyword !important is already used in the style you are trying to override, then you need to have your css included AFTER the css you are overriding, and have equally specific selector, or more specific selector and also include the !important keyword
edit: to avoid using the !important you can follow the second part of my answer.
If you make sure your custom stylesheet is included AFTER wp-includes/css/dist/block-library/style.min.css, it will override anyway. That's why it's called 'cascading style sheets'.
To be sure your stylesheet is loaded after the default one, add it as a dependency to your stylesheet.
Enqueue your stylesheet like this:
wp_enqueue_style(
'your-custom-stylesheet-handle',
'path/to/your/custom/stylesheet.css',
['wp-block-library']
);
Also you can put a selector before the other selectors. That way it's nested deeper and has a higher priority:
body .wp-block-image figcaption {
color: #fff;
}
Since you don't want to use !important, you'll need to edit the existing CSS or use an in-line style.
If you update the existing CSS, you risk it getting switched back after updates.
For the in-line option: Add style="color:#fff;" to the element that you want to change. This will override any external CSS.
I suspect this is more of a LESS question and may not be specific to Ant Design other than the way they implemented some of their components is preventing me from overriding or extending the styles.
Specifically, I want to change the font size and weight for the title area of the PageHeader component. Unfortunately, the component's style does not use the LESS variables defined in the default.less theme for these two settings. The source code can be found here: https://github.com/ant-design/ant-design/blob/master/components/page-header/style/index.less
I have no issues changing the color, for instance, or any other variables defined in the theme but I am new to LESS and not sure how to go about overriding the styles defined for an individual component like this. Oh, and I don't want to use inline styles. We use this component in many places in our application, so I want to define the overrides in one place, once and have them be global for the application (like I can do with the theme variables).
So, how do I override the font-weight and font-size styles defined on lines 45 and 46 of the referenced file?
Here an example of how I have done it in my project:
Using .css file
Override the CSS class by .css/.scss and so on:
// Main layout where all antd componets used.
import './MyLayout.css';
/* MyLayout.css */
.ant-tooltip-inner {
background-color: white;
color: black;
}
Here I reversed all tooltips (default are black).
Using Styled-Components
Same like above just as CSS-JS:
const LayoutStyled = styled(Layout)`
height: 100vh;
* {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
.ant-layout-sider-light .ant-layout-sider-trigger {
border-right: 1px solid ${HCOLOR.border};
}
`;
Here I overrode all fonts and added the right border to antd sider trigger (default no border).
Conclusion
Find the css-class / css-property with dev-tools (Ctrl+Shift+C in Chrome) and override it as you like.
Use less files to apply the styling as mentioned in the antd docs here.
I'm having trouble changing the font on a website I built using the WordPress theme Zerif Lite.
The page itself is (REMOVED LINK) - I want to change the font in the "testimonial" section or as its displayed there: "Teenused".
That weird font in the bottom of every box (a.client-name)
I have tried so far:
Custom CSS plugin - it lets me only change the font size, when I set new font there, it won't change anything.
Changed the theme's CSS files, also no luck there.
Will appreciate any kind of help.
You can change the font by targeting the correct selector, which is: .feedback-box .client-info .client-name. The current font is called Homemade Apple and is declared in the main theme's CSS file (style.css) at line 2797:
.feedback-box .client-info .client-name {
font-family: 'Homemade Apple', serif;
color: #404040;
}
Simply change that to your desired font, for example:
.feedback-box .client-info .client-name {
font-family: 'Montserrat', sans-serif;
color: #404040;
}
Have you try to add an !important rule to your CSS. It's either that or verify the load order from your styles.
When it comes down to a CSS style, the reason it may not be aplying is because there is another more specific selector, try adding parent selector to your rules, or it could also be that the theme's rules are loading after your rules and replacing them.
One last thing to check, when dealing with fonts: make sure your browser have access to and knows the font. If it does not finds it, it will just replace it with another one, without any warning.
So we have users who can define their own templates. However. It's turning out that these templates can live on the same page for a short time, which means the css in template 1 that targets h1 would also affect any h1s in template 2.
Now, if I were writing the CSS, it would be trivial to change code like this:
h1 {
font-family: 'Comic Sans';
}
to this:
#template-1 h1{
font-family: 'Comic Sans';
}
What I'd like to do, however, is read in all of the CSS, and prepend the template ID to each CSS declaration as I've outlined above. Each template has a slug, so we'll wrap the template in a div with the slug as an ID.
Is there a simple way to prefix selectors with an ID in rails, without using a CSS regex? And if so, are there any gotchas I should be aware of when adding said prefix?
EDIT:
SCSS seems like the way to go. So how do I process something stored in the DB as scss?
With SCSS:
#template-1 {
h1 {
font-family: 'Comic Sans';
}
...
}
With SASS:
#template-1
h1
font-family: 'Comic Sans'
...
I think I understand. You want css to be dynamically generated?
You have a model something like?
class Template < ActiveRecord::Base
attr_accessible :css
end
In production, your assets would already be pre-compiled. Sass by default is only included in the assets group by default. This means that they will run on heroku only when you push you project and compile the assets.
You could move sass-rails out of the assets group, but I have no idea how you would make it process data from your db.
I would possibly store the contents in the database as css and embed it on the view template of your page.
If I want to limit font family usage across my site, say to 2 or 3 font different typefaces (e.g. Times, Arial, etc). Is there a way I can organize my CSS so that I have something like
fontType1 is font-family: "Times New Roman", Times, serif;
fontType2 is font-family: Arial, sans-serif
Then for each of my UI elements that I style in the CSS, pick from the available font types, i.e. fontType1, fontType2. Likewise for my set of color choices.
If I change the font-family of fontType1, I want it go all the way across the site/stylesheet. I don't want to have to go into each css declaration and change it. If I want to change one of my site's "dark colors", I want it to go all the way across the site; I don't want to go into each usage of it and change it.
If I understand your issue correctly, the best way (without using a preprocessor) would be:
h1,h2,h3,h4,h5,h6,
.button, .promo{ /* Your list of selectors that need to use this font stack */
font-family:one;
}
p,ul,
.small-print,.error{ /* Your list of selectors that need to use this font stack */
font-family:two;
}
#nav,#footer{ /* Your list of selectors that need to use this font stack */
font-family:three;
}
This doesn't rely on JS, it won't bloat your HTML, and the best thing is that you can update all instances at once :)
This way you only need to add new selectors to your list, and don't have to redefine your families. Have that in a 'Shared' section. I write about it here: http://coding.smashingmagazine.com/2011/08/26/writing-css-for-others/ (do a find for 'Shared').
H
There's no way to do this directly with CSS but it's one of the major features of libraries such as Sass, LESS, and Compass. LESS can be compiled by server-side or client-side Javascript, and Sass is compiled with Ruby. Compass is a library that allows compiling Sass outside the context of a Rails or Ruby web app.
Here's an example of what you can do with Sass:
$color: #4D926F;
#header {
color: $color;
}
h2 {
color: $color;
}
And the CSS that it's compiled into:
#header {
color: #4D926F;
}
h2 {
color: #4D926F;
}
In addition to variables, as shows above, you also get mixins (which are basically functions) and nested selectors.
Have something like so:
.font-type1 { font-family: font1, font2, font3; }
.font-type2 { font-family: font4, font5, font6; }
.font-type3 { font-family: font7, font8, font9; }
And set them on the <body> element.
If you wish to dynamically change it with JavaScript:
HTML
<a class=changefont data-font="font-type1" href=#>Font 1</a>
<a class=changefont data-font="font-type2" href=#>Font 2</a>
<a class=changefont data-font="font-type3" href=#>Font 3</a>
JavaScript
And with javascript (I'm using jQuery for simplicity, can be done with js alone too)
$('.changefont').click(function() { $('body').removeClass().addClass($(this).data('font')); });
Here's an Example!
By changing a higher level ancestor class, you cause a nice cascade (Cascading Style Sheet) over the entire document.
Another way of doing this is adding some classes to UI elements.
CSS:
.fontType1 {font-family: "Times New Roman", Times, serif}
.fontType2 {font-family: Arial, sans-serif}
HTML:
<h1 class="fontType1">Header 1</h1>
<p class="someOtherCssClass fontType2">paragraph text goes here</p>