I just downloaded Aptana (v3.0.4) and I'm really liking it, much better for coding than Dreamweaver. The big problem I've found so far is that I can't get the HTML highlighting to work properly.
For example, I go to the Theme selector and choose one theme (in this case the Dreamweaver theme, since I'm already used to those colors). It works fine for php, javascript, css... but for HTML. It won't give different colors to the different html tags (like "a", "img", "form", etc). If I look at the colors palette, I can see that those tags have different colors assigned, but no matter what color they have in the palette, they take the color of the "html meta" element in the palette. So basically, ALL the tags have the same color, which is annoying.
Is there any way to fix this? I've even created a new theme copying the Dreamweaver one to make modifications, but still the same...
EDIT
It seems that this might have something to do with Scopes. The coloring rules work assigning a color to a certain scope (each coding element has one scope linked to it). In the colors palette, each of the html tags ("a","img",etc) has a different scope linked to it. However, if I use the Show Scope tool that Aptana has, all those elements show the same scope: text.html.basic meta.tag.block.any.html entity.name.tag.inline.any.html, instead of showing a different one each one. So since they all have the same scope, using the them editor you can't choose a different color for each one... Is there any other way to do it? Is it possible to change the assigned scope of an element?
These operations behave similar to CSS Selectors.
GO => entity.name.tag.inline.(form, img, p, etc.).html.
(1) OPEN the Preferences Theme Panel.
(2) ADD (+) a NEW element.
(3) SELECT your desired STYLES.
(4) PASTE your desired scope selector, e.g., "entity.name.tag.inline.form.html" INTO the Scope Selector FIELD… and CLICK 'Apply'.
(5) PRESTO CHANGE-O!
All HTML tags currently have the same scope, so you can't (yet) do what you are asking. But please file a feature request so it can be added to the list.
maybe check the default editor for html files in aptana?
Anyway, my aptana had always the same color for each tag.
Related
I'm using NetBeans 12 and I hate the fact that it highlights all instances of classnames in HTML and leaves them highlighted with no apparent way to remove the highlighting until another classname/id is selected.
I have searched for answers, and a common one is to use Tools > Options > Editor > Highlighting and deselect "mark occurrences of symbol under carat." I think that is for a different problem though, and for some reason the only language in the dropdown is PHP, so I can't uncheck this for HTML anyway.
Please tell me how I can stop this annoying behaviour, or at least use a keyboard shortcut to remove the highlighting. I would have though something like ESC would be set up to do this as default, but no...
Go to Tools > Options > Fonts & Colors
There you will see a drop-down list of different style profiles. In my case, I have "FlatLaf Light" selected. Yours may be different, but that should not matter.
Choose the "Syntax" sub-menu.
In the "language" list choose "HTML"
In the "Category" list, scroll down to "CSS embedded in HTML" and then select it.
Change the "Background" color to "Inherited".
Hit "Apply" to save your changes.
In my case, this looks as follows:
Before the change:
After the change:
This changes the (very specific) highlighting issue shown in your question's screenshot. But you may want to make a similar change in other places... For example, you can see the opening and closing (matching) <ul> tags are highlighted (which I find useful).
So, you can also take a look at other languages - and even the "All Languages" option for a broader range of places where similar changes can be made (e.g "Mark Occurrences"). But I have not investigated these in any detail.
Final notes - all subjective and based on personal preferences...
You may choose to keep the highlighting feature, but to use a less intrusive color, of course, instead of completely removing it.
I am using NetBeans 15 - so that may affect which overall look and feel themes you have available, also. But a different theme (retaining the highlighting) may also be another option.
I just started using Netbeans and I love it, but I can't seem to find where to change the font of html id and class parameter values, and its currently the same color as my tags with a random background color.
I've been playing around in Tools->Options->Fonts->Syntax but I can't seem to find the correct rites and invocations to change this.
Where should I be looking?
Here is a technical read out that illustrates the problem:
The values for class and id attributes are actually CSS selectors, which have a different syntax highlighting than normal HTML parameter values. To modify these you should alter the value of the Selector category in the Cascading Style Sheets language in the syntax tab of the fonts & colors options screen.
What you are looking for is NOT in the Cascading Style Sheets section like many are saying. What your looking for is in the HTML section under the Fonts and colors. Look for Css Embedded in HTML. This is what you are looking for. Hope this helps.
*I'm using Netbeans 7.4
You can change the color from cascading style sheets under selector and restart NetBeans.
Can be changed through the Fonts & Colors options, then select the Cascading Stylesheet category and find "Mark Occurences" on the list. From there, you can change the background and foreground colors for that syntax.
I have recently had the same problem and actually did not find the solution from the other posts, so I thought to share what I found. Your question is broken down in two sub-questions (direct reference):
where to change the font of html id and class parameter values
For that, I found that both the accepted and #user3267044 answers work. They change both class and id's parameters though, not only class parameters background color as shown in your question
and its currently the same color as my tags with a random background color.
There should be a warning on the line where the "weird" highlight appears. In my case, the warning/hint was "Missing CSS class". You can disable it from Editor --> Hints (select HTML) and then disable the hint "Missing CSS class" (or the one that applies to your case)
Of course we can use tools like Firebug to highlight portions of HTML and see what all CSS is being applied.
But what about the reverse? Is there some kind of tool which would allow you to highlight a particular CSS rule and show you all the pages on a site (either static HTML pages or their dynamic templates) that it applies to?
Example: I've come to work on a new site, very large and I need to edit CSS on a particular page but in doing so, I have no idea how many other pages on the site might also have these class names and hence be affected. Of course I can try to search the whole site for the class name(s) but this can be time consuming or tricky. This site has a class named "ba" for example. Guess how many irrelevant pages will turn up if I just search for "ba"? So how about including a double quote ("ba)? Well, it could be in the middle of a few other classes (class="hz ba top"), at the end (class="hz ba"), etc. More so, it could be dynamically plugged in via server side code making it even harder to find. A tool that could somehow spider your site and be able to identify all the places your CSS change will affect would be great.
not exactly that, but there is a firebug plugin that does that for any loaded page:
http://robertnyman.com/firefinder/
You could use regular expressions ..
for example in Dreamweaver on the search dialog box :
select 'Find in: Entire current local site.."
select 'Search: Source code'
check 'Use regular expression'
in the find textarea type class\s*?=\s*?".*?content.*?"
click 'find all'
the same regular expression could be used with other software that can search inside files using regular expressions....
for example : http://www.sowsoft.com/search.htm (not affiliated with them, just found it for here..)
Keep in mind though, that all the suggestions here do not take into account the case where the class is added by script..
If you use a Mac, there's an excellent shareware app called "CSSEdit" by an Indy Mac Shop in Belgium. A single-user license is 30 euros. I've used it for approx. three years and i can recommend it highly. It's a mature, stable App (though continuously updated/improved); widely used among Mac Web Designers, and those of use who are not but need all the help we can get, which CSSEdit certainly seems to provide.
To show elements on the html page styled by a given selector:
(i) open both the style sheet and the markup page (markup page must have a link to the style sheet);
(ii) click the X-Ray button off (must read 'Not Active' below the button);
(iii) in the style editor, click any selector (i click it so that my cursor is at the left margin, e.g., in front of the '#', etc.);
(iv) now click 'inspector' on the mark-up page (next to 'X-ray').
Now, look at your mark-up page--it will have a blue outline around the elements affect by the style you clicked on in step (iii) above.
For this kind of things I just use grep, or - even better, ack.
If you're concerned about false positive when searching for short patterns, you can do a double filter: you grep all lines containing class= and you feed its output in another grep which only narrows the result down to the lines containing both class= and your search pattern (which can also be more precisely specified with a regexp using word boundaries like \bba\b to avoid matching bar or abba)
How about putting an ID on the body of each page, and use that to restrain the use of CSS outside of pages clearly stated in the CSS?
Like this:
#mypage .description,
#myotherpage . description {
}
Cons:
Must put a body ID on each page / template.
Must specify each page the CSS should apply to. More CSS code to manage.
Makes the CSS less easy to scan through with your eyes (since the line starts with the page ID and not the CSS style). This is a bigger problem if some of the CSS styles are used on several pages (since the css spec for each style would be long).
Pros:
Avoids unintentioned CSS change propagations. I.e. changing one page affects other unknown pages.
See what pages a CSS change would affect, when you're editing the CSS style itself. The information is right there; no need to search/grep for it.
Forces developers to specify what pages the CSS would affect. If you'd just included this information as comments in your CSS, some person would inevitably forget to update the comment when the CSS is used on a new page.
I agree with this statement, made by a friend:
"Minimize CSS that is used several places. It's not like programming; it's better with a little duplicate CSS, than unmanageable CSS. (Pages like apple.com, has own stylesheets for
each page, and some global CSS.)"
- Olav Bjørkøy, original creator of the Blueprint CSS framework
I'd love your input on this, or if any of you have found a better way.
I am working on a CMS. One of its functions is the editing of HTML "chunks" in a WYSIWYG editor that are displayed as individual pages.
I have an area in the CMS where these chunks are previewed.
The chunks rely on a "foundation.css" file that is loaded into the WYSIWYG editor. It does some small resets, defines a default font and text color, and is overall very simple.
The CMS, obviously, comes with a ton of CSS statements, many of which affect general settings like font size, family, color, line-height, paddings and the like.
Naturally, when I try to display a HTML chunk in a CMS page, it looks different from when it is displayed only with the foundation.css stylesheet.
Can anybody think of a way to clean a defined area in a HTML page (say, a DIV) from all previous style definitions? I can't.
an Iframe displaying the chunk and embedding foundation.css would help, but I fear for the user's workflow when 5-10 IFrames have to be rendered and then adjusted in height via JS once they are loaded. Yuck.
I have thought about "lifting" all other CSS to a sub-class (i.e. adjusting the CMS' CSS), but that would involve touching a lot of files, some probably PHP source code, and I'd rather not do that.
I don't think this has a solution but you never know.
There are CSS Reset stylesheets available; you could modify those, perhaps?
you could give all of the divs that contain code from the WYSIWYG editor a class, and then reset everything inside of that div.
Adding to what GSto said you can have some style set up like
div.clearCss *
{
property: value !important
}
With all pertinent style properties reset.
This style should apply to anything under an element with clearCss set as it's class, so you would only need to apply that class to the parent element.
Are you using a specific WYSIWYG editor in CMS? I've found that the Telerik RadEditor will allow you to use specific stylesheets for the actual editing area of the editor. The editor that you are using might also be able to to do that.
Good luck, and hope this helps.
If you take TinyMCE for example, they use also an iframe, I think they had the same problems like you. I use it in my backend and on some pages 4 iframes. I don´t see any performance problems.
With TinyMCE it is possible to compress the functions you need (in PHP, JSP, .NET and Coldfusion), this gives you a great speedboost.
Think twice, bevore you write your own WYSIWYG editor, the others are well tested and have a bunk of very good plugins for nearly every need.
In eclipse menu I go to Window -> Preference. Then, In the Preference Dialog I go to Web -> HTML Files -> Editor -> Syntax Coloring. There I have some Elements. For these Elements I can define my favorite Colors and Styles. But I can define only ONE Color for ALL Tag Names.
Is there any way to define different colors for different Tags? For Example, separate colors for <script>, <a>, <table> and so on?
Triptych is correct, there is no way to do that without editing Eclipse's core files.
I'm pretty sure you can't do that, and I must say, the very idea of it offends my sensibilities.