I found that I don't need to write css links in the head.But the css still works.If so,then how do I manage my css file.For example, use different css file in different page.
A the moment, you have something like this:
<template name="myTemplateName">
<p>HTML!</p>
</template>
/* Should only affect paragraphs in the template above. */
p{
color: red;
}
You must change that to something like this:
<template name="myTemplateName">
<div class="myTemplateName">
<p>HTML!</p>
</div>
</template>
/* Will only affect paragraphs in the "template" above. */
.myTemplateName p{
color: red;
}
Use css files named like template and meteor will include it
Meteor is for SPA - Single Page Application .In SPA, all your Css files will be complied and minified into a single file and served to the client in the initial page load. It is same with Html and Javascript file. In meteor it is one of the seven core principle (Data on the wire). The only things that goes between your client and server after the initial page load is your data, not the HTML or Css content.
Meteor team working on a mechanism to control the file load order. Check the trello board for information.
Related
Suppose we added the image in CKEdtitor and aligned it to right:
CKEditor will add image and image-style-align-right classes to figure element:
<p>Lorem ipsum of something like this </p>
<figure class="image image-style-align-right">
<img src="https://XXXXX.com/116cc956-4cf4-4d2a-98cf-ffa69ab0eb3c.jpeg">
</figure>
Now we want the inputted HTML will be submitted by email? Above HTML must be submitted to the backend, then all styles must be converted to inline CSS. But how the backend will know about .image, .image-style-align-right and similar CSS rules?
There are below styles in theme/imagestyle.css file of #ckeditor/ckeditor5-image package:
/*
* Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved.
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
*/
:root {
--ck-image-style-spacing: 1.5em;
}
.ck-content {
& .image-style-side {
float: right;
margin-left: var(--ck-image-style-spacing);
max-width: 50%;
}
& .image-style-align-left {
float: left;
margin-right: var(--ck-image-style-spacing);
}
& .image-style-align-center {
margin-left: auto;
margin-right: auto;
}
& .image-style-align-right {
float: right;
margin-left: var(--ck-image-style-spacing);
}
}
Problem 1: The source styles are in frontend and written by PostCSS
First, above code is PostCSS. Because I must not migrate to PostCSS just because using the CKEditor, I can not include this file to my source code written by other CSS preprocessor. In frontend, the Webpack compiles these styles an apply it dynamically when application starts (I mean, no file with compiled CSS available):
But how to bring up these styles to server?
Problem 2: How to bring up to server only these CSS classes which will be used and no more?
Well, even if I convert above .image-style-side , .image-style-align-center etc. to CSS and submit them to server, I will be enough only for Image feature. But the other CKEdtitor plugins adds other CCS classes and these classes are in numerous of other files!
Сonversely, there are a lot of CKEditor classes in which we are don't need on backend, e. g. ck-editor__editable, ck-rounded-corners, ck-editor__editable_inline: there classes are for CKEditor's GUI and will not require once editing will done?
Problem 3: The CSS variables
Above listing includes the CSS variables like --ck-image-style-spacing, --ck-image-style-spacing etc. To make inline CSS, server must know about them too.
As you stated, there are several major time consuming problems to be solved with approach that you took.
Key to a successful email template is compatibility with many different email clients.
Email clients support archaic HTML tags, such as <table> for creating layout. Inline styles are also preferred. Many modern CSS properties are not supported at all. For example, border radius is not compatible in some clients, so rounded buttons will actually be button images instead of code. Different fonts are also not rendered.
If I were you (and if CKEditor doesn't have email templating), I'd post the template you created to some of the freelancer platforms out there and say 'guys, how much to convert this HTML to email compatible HTML'. That's the fastest and cheapest way. Test resulting code by sending it in email and checking it out in different email clients.
Other way is for you to get to know what creating HTML and styling for emails is all about. Good starting point is to analyze (and perhaps reuse) HTML from HTML emails that you received from, let's say, your local cell service provider.
You'll need to do a research on the topic to find out what suits your needs, but here are some basic guidelines:
supported HTML tags in emails
step-by-step guide to creating email templates
In my typo3 project I have a fluid template that renders bodytext from CMS:
<f:section name="Main">
<div class="RteContent">
<f:format.html>{data.bodytext}</f:format.html>
</div>
</f:section>
Now, in the RTE you can set links for files or links for pages. My goal is to have a different styling for file links. Is there any way to find out what kind of links are being set and then apply an according CSS style for this type of file link?
parseFunc
The HTML output of RTE content is controlled by a parseFunc (see https://docs.typo3.org/other/typo3/view-helper-reference/master/en-us/typo3/fluid/latest/Format/Html.html). The default is lib.parseFunc_RTE but you can use your own.
If you are a TypoScript magician (I am not) it can do pretty amazing things (https://docs.typo3.org/m/typo3/reference-typoscript/master/en-us/Functions/Parsefunc.html#makelinks). I would look into makelinks.http.ATagParams (stdWrap).
CSS
Yet there is probably a much easier way. By using TYPO3's fixed file storage URL to our advantage we can use CSS selectors to match links to files.
This might need adapting depending on your configuration which might influence link generation (config.baseUrl/absRefPrefix)
a[href*="/fileadmin/"] {
background: yellow
}
or
a[href^="/fileadmin/"] {
background: yellow
}
or
a[href$=".pdf"] {
background: yellow
}
SO. I have a simple CSS Class just like below:
.Container
{
width: 300px;
height: 100px;
background-image: url('../images/flags.png');
}
Is it possible that I change the value of background-img while running my MVC application? Some how I'd like to inject the value of background-image from my controller action. Your thoughts...
Just to make it clear that why would I need to do this? Refer to my
previous question which is not answered with a bounty of 50+.
There's a few ways to do this. Probably the easiest is to include the css class inside your master view and use some sort of base model that has a property for the value of the image you want and render that out in the view.
Alternatively, there's no reason your link tag for the css couldn't reference another controller action, take a query string parameter of the value you want and render out css instead of html. The controller could render a partial view that is css rather than html.
If the number of possible background images is well defined and small, create css classes with those background images defined.
Then switch the class of your element in HTML using ASP.NET on the server-side or JavaScript on the client-side.
E.g.:
<div class="image-container #imageClass"></div>
If you instead want to show arbitrary images, use inline-style and set that using ASP.NET. Here are two examples both using server-side rendering, written in the Razor templating syntax:
<div class="image-container" style="background-image: url(#imageUrl);"></div>
and here one using sprites where the image itself is set in the funnyimage class:
<div class="image-container funnyimage" style="background-position: #xPos #yPos"></div>
The examples above all work with server-side rendering. This means your images only switch when you change or reload the page. For changes while the page is viewed, you'll need to use AJAX.
Whatever you're doing that cannot be solved with a jQuery line like $(".Container").css('background-image', myImage); or adding a simple style tag to your head/body..
.. yeah, you can still use <style> tag injecting to manage your css.
Following the questions
Using jquery remove style tag from html page and jQuery CSS - Write into the <style>-tag, and mixing the recipe with some AJAX, here's the approach:
$.get(url, function(myImage){
if(myImage) {
$('#mystyle').remove();
$("<style id='mystyle'>body .Container{ background-image: url(" + resultImage + "); }</style>" ).appendTo("head");
}
});
This way you're renewing your background image for all of your .Container on every ajax call to whatever service you're using.
Yes, it is possible now to Change HTML, CSS, and JavaScript during runtime. follow the following steps :
go to NuGet package manager and install Microsoft.AspNetCore.MVC.Razor.RuntimeCompilation. Check the compatibility during installation.
add the following line of code in your startup.cs file :
services.AddRazorPages().AddRazorRuntimeCompilation();
now save and build the project. it worked for me.
You can't change the css during runtime, but you can override the attribute by injecting the new class instead:
.ContainerUpdated
{
background-image: url('../images/newimage.png')!important;
}
I want to set up some basic color codes in my css file.
My css looks as below:
#colorGood: #32CD32;
#colorOk: #FFA500;
#colorBad: #FF4500;
.testClass{
width: 80%;
background: #colorGood;
}
My XML has a button control as below:
<Button id="testBtn" class="testClass" />
I create the above view and css in the web-ide. When I run it, it does not show take the color mentioned in the variable.
Is it possible to have variables in CSS [since the SAPUI5 library already contains less pre-processor].
Is this the correct way to implement this in webide?
Also any example to acheive this through the eclipse/HANA Studio IDE would be really helpful
Once I had to use my own CSS file and one thing was obligatory: to include the custom CSS. Not sure if it is the best practice thing; at least worked for me: in my Component init code I added the following:
jQuery.sap.includeStyleSheet({
url: jQuery.sap.getResourcePath("<full path to the CSS file>"),
id: "custom_style"
});
where includes also your name space. Say your name space is com.foo.project and the css file with name mystyle.css is stored in css project folder, then you full path would be:
"com/foo/project/css/mystyle.css".
I am using basic template for mvc 4.I want set background image for my div element.My stylesheet located in "~/Content" directory.Here is part of my .cshtml file where I am trying direct specify image without css:
<div id="add_image" class ="image_bar" style="background-image:url(add.jpg)" ></div>
Here is my css:
#add_image {
background-image:url('~/add.jpg');
}
#add_image:hover {
background-image:url('~/addhover.jpg');
}
.image_bar {
width:40px;
height:40px;
}
Neither css neither direct "styling" not works - whats wrong? Thanks.
In your second example, you are using the '~/' moniker, this is a .NET thing that instructs the code to look at the root of the site. Since the .NET engine does not process your CSS file, the '~/' has no effect and probably makes a really ugly HTTP request to the server.
Since you have your CSS in your Content directory, one solution is to create a sub directory in your Content called 'images'. Store any and all of your CSS images in that folder. Then, from your CSS file, you can call and reference images in that file as such:
#add_image {
background-image:url('images/add.jpg');
}
#add_image:hover {
background-image:url('images/addhover.jpg');
}
This is assuming a directory structure like so:
Content
images
add.jpg
addhover.jpg
site.css
Though I am not a designer, I believe that CSS will look for images relative to the location of the CSS file and not the root of the web application like HTML. Additionally, if you stored images in the same directory as your CSS file, then you should be able to call those images without the 'images/' prefix. However, most like to keep resources separate.
Instead of
background-image:url('~/add.jpg');
try using
background-image:url('./add.jpg');
try with
background-image:url('../add.jpg');
try this
**example -
background-image:url('../img/home_bg.jpg');**
background-image:url('../**ImageFolderName**/add.jpg');