I am using Sitefinity Stylesheet widget.When i try to apply inline style sheet inside Write CSS tab,the styles are not applied as expected
This is my code:
<style>
.menu a{
text-decoration: none;
}
.....
......
</style>
Could you please help me to figure out the issue here?
Remove the tags <style> and </style>
There is already an instruction in "Write CSS tab".
Related
Current solution (stackoverflow link):
<template>
<v-data-table
class="row-pointer"
></v-data-table>
</template>
<style scoped>
.row-pointer >>> tbody tr :hover {
cursor: pointer;
}
</style>
With this CSS cursor becomes pointer even inside expanded item area, and that's not what I want. Can someone give me a more precise CSS?
Check this codesanbox I made: https://codesandbox.io/s/stack-72501803-css-not-cursor-pointer-ei812i?file=/src/components/Example.vue
Use the :not() CSS pseudo-class to disable the style on the expanded content area.
<style scoped>
.row-pointer >>> tbody tr:not(.v-data-table__expanded__content) :hover {
cursor: pointer;
}
</style>
you can use ::v-deep in your style
::v-deep tr:hover{ cursor: pointer; }
I hope this work for you
After integrating stylus into my Vue3 application, my global css variables no longer work (loaded through prependData as mentioned here).
Old, working code (no stylus):
<style>
.item {
background-color: $bgColor;
}
</style>
New code, doesn't work (w/ stylus):
<style lang="stylus">
.item
background-color: $bgColor;
</style>
Is it possible to update my old code to leverage stylus and keep my variable structure? Thanks for your ideas.
I have a stencil component that I want to set a font to.
What I have now:
index.html
<body>
<sidebar-component webpagename="dashboard"></sidebar-component>
</body>
<style>
* {
margin: 0;
font-family: Lab_Grotesque_Light;
}
#font-face {
font-family: 'Lab_Grotesque_Medium';
src: url('./assets/fonts/Lab_Grotesque_Medium.otf');
font-weight: normal;
font-style: normal;
}
</style>
This sets the font when I start my component locally.
But I want to use the component in a Vue application (imported from npm). There the custom font wont work. Is there another way to implement this.
This is covered in the docs now. You can save the font to your src folder and reference it directly. https://stenciljs.com/docs/local-assets
Update: Actually it looks like there is an issue where it is not possible to load custom fonts within a Shadow DOM https://github.com/ionic-team/stencil/issues/2072
If I put the #font-face{} in the header of the index-file. It actually worked from my other applications that uses the stencil component.
In index.html
<head>
<style type="text/css" media="screen, print">
#font-face {
font-family: "LabGrotesque-light";
src: url("../assets/font/lab-grotesque-light.otf") format("opentype");
}
</style>
</head>
You have to manually define the font face in your Vue application to make this work. Just like you did in the index.html of stencil.
If you dont want to include the font assets in you vue application you can either copy the font assets with https://stenciljs.com/docs/copy-tasks or https://docs.npmjs.com/files/package.json#files to your npm package.
The question: How to make WebStorm to understand scss in html
Description:
I'm have existed project based on vue.js
I've associate .vue with html language (.vue == .html).
In general *.vue files have structure like:
<template>
...
</template>
<script>
...
</script>
<style lang="scss">
$some_var: 10px;
.parent_class {
.child_class {
padding: $some_var;
}
}
</style>
The problem is that WebStorm didn't expect to see scss (instead of pure css) in html.
I know that "WebStorm" (as well as "IDEA") has language injection.
But it's a bit challenging for me to understand how to use language injection properly.
UPD: look likes it's may be impossible for now because scss is template language (mean not injectable for a while): https://stackoverflow.com/a/29062183/930170
It is supported in PhpStorm/WebStorm 2016.1 -- for both LESS and SCSS.
But you have to use slightly different syntax: <style rel="stylesheet/scss" type="text/css">
<style rel="stylesheet/scss" type="text/css">
$some_var: 10px;
.parent_class {
.child_class {
padding: $some_var;
}
}
</style>
Nuance is: rel attribute is not really allowed here. For more standards-complaint approach please watch https://youtrack.jetbrains.com/issue/WEB-20921 ticket and star/vote/comment it to get notified on any progress. UPDATE -- implemented as of 2017.1 version.
UPDATE 28/03/2017 for 2017.1 version of the IDE
<style type="text/scss">
$some_var: 10px;
.parent_class {
.child_class {
padding: $some_var;
}
}
</style>
<style type="text/stylus">
body
font: 12px Helvetica, Arial, sans-serif
a.button
-webkit-border-radius: 5px
-moz-border-radius: 5px
border-radius: 5px
</style>
Here how it looks in PhpStorm/WebStorm 2017.1:
I'm using a CMS theme that contains all of Bootstrap 3. Is it possible to add a title block manually in HTML/CSS? I'm not sure if that's the block's official name... it's the purple full-width block containing the text:
CSS
Global CSS settings, fundamental HTML elements styled and enhanced with extensible classes, and an advanced grid system.
in the following link (for example):
http://getbootstrap.com/css/
This title block is built into my theme and is available based on the design for the page I select.
But I was wondering if this block is available separately from Bootstrap, like a Navbar, panel, well, etc. component, that I can just include some HTML/CSS code and have it appear in the body of a page, for example.
No it's not in bootstrap but it's pretty easy to grab the style and use it anywhere:
.bs-docs-header {
font-size: 24px;
padding-bottom: 60px;
padding-top: 60px;
text-align: left;
}
.bs-docs-masthead, .bs-docs-header {
background-color: #6F5499;
background-image: linear-gradient(to bottom, #563D7C 0px, #6F5499 100%);
background-repeat: repeat-x;
color: #CDBFE3;
padding: 30px 15px;
position: relative;
text-align: center;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
}
check this jsfiddle
If you look at their source, they are using a stylesheet called docs.min.css, they have defined the background in here. Other then that it is just a simple <div class="container"><!--title and subtitle here-->. So the answer is a yes and a no. You can, of course, use containers seperately from your CMS when using bootstrap, but the background will not be available unless you strip it from the getbootstrap.com source.
Edit
If you see their styles, they are using this code in their docs.min.css:
#media (min-width: 768px)
.bs-docs-header h1 {
font-size: 60px;
line-height: 1;
}
}
This means, when the width of your window is above 768 pixels, it gives the h1 a font-size of 60px. When you fall under it, this code is ignored and the default bootstrap font-size is being applied.
Edit 2
To get a background-color behind it, don't apply the background color to the .container. wrap a div around it without a width value. The container width is not full width, so if you apply a background to it, its only behind the container that is centered.
Edit 3
A simple HTML structure would be something like this (you still have to include all bootstrap styles and default html tags etc.
<html>
<body>
<div id="bgColorDiv">
<div class="container">
<h1>My title</h1>
<p>Paragraph below the title</p>
</div>
</div>
</body>
</html>