Managing multiple stylesheets in Blazor
Background
I am a backend developer creating a Blazor WASM website.
Problem
I am currently developing an application which is using MudBlazor. I am happy with MudBlazor and would like to continue to use it.
However, I would also like to use the HTML editor provided by Radzen.
The issue I am facing is that there are elements in the MudBlazor sytlesheet (I'm not sure exactly which ones) which are keeping the visuals in the Radzen HTML Editor from working at 100% (bullet points not appearing, indentation not quite right, etc).
With Mudblazor stylesheet active, the text editor does not work as expected
What I've Tried
To confirm that the issue is with the MudBlazor stylesheet, I have commented out the MudBlazor stylesheet in index.html, resulting in the html editor working as expected (but the rest of the website not having the MudBlazor styles). The image below shows the result:
With MudBlazor stylesheet commented, the text editor works as expected
I have put the Radzen Text editor into its own component, so that there are no MudBlazor components accompanying it. From there, I have been attempting to find a way of excluding the mudblazor stylesheet from the html editor component.
Investigated the use of Blazor CSS Isolation, but from what I can see this is designed for the use of custom css created by myself, not the use of stylesheets (please correct me if I'm wrong).
I read somewhere that in general html the latest stylesheet will be utilised. So, in my TextEditor.razor page, add the stylesheet in an attempt to make it the last thing read:
<head>
<link rel="stylesheet" href="_content/Radzen.Blazor/css/default-base.css" >
</head>
The Code:
Index.html
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>Writers Friend Web App</title>
<base href="/" />
<!--<link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />-->
<link href="css/app.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet" />
<!-- Commenting the below stylesheet allows the Text Editor to work as expected -->
<link href="_content/MudBlazor/MudBlazor.min.css" rel="stylesheet" />
<link href="_content/MudBlazor.ThemeManager/MudBlazorThemeManager.css" rel="stylesheet" />
</head>
TextEditor.razor
<head>
<link rel="stylesheet" href="_content/Radzen.Blazor/css/default-base.css" >
</head>
<RadzenHtmlEditor Style="min-height: 300px; margin: 1rem;"/>
#code
{
[Parameter]
public Action<string> OnTextChange { get; set; }
}
What I'm looking for
I would like a way of allowing the Text Editor component to have access to the text editor stylesheet ONLY. i.e. exclude the MudBlazor stylesheet from my component.
I'm wondering if I can remove the MudBlazor stylesheet from the index.html file and include it in the section of all the other components, but this would make it messy and I would like to avoid this if possible.
Thank you in advance!
Related
I am designing a fitness website, for testimonials, I tried using bootstrap code. but as soon as I enter the link for bootstrap CSS my own CSS stopped working.
first, I gave the link to bootstrap file than on second line gave the link of my own CSS file but still not working
<html><head>
<meta charset="utf-8">
<meta name="viewport" content="width-device-width, initial-scale=1.0">
<title>NewliFit</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" >
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.theme.min.css">
<link rel="stylesheet" type="text/css" href="css/firstone.css">
<script src="javascript/fade.js"></script>
</head>
.
That’s weird, I know that you must add a link to Bootstrap before you add your own files, but unless you have a name conflict in your own CSS, everything should work as planned. A strange tip, would be to check that you don’t have uncalled for spacing between your HTML tags. Apart from that you’d need to post your code.
Cheers
After a few days of searching and trying to solve, got nowhere.
CKEditor 4.7.0 is stripping the content between the <title></title> tags. I need CKEDitor to leave the title content alone no matter how / where the title tag is used.
I have tried:
allowedContent: true,
extraAllowedContent : 'title',
extraAllowedContent: 'title[*]',
config.allowedContent = true; (in config.js)
CKEDITOR.dtd.$removeEmpty['title'] = false; (in config.js)
No luck with above. Then tried suggestion here ckeditor deteles page <title></title> title which works, but I end up with:
<!DOCTYPE html>
<html>
<head>
<title>OK Title</title>
</head>
<body> </body>
</html>
<p><br />
<title></title>
<meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1"><meta name="description" content="Web template presented with pure css."><meta name="keywords" content="css template"></p>
<link href="style.css" rel="stylesheet" />
<link href="red.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" /><!-- Header -->
<header class="w3-container w3-theme w3-padding" id="myHeader">
<div class="w3-center">
<h4>BEAUTIFUL RESPONSIVE WEB SITES</h4>
What I am doing is pasting into CKEditor an example CSS templates from https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_templates_black&stacked=h
I understand this is not the way standard HTML should be displayed (not to spec), but I need to prevent CKEditor from modifying the title tag no matter, just ignore it and let me use it wherever:) This is just a simple project for classroom where no one sees source of page and I need title tag to show in browser tab when I project page on whiteboard for students.
UPDATE: did discover if I save with the source in view, CKEditor does not modify the title tag. Works this way but not when in visual mode which like to have:)
After what seemed like endless searches found some info on a drupal forum. Had so many links open lost track of exact site where obtained the info, sorry.
Solved the problem by adding the following to my config.js in CKEditor 4.7.0:
config.allowedContent = true;
config.protectedSource.push(/<title>[\s\S]*?<\/title>/gi); // allow content between <title></title>
Hope this will help someone else:)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript Basics</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="header">
<h1>JavaScript Basics</h1>
</div>
</body>
</html>
h1{
color: green;
}
Here are both my HTML and CSS. I am using the ATOM text editor on my Mac. Whenever I preview HTML it shows JavaScript Basics in the default black color,not in green from my css.
Try this one dude!
`<link href='style.css' rel='stylesheet' type='text/css'>
The problem is a caching issue. CSS can be a little strange with caching, and while the classic combination CTRL + F5 works for images, it doesn't work for CSS. The better solution to dealing with caching in CSS is to hold down SHIFT while clicking on the refresh symbol.
Obviously, you can include a backslash in the filepath for the CSS reference, or append a version number, such as: <link rel="stylesheet" type="text/css" href="style.css?v2 />.
This version number doesn't 'mean' anything inherently, but can be useful for denoting updates to the CSS, and importantly will be considered a different file by the browser (forcing it to re-load the CSS).
If you have access to a back-end language like PHP, you can also force the browser to refresh the CSS automatically every time the page is loaded with PHP, by appending a timestamp within the link to the CSS file, with something like:
<link rel="stylesheet" type="text/css" href="style.css?<?php echo date('l jS \of F Y h:i:s A'); ?>" />
Keep in mind that CSS can be 'costly', so once you have finished development, you probably want to allow visitors to cache by removing the timestamp in a production environment :)
Hope this helps! :)
I am building a website using the Semantic UI CSS framework, and now I want to use some of its icons.
Here is the HTML:
<h1>Title<i class="lab icon"></i></h1>
I have linked the semantic.css, but I assume I need to do something else too to get the icons working? I tried linking this too:
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
But it still doesn't work. What am I missing?
Digging in the semantic CSS file reveals that the fonts need to be located here (relative to your semantic.css): themes/default/assets/fonts/
Source:
https://github.com/Semantic-Org/Semantic-UI/blob/master/dist/semantic.css#L5466-5467
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel='stylesheet prefetch' href='http://cdnjs.cloudflare.com/ajax/libs/semantic-ui/0.16.1/css/semantic.min.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/components/icon.min.css'>
</head>
<body>
<h1>Icon Example</h1>
<a class="item"><i class="alarm icon"></i>Notifications</a>
<a class="item"><i class="mail outline icon"></i>Messages</a>
</body>
</html>
you can try taking a look at the above snippet. You may also use the below link for other similar issues:
https://cdnjs.com/libraries/semantic-ui
You don't need to use font-awesome of any other library
try cdn first Official icon.min.css
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/components/icon.min.css'>
somethimes this doesn't work so what you can do is
go semantic-ui official page
download semantic ui zip folder and extract
in component folder you can find icon.min.css
include that file in index.html
<link rel="stylesheet" href="icon.min.css">
try to display those icon Official docs
<i class="disabled users icon"></i>
ENJOY
My solution was pretty simple (once I worked it out). I had edited themes.config to use my new (yet to be built) theme. As you know it falls back to defaultso everything seemed to work OK.
/* Elements */
:
#flag : 'supernewtheme';
#header : 'supernewtheme';
#icon : 'supernewtheme';
#image : 'supernewtheme';
#input : 'supernewtheme';
:
Even though the console showed the Icons font loading (no 404), iti didn't work. I also checked the font was in my build folder in the correct place, it was.
Changing the theme back to default for #icon did the trick:
#icon : 'default';
if someone is using electron or any other JavaScript framework.
This might work for you.
Icon's in electron after setting up semantic properly were not showing. The error is not in semantic neither loading. Error is with Photon and semantic combination. I used photon with semantic to make my UI look great.
Basic solution I opted is in reference to this official error reporting.
Also in my UI icon wasn't appearing for a drop-down so I used console to solve like
.myclass .icon:before, .myclass.icon-before {
font-family: 'dropdown';
}
Hope it helps.
I am trying to export a JSP generated document webpage to Microsoft Word. In the web browser, everything looks great. However, when I change
<%# page contentType="text/html; charset=utf-8" language="java" import="java.util.*, java.text.*;" errorPage="" %>
to
<%# page contentType="application/msword; charset=windows-1252" language="java" import="java.util.*, java.text.*;" errorPage="" %>
The page will try to open in word, but it will lose all of its styling.
I am linking to few external style sheets, but these are not picked up in the Word Document.
<link rel="stylesheet" type="text/css" href="css/common.css"/>
<link rel="stylesheet" type="text/css" href="css/general.css"/>
<link rel="stylesheet" type="text/css" href="css/headerfooter.css"/>
I have also tried linking href to the direct location on the server. This also did not work.
<link rel="stylesheet" type="text/css" href="http://localhost:8080/app/css/common.css"/>
<link rel="stylesheet" type="text/css" href="http://localhost:8080/app/css/general.css"/>
<link rel="stylesheet" type="text/css" href="http://localhost:8080/app/css/headerfooter.css"/>
Finally, I have tried to move the styling inside the JSP. However, this has not worked when it comes to exporting the document to word, either.
How can I export a JSP to Microsoft Word and have it retain styling?
Linking to external styling sheets will cause the JSP to lose formatting. The solution is to embed the styling inside the JSP. While I mention above that I did that, it contained formatting errors that, once fixed, displayed the styling properly in Microsoft Word.
Additionally, here is a good resource for adding Word specific styling to your document such as orientation, page margins, and embedded images:
http://sebsauvage.net/wiki/doku.php?id=word_document_generation