I couldn't find this info anywhere, so I'm asking here. When I open CSS or HTML file, everything is in ONE huge, very long line... How can I fix this formating? I know I can do it manualy, but takes ages when files have arround 1500 lines :S
Thanks in advance for all answers!
/* table content style START */.pade { margin-left: -19px;}.content { color: #333; text-decoration: none; cursor: default;}.content a { color: #333; text-decoration: underline; cursor: default;}.part2{ width:900px; overflow:hidden;}.tablegray{ width:900px; overflow:hidden;}.content a:hover { color: #fff; text-decoration: underline; backgroun.......
try using this for css: http://www.lonniebest.com/FormatCSS/
If your using Visual studio as Editor then right click on the line and select "format document" or Cltr+k , Cltr+D
Related
I am using the element to upload image files to my hosted Blazor WASM site. The component renders a button with the words "Choose Files" on it.
I would like to replace this button with an image (or my own text, or anything else). I have tried using CSS to set a background image to the URL of an image I would want to use, and set the background-color of the button to "transparent", but this does not seem to change anything.
The source code for this component can be found here:
https://github.com/SteveSandersonMS/BlazorInputFile
I studied the code and found that this component is built using the standard Blazor input type.
<input type=file>
Steve shows a way to override the default functionality and style of the button using CSS.
Here is an example I created based on what I found:
<style>
.file-input-zone {
display: flex;
align-items: center;
justify-content: center;
background-color: blue;
color: white;
cursor: pointer;
position: relative;
width: 120px;
height: 30px;
}
.file-input-zone:hover {
background-color: lightblue;
}
.file-input-zone input[type=file] {
position: absolute;
width: 100%;
height: 100%;
opacity: 0;
cursor: pointer;
}
</style>
<div class="file-input-zone">
<InputFile />
Get me a file!
</div>
It will give you a button that looks like this:
You might pick up more tips by studying his source code further.
I have to make some changes on the ui. Now I try to replace the built-in sensenet logo, but I am stucked. I tried to change /Root/Global/images/sensenetlogo.png but there is no option to replace it.
The logo is defined in a css file (/Root/Skins/sensenet/styles/skin.css)
Search for this part:
.sn-layout-inter-index .sn-slogen {
position: absolute;
left: 5px;
top: 13px;
font-size: 16px;
color: #fff;
font-weight: normal;
background: url(/Root/Global/images/sensenetlogo.png) no-repeat;
padding-left: 150px;
padding-top: 10px;
padding-bottom: 10px;
}
and change the background-image url. This will will replace the logo on the homepage.
Replacing the logo on other subpages change the logo url the same way at
.sn-layout-intra .sn-layout-head .sn-logo, .sn-layout-inter .sn-layout-head .sn-logo, .sn-layout1 .sn-layout-head .sn-logo {
...
}
If you installed sensenet from source make sure that you changed the .css file both in the file system and through sensenet's admin surface (Content Explorer).
This question already has an answer here:
How to keep duplicate properties in compiled CSS file when use LESS?
(1 answer)
Closed 6 years ago.
I was unsetting a particular color by using initial, but IE doesnt support initial so I had to provide a specific color for it. So below was the format I used.
Initially:
a.link-ele {
color: initial;
&:hover {
text-decoration: none;
color: initial;
}
}
In order to support IE:
a.link-ele {
color: black;
color: initial;
&:hover {
text-decoration: none;
color: black;
color: initial;
}
}
Here black will be set in IE and initial in browsers which support it since initial comes later.
PROBLEM: Less, in-order to optimize the CSS uses only color:initial; since it thinks its quite obvious the second one will be used by browser.
Alright so for that I do the below:
a.link-ele {
color: initial;
&:hover {
text-decoration: none;
color: initial;
}
}
.link-ele {
color: black;
&:hover {
color: black;
}
}
I changed the specificity thinking Less would not remove it but it looks like Less still uses the higher specificity value.
Question: How do I make Less allow both values?
Note: I know to make it work using different class-names or other ways, I just want to know is there a flag or something I can set which makes Less to allow both colors.
I have already tested the above concept in IE and other browsers and it works fine
I use ember-cli and emberjs framework
As I had mentioned in my comment, the Less compiler does not remove any properties from the compiled output even if it is redundant information. The compiler would still give the below output with both the color: black and the color: initial settings. A demo is available here.
a.link-ele {
color: black;
color: initial;
}
a.link-ele:hover {
text-decoration: none;
color: black;
color: initial;
}
The removal of redundant properties should therefore be getting done by some CSS compressor or minifier because they are generally the ones which strip out all redundant and unwanted information. In you case it seems to by minifyCSS.
Gentle men (and likewise women),
I'm stuck with a nasty Less problem I can't figure out.
Here's the code:
.navbar-collapse {
background-color: #ff6600;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
margin-bottom: 5px;
}
.nav > li > a:link {
color: #fff;
font-weight: bold;
}
.nav > li > a:visited {
color: #ccc;
background: blue;
}
.nav > li > a:hover {
color: #000;
background: pink;
}
.nav > li > a:focus, .nav > li > a:active {
color: #000;
background: yellow;
}
.nav > li .current {
color: black!important;
background: skyblue!important;
}
I'm new to Less, my first (minor) problem is how to nest this code properly.
But the real problem is that a:active and a:focus do not work. Nothing whatsoever. a:link does, but not what it's supposed to do. I want the font-colour to be white, it shows up blue. Checking the generated code shows in line 1089, but weirdly enough Firebug shows that colour crossed out - it shouldn't work.
I want a:active and/or a:focus with font-colour #000, but that does not work.
a:active does show up but goes away in a split second.
I tried the .current class, as it shows up in Firebug, but that one doesn't work at all.
You can check the code out on http://www.test.dgdesk.com.
It's a Joomla site based on Joostrap, with Bootstrap 3
This is a css conflict.
The color from .sidebar-right's nav styles overrides the color from the general nav styles.
You can fix the issue by defining a more specific class for the nav you are updating, or by updating the sidebar styles directly.
I am trying to disable my anchor tags from being underlined when hovered over. I have added text decoration: none; to my .scss file like so:
$font-family-serif: 'Nixie One';
$font-family-base: $font-family-serif;
#import "bootstrap";
//#import "bootstrap-sprockets";
//TB Navbar overrides to change the color scheme
$bgDefault : #ffffff;
$bgHighlight : #ffffff;
$colDefault : #8587f1;
$colHighlight : #4e5aff;
.navbar-default {
font-weight: bold;
font-size: 25px;
background-color: $bgDefault;
border-color: $bgHighlight;
text-decoration: none;
Also when I look at the web page, it seems to compute the rule correctly:
Where am I going wrong here?
.navbar-default {
font-weight: bold;
font-size: 25px;
background-color: $bgDefault;
border-color: $bgHighlight;
text-decoration: none;
a
{
text-decoration: none;
&:hover{
text-decoration: none;
}
}
So apparently the issue was that I just had to specify the the a tag: a {text-decoration: none;} within my scss file instead of just setting it for the class.