I've found some problems similar to mine, but nothing close enough for me
I've built a blog-site using NuxtJs with Vuetify and have deployed it on Netlify. The site looks and works great for the most part. My site has a navigation drawer that is supposed to have a background-color of #659dbd. This color shows up in development. However, on the deployed site, the background-color is white. When I inspect the site in my dev tools, this color does show up in the styles, but it has a line through it, like this:
Does anyone have any idea what could be causing this?
I've looked at the Netlify gotchas, but couldn't anything regarding anything like this.
It's strange because all of my other stylings render fine.
If I've left anything out or if you need to see any code, let me know.
This happens because you probably using nuxt/vuetify module, and for development it use builded vuetify bundle, but for production it use treeshake version. And with treeshaken version of vuetify it do load css dynamically on page. So first loaded your page style, adn then vuetify load its own component styles and it overrides your own styles
There's probably some other more specific rule.
<div class="list">
<div class="drawer"> Item </div>
</div>
<style>
.list {
background-color: #4589e0;
}
.drawer {
background-color: #1707a3;
}
.list .drawer {
background-color: #a3073b;
}
</style>
Read more about it here: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
Related
I am having a difficult time changing the background color of the page. I have attempted Tailwind a few times in the past, but always reverted back to Bootstrap as I know it pretty well.
This is a fresh Laravel 9 with Jetstream installation. It comes with Tailwind v3 ready to go.
On the body tag in the guest layout, I tried bg-red and bg-red-900 classes. It's still grey. Tailwind does at least work, because I added bg-red-900 to the login button itself, and the button turned red. It's just not liking it on the body tag.
In tailwind.config.js I added:
module.exports = {
theme: {
backgroundColor: '#000000',
}
};
I also tried:
module.exports = {
theme: {
extend: {
backgroundColor: '#000000',
}
}
};
I run npm run dev and caching is disabled per Chrome dev tools settings. I even tried a hard reload (right click reload button with dev tools open and choose "Empty cache and hard reload").
I am sure the css is being generated as I can see the tailwind comments in css/app.css. The page works, as it shows the normal breeze login page as it should. It just refuses to change the background color. I get if I am setting it wrong in the config, but for it to not accept bg-something as a class seems weird.
How do I change the background color? It will be the same background color for every page, so like a theme, but I don't want to declare a whole theme palette.
This is probably something simple because I know nothing about Tailwind. I've just searched and dug through the docs and just don't get it.
The background color in Jetstream in the guest layout is actually coming from the authentication-card component.
Once you have published the Jetstream components the authentication-card.blade.php component can be located at:
resources/views/vendor/jetstream/components/authentication-card.blade.php
You should see a bg-gray-100 class in the root div tag which is what you need to change.
I'm trying to use scss styles inside a blade file. but I can't find a propper way to do that.
{{-- header.blade.php --}}
<header id="mainHeader">
<style lang="scss">
.a1 {
color: red;
> .a2 {
font-size: 20px;
}
}
</style>
<div class="a1">
this is a1
<div class="a2">this is a2</div>
</div>
</header>
is there any way to do this?
there is no support for this, you can't compile SCSS from blade templates. Unless you write/use some sort of Plugin for laravel-mix.
In real is just the wrong way to go about it.
I would suggest using normal css in blade.
Sadly, it doesn't seem to be possible within blade.
Vue uses the same setup, where self contained ui components hold html, js and css. Which makes for a very modular system if you plan it correctly.
I've been looking to do something similar to this and just wanted to give anyone in the future a point in the direction I took.
My use case was a little different, we run a bunch of different websites through a tenancy platform and wanted to utilise SCSS to make customisation of the templates easier.
We essentially use blade to create the scss plaintext, and then to compile we use a library called SCSSPHP (https://github.com/scssphp/scssphp/).
When somebody updates their settings on our system, we re-compile their scss for them.
I am new to use October cms but everything goes well until I change css.
Create a navbar with a class (.navtest) that is located in the theme.css / assets folder. Added a background: red;
To see something happening, have also tried with !important but no things happen. have tried to change css / bootstrap.css that comes with demo theme but nothing happens then either.
So I do not know what I'm doing wrong. Is it someone who has a solution?
Thanks
October allows you to combine CSS in bundles, these bundles can be cached in production. Try clearing your cache, for example with
https://octobercms.com/plugin/romanov-clearcachewidget
it's my first question here so i'm very excited :).
I moved recently from programing mvc-5/6 to asp.net core.
Now, i noticed when i debug my website i have several options:
-IIS
-SolutionName via cmd deployment
-Browse with
The funny thing is that when i deploy my web with IIS (F5) the browser doesn't get all my css references (which does not effect few of my privately cssed elements). But when i deploy it by the other 2 options i mentioned earlier it does work.
Now I've been searching a bit around for an explanation for that and find none.
Due to my lack of understanding in IIS i assume the problem is somewhere there and here are the following 2 questions:
1) Why are there such distinctions?
2) Does it matter eventually if the IIS doesn't respond as i expected when other debugging methods does respond correctly?
Thanks you!!!
A pic to show my code
.banner {
height: 350px;
width: 100%;
max-height: 50%;
max-width: 100%;
min-height: 20%;
min-width: 30%;
background-image: url('/ProfilePic/Profile.png');
background-size: cover;
}
I'd be careful here - it definitely does matter - as an answer for question 2.
When you switch from old MVC to core, you will realize that your "served" files go and lie in the wwwroot folder.
It is completely possible that you did not reference your CSS just right (as it differs from normal MVC's file structure). Also, be sure to use a relative path as opposed to an absolute one.
Have a look here:
Correct:
<link href="~/css/site-internal.min.css" rel="stylesheet" />
Incorrect:
<link href="~/wwwroot/css/site-internal.min.css" rel="stylesheet" />
<link href="http://localhost:5000/css/site-internal.min.css" rel="stylesheet" />
Could be that your problem is unrelated, but it is something to watch out for none the less.
EDIT
Your CSS's should definitely be able to load without regard to whichever way you run the program.
As an aside - the IIS option allows you to debug and step through your JS and could be quite useful.
What you want to do here is go into your browser dev tools (F12 most of the time), and go see if your CSS gets resolved correctly - you can continue once you know what your problem is.
Usually if something goes wrong in the process of loading CSS you wil get errors straight in the browser console
EDIT #2
Upon further perusal of your problem statement - I think it might be that your CSS is loaded correctly but you've got a problem with that image URL.
Please check the first answer here
The URL of the image inside a CSS file is relative to the path of the CSS file.
Therefore your solution will be something like this:
../ProfilePic/Profile.png
The .. moves up one level.
How can I get rid of the little box/arrow next to images in my web browser? What controls when they show up and when they don't? I'm porting a blog from WordPress over to BlogEngine.NET. Those little arrows aren't in the WordPress blog, but they're showing up in the posts in BlogEngine.NET. I'm viewing both in Chrome. They also show up in IE and Firefox, but not in Safari.
UPDATE:
Here are some live links (I'm viewing in Chrome):
WordPress (no arrow): http://www.inrixtraffic.com/blog/2012/neverlate-inrix-traffic-contest/
BlogEngine.NET (arrow): http://www.inrix.com/traffic/blog/post/2012/06/18/NeverLate-INRIX-Traffic-Contest
That is coming from the CSS, specifically this selector:
div.post .text a[href^="http:"] {
background: url(../../pics/remote.gif) right top no-repeat;
padding-right: 10px;
white-space: nowrap;
}
According to my inspector (built into Chrome, right click, inspect element), that is coming from http://www.inrix.com/traffic/blog/themes/Inrix/style.css, line 372. Ditch the "background" line from that file, or override it in a later css file, and you will be golden.