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.
Related
I'm using CKEditor5 in a React app and trying to implement a toggle to switch between dark and light theme for CKEditor5.
From their documentation I came across this: https://ckeditor.com/docs/ckeditor5/latest/framework/guides/deep-dive/ui/theme-customization.html
The documentation mainly describes styling the editor theme from scratch and building the ckeditor package which essentially defines the default style theme for the editor.
But what I'm trying to figure out is a way to manipulate the editor background and plugins color via. CSS on-the-fly based on event trigger (when user toggles the UI theme for the entire site via. toggle button) i.e. toggling between light and dark theme for the editor. Is there any way/pointers on how this can be done?
Right now, in my React component I invoke the CKEditor component in the following way to render it on the UI:
<div>
<CKEditor
editor={Editor}
config={editorConfiguration}
disabled={isReadOnlyMode}
data={fieldValue}
onReady={(editor) => {
if (isReadOnlyMode) {
const toolbarElement = editor.ui.view.toolbar.element;
toolbarElement.style.display = "none";
}
}}
/>
</div>
Is it possible to change bootstrap sass colors with a click of a button? I tried googling but I didn't find anything. Thanks for any help <3
No you can't change bootstrap colors with a click of button in whole Sass file because it's not used in browser, It can't be done in CSS file globally if color is directly applied to properties.
But you can modify it if it's a CSS variable, a CSS variable looks like this
--theme-color : blue;
That might be possible if you are using preprocessors in Browser, less.js works in browser but I am not sure if you can change value of variable with a click in less.
I think you should review what you are actually creating.
when I'm doing a lighthous report, this performance issue appers Eliminate render-blocking resources from a url /css?family=Roboto:100,300,400,500,700,900&display=swap
it was generated by vuetify framework with nuxt, how can I not block this rendering?
By default, vuetify adds Roboto fonts and MDI icons to your project, loading it externally from a synchronous scrip in the HEAD. It causes your project to load them before everything else, taking around 1 second delay for your pages to load.
You can turn-off that by adding the following to your nuxt.config.js file:
vuetify: {
defaultAssets: false
}
Source: This post on Stackoverflow.
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
I am using the latest SyntaxHighlighter within my app and for some reason the toolbars do not show in IE, Firefox or Chrome. The code highlights without issue, but I want to have toolbars. What makes things worse is that the toolbar demo on the official website is not working either.
Am I missing something obvious? Below are the code nuggets.
<script src="Scripts/syntaxhighlighter/scripts/shBrushCSharp.js" type="text/javascript"></script>
<link type="text/css" rel="stylesheet" href="Scripts/syntaxhighlighter/styles/shCoreDefault.css" />
<script type="text/javascript">
// Highlight code
SyntaxHighlighter.all();
</script>
<pre class="brush: csharp; ruler: true; title: 'Test'; toolbar: true;">
public static bool HelloWorld()
{
// Return
return false;
}
</pre>
I've been trying to figure this one out myself. I won't claim to be 100% correct here, but from what I can tell, this is the answer:
Toolbar was changed in update from version 2 to version 3.
Toolbar no longer includes the icons and whatnot.
The default toolbar is now the simple '?'.
This pretty much sucks, if it's true. The pop-up toolbar w/ icons is one of the things that made me choose SH over the other options.
This is what I'm guessing comparing the included CSS files in the latest package to the CSS available on sites that have a version with the "proper" toolbar enabled.
Here's a link to one I was snooping in: ramymostafa.com
While I would like the toolbar myself, it seems that one of the toolbars features - copy & paste - have been included without the need for a toolbar item:
If you double click anywhere on the code, the entire code view is replaces with a pre-selected view from which users can copy with a simple Ctrl/Cmd-C. Clicking anywhere else returns the view to the original state.
http://alexgorbatchev.com/SyntaxHighlighter/whatsnew.html#copytoclipboard
I would still like the pop out feature, but less buttons is a good thing, I guess?
the same problem here. looks like there is no toolbar in v3.
i use v2 again: http://alexgorbatchev.com/SyntaxHighlighter/download/download.php?sh_2.1.382
if you copy the css and js around, don't forget to include the images in folder styles
The toolbar can be easily be showing simply go to the plugin configuration, on the Highlighter Version set to VERSION 2X. This way the toolbar will be shown again!
I confirm that in Version 3 the toolbar does not show.