Is it possible to change the breadcrumbs separator from / to something else? eg: >
Or should I just ignore zurb and do it the traditional way?
The / separators are defined via css in foundation/scss/foundation/components/modules/_ui.scss:
ul.breadcrumbs {
li:before { content: "/"; color: #aaa; }
li:first-child:before { content: " "; }
}
To change it you need to override this CSS in your app.css file:
ul.breadcrumbs li:before { content: ">"; }
Add the following to your css:
.breadcrumbs li:not(:last-child)::after
{
content:">";
}
Related
I have an issue with a filter_vertical for my model in admin panel. Availble entries has leght about 170 symbols. Standart filter_vertical width is less then I need. It's possible to set new value for width or not and how?
Solution for my case is override width in .css file
App_name/static/css/resize_widget_filter_vertical.css
# App_name/static/css/resize_widget_filter_vertical.css
#media (min-width: 1025px)
{
.change-form .stacked
{
width: 890px;
}
.change-form .stacked .selector-available,
.change-form .stacked .selector-chosen,
.change-form .stacked select
{
width: 880px;
}
.change-form .stacked .selector-available input
{
width: 822px;
}
}
admin.py
class MyModelName(admin.ModelAdmin)
...
filter_vertical = ('egais_code',)
class Media:
css = {
'all': ("css/resize_widget_filter_vertical.css",),
}
and now
I am new using chart.js.
I have this image:
I am trying to delete the number over the bar, how can I do it? I am using Angular 9 and typescript but I need to show it only when you click on the bar.
thx
The solution for mi is that:
plugins: {
datalabels: {
...
formatter: function(value, context) {
return "";
}
}
}
How to create a print stylesheet which can override the dynamic styles created by css modules ?
Using CSS modules, classnames render with unique names like so :
<button class="buttons_style_primary-button__3T" type="submit"> Submit</button>
In my print stylesheet I have the following, which has no effect :
#media print {
button {
display: none;
}
}
I can get it to work by adding !important to the button style, but I will have many print styles and I don't want to do this for each style attribute. Is there an alternative ?
I'm also using React if there happens to be a React specific approach here.
Wound up doing the following :
Use !important for globals that need to override local values:
/* app.css */
#media print {
#page {
margin: 1cm;
}
* {
color: #000 !important;
}
}
Put component specific overrides into a style.css for each component:
/* style.css */
.my-class {
composes: rounded-corners from 'shared/ui.css';
margin: 0 0 60px 0;
background-color: white;
}
#media print {
.my-class {
page-break-inside: avoid;
font-size: 10px;
}
}
/* my-component.jsx */
import style from './style.css';
const MyComponent = () => {
return (
<div className={style.myClass}>
....
</Link>
);
};
There's also a third option which I haven't really tried.
You should be able to apply both the top-level override classname with your local classname using the classNames library:
import app from 'app.css';
import styles from './style.ss'
const MyComponent = () => {
return (
<div className={classNames(style.local, app.global)}>
....
</Link>
);
};
( this third option is just off the top of my head, I don't know if it will work )
Instead of this:
#media print {
.button {
display: none;
}
}
Try this:
.button{
#media print {
display: none;
}
}
Can you help me about how to add a new font-family in a Foundation project. This new font-family can be installed locally or external like Google Font Web.
Thank you.
You can create your mixin
#mixin font-face($style-name, $file, $family, $category:"") {
$filepath: "fonts/" + $family + "/" + $file;
#font-face {
font-family: "#{$style-name}";
src: url($filepath + ".eot");
src: url($filepath + ".eot?#iefix") format('embedded-opentype'), url($filepath + ".woff") format('woff'), url($filepath + ".ttf") format('truetype'), url($filepath + ".svg#" + $style-name + "") format('svg');
}
%#{$style-name} {
font: {
#if $category != "" {
family: "#{$style-name}", #{$category};
}
#else {
family: "#{$style-name}";
weight: normal;
}
}
}
}
And used it like this
#include font-face($style-name, $file, $family, $category);
Answer found quickly on the web...
<style>
#import url('https://fonts.googleapis.com/css?family=yourFontFamilyName');
</style>
Now use this font-family in inline css.
Style tag is removed by some webmail(for example gmail) so you can put it inside body.
If you are going to use foundation architecture then put the above line in foundation.css
I have a widget specified through a QML file. This widget contains a top levelRectangle which contains two Columns. Each of these Columns contains many Text-elements. This QML widget is wrapped in a subclass of QDeclarativeView in C++.
I want to specify the font for each of these Text-elements. Today I do this by specifying top-level properties:
property string fontfamily: "Arial"
property bool fontbold: false
property bool fontitalic: false
property int fontpixelsize: 11
property string fontcolor: "White"
and bind each Text-elements to these properties:
Text
{
color: fontcolor
font.family: fontfamily
font.bold: fontbold
font.italic: fontitalic
font.pixelSize: fontpixelsize
...
}
This isn't very elegant and new fields needs to be added every time I need support for something new (e.g. underlined fonts). I have not been able to declare a property of type font and bind to this instead (widget is blank and qmlviewer warns about "expected type after property").
Is there a better way to specify a font for all Text-elements?
Note! I'm handwriting the QML files.
In Qt 5.6 (at least, probably earlier too), you can use Qt.font() to dynamically allocate a font object and refer to it elsewhere. So, this works:
property font myFont: Qt.font({
family: fontfamily,
bold: fontbold,
italic: fontitalic,
pixelSize: fontpixelsize
});
Text
{
color: fontcolor
font: parent.myFont
}
More info on Qt.font() here: https://doc.qt.io/qt-5/qml-qtqml-qt.html#font-method
Another possibility is to write a new QML component, that inherits from Text an sets some properties by default:
StyledText.qml
import QtQuick 1.0
Text {
// set default values
color: "blue"
font.family: "Arial"
font.bold: true
font.italic: true
font.pixelSize: 12
}
main.qml
import QtQuick 1.0
Rectangle {
Row {
spacing: 10
Column {
StyledText {
text: "Foo1"
}
StyledText {
text: "Bar1"
}
StyledText {
text: "Baz1"
}
}
Column {
StyledText {
text: "Foo2"
}
StyledText {
text: "Bar2"
}
StyledText {
text: "Baz2"
}
}
}
}
One possible solution is to write a function, that iterates over the children of a passed element (for example a Column). In this function all the properties can be set:
import QtQuick 1.0
Rectangle {
Row {
spacing: 10
Column {
id: col1
Text {
property bool useStyle: true
text: "Foo1"
}
Text {
property bool useStyle: true
text: "Bar1"
}
Text {
property bool useStyle: true
text: "Baz1"
}
}
Column {
id: col2
Text {
property bool useStyle: true
text: "Foo2"
}
Text {
text: "not styled"
}
Text {
property bool useStyle: true
text: "Baz2"
}
}
}
function setTextStyle(parentElement) {
for (var i = 0; i < parentElement.children.length; ++i) {
console.log("t", typeof parentElement.children[i]);
if (parentElement.children[i].useStyle) { // apply style?
parentElement.children[i].color = "blue";
parentElement.children[i].font.family = "Arial"
parentElement.children[i].font.bold = true;
parentElement.children[i].font.italic = true;
parentElement.children[i].font.pixelSize = 12;
}
}
}
// set style
Component.onCompleted: {
setTextStyle(col1);
setTextStyle(col2);
}
}
Each element, that contains the property useStyle that is set to true, gets styled. This is shorter, than assigning the style manually, but you can still define which elements should get styled or not.
Necro posting, but I feel it's still missing an up-to-date solution.
FontMetrics will do the trick without using Qt.font(). You can declare it in your parent item or in a Singleton type, and then you can bind the property to it.
Here there's an example
Item {
id: root
FontMetrics {
id: fontMetrics
font.family: "Arial"
font.pixelSize: 24
}
property alias font: fontMetrics.font
Text { font: root.font }
Text { font: root.font }
}
Some useful workarounds here, but I'm stuck being able to define some base fonts while still being able to specify details later, for more than a few fonts. In particular, because:
FontLoader sets the same name for every font of the same family. Ref
If Qt.font() (or FontMetrics) is used, it's all or nothing for the font property.
Defining new Text Components requires one file per font. Update: maybe not true since 5.15.
Triggering a function is difficult to manage effectively across a whole application.
I think there's room for one more solution:
In my main.qml I used one FontLoader per font file, but only bothered setting an id when the family changes:
FontLoader { source: "qrc:/fonts/ITCAvantGardeStd-Bk.otf"; id: flAvantGarde; }
FontLoader { source: "qrc:/fonts/ITCAvantGardeStd-BkObl.otf"; }
FontLoader { source: "qrc:/fonts/ITCAvantGardeStd-BoldCn.otf"; }
FontLoader { source: "qrc:/fonts/ITCAvantGardeStd-Md.otf"; }
FontLoader { source: "qrc:/fonts/ADAM.CG PRO.otf"; id: flAdam; }
and then, and here's the significant part, defined one property var per base font like so:
property var fontAgBk: { "family": flAvantGarde.name, "styleName": "Book" }
property var fontAgBkObl: { "family": flAvantGarde.name, "styleName": "Book Oblique" }
property var fontAgBoldCn: { "family": flAvantGarde.name, "styleName": "Bold Condensed" }
property var fontAgMd: { "family": flAvantGarde.name, "styleName": "Medium" }
property var fontAdam: { "family": flAdam.name }
The var is key being able to specify a dictionary that can be defined once, but pulled apart later.
Elsewhere in any qml, I can do something like:
Text {
id: myText
color: "#123456"
font.family: fontBoldCn.family
font.styleName: fontBoldCn.styleName
font.pixelSize: 24
font.letterSpacing: 5
}
Still requires some repetitive code, but at least the magic strings are only defined once.