I'm testing the use of a static html template for TYPO3 (in typo3 directory). I copied the fragment <body> ... </body>
It should be like on img_1a:
and it's like img_1b, instead:
Sure, the original template "introduction" can not load my own style.css
I followed the instructions as here, img_2:
How to include a custom CSS file in TYPO3
There is CSS yet included from the Introduction Package. You should either remove this CSS or overwrite the CSS.
Related
We have styles.scss (base css file) and also providing option to load custom css url so custom can change their logo or colors...
Below is the requirement:
if custom URL is not available then it should load base css file
if custom URL loading is failed then it should load base css file
if custom URL is provided then it should load custom url and render the UI
I tried to option to add custom css in stylsheet in index.html but it is not loading as expected. I am getting base css is loading first and then custom css so i can see transition from base css to custom css.
how we can load only custom css when i have custom URL ?
Please let me know
Have you tried compiling it with the --aot flag?
If that doesn't work, you could use some type of semantic nomenclature (like maintainableCSS) so that you could just give different html class names to your elements so that they are only referenced by your component's css stylesheet instead of style.css
I am trying to customize a theme of BigCommerce. The problem is this theme is using SASS (.scss) files instead of css. I have basic knowledge of SASS.
But I need to customize theme according to html template. In other word you can say I am trying to convert html template into a theme (free theme that is downloaded from market).
Issue there is that, html template is using CSS and theme uses .SCSS. So right now I am trying to find way to add css of template into theme.
Right now I am finding way to embed my css into theme and here are few things that I have tried
I tried to directly add CSS into .SCSS file like this
.header-logo-text{color:#ffffff!important;}
The above css code which I am typing in theme.scss file (just for testing purpose) to check whether writing css in .scss file will take any effect or not, But this way it didn't change font color!
In a second way I tried to add css in html tags using style like this
<div class="anyclass" style="background:red;">
This way its picking up css.
I have created online store on bigcommerce site and trying to customize from customize option oprovided by bigcommerce. Since I couldn't see any upload file option through which I can directly upload my css files into it, thats why trying to somehow add css in current files of theme either in html or in .scss.
And not a single css file is present in theme, how I can add my css into that theme?
SASS with the .scss syntax is a superset of CSS. That means valid CSS is automatically valid SASS (not in the other syntax .sass though). Of course you need to make sure you're SASS file gets compiled and included.
TL;DR: you can use CSS inside .scss files.
I am trying to build a new design on an old system that is using DOJO, eventually we are going to move to AJAX to handle the data calls. Is there a default or minified CSS file so I don't have to use their themes? (i.e. Claro, which is the theme that was and still is applied)
It says you can make custom themes, but there has to be a bare bones version out there somewhere.
Thanks for your time.
The bare minium CSS is available in dijit.css
(you can see the file on the CDN: https://ajax.googleapis.com/ajax/libs/dojo/1.10.0/dijit/themes/dijit.css)
As dojo team says about this file :
Essential styles that themes can inherit.
In other words, works but doesn't look great.
So be aware it will be ugly!
But you can build your own theme starting from that.
dojo comes with out of the box the following themes:
Claro
Tundra
Soria
Nihilo
There is no really a default CSS a part of the CSS which is included in on of the listed theme. But as ben point out in his answer, there is a dijit.css which is a very essential base of CSS which other themes can in-heritage from.
You can apply them adding the following in your HTML file:
<link rel="stylesheet" href="dojo/dijit/themes/claro/claro.css" />
<body class="claro">
Or you can use a CDN, example for claro (just change the name for css file in order to get a different theme):
https://ajax.googleapis.com/ajax/libs/dojo/1.10.0/dijit/themes/claro/claro.css
The CDN version is an unique file and easy to include in your app but it is not minified.
If you need to have a minified version, you could use the dojo build to compact all your project files and included CSS for your theme minified.
More info here:
https://dojotoolkit.org/reference-guide/1.10/dijit/themes.html#id10
I want to develop a usual website with Meteor.js (not one-page web app) and I want to load only specific css files for every page. So not all pages share the same css code.
Is it possible?
First off if you are using Meteor you are not building a "usual" site, you are building a very powerful SPA (single page application). You can imitate a "usual" website with introducing routing, try IronRouter.
OK now about CSS. Once you deploy Meteor all your CSS and JS are merged and minified. So if you want to achieve what you are asking you will need to add a package like this one.
https://atmospherejs.com/mrt/external-file-loader
https://github.com/davidd8/meteor-external-file-loader
Then attach it to trigger once a template is created:
Template.myCustomTemplate.created = function() {
Meteor.Loader.loadCss("//example.com/myCSS/style.css");
};
I believe you could also load the CSS from the Meteor server through Meteor's Asset API. Read more here: https://docs.meteor.com/#/full/assets
I found a simple solution. In your meteor project folder create a folder named "public" (no quotes). In that folder create a folder called "css" (no quotes). Put the CSS file in that folder.
In the html file which you want the specific CSS file to apply to do the following:
<head>
<link href="css/yourfile.css" rel="stylesheet">
</head>
Since the last part of your question says, "So not all pages share the same CSS code." you might consider using less and wrapping your template in a different div class.
For example
HTML file
<template name="page1">
<div class="page1css">
<p class="content">Page 1 content</p>
</div>
</template>
LESS File
.page1css {
.content {
font-size: 2em;
}
}
This way you can just wrap your pages and the corresponding css in the correct class.
I was reading this tutorial from the DNN website
http://www.dotnetnuke.com/Community/Blogs/tabid/825/EntryId/2675/DotNetNuke-Skinning-101-Part-2.aspx
I found the tutorial to be very useful, however there was an issue when I tried to apply the CSS style. For example after adding the content pane in the initial index.html I have no idea where to place the CSS. If I add it to the head section then the parser will remove it.
Where could I add or reference the css file on for the skin?
thank you.
Not a DNN specialist, but:
A skin normally contains a stylesheet file called "skin.css" in the skins\skin-name folder.
The reference to this stylesheet is provided for you by the DNN framework.
To reference multiple CSS files, or to add css files with different names, you normally #import them from the skin.css file.