Include CSS-File in *.tpl - css

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.

Related

How to set css styles on storybook iframes

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>

How to override Bootstrap styles in Meteor?

I'm using twbs bootstrap 3.3.6 with Meteor and trying to style a <fieldset>.
However when I use the Chrome inspector it says that the style is coming from bootstrap.css even though I have tried using class-specific and id-specific css.
My style sheet is in the application root, as suggested by some answers.
I'm very new to meteor and css so I could be making a novice error.
Otherwise, what's the best practice to override bootstrap css settings?
Generally if you want to override the css you should put your css file after all of the other files like the bootstrap css because css starts from top to bottom so the bottom lines are the ones that will be executed, example:
<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="css/your-css.css" />
Also you can add !important at the end of every css line to give that style the top priority no matter of the line index, example:
.someclass {
color: red!important;
}
You can either override the specific property on the same class in your css...
.btn {
background-color: #fff !important;
}
...create an inheritance map so that it only applies to the element inside another specific element...
div.classForSpecificContainer btn {
background-color: #fff !important;
}
or specify your own class and add it to the element in question
myOverrideClass {
background-color: #fff !important;
}
The.. important part is that you use !important; to prevent Bootstrap from overriding it. That will generally solve the problem even if the CSS files load in the incorrect order, but not always. I have made a habit of prefixing my CSS files in the same folder with z- to make sure they get loaded last if I'm using something like Meteor that merges and compresses the CSS.
This seems to be a common problem in Meteor because of the way their build injects the merged stylesheet into the top of the html <header> instead of the bottom. There is a merged PR that looks like it will be available in 1.6.2 that allows you to put a pseudo tag anywhere in the <head> you want the merged css injected.
Example: proposed availability in 1.6.2 - PR already merged
<head>
<link rel='stylesheet' type='text/css' href='some-cdn.bootstrap.css'/>
<meteor-bundled-css/>
</head>
That will work once the merged PR is included in the next build.
Until then...
SOLUTION 1: If you're using the bootstrap LESS or SCSS files, you can just import it into your client/main.less or client/main.scss file and then import your override file after this. It looks like you're using pre=compiled css though, so move to SOLUTION 3.
SOLUTION 2: Use !important on the end of your lines... BAD not recommended practice. If you use important you break the cascade.
SOLUTION 3: Put you third-party library overrides files in your public folder and manually <link> it below the bootstrap <link> in your head. I suggest this for now.

External CSS file not working alongside bootstrap

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

How to have background image in symfony assets?

with symphony framework I did dump assets assets:install.
css file is hard copied to /web/bundles/appbundle/css/style.css I guess for background image in css I should have a relative path to reach outside of /web/ folder like this?
background-image: url(../../../../bundles/appbundle/images/top_bg.jpg);
but it doesn't work yet, I have filter='cssrewrite' in css tag too. probably I have to add that I am only editing the css file located at the path above after assets install, I did not edit the one in /Acme/Bundle/Resources/public/css any more. Then I did run assets:dump, now in /web/ folder there are two folders for images and css, I looked at new css and see the path became like this:
background-image: url(../../bundles/applicationadmin/images/top_bg.jpg);
But still all images are broken. I search stackoverflow and found this question, but still have problem. what else should I do?
please advice.
First of all, make sure that your css and images are inside correct folder.
src/AppBundle/Resources/public/css/style.css
src/AppBundle/Resources/public/images/top_bg.jpg
After you run assets assets:install, check if there is a folder on your web directory. It have to be a identical copy from Resources/public.
web/bundles/app/css/style.css
web/bundles/app/images/top_bg.jpg
And your style.css file should look like this:
background-image: url("../../images/top_bg.jpg");
However, if you are configuring the css directly on twig template, the url is different:
<style>
div { background-image: url("/bundles/app/images/top_bg.jpg"); }
</style>
To make it work in twig try this
<div class="container" style="background-image:url('{{ asset('bundles/appbundle/images/top_bg.jpg') }}')"> ,
of course presuming that you have installed the bundle's web assets under a public web directory.
I solve this issue with the following steps:
First let Webpack do his work.
Let's copy all the file to the public/build directory (images and css files)
Next step is to include the css style via twig/smarty in your template
Immediately after the "link" tag, you should open a "script" tag and overwrite all affected styles. In Twig you can work with the "asset" function to load the corresponding URLs from the manifest
i.e:
<link type="text/css" rel="stylesheet" rev="stylesheet" href="{{ asset('/build/css/header.css') }}">
<style >
.header { background-image: url('{{ asset('build/img/logo.png') }}') !important; }
</style>
Your background image is correct changed. The output looks like:
<link type="text/css" rel="stylesheet" rev="stylesheet" href="/build/css/header.5c7b2ca6.css">
<style >
.header { background-image: url('/build/img/logo.bb1272f9.png') !important; }
</style>
This is not the best way to work with Webpack. However, this is an interim solution to refactor outdated code. The next step should be to create entrypoints and build the style using SCSS. Webpack then takes care of the correct use of assets in the styles.

using css code multiple times with different values for different files

I created this code in oder to use it to place image and text side by side in a HTML page.
.mydiv {
width:646px;
height: auto;
}
.myimage {
float:left;
width:378px;
height:291px;
margin:5px;
}
The proble I am having is that I want to use the code multiple times in different files and with different image values and I don't want to be creating css file for all of them. So how can I write all the code for the with different values for all the files in one css file?
First, you can put your CSS in a CSS file, then include this file in all your html page by using this in the
<LINK href="special.css" rel="stylesheet" type="text/css">
(See W3C)
For the values that can't be reuse between your html files (the SRC of your image, for instance), you will have to right it manually in each file. You can do this directly in your HTML (if you use ) or by declaring in your header.
Create a .css file with the above code. You would need to specify the height of the .myimage class too. In all the files where you want the above file import the file using
<LINK href="example.css" rel="stylesheet" type="text/css">.
Now for the div holding the image give the class as .myimage and the src attribute is independent of the file
Edit- Suppose you have 3 html files in your site and you want the above css classes to be implemented in all the files, then open a new notepad file, paste the css classes in the file and save as somestyle.css. Now in each html file you use the above link tag to import the css and use the classes as you would do normally.

Resources