I wish to set some styling on the storybook canvas and docs at a global level. Could anyone suggest me a way out?
Thanks!
You can use the preview-header.html for that. Just add that file to your .storybook folder. Then add a style tag there, e.g.:
<style>
body {
font-size: 15px;
}
</style>
All it's contents are being injected to the Storybook preview Iframe, so you can add styles as well as other scripts and stuff.
https://storybook.js.org/docs/react/configure/theming#global-theming
Create manager-head.html file in .storybook directory and set your styles in
<style>
...
</style>
Related
Up until now, I've always used a single CSS file when creating multiple page applications which would store all my CSS rules.
Now that I'm using Vue.js and components, I am not sure where to write my CSS.
I could write the CSS in the <style></style> tags of a component but to me this only makes sense if the CSS is only used for this specific component. This leaves me wondering where should I write CSS which I would like to be applied globally to everything.
Imagine I have some CSS which I want to be applied to everything like this snippet:
*, *:after, *:before {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
text-decoration: none;
}
Where would I write it?
Until a better solution I can offer two suggestions:
1. In App.vue file
If it's just a small amount of code, put it in your App.vue file
As you said:
"I could write the CSS in the tags of a component but to me this only makes sense if the CSS is only used for this specific component."
If you put CSS in the in the <style></style>in any .vue files that's part of your project it's going to be global.
<style></style> get's applied to the whole project unless you add scoped to the tag.
<style scoped>
body {
background: green; /* This won't effected your main <body> tag unless you actually have a `<body>` inside the `<template>` of that file */
}
</style>
2. Import a separate file containing only CSS (updated and easier)
From #Fabjan in the comments.
Just import the .css file in your main.js file:
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import './assets/lib/css/reset.css' // my own reset file
import './assets/lib/css/myMain.css' // global stylesheet
Make sure to put it before your run your app. new Vue({})
(3. My previous answer:)
You can create a styles.vue and add all your global styles there inside <styles></styles> without scoped. (this worked for me)
Then inside your main.js file you write:
import GlobalStyles from "./assets/lib/css/styles.vue"
Vue.use(GlobalStyles)
Make sure your styles.vue contains at least on tag inside for it to import properly.
<template>
<div class="empty">
</div>
</template>
<style>
body {
background: red;
/* The rest of your Global CSS code */
}
</style>
This feels really tacky but it worked for me now.
Hope it helps and I'd love some feedback or comments if people have better solutions.
Here is my solution to configure global scss with my project that using Nuxt.
Assume that you already have node sass and sass-loader installed.
In nuxt.config.js file add your SCSS path from static or assets folder
css: [
'#/assets/scss/main.scss'
]
Bonus: if you don't like this way maybe you can get a try nuxt-sass-resources-loader
When you set an extra css class to a CMSField by ->addExtraClass("my-class");, which css file can you edit to set the styling for this new css class?
The only way I see now is by editing either css files in the Framework or CMS folder, something I rather avoid doing.
Is it possible to include a link to a custom css stylesheet in the CMS area where I can place all the css code?
You can load your custom Stylesheet into the CMS by adding the following to your config.yml file:
LeftAndMain:
extra_requirements_css:
- mysite/css/mystyle.css
you can add code like this...
Requirements::customCSS('
#Form_FilterForm .field {
display:inline-block;
width:31%
}
');
...almost anywhere and it will be included.
If these must be in the head tag then...
Requirements::insertHeadTags("
<style>
#Form_FilterForm .field {
display:inline-block;
width:31%
}
</style>
");
I am trying to add custom styling to my web app. Here is the link to my code:
https://github.com/SammyAbukmeil/rps-challenge
In layout.erb I have the following:
<head>
...
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/custom.css">
...
</head>
Which should be loading my custom.css file.
In views/index.erb I have an ID of test:
<img class="img-responsive center-block" style="margin-top: 40px" id="test"src="http://i.imgur.com/hSuFTzO.png">
and in css/custom.css I am calling that ID:
#test {
margin-top: 50px;
}
But for some reason it doesn't apply my custom styling, although bootstrap (which is being linked in layout.erb and is adding styling to the .erb files throughout the project) is working.
I've tried looking through similar questions on stack overflow without success, also tried google for how to add custom styling to a bootstrap project - everything I'm doing seems to be correct.
Any advice is greatly appreciated. Thanks!
EDIT: So i checked the console and found this:
...
Status Code: 404 Not Found
Request URL: http://localhost:4567/css/custom.css
...
So I guess I'm not linking it right.
Bootstrap selectors are very specific, for example body > div > img.img-responsive. You need to be more specific in order to override the selector. You can test this by using temporally the !important declaration:
#test {
margin-top: 50px !important;
}
If it overrides, you have a working setup that just needs more specific selectors. After that you should remove the !important declaration and add details to the selector:
body > div > img#test {
margin-top: 50px !important;
}
In Sinatra any static files (such as CSS files) should be in the folder pointed to by the public_folder setting. Usually this is named public. In your server.rb you set it to be public but relative to the projects root.
You need to create a public folder at the top level of your project (next to app, view etc.), move your css directory to it and then change the setting in server.rb so that :public_folder points to it, similar to what you have done with the :views setting:
set :public_folder, proc { File.join(root, "..", "public") }
First You need to understand the hierarchy of CSS
You Can use Firebug (Firefox) to identify that your styling is apply or not also what class is overrating your custom css.
Note: Also avoid adding ID for CSS Styling
You need to override the bootstrap selector.
It is not good practice to use this in your finished website, however you can use !important to over ride other style rules.
Example of Use
.element-class{
width:50%;
}
.element-class{
width:100% !important;
}
The element would have the width of 100% here.
Read more about when to use this on the css-tricks article
I recently created a initial template with initializr for a bootstrap project. I noticed that there is a style tag in the body:
<style>
body {
padding-top: 50px;
padding-bottom: 20px;
}
</style>
Is there a reason this is not in a external css file? Or can this be put in a external css without negative implications?
It should be the same as writing an external file. However, it may be an easier way if you have minimal attributes to add.
The only difference is this would override any external css file that set the body to a different padding-top and/or padding bottom.
I'm trying to program a template with smarty, so i started to build a layout in HTML and, as expected, with CSS in an extra .css-file. When i had finished it, i started to adapt it to smarty, but i had realized, that Smarty does not work with "normal" css. Damn delimiters ^_^
Though, i tried to include the .css-file with:
{include file="templates_css.css"}
and changed my css-code a bit:
<style type="text/css">
.body {ldelim}
width: 990px;
margin: 0 auto;
{rdelim}
.title {ldelim}
font-family: Verdana;
font-size: 275%;
margin-left: 230px;
padding: 40px;
color: #929292
{rdelim}
</style>
This is what i read the last hour about "including css-files in smarty, and they recommended "Thanks! It
It is better to have stylesheets seperated from .tpl files.
It is simple to use html tags with smarty.
And so you can simply call css from .tpl file as:
<link rel="stylesheet" type="text/css" href="{$RootDirectory}/path_to_css_directory/templates_css.css" />
Hi
You Can call external style sheet like add following line in your tpl file
OR
If you want to use internal style then just write
{literal}
here start style tag
add inline style here
Here End style Tag
{/literal}
Thanks
The secret on using smarty is not how to use the delimiters. The secret hides in the way smarty handles the path. For example:
...\htdocs\smarty <- smarty library
...\htdocs\myWebsite\css\your.css <- your stylesheet
...\htdocs\myWebsite\templates\base.tpl <- the file where you load your .css
...\htdocs\myWebsite\index.php <- the file where you load the template (base.tpl)
So... If you see your template is in \templates\base.tpl and your css in \css\your.css, you may think that you need the relative path from your template to your stylesheet. That is wrong! Note, that the, let's call it "position", of your template file will be the same as the file which is loading the template file(here it is the index.php). That means your css include, like you do it in HTML will not have the path from your template to your css, but from your index.php to your css.