Is it possible to pass variables in CSS files, like in HTML file. Example:
In views.py:
def home(request):
bgcolor = "#999"
...
...
In the CSS file:
body {
background-color : {{bgcolor}};
}
If yes, can you please guide me how to achieve this? I would really appreciate. Thank you!
Edit: Ok, my bad. What I meant was, how do let users customize their page if they wanted to? I suppose I could have done this without using external stylesheet, but I think CSS is served fastest if it's static and on a CDN and not using a template and CPU resources to render. Please guide me if there's a way to achive this.
This is a old question but I thought I'd help others as I also wanted to do this and I found a solution.
Instead of using a normal link tag specifying your stylesheet, use style tags and include your css file inline.
<style>{% include 'my.css' %}</style>
Then you can put jinja code in your css file and it will render the variables. Useful if you want to allow users to customize colors etc.
That's not the way to do this sort of thing. You should define different classes in the CSS file, then use then in your template dependent on the variables there.
you can pass the css style attribute adding the following line in your html page.
<div class="profile-cover" style="background: url('{{ cover }}')">
added attribute to css class provile-cover style="background: url('{{ cover }}')"
{{ cover }} is the variable rendered from views.py to the HTML page using the urls.py
I agree with Daniel Roseman's answer, but if you -really- need to do this you can just define your CSS in the template and use the python variable as shown there.
Another option is to see if you can use mako templating if you can get it to work with Django.
But, unless you have some unusual compelling reason you need to do this, define your own CSS classes.
Related
I am creating a plugin for my theme to customize it, But when I use PHP and I edit the style of main page when using post request, and I don't believe WP AJAX system is a way way to edit style of main page with hooks?
And can I create short codes in my theme, or can I only create it in plugin???
In the case of Wordpress, which is a CMS for web projects, styling is mainly done via writing CSS code and rendering that in the web-browser.
How to apply a styling
Inline
You can do inline styling (unadvisable), example:
<input type="text" value="something" style="color: red;">
The reason this is generally not a desirable practice is that you would always have to add the styling to each element you want to apply it at. This is a problem, because if you have a consistent styling, applied at liked 10 000 elements and then you intend to change it, you will have to apply it at every 10 000 instances of its inline definition.
You may still use inline styling at some point, but you should avoid doing so unless you are absolutely sure that it's adequate for the given problem you solve.
Style tags
You can also add a style tag to your page, which is better than inline styling in general, but it's more difficult to reuse it than a css file. Example:
<style type="text/css">
input.red {color: red;}
</style>
<input type="text" value="something" class="red">
css files
You could create a file like style.css, move your styling from style tags there and create a link tag, as
<link rel="stylesheet" href="styles/style.css">
Note that the code above assumes that there is a styles folder where you store your css files and that your style.css is inside that folder. This is a generally accepted practice about styling, which is a very popular approach.
There are some technologies violating this separation of CSS from structure, like ReactJS, which has a different approach for this stuff, but, if you do not use those SPA approaches (and at least while you learn Javascript and CSS it is a good idea to avoid them), then this is an advisable practice.
The approach
In all cases I will assume that you have a CSS file that you want to append to your head tag at styles/style.css. If you have some differences in your dev environment, then you of course will need to rely on what your environment is like.
Modifying a theme
You can modify your theme whenever you want to do so, it's available on source-code level. However, if it's a theme that is not customly made by you and you intend to use its new versions in the future, then it's advisable to avoid changing the source-code of your theme.
However, at the point when the HTML is generated and particularly the head tag, you can add the link tag as described earlier. As a matter of fact you can add it inside the body tag as well.
Modifying the plugin
If you use a plugin and some HTML is generated there that is applied to the page, you can easily add your link tag to that as well. However, if you are doing some AJAX requests and you determine whether you need the styling at that level, then you will need your Javascript to add a link tag to the head, example:
function addLink(path) {
document.querySelector('head').innerHTML += `<link rel="stylesheet" href="${path}">`;
}
However, this is to be avoided if you know in advance that your file will always be needed. If you want to dynamically change the styling by adding some stuff to it, then you can call the function above, passing the desired path.
What I want is, for example, to change the css background color of navigations bar of .navbar-default, which can be done by .navbar-default{background-color:#000;}
But I want is, to see the full css style definitions of .navbar-default class, so I can look and change every element(text-color, hovering colors and every other thing) as I like. Rather than inspecting webpage elements for css codes from browsers, I want to look in a place where the definitions contain.
You can find all in readable format here
If you are using the CDN "version" of Bootstrap, then you won't be able to edit the CSS.
A good way to do what you want is by using your own local copy of the bootstrap.css file. You'll find herein all the definitions, and you can alter them as per your wish.
Conversely, you could also edit the .sass or .less files if you want more control.
edit:
Since the OP is using CDN, follow the following steps and you should be just fine:
Identify the element/ tag that you want to edit: div, input, etc.
Identify the attribute you want to edit: color, height, etc.
most importantly: identify the class or id of the element.
After you've done the above, create a new styles file, for example: styles.css, and write your new custom CSS rules in there as per CSS rules.
Include this file by linking it in your .html file using the link tag
Voila!
You can find and edit it in bootstrap.min.css
This is for new version
https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.css
Just check the header import link and remove .min part if its minimised link
I have a Rails 3.2 app. I use a partial _invoice_pdf.html.erb to display an invoice. The same partial is used to create an invoice pdf. I'm using wicked pdf and it does not include the CSS when creating the pdf. That's ok - it looks fine.
But, I would like to turn off the CSS when I display the partial on the screen.
Is there a command to not include the css on a particular view (partial)?
Thanks for the help!
You can do this with just HTML and CSS, but with the caveat that the CSS technique is not supported on IE and some mobile browsers. You could get full browser support by changing the CSS to override every individual property being applied to your invoice.
CSS
#your_invoice {
all: initial;
* {
all: unset;
}
}
HTML
<div id="your_invoice">
<%= render "_invoice_pdf.html.erb"%>
</div>
Generally css isn't included in partials, but in the layout or view file that includes the partial. in which case simply either don't include the css in the particular view if appropriate or conditionally exclude it in the layout. Something along the lines of:
<%= stylesheet_link_tag 'application' unless #flag_set_in_controller %>
You could utilize a custom layout and CSS file for this aspect of your application. However, that seems less than ideal or workable based on your comment to Camden's answer (the partial does not need the CSS but the 'outer' elements do).
Otherwise, I think you are looking at conditionally removing the CSS with JavaScript placed in an appropriate block in your partial.
You can remove an external CSS file altogether with a snippet of JS like this:
$('link').remove(); // would remove all <link> elements
$('link').not('.myCSSToKeep').remove(); // would remove all <link> elements except for one with class='myCSSToKeep'
Should that not be possible for your application, I believe you're down to manually changing styles via their class with jQuery or similar.
$('.myClass').css('color', #fff); // and so on
If the styles for the PDF could be collected/used from their own CSS file, the first approach should work fairly well ... assuming I'm understanding the requirements correctly :)!
I have changed my css sheet for my entire site and it works great. The change has to do with the background color of rows in tables. Although it does what I want, there is one view that I would like to be exempt from this alteration. Is there a way to exclude this view from the change or create a new css sheet for this specific view?
Well, I would come up with a CSS styling strategy. The goal should be to minimize CSS and overrides. Also, having an extra CSS file for just one page will cause an extra HTTP round trip to get the resource. My recommendation is to stick extra CSS classes on this view. Then, override precisely the styles that you need in your global CSS styles.
I figured out the solution which ended up being much easier than I expected. Since I am very new to using CSS and HTML I was unaware of the style tag. However, that is what I was looking for. For anybody looking at this in the future, just use:
<style>
(CSS that you would like to override)
</style>
I have some styles applied to html for example
<body style="background: #C3DAF9;">
and when I use forms authentication it is ignored. If I put the style into an external .css file then it works.
This doesn't seem like normal behaviour to me.
Have you tried inspecting your HTML elements with Firebug? That should hopefully tell you what, if anything, is overriding your CSS.
Solved the problem. I'm not sure I understand why it happened but here is the offending code;
if (User.Identity.IsAuthenticated) {
if (User.Identity is BookingIdentity) {
BookingIdentity id = (BookingIdentity) User.Identity;
Response.Write("<p/>UserName: " + id.Name);
}
}
Removing the Response.Write makes everything work again.
The Response.Write (which I added to check the user was logged in at same time as the forms authentication) seems to be doing something to the page render? Any ideas?
Turns out that Response.Write was the problem, it essentially aborts the rendering of the rest of the page from that point. (or words to that effect)
That's weird. I've experienced this problem but the other way around: when I use external style sheets the external style sheet is the one being ignored, and only my inline CSS works.
The solution to that problem was to add permissions for the folder where the external CSS file resides.
One suggestion: View the source of the rendered page, and check the body tag there. It is possible that the style is being overwritten somewhere with the value of the external CSS file.
Learn how to use Firebug and use it to determine what styles are applied to your page.
The background style does not take a 'color' value.
You are looking for background-color.
Yes you should check the output html, and your browser.
If there is no style tag in your html output you could use and try:
<body bgcolor="#C3DAF9">