Just adding a className to a tag doesn't help
<p className="ms-font-m">
sometext
</p>
doesn't change the font
https://developer.microsoft.com/en-us/fabric#/styles/typography
If you want to use the Fabric Core CSS classes directly, rather than with CSS-in-JS, you'll need to include the CSS on your page following the instructions for getting started with Fabric Core:
Add a reference to the stylesheet in the <head> of your page. Simplest way is to use the copy on Microsoft's CDN (grab the URL directly from the docs linked above to get the latest version):
<link rel="stylesheet" href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-core/10.0.0/css/fabric.min.css">
Add the ms-Fabric class to a containing element, such as <body>, to set the font-family. Then you can use the other classes to set sizes and colors:
<body class="ms-Fabric">
<span class="ms-font-su ms-fontColor-themePrimary">Big blue text</span>
</body>
Not exactly what' I was looking for but here is one way to do it:
https://github.com/OfficeDev/office-ui-fabric-react/blob/86337324a5fd8b522855eb8bdcbf012a868a26ba/packages/styling/README.md#using-fabric-core-classes
import {
ColorClassNames,
FontClassNames
} from '#uifabric/styling';
function renderHtml() {
return (
`<div class="${ [
ColorClassNames.themePrimary,
FontClassNamed.medium
].join(' ') }">Hello world!</div>`
);
}
my understanding per https://github.com/OfficeDev/office-ui-fabric-react/wiki/Component-Styling#styling-best-practices is that I need to use getTheme() and styles (not style) prop function for the new way of doing styling. So I'm still looking for a getTheme() solution
==============
here is the list of available fonts
https://github.com/OfficeDev/office-ui-fabric-react/blob/1b9405b3b64839975e16ee1fad04d7868d9e3b99/packages/styling/src/styles/fonts.ts
fonts visualized: https://developer.microsoft.com/en-us/fabric#/styles/typography
colors: https://developer.microsoft.com/en-us/fabric#/styles/colors
You can do it by adding the following code when loading theme:
loadTheme({
defaultFontStyle: { fontFamily: 'Comic Sans MS', fontWeight: 'bold' },
.......
This is available since version 7.21.0 of office-ui-fabric-react
These are the urls where you can find the release and report of bug:
https://github.com/microsoft/fluentui/issues/7416
https://github.com/microsoft/fluentui/releases/tag/office-ui-fabric-react_v7.21.0
https://github.com/microsoft/fluentui/pull/9981
Related
For now, there doesn't seem to be a documented way to easily change Hangfire's Dashboard layout and styling to accomplish tasks like:
Use the full browser width (annoying when you have long Job Ids and Names)
Can't tweak the styling to better match a parent's site look, adjust grid column widths, etc
There have been Hangfire pull requests to add this type of feature, but nothing that's been integrated into Hangfire.Core, nor a plugin that I could find. After looking at the core source myself, I figured it would be too much of a pain to maintain my own fork just to add this customization.
So, what's a dev to do?
Here's one way to re-style the Hangfire Dashboard that is fairly lightweight, but requires same origin.
High-level:
Setup Hangfire per usual, setup the Dashboard, make sure things are working
Instead your linking directly to your configured Hangfire Dashboard link (e.g. /Admin/Hangfire), create an page on your site with an iframe that points to the Hangfire Dashboard.
Use a combo of js and css to tweak the dashboard iframe from the parent page.
Quick example:
<%# Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="iframeTest.aspx.cs" Inherits="WebApp.iframeTest" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<style type="text/css">
.hf {
border: none;
width: 100%;
height: 500px;
}
</style>
<script type="text/javascript">
function FixHangFireStyling() {
//Set page/container to full width
$("#wrap .container", frames['hf'].document).css("margin-left", "10px"); //adjust the px value as your parent layout requires
$("#wrap .container", frames['hf'].document).css("margin-right", "250px"); //adjust the px value as your parent layout requires
$("#wrap .container", frames['hf'].document).css("width", "100%");
//Remove the word breaking and predefined column (td) widths on the grids
$(".js-jobs-list-row td", frames['hf'].document).css("width", "auto");
$(".js-jobs-list-row td", frames['hf'].document).css("word-break", "normal");
};
function FixHeight(obj) {
//Auto adjust the height of the iframe based on the height of the Hangfire page (adds an extra 250 to account for my page parent page's height/layout)
obj.style.height = (obj.contentWindow.document.documentElement.scrollHeight + 250) + 'px';
}
</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<div class="right_col" role="main">
<div class="col-md-12">
<iframe class="hf" name="hf" id="hf" src="/Admin/Hangfire" onload="FixHangFireStyling(); FixHeight(this)" scrolling="no"></iframe>
</div>
</div>
</asp:Content>
And the result (full width, styling reapplied when navigating within the iframe, grid column adjustments to get rid of annoying text wrapping, and a quick iframe height auto-adjustment):
(24"W Monitor, 1920px resolution)
I currently use Stylus, and create some css for hangfire dashboard.
Here very simple css. Paste into Stylus editor
.container,
.navbar > .container {
width: 90%
}
Before Stylus
After Stylus
In web css, we can set css for sub element. Example:
<div class="test">
<p>abc</p>
</div>
And we can set the <p> css by:
.test p {
font-size:20px;
}
Now in React Native, I have this:
<View style={myStyle.test}>
<Text>abc</Text>
</View>
How we can set the <Text> style by myStyle.test?
Actually you can't use like css children, you have to set a custom style for each element that you wanna use.
CSS in react native is just a subset of web css and it doesn't allow you to do what you do in webCss. All you have is inline css. So you have to style them separately. You can avoid repeating by defining a common style object and pass that instead of repeating.
You can check out this library as well:
https://github.com/vitalets/react-native-extended-stylesheet
According to docs
All of the core components accept a prop named style. The style names and values usually match how CSS works on the web, except names are written using camel casing, e.g. backgroundColor rather than background-color
Now cascading is not supported in react-native, yo =u have to provide a style prop to each element for it to be styled.
I am trying to divide my CKEditor 5 toolbar in two pieces, far apart from each other. Here's my actual toolbar :
With the following html rendered code :
What I would like to is something like this :
toolbar: [
'heading',
'bold',
'italic',
'underline',
'=', // this is the delimiter
'alignment:left',
'alignment:right',
'alignment:center'
],
And I want to generate this code based on that delimiter :
<div style="display: flex; flex-direction: row; justify-content: space-between;">
<div>
<!-- part 1 before the = -->
</div>
<div>
<!-- part 2 after the = -->
</div>
</div>
I can't figure out how to achieve this. Anyone has an idea ?
The current ToolbarView doesn't support splitting into multiple lines.
I can think of two quite straightforward choices:
Extend ToolbarView so it can do something like this and either use it directly in your own Editor class or inject it instead of the original ToolarView just like you can inject your own icons.
Fill two separate toolbar instances and use them in your own editor class.
BTW, the simplest editor implementation you can use as a base is the DecoupledEditor which you can for instance see here: https://docs.ckeditor.com/ckeditor5/latest/examples/builds/document-editor.html
This issue is tracked in https://github.com/ckeditor/ckeditor5/issues/6146 add thumbs up to the ticket if you would like this feature to be implemented.
How can I edit my Header info fluidcontent_core Extension. I use it instead of the 'normal' CSS_Styled_Content with FLUIDPAGES 3.1.2, FLUX 7.1.2, FLUIDCONTENT 4.1.2, FLUIDCONTENT_CORE 4.1.1 and VHS 2.1.4 - the latest versions of FLuidTYPO3.
For example, I need an additional <div class="text-center">|</div> for my <h1> Header, like this
<div class="text-center">
<h1>{textBla}</h1>
</div>
How can I add additional HTML-Code for h1 - h6 or change the labels 1,2,3,4,5,6 to Text Strings!?
In further projects I use lib.stdheader / tt_content for this case. But now it's all about FLUID. I've read the Dok, but I'm still helpless .. Thanks for your help.
the templates of content_core are all in the Private dir of the ext. itself.
If you take a look at them, you will see that the headers are rendered from a comma separated string set in the setup.ts and deflated as an array.
You can make your ow array or create your own dropdown with whatever data you like. It is flux based so almost limitless.
Thanks for your help, rob-ot! I think I've got it.
setup.ts
plugin.tx_fluidcontentcore {
settings {
header {
classNames = testheader, blatest
}
container {
classNames = hello
}
}
}
I leave the header level at constants types = 1,2,3,4,5,6 and add new classNames. For my case I add also a new container className, so my output is like:
<div class="hello">
<h1 class="blatest">
Header only level 1
</h1>
</div>
Thanks!
Trying to use equalizer plug, but id doesn't work, and no errors. It`s look like http://goo.gl/OvKy1g. Here is a page http://goo.gl/INMqUL. Do i need include some css for it.
You can use the Foundation Equalize plugin along with Twitter Bootstrap, but you need to do a couple of things to make it work.
DEMO
First, your principle issue is that foundation.js is looking for the corresponding foundation.css. Since you're using Twitter Bootstrap as your base styles, you probably don't want to have to deal with all of the potential style conflicts or having your users download another large css file. Really all that is needed is a reference to the Foundation version and namespace, so just add the following to your css:
meta.foundation-version {
font-family: "/5.4.5/";
}
meta.foundation-data-attribute-namespace {
font-family: false;
}
The second issue is with your markup. You have the data-equalizer-watch attribute applied to the containing .col-sm-4 element, but you have your border on the child element with the class latest-news-item. So change your markup to be:
<div class="row" data-equalizer>
<div class="col-sm-4" >
<div class="latest-news-item" data-equalizer-watch>
<!--Your content here-->
</div>
</div>
<div class="col-sm-4" >
<div class="latest-news-item" data-equalizer-watch>
<!--Your content here-->
</div>
</div>
<div class="col-sm-4" >
<div class="latest-news-item" data-equalizer-watch>
<!--Your content here-->
</div>
</div>
</div>
As you can see in the demo, I was able to get your test page to work with these changes, but I was also able to dramatically reduce the foundation.js file size by using the Custom option on the Foundation Download page and just building a js version with the equalize plugin only. The minified version was 31K. If you're not planning to use any of the other foundation plugins, you might consider using a custom file.
That said, for folks that are looking for an alternative lighter-weight approach, it might be just as easy to write your own jQuery such as by adding a class to the row you want to equalize (I called it 'equalize') and then add:
var row=$('.equalize');
$.each(row, function() {
var maxh=0;
$.each($(this).find('div[class^="col-"]'), function() {
if($(this).height() > maxh)
maxh=$(this).height();
});
$.each($(this).find('div[class^="col-"]'), function() {
$(this).height(maxh);
});
});
Wrap it in a function and you can call it on resize as well if that is important to you.