I`m trying to manipulate the css of the zimbra, I do not mean a thing, in some style files i found this:
body { #ChromeBg# }
who can explain the usage of #, after and before ChromeBg?
This is specific to Zimbra, apparently. I hope this explains more:
http://wiki.zimbra.com/wiki/Creating_Themes_Long_Version#Editing_Theme_Substitution_Files
The use of # differs based on the place it is present...
When # is present only at front, it is called At-rule.... eg: #import - means it allows u to import one style sheet into another...
When # is used in both sides of a word, it is a substitution file... eg: #somedata# - indicates an entry in the substitution file(s) with that name should be placed at that spot in the CSS files..
Hope its useful for u...
Looks like this is their way to specify variables in CSS. I can see
ChromeBg = background-color:#_BaseColor_#;
at http://wiki.zimbra.com/wiki/Creating_Themes_Long_Version
see these two links i am also learning about use of # in css.
I hope this will help you also :-
http://lesscss.org/
http://sass-lang.com/
I am sorry i dont know what is this but i got reference link , i am sharing this
http://files.zimbra.com/docs/skins/Themes.html#skinvariables
but we use this like css
it is importing another css file in here
eg - #import url("reset.css");
it is calling font face method
eg- #font-face {}
Related
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 am trying to use these icons along with openweathermap and i successfully managed to, although i can not change their size! They way they are used is like font-awesome ones : <i class="wi wi-omw-100"></i>
What attribute do i change to make it larger ? (font awesome ones don't work i tried!) and i couldn't find something specific in the documentation.
starter level CSS user here.
( the code: http://codepen.io/dioannou/pen/grveyR )
I know this is a month old but I thought I'd tell you how I did it:
After looking around a bit, I found this solution to target all elements that have the tag <i> tag.
wildcard * in CSS for classes
This may not be the optimal solution and you are right there is very limited documentation.
In the end, I just did this in an overriding css file:
i[class^="wi-"], i[class*=" wi-"] {
font-size: 200px;
}
This is probably isn't the optimal solution and I will post back here if I find a better way. I haven't had a chance to look at the original CSS file for a specific sizing class but this did the trick for me where I just needed to use it in one page and move on.
Hope this helps somebody.
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.
i have a simple but for me rather an important question. I will start a clean Project with Less and wanna include bootstrap. So my basic style.less file would look like this:
// Bootstrap Corefile
#import "bootstrap.less";
// My own Styles
header {
.make-row();
}
is this logical correct because now the bootstrap and my own styles are compressed in one file. In addition I would have a pretty big css file... And what if I want to use another css file from external plugins.
I would like to know if someone has already experience with it?
Yeah that will work. If you want to add another file you can just import that as well.
One thing that you do have to be careful of is that in the earlier version of IE it has a max number of classes it process. I can't remember off the top of my head but I think it is somewhere near 1000. So if the css at the end of the file isnt working in IE thats why.
Here is a line to the documentation to see what you can do with it. Check out the import section.
I've just started using SASS. Very impressed, however there is something I'd like to do but can't seem to find answer as whether or not it's possible.
I have a block of CSS that I don't want SASS to parse/compile but I would still like that block outputting to the final compiled CSS file. Is this possible?
Thanks.
My first ever SO question, normally provides the answer. Hope I've not missed it somewhere, tried every search term I could think of to find it.
Put it in a separate .css file and import it in your SASS file. File ending in .css are not parsed but are still included in the final output.
This question is a bit old, but, in the spirit of keeping things up-to-date:
The current version of SASS (3.4.22) does a pretty good job of only changing what it needs to. If what you've written is valid CSS, it should output as is.
The only times you should see SASS modifying your styles is if you've done something that looks like it's supposed to be modified. Based on their documentation, that would be things like:
Nesting styles
Concatenating strings
content: 'foo' + 'bar';
Using interpolation
left: calc(50% - #{$variable})
Using variables
width: $variable
Using #extend or nesting an #include
In most other situations, in my experience, SASS will happily spit out whatever you've written.
If you do need to output something that SASS insists on parsing when it doesn't need to, you can wrap the offending piece in quotes and remove them using the unquote function:
$family: unquote("Droid+Sans");
#import url("http://fonts.googleapis.com/css?family=#{$family}");
which compiles to
#import url("http://fonts.googleapis.com/css?family=Droid+Sans");
Try to enclose your block in /* ..... */ in your scss file. Hope it helps.