Is there any tool available wherein I may open a CSS file and see a color box next to each color and background-color rules?
There's plenty. You can do this in Visual Studio with the Web Essentials plugin. Chrome Developer Tools does it. If you use Sublime Text there's a package for that: https://github.com/a-sk/livecss. If you use Notepad++ there's plenty of plugins: http://npp.campulka.net/
It's a matter of a simple Google Search and you'll find want you need.
Related
What is the most efficient way to style components in the browser dev tools with the default view encapsulation (emulated)?
My current workflow involves a lot of tedious copying and pasting from the dev tools like this:
Chrome dev tools has the ability to save styling changes made on the DOM to the source css file (Save Changes To Disk With Workspaces), but I don't know if this will work with the way Angular and Webpack use emulated component styles.
There's got to be a quicker workflow than what I am currently doing. Any tips?
You can directly edit your css project files from chrome devtools. Follow this steps:
In angular.json add "extractCss": true like so:
This way you'll see the css files in inspection instead of inner style tags in header
(you can see an example image in step 3 below).
Open chrome devtools, Sources tab, Filesystem left tab and add your project folder:
This is the magic trick, this will let you edit your local files from devtools!
now when you inspect your html for css, you can click the css file and you'll be redirected to your local file:
Edit your changes to the file.
Save the file.
Magic! Your local file was modified!
I LOVE Chrome!
Cheers
...I don't know if this will work with the way Angular and Webpack use emulated component styles.
TL;DR: You can't do this quite in the way you'd like to.
Angular scopes styles to components, and thus the .some-class-name[ngcontent-c5] notation in the Chrome inspector. As such, dev tools has no way of knowing exactly where to trace the change you made back to, other than the file it originated from using the source map.
As you mention in your question, you can load the project working directory into dev tools (article you posted) and edit the file itself. On save, the angular watcher will register the change and reload. This will work with pure css/js, as well as pre-compiler scss, ts, etc.
So to answer the question: yes, webpack will still recompile when you do that, but not quite in the way you're looking for.
Info/Problem.
Using Sharepoint online with a dark/black theme.
On the homepage, I am using the document library previewer web part.
The font for URL's/Hyperlinks is defaulting to black so they aren't visible on the black background.
Attempting to change the font color of these URL's using CSS.
What I've tried
I've used the Dev Tools in Chrome to locate and change the CSS to make the font color white. This works, but the changes don't save after I refresh the page.
Downloaded and Installed Sharepoint Designer and copied the style element to a txt file stored in the style library. I'm not sure how or where to insert this file in Sharepoint designer to apply to to my site
The ideal solution would be editing the CSS for the homepage and then saving it permanently. I feel like I've gotten most of the way there, I just can't figure out how to save/apply my changes.
If it isn't already obvious, I'm not much of a developer so I'm a bit out of my depth here.
I don't think you can customize the css of existing webpart using designer. You have to create your own previewer using spfx. there are some webparts you can checkout.
Did you try to add the CSS style code into Script Editor web part in the home page?
If you use modern page, check the solution below.
react-script-editor
I know you can edit the syntax colors in the Chrome Web Inspector by editing the user css file, but is there a way to do this for Firebug? I'm using 1.12.5 on FF 27 on Windows 7.
I would recommend an additional UI plugin. Here is what I utilize:
https://addons.mozilla.org/en-US/firefox/addon/acebug/
It supports importing themes, which can modify the coloring and styling of the markup.
EDIT
Another way would be to change the CSS using Stylish. How this is done is described in Jan Odvarko's blog.
I want to start using Sass. I have everything set up but there is one small hurdle concerning my other team members. I use Sublime Text as my main editor but they are using our WebSphere Commerce Developer IDE 7 as their editor. I can easily change my syntax highlighting to accommodate the SCSS files, but it appears they cannot. Even though I recommend it all the time, they aren't willing to change to another editor.
I see that under Window > Preferences > Web, I can change certain syntax highlighting for CSS, JSP, etc. However, I see no way to tell it to highlight SCSS files as CSS. Does anyone know how I can accomplish this?
Since IBM WebSphere Commerce runs in an Eclipse IDE, I found a very similar answer here.
Preferences > General > Content Types: find "CSS" entry and add .scss extension.
Then, Preferences > General > Editors > File Assoc: add .scss extension and associate with CSS editor.
I like to know is there is any tool by which i can generate CSS file from HTML file, tool should have property change feature like Microsoft visual studio have,like i have img tag in my HTML file so tool have a window from which I can set any style property of that tag and tool generate corresponding CSS of it
Do you mean a WYSIWYG html editor that allows you to edit the css rules for elements in your visual design?
Adobe Dreamweaver is probably the most popular (although not necessarily best) non-Microsoft WYSIWYG editor.
Microsoft has a web and desktop development suite called Microsoft Expression which may fit your needs if you're already using with Visual Studio.
Check out Microsoft Expression Web.