I'm using simple-webpack vuecli to implemet my site. I have a button which has an :after modified which produce a contents with background path url. How can I used the require on background-url in css? Seems like inline styling is not working for :after css modified.
Global SCSS
.btn-green .btn-text:after{
content: "";
width: 7px;
height: 10px;
background: url('/assets/img/svg/arrow-right.svg') no-repeat 0 0;
background-size: 100%;
display: inline-block;
margin-left: 5px;
padding-bottom: 11px;
}
Vue Template
<div class="btn-green universal-shadow">
<div class="btn-text">GET STARTED</div>
</div>
You need to use a relative path otherwise Webpack will interpret it as an actual URL instead of a path to a module that it should require.
url('assets/img/svg/arrow-right.svg')
^ removed the leading /
Related
For my current use case, I have to set the inner html of my element programatically due to it using markdown:
<div
className='quote-copy'
dangerouslySetInnerHTML={{
__html: body?.childMarkdownRemark?.html,
}}
/>
In this element, I have to make sure a quote icon appears over the first two lines of the set paragraph like this:
However, when trying this, I only managed to get it working on the first line of the paragraph like this:
By using the following code in my scss file:
.quote-copy {
> :first-child {
&::before {
content: '';
overflow: hidden;
display: inline-block;
background: url('../../../assets/icons/quote.svg') no-repeat center;
object-fit: contain;
width: 60px;
height: 40px;
background-size: 60px 40px;
}
}
}
Does anyone know how I can make the quote icon appear over the first two lines of copy?
try to use the "float:left" on your pseudo element
For my project (website), I am using an NPM package named gulp-svg-sprite, which puts all my SVG images into one file sprites.svg and generates sprites.css.
In sprites.css, there are CSS classes which have their background-image property set to the svg image inside sprite.svg.
sprites.css:
.icon:before {
content: ' ';
vertical-align: middle;
display: inline-block;
background-image: url(/img/sprite.svg);
background-repeat: no-repeat;
background-size: 71.7em 114.4em;
}
.icon.icon-logo:before {
background-position: 0em -98.5em;
width: 42.4em;
height: 8.6em;
}
Displaying desired SVG image in index.html:
<span class="icon icon-logo"></span>
Problem: the SVG background image is too big
Attempt to solve the problem - trying to resize it, but it's not working:
index.html:
<style>
.icon-logo:before {
width: 130px;
height: auto;
}
</style>
Since your sprites use em units for sizing and positioning, you need to change font-size instead of width and height, e.g. :
.icon-logo:before {
font-size:.8em;
}
I'm working on a CSS file and I'd like it to interact with anothet CSS file.
How? Let's say I have A.css and B.css. In A.css I want to do the "overflow: hidden" referred to B.css and all the elements that it controls.
Is anything like that impossible?
Like:
#import "field.css"
.sky .field {
overflow:hidden;
}
So basically this what I actually have:
.sky {
width: 90%;
height: 100%;
background: blue;
opacity: 0.7;
position: absolute;
z-index: 1;
}
.field {
width: 100%;
height: 20px;
background: green;
position: fixed;
top: 90%;
z-index: 2;
}
.field > p {
width: 100%;
height: 40px;
background: black;
}
Now I want that "p", which is a sub-tag of .field to not show outside of the bounds of .sky.
How do I do that?
No need to import one CSS file into the other simply link to both CSS files in your HTML. For example if you had the following two files
File A:
.sky .field {
overflow:hidden;
}
File B:
.sky {
color: black;
}
Sky would inherit both properties of overflow hidden and color black. If the rules contradict each other for example file A says sky color is blue and file B says black then the CSS rule sheet which is linked last will take presidence.
Edit: Generally it isn't good practise to do this for organization purpose. If Sky is a single objection consider putting all CSS references to it in a single file.
Load both the CSS files into your page. You can actually have multiple files which define style rules on same element. So lets say you have two file
File 1
.sky{
background-color: Red;
}
And File 2
.sky.field {
overflow:hidden;
}
And lets say the page has a element with class div and field.
<div class='sky field'></div>
Now this will have both the combined CSS rules.
Also make sure you get yourself familiar with CSS Priorities, If 2 files have the different CSS rule on the same element then what happens??
Example
//File 1
.sky{
background-color: Red;
}
//File 2
.sky.field {
background-color: Blue;
}
Now the file that is placed last in the HTML DOM will have more priority over other rules. Note that its NOT the last file loaded but the last file in the DOM hirarchythat gets the priority.
I have made a simple menu in HTML. It works (almost) perfectly. The menu items are, as you can see, links with background images set in CSS. At mouse-over another background image is shown.
My problem is, that I cannot find a working solution for setting a menu item constantly "chosen" - or said in another way, I wan't to show the actual page in the menu.
First, I will show the HTML and CSS. Afterwards I will show what I have tried to do.
<div id="menu">
</div>
CSS looks like this:
#menu_produkter
{
display: block;
position: absolute;
background: url(images/menu_produkter.png) no-repeat;
width: 108px;
height: 26px;
margin-left: 376px;
margin-top: 52px;
}
#menu_produkter:hover {
background: url(images/menu_produkter_hover.png) no-repeat;
cursor: pointer;
}
#menu_galleri {
display: block;
position: absolute;
background: url(images/menu_galleri.png) no-repeat;
width: 64px;
height: 26px;
margin-left: 496px;
margin-top: 52px;
}
#menu_galleri:hover {
background: url(images/menu_galleri_hover.png) no-repeat;
cursor: pointer;
}
#menu_kontakt {
display: block;
position: absolute;
background: url(images/menu_kontakt.png) no-repeat;
width: 85px;
height: 26px;
margin-left: 572px;
margin-top: 52px;
}
#menu_kontakt:hover {
background: url(images/menu_kontakt_hover.png) no-repeat;
cursor: pointer;
}
I have tried to add CSS id's for each item called #menu_xxxx_on with the same background images as the ":hover" id's.
Then I set ViewBag.CurrentPage = "xxxx" in the top of my views. Finally I use Razor to check which page is the current:
$*
I hoped it would work - but instead the menu item totally disappears. I have tried to 'Inspect element' with Google Chrome to find out whats wrong. It seems like it resets all CSS-properties.
Is there any easy solution to this - or do I have to do it another way? I have seen other solutions with custom html-helpers - but I think it's a bit overkill if I can do it this way.
Thank you in advance.
If you want solve it with classes then use jQuery functions for example :
$(function(){
var id = $('hiddenId').val();
$('#'+id).addClass("someClass");
});
In someClass define your chosen menu tab style.
Id of chosen menu you can send using ViewBag and render it in hiddenField with id : hiddenId
#Html.Hidden("hiddenId",(object)ViewBag.CurrentPage)
But I suggest manipulate with innerHtml, then jQuery function should look like this :
$(function(){
var id = $('hiddenId').val();
var header = $('#'+id).html();
$('#'+id).html(header+'-on');
});
I'm trying to update the css (the css is located in my main.css) of divs that do not exist on my main html file but do in the files i am injecting. Is this possible? if so how?
ok so here is what I have in my main html file
<div id="container">
<div id="page">
<!placeholder>
</div></div>
sorry about the bad formatting i just can't get the tabs and new lines to work with the code input system on this site.
next is what I have for main.css
#container {
position: fixed;
margin-right: 0px;
overflow-x: hidden;
overflow-y: scroll;}
#page {
position: absolute;
width: 100%;
height: 1600px;
z-index: 10;
border-left: 1px solid #CCCCCC;}
#recposts {
position: absolute;
left:0;
top:1200px;}
.child {
height: 400px;
border-top: 1px solid #CCCCCC;
border-bottom: 1px solid #CCCCCC;
z-index: 11;
background-color: #EDEDED;
width: 100%;
padding-right: 10px;}
alright and now what I'm injecting
<div id ="page">
<div id="recposts" class="child">
<h1> Recent Posts </h1>
</div></div>
So I need to be able to edit the position top of #recposts and the height of .child.
I fixed my issue the problem was that I wasn't editing the css on the html load. I put the function into the .load() and now it works.
Your question is unclear, from what I understood, you can solve it using Jquery live() api.
http://api.jquery.com/live/
You can change whatever you want to the newly added items by using Jquery live() api.
You can trigger a function call after insertion, by using jquery's DOM change() api .
http://api.jquery.com/change/
eg :
$('#container').change(function() {
$('#page').css("height",200);
});
EDIT: Since the change() api will not work on divs, here's the correct version
$('#container').bind("DOMSubtreeModified", function() {
$('#page').css("height",200);
});
If the CSS rules are in a file that is already loaded (your main.css), then any new elements that are added later (say, from whatever HTML you're talking about injecting), and that match selectors in the CSS file, will automatically have the styling rules applied. Is that what you're after?
I am not sure if this is what you were looking for, but this will add a span with class "someClass" to the div id="insertion".
css:
.someClass{ background-color:black; }
html:
<div id="insertion"></div>
js:
<script>
var toInsert = document.createElement("span");
toInsert.className = "someClass";
document.getElementById("insertion").append(toInsert);
</script>