CSS Properties and Style Manager in Visual Studio 2013 not working - css

So I'm watching an online course for Visual Studio, and right now I'm working with some simple CSS. However, while the tutorial uses CSS Properties and Style Manager to simplify the styling, neither of them works for me. If I open styles.css or any .aspx page using the stylesheet, Style Manager and CSS Properties keeps saying "There are no items to show for the selected documents".
Does anyone know what the problem is? Shouldn't I now be able to work with my stylesheet using these two features?
The Default.aspx using the stylesheet:
Thanks.

Related

How to access css files shown in "sources" tab of chrome's "inspect element"?

I'm having trouble configuring from where my elements are inheriting the CSS from. I've attached screenshots as well. If I uncheck these two properties("color" and "text-decoration"), my design issue gets resolved, but only for this time as it gets the initial code again after refreshing the browser(need to edit permanently). Please guide me how to access this file to edit the CSS as I couldn't find this in my codebase.
Note: I'm using tailwindcss and daisyUI within my rails 7 application.?

Visual Code css intellisense weird interaction

On a ReactJS project, if I choose the style Jsx Attribute for inline CSS,
.
Then CSS intellisense won't work or work only after I add some fields manually.
But if I type the style attribute manually without clicking on the jsx attribute that VSCODE suggested, it would work normally.
Sometimes VSCode Intellisense does not work. not sure but this may be a bug but it shouldn't be that problematic.
but if it does bother you that much then try this kite. kite is more like
auto-complete.
https://www.kite.com/integrations/vs-code/
And if don't want auto-complete then add this extension in your VSCode.

Use of Ant Design Icons While Offline

I am working on a reactJS application that uses ant design for the UI. Recently we released this application to production where the computers are pretty locked down. This application is an intranet application and these computers have no internet access. So, because of that, the ant design icons on the modals were showing up as empty boxes. I did some digging and saw that the icons are using CSS classes.
For example, this is the CSS class for the red error "X" on the error modal:
.anticon-cross-circle:before
{
content:"\E62E"
}
I'm not too familiar with the CSS content attribute so I went to www.w3schools.com and read up on it a bit and tested this particular content value on their Try It page for this attribute and I got the empty box that I got in my production environment.
Does anyone know what needs to be done to import these icons into my project so that they can be used offline?
Thanks
What I think is happening is that Ant Design is defining the CSS font definition with a URL to the corresponding font-file. Since the computers are offline, it cannot find those definitions.
In the documentation I see that they also provide SVG Icons, which should work completely offline. I think this is worth a try. The steps to implement this can be found here and it should be available from version 3.9.0: https://ant.design/components/icon/#SVG-icons
Have you tried downloading the icon library into your project folder?
https://github.com/ant-design/ant-design-icons/tree/master/packages/icons-react. Looks like they have assigned their own codes to their own icons so you'll need to have them offline.
You will nessd the css file tabler-icons.css and the woff file tabler-icons.woff and assign a font-family named tabler-icons within your style.css using #font-face

How to edit css of "Document Library Previewer" web part on Sharepoint online/designer?

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

Why does Visual Studio not resolve my CSS class names?

Whenever I am working in Visual Studio I always found that it will not resolve the css class names in my html. The CSS Class names will appear with the green squiggly line in Visual Studio but then the page will render fine when viewing it in the browser. So I know the css file is referenced correctly in my master page but Visual Studio is just failing to resolve it. Also the Design View will not show any of the css styles either.
See this post by Jeff King about getting Visual Studio to be able to find the javascript file with the intellisense: JScript IntelliSense FAQ.
In particular read point #4, third bullet:
Site-Relative Paths - These are paths
of the form "/folder/file", and is
calculated from the base of your site
(http://site/application/folder/file).
This approach is supported by ASP.NET
Web Forms and ASP.NET MVC. However,
it is not supported by Visual Studio.
The reason is because Visual Studio
does not always know the final
deployed location of your site and
thus the path resolution cannot be
guaranteed. Given that quite we've
seen few folks are using site-relative
paths, we could consider making an
assumption just resolving this type of
path to the root of the project.
Given the risk that you may think your
site is working when it's really not,
I wanted to see how many people were
supportive of this.
Notice the “[Site-Relative Paths are] NOT supported by Visual Studio”. I always use site relative paths for my javascript and css files so the solution to get Visual Studio to find your javascript files is the same solution to get Visual Studio to find your css files:
<link href="/content/default.css" rel="stylesheet" type="text/css" />
<% if (false) {%>
<link href="../../content/default.css" rel="stylesheet" type="text/css" />
<% } %>
And now Visual Studio can find the CSS file and validate my CSS Class names exist (and Design View looks so much better too).
Posted on my blog here:
Why does Visual Studio not resolve my CSS class names?
-Jeff
I just saw an answer to this, so I thought I'd share it.
You can get VS2008 to recognize your CSS file by going to the View/Manage Styles toolbar and adding your CSS file that way. When I did it I saw my CSS file in the Manage Styles list but it had a warning icon because VS couldn't see it for some reason. I deleted and re-added it, and now VS is finding my styles (no green error squiggle) and Intellisense is working. Much relieved!
Tried to just close the project and open it again? It might be that it's just a bit slow, or you're using some sort of path to the stylesheet (generated on basis of other data or whatever) that can't be read directly by VS.
Never experienced the same (VS08).

Resources