in Aptanastudio 3 . the CSS formatter formats like this :
H1 {
color: white;
background: teal;
FONT-FAMILY: arial, helvetica, lucida-sans, sans-serif;
FONT-SIZE: 18pt;
FONT-STYLE: normal;
FONT-VARIANT: normal
}
I´m trying to edit it to write the code like this (all in one line) :
H1 { color: white; background: teal; FONT-FAMILY: arial, helvetica, lucida-sans, sans-serif; FONT-SIZE: 18pt; FONT-STYLE: normal; FONT-VARIANT: normal}
under the CSS formatter options, i can edit the spaces between commas, semikolon, e.t.c. .. but i cant find how to edit the code to look the way i want it.
When you type H1 {} instead of hitting enter when it auto completes the curly braces just start typing your rules out. Also don't rely on (or use) the auto formatter. With rare exceptions (Aptana not being one of them, I love Aptana for web applications and use it every day) auto formatters for code will not do exactly what you want them to.
I strongly advise against writing your css the way you desire. The first way is much easier to read. Also most hosting solutions and even a lot of frameworks (like Rails for example) will minify your code for you. And even if your's doesn't you can minify it yourself pretty easily.
When developing: 'readability = maintainability' which is always of greater value then a few saved bytes here and there.
Related
On this website, I'm unable to remove the bold property from the bold text (text starts with "Conforme o art. 43...").
What is most intriguing is that the font-weight command below applies normally to all parts of the referred site, except for the bold part.
I'm using the following code in Stylebot (Chrome Extension):
div {
font-family: Open Sans;
font-size: 14.49px;
text-align: justify;
text-justify: auto;
font-weight: 300;
}
How can I get this done? Thanks in advance!
Please let me know if this is what you are looking for.
div > * {
font-family: Open Sans;
font-size: 14.49px;
text-align: justify;
text-justify: auto;
font-weight: 300;
}
or
* {
font-family: Open Sans;
font-size: 14.49px;
text-align: justify;
text-justify: auto;
font-weight: 300;
}
Edit: Maybe this is more what you are looking for->
.q-question-enunciation > span{
font-family: Open Sans;
font-size: 14.49px;
text-align: justify;
text-justify: auto;
font-weight: 300;
}
The text you are referring to ("Conforme o art. 43...") is inside a span tag that has an inline style style="font-weight: bold,".
An inline style like this will override every CSS rule that you define in an external style sheet or in a <style> tag inside the header of your page, so you need to
...either erase this style tag in the HTML code (if it's actually there), or
...if it's not there, it's inserted via javascript. So you need to find out which javascript inserts this code into the HTML code and erase or deactivate that code.
EDIT / Additional note: The code of the answer which you just accepted will apply that CSS rule either to all direct children elements of any div or (second option) even apply it to all elements in your page. I strongly doubt that you want either of this, since most likely your pages will consist of more than what you showed us...
I have two installations of Laravel including Bootstrap.
As far as I can see both include and have Montserrat on the body tag.
One of the installations needs no declaration of that in the app.sass (meaning it gets included with the bootstrap directly).
However, the other needs it, otherwise it defaults to the browser default font.
And yet, even when both installations have the same Montserrat #import-ed, they look different. I suspect the wrong one is really Montserrat, while the right one is some kind of Bootstrap sugar-coating that the other one can't do.
In order to check it out, please follow:
Desired effect: This link and once you log in with maximilian.berbechelov#gmail.com and 123456 click it again. I know it's Cyrillic, but I don't think it matters.
Problematic effect:
This link - no login required.
I have a body font-family declaration in the sass file (the desired one has no such declaration), because without it the font is the browser default.
You can see your font adding !important after the font-family name like this.
body {
margin: 0;
padding: 0 0 50px 0;
min-height: 100vh;
font-family: "Montserrat", sans-serif!important;
background-image: linear-gradient(45deg, #1de099, #1dc8cd);
}
.navbar-brand {
letter-spacing: 3px;
font-family: 'Montserrat', sans-serif;
font-weight: 300;
font-size: 2.1rem;
}
I'd like to make a custom config for CSScomb that can sort part of the css in one line and part of it as the default, multiple line sort.
The css that I'd like to be sorted in one line should refer to font styling.
Right now if I use CSScomb it will format the CSS something like this:
p
{
font-family: 'Proxima Nova',Arial,sans-serif;
font-size: 12px;
font-weight: 100;
line-height: 18px;
color: #484848;
}
I'd like this to look like:
p { font-family: 'Proxima Nova',Arial,sans-serif; font-size: 12px; font-weight: 100; line-height: 18px; color: #484848; }
But other properties that are not font specific to be formated as the default CSScomb values.
Would also appreciate if someone could explain where to put the custom config file (.csscomb.json) in windows 8.1 so that it will work.
You can either define it in Home directory or root directory of your project. As another option, since you use Sublime Text 3, you can define it in
Preferences > Package Settings > CSScomb
Following the advice I found via Google, I have the following SCSS, the fonts exist in the directory specified, and FontAwesome is used elsewhere successfully with the i tag.
What am I doing wrong here as a literal keeps appearing in my html?
#font-face {
font-family: "FontAwesome";
src: url('/fonts/fontawesome-webfont.eot'),
url('/fonts/fontawesome-webfont.svg'),
url('/fonts/fontawesome-webfont.ttf'),
url('/fonts/fontawesome-webfont.woff');
}
$fa-exclamation-triangle: "";
.form-error
{
color:red !important;
font-weight: bold;
padding-top: 3px;
font-family: "FontAwesome";
&:before
{
content: $fa-exclamation-triangle;
}
}
input.error
{
font-weight: normal;
background: $validation-red;
color: black;
}
What am I doing wrong here as a literal keeps appearing in my html?
I assume you mean the generated content shows as literally ?
Well, CSS does not know named entities, so unless your CSS was embedded into the HTML document directly (which from the preprocessor syntax I assume it’s not), this named entity does not get resolved as such, and is meant literally at this point.
The CSS notation for including unicode characters is \0xxxx, with xxxx being the hexadecimal character code.
I'm trying to use Bootstrap inside a sharepoint site. Unfortunately the CSS styles are applying to the template's HTML which is messing with the design a fair amount.
I know that everything I want affected by bootstrap is within #s4-workspace - does anyone know any CSS tricks I can use to apply bootstrap only to children of that element?
I'm not beneath shudder recompiling the LESS code encasing it like so:
#s4-workspace {
#import "reset.less"
// etc
}
But, naturally, I'd like to find a better solution if I can. That particular approach also doesn't seem to work.
I cannot alter the CSS of the Sharepoint master site.
Any advice welcome!
Thanks,
The only real way of doing this is by using iframes or jQuery, if you want to apply only specific elements of the bootstrap perhaps edit the CSS rules so they apply to a different ID/Class.
For example, where it says body {
margin: 0;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 20px;
color: #333333;
background-color: #ffffff;
}
In the bootstrap.css file simply change it to read .bootbody(or#bootbody) {
margin: 0;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 20px;
color: #333333;
background-color: #ffffff;
}
Joseph Silber said it better in this question.