Normally, you can right-click on a method and select "Go To Definition" (F12) or "Find All References" (SHIFT+F12). You can even go to the definition of a css class from your aspx page by pressing F12 (if your cursor is over the CssClass name).
Is there a similar shortcut for finding all the references of a css class from an external stylesheet? My reason for asking is that I have a stylesheet containing a bunch of css classes that may or may not be in use anymore, and I'd like to know which ones are actually being called without having to read through my code line by line.
Also, I've tried the Quick Find (CTRL+F) tool to search for a particular css class. It doesn't turn up any results even for classes that are in use, so either I'm not using it right or it doesn't bother checking my aspx page for whatever reason. (I suspect it's the former!)
PS I'm using 2010 Express edition.
You can use CTRL+SHIFT+F to bring up the Find and Replace dialog. In there, make sure to verify that the search scope is set to Entire Solution, and try that.
Related
I have a weppart page I'm editing in SharePoint Web. I have an excel workbook display webpart in a column. The webpart has a summary toolbar for open in excel, download, and such. The toolbar has multiple buttons displayed to the user that I want to remove. Foe example, the first one is Edit in Excel.
I added a content editor for CSS and used
.cui-ctl-mdedium,
.cui-ctl-mdediumlabel
Display:None;
I've tried multiple classes, targeting just the webpart, using !important and such with no luck. Any thoughts?
Element/Class info
Are you sure you've written that selector correctly? The class name is actually .cui-ctl-mediumlabel ... you've written it with a "1". Not much to do in this case without code or anything to actually try it out. Have you tried solving your problem with your browser's dev tools adding rules?
Imagine I have a huge CSS file with e.g. more than 40000 lines, like https://cdn.jsdelivr.net/npm/semantic-ui#2.4.2/dist/semantic.css
I want to explore this file and for example search for class definitions containing "hidden" in their name. How can this be done? The word "hidden" can also appear in the definition of the class, so a normal text search is not sufficient. So I am looking for a tool which is able to interpret the CSS file and then allows me to semantically search in it, understanding the difference between "hidden" in a class name and "hidden" in a class definition.
Any tips on this? Thanks!
Update: I am using Visual Studio Code, if there is a matching extension for it, that would be great. A separate tool would also be fine.
I’m not sure which text editor/IDE you are using but most IDE’s allow you to search for classes by name, in which case you could just use “hidden” as the input. In IntelliJ, the command for this is Ctrl+N. You’ll have to check your editor or IDE for the shortcut but a simple Google search should give you the answer.
I'm having trouble locating where the CSS class is defined that is styling an element on my page. When I inspect the element in Chrome, normally it shows the file name from which the CSS is originating, which I can then click on and go see the CSS file where it's defined. But this particular rule doesn't show any location. And when I look through all the code of my app, I can't seem to find the class anywhere. Any suggestions?
In the screenshot below, you can see that I'm trying to locate the .hom-whoc CSS class.
And in case it's helpful, the place this website is being hosted (and all the code is located) is in ClickFunnels. Unfortunately, the code is not in a repo anywhere, which would have made it much easier to search. This was all done in the ClickFunnels GUI in sections called things like "custom CSS" and "custom element." It's scattered through the interface, making it difficult to find where it's defined. But it should still be in SOME file that the page is using to style itself, which I imagine would be reference in the Chrome inspector.
I'm trying to use Aptana Studio 3 instead of phpEd. But I'd like to have the code coloring like in Dreamweaver. I made these changes in phpEd, but I can't find where to change it in Aptana.
Also, I installed the jquery bundle, but I can't to get it working...
Thanks for your help.
Preferences:Aptana:Themes. Figuring out what keyword corresponds to what display object can be a bit tricky, but it is all there.
There's actually a ticket already filed to add a theme that matches Dreamweaver: https://aptana.lighthouseapp.com/projects/35272/tickets/1508-create-dreamweaver-color-theme
I'm looking at it now, but I'm running into some internal bugs (namely https://aptana.lighthouseapp.com/projects/35272-studio/tickets/2357-scope-selectors-with-portion-prefix-match-arent-matching-properly) that I need to fix before I can finish. In any case it should be in Studio 3.0.2 and hopefully I'll fix it today and it'll be in tomorrow's nightly (here's how to get nightly builds: http://wiki.appcelerator.org/display/tis/Changing+the+Update+Type).
As for editing themes yourself, you can see the current scope at the cursor by doing Commands > Bundle Development > Show Scope. Then use scope selectors that match that sort of scope (we adopt Textmate's scoping/theming rules: http://manual.macromates.com/en/scope_selectors)
Could you finally get your theme?
If you want to create your own theme then first go to: Window->Preferences->Aptana Studio->Themes
To create a new theme just click on the "+" sign next to the themes
list.
To add elements to your new theme right click the text in your
editor and click Commands->Bundle Development->Show scope.
Copy the last section you see to the right of the hint window that
appears.
In the themes elements list click the "+" located at the bottom of
the dialog box (next to "Scope selector")
Give a friendly name to your new element.
Assign foreground/background colors to your new element.
Paste the element's scope in the "Scope selector" input box (make
sure your new element is selected, if not, click on it).
I created a theme for PHP, CSS, HTML, JS and XML editors, similar to the old aptana 2 colors. If you want to get it you can write me to jgarcias.cr at gmail dot com.
Cheers.
What is the use of firebug's "Open With Editor" function?
I'd say it'll allow you to visualize a file / feed with an editor -- which means better searching features, syntax-highlighting, better-ability to copy code...
But it means you have to configure the editors, so firebug knows how to call one -- especially, so it knows how to pass it the data.
Edit after the comment : no, I don't see it allows you to see your modifications into the website -- but it's, I think, easier to go through the HTML code this way, with the editor you're using in your every-day life as a developer.
For example, you can check what's said in this article : Check Edit HTML Code with Firebug -- check the Editing With Firebug section.
And to use it, you have to :
select something like "Open with editor > Configure editors", and, in the dialog box, set the path to your editor
and, then, to edit some HTML page, select "Open with editor > name of your editor"
(The labels may not be exactly those : I'm using the french version...)
You can use cssUpdater to save your modified css directly after you have changed the property in FireBug -> http://www.cssUpdater.com