Re: Customize Individual HTML Tag colors?

OhAdobeYouSoCrazy · ‎Oct 30, 2017

I thought so. How about the ability to instal 3rd party Brackets extensions to the Brackets that Dreamweaver uses? For instance, this brackets plug-in gives each tag it's own class name, so they could then be targeted with CSS from the main.less file. GitHub - jzmstrjp/brackets---color-the-tag-name: brackets extension - color the tag name I actually tried to shoehorn this extension into the Brackets extension that DW creates when you copy and edit a theme, but even when I pointed the package.json to the main.js file, instead of the main.less file, I couldn't get any javascript to run in this way. Thoughts? Thanks again.

OhAdobeYouSoCrazy · ‎Oct 30, 2017

Thanks Preran, Just to clarify, so I create a new duplicate theme of the Light theme. Then edit it. In the main.less file I can target .cm-tag class to set the color/style/font etc for ALL html tags. I could even set it on a per-language basis with for instance to target just HTML tags in PHP files: .php { .cm-tag { color: red; }} However, in trying to duplicate the look of code in DW15 I would need to color input/form, and div, and anchor, and several other tags different colors. But I can't find a way to target the CSS with more specificity than the .cm-tag level. I'm looking for some class or ID that would let me set the styles based on what kind of HTML tag it is. Or barring that, I'm looking for a way to install third party Brackets extensions into the Brackets version that DW 2018 uses for a code editor. I realize I'm on the fringe of what can even be accomplished here, and thank you for your time and consideration.

OhAdobeYouSoCrazy · ‎Oct 30, 2017

Wether this opens in a new tab or new window will be dependent on the users browser settings, but this should do what you want it to. <a class="link">Link</a> <script type="text/javascript"> $("a.link").on("click",function(){ window.open('www.yourdomain.com','_blank'); }); </script>

OhAdobeYouSoCrazy · ‎Oct 30, 2017

Good Morning Adobe Forum, I am working to create "Dreamweaver 2015" style light and dark themes for Dreamweaver 2017-18's code view. However, I have hit a roadblock. Dreamweaver 2017-18 use brackets as the code editor, and one can create a custom theme by overriding the CSS in the main.less file. However, I can't find any way to target individual HTML tags. For instance, in DW15 the form and input tags take a dark yellow color, where the div tags take a purple color and the table tags takes a teal color. I am working to recreate these colors but I cannot find a way to target anything more specific than the .cm-tag elements in the main.less file. Further research shows that brackets doesn't support this by default, but a plugin has been built on github to add this functionality to Brackets. I tried to install the code from this plugin into the Theme folder but to no avail. I tried copying the main.js file and the folders from this plugin into the copy of the light theme I was using to edit the main.less file, but I don't think the main.js file gets fired even if you point to that instead of the main.less file in the package.json file. GitHub - jzmstrjp/brackets---color-the-tag-name: brackets extension - color the tag name So, on to my questions: 1. Is there a way to target the colors of individual HTML tag types in DW2017-18 main.less files? Any class more specific than .cm-tag like maybe .cm-tag-form or .cm-tag-input? or 2. Can anybody figure out a way to install the above plugin into the brackets version that DW 2017-18 leverages for code editing? Or any Brackets plugins at all? Thanks All!

OhAdobeYouSoCrazy · ‎Mar 06, 2017

pziecina's answer above is the correct official answer. If you are looking for something to supplement that for a browser with a sticky cache... I often have luck appending a query string to the address. The below javascript would crawl all the images on the page and force them to get refreshed versions by appending the Linux timestamp onto the query string. <script type="text/javascript"> $(document).ready(function(){ $('img').each(function(){ var date = new Date; // add the current unix timestamp in microseconds to the the image src as a query string this.src = this.src + '?' + date.getTime(); }); }); </script>

OhAdobeYouSoCrazy · ‎Mar 06, 2017

Note sure if this is 100% browser compliant, but works on just about everything I use it for. Note: The "proper" way to redirect an old address to a new address would be via a 301 redirect in your .htaccess file. This will make sure your Google serps aren't affected. However, that wouldn't give you the 5 second delay, it would just redirect immediately. Up to you and your client to decide if you want a better user experience, or better google serps. <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>My Redirect Page</title> </head> <body> <div> You will be redirected in 5 seconds... </div> <script type="text/javascript"> setTimeout(function(){ window.location.replace("http://www.google.com"); }, 5000); </script> </body> </html>

OhAdobeYouSoCrazy · ‎Mar 03, 2017

Hi Web_Zest, I ran into this problem after my recent update and was completely unwilling to accept that I had to edit in Pastel Green with white text. Of course, I've been writing CSS for about 20 years and have long been used to tweaking Dreamweaver in some way to provide functionality that Adobe themselves are very often circumspect to add themselves. So, without further ado here is a fix that will add a very light blue background AND retain the normal color of text. Note: I have only tested this with HTML files. CSS, PHP, JS files may need their own fixes. I will try to update this post with those fixes if this ends up being the case. This is based on a copy of the light theme, but a similar hack could be used for a copy of the black theme as well. Use the custom code theme technique from above, but add this to the bottom of the main.less file and save. /* Custom code colors or overrides should start after this line */ .CodeMirror-matchingtag { color: inherit !important; /* Don't know if this is necessary, but whatevs */ background-color: #ebfefd !important; /* Set your BG color here same as the above post */ } .CodeMirror-focused .cm-atom, .CodeMirror-focused .cm-string, .CodeMirror-focused .cm-string-2, .CodeMirror-focused .cm-hr {color: #1c1ca8 !important;} .CodeMirror-focused .cm-number, .CodeMirror-focused .cm-attribute, .CodeMirror-focused .cm-plus, .CodeMirror-focused .cm-qualifier {color: #b16423 !important;} .CodeMirror-focused .cm-def, .CodeMirror-focused .cm-property {color: #0b8dc6 !important;} .CodeMirror-focused .cm-variable, .CodeMirror-focused .cm-variable-2, .CodeMirror-focused .cm-variable-3, .CodeMirror-focused .cm-operator, .CodeMirror-focused .cm-meta, .CodeMirror-focused .cm-bracket {color: @foreground;} .CodeMirror-focused .cm-comment {color: #8C8C8C !important; font-style: italic; } .CodeMirror-focused .cm-error, .CodeMirror-focused .cm-minus {color: #7b6546 !important;} .CodeMirror-focused .cm-header {color: #87908e !important;} .CodeMirror-focused .cm-link {color: #1fc6d4 !important; text-decoration: none;} .CodeMirror-focused .cm-rangeinfo {color: #2c9abc !important;} .CodeMirror-focused .cm-keyword, .CodeMirror-focused .cm-builtin, .CodeMirror-focused .cm-tag, .CodeMirror-focused .cm-quote {color: #8b1a83 !important;} The basic idea here is to copy all the HTML tag CSS definitions and then override them by providing a CSS selector with a higher specificity than whatever it is that Adobe does to force all this text to a single color. Which, in my humblest opinion, whomever decided this was a good idea should be fired, tarred and feathered, in addition to having their mother called to be informed of what a total failure they have become. HOW TO CUTSOMIZE YOURSELF: Here is the code block I copied which defines the general code styles: .cm-atom, .cm-string, .cm-string-2, .cm-hr {color: #1c1ca8;} .cm-number, .cm-attribute, .cm-plus, .cm-qualifier {color: #b16423;} .cm-def, .cm-property {color: #0b8dc6;} .cm-variable, .cm-variable-2, .cm-variable-3, .cm-operator, .cm-meta, .cm-bracket {color: @foreground;} .cm-comment {color: #8C8C8C; font-style: italic; } .cm-error, .cm-minus {color: #7b6546;} .cm-header {color: #87908e;} .cm-link {color: #1fc6d4; text-decoration: none;} .cm-rangeinfo {color: #2c9abc;} .cm-keyword, .cm-builtin, .cm-tag, .cm-quote {color: #8b1a83;} Note I prepended each CSS definition with .CodeMirror-focused and also added the !important to each definition. In this way one could do pretty much anything they wanted with the highlighted code. Either keeping the original code coloring, or creating their own custom highlight color scheme. For me, just returning the functionality back to "sane" was fine. Have a good day all! OhAdobeYouSoCrazy

OhAdobeYouSoCrazy

OhAdobeYouSoCrazy

Activity

Re: Customize Individual HTML Tag colors?

Re: Customize Individual HTML Tag colors?

Re: Opening a link in a new tab

Customize Individual HTML Tag colors?

Re: how to force browser to load fresh copy every ...

Re: show page and then redirect after seconds to a...

Re: Solution: White on Mint Green Code Color.