Skip to main content
OhAdobeYouSoCrazy
OhAdobeYouSoCrazy
Inspiring
October 30, 2017
Answered

Customize Individual HTML Tag colors?

  • October 30, 2017
  • 3 replies
  • 2592 views

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!

    This topic has been closed for replies.
    Correct answer Niharika Jha

    Hi,

    The implementation of Code Coloring in CC 2017 differs from Dw CC 2015, so we can't change colors of specific tags in CC 2017. The most you can go is set a color value to .cm-tag

    Regards,

    Niharika Gupta

    Adobe Dreamweaver

    3 replies

    ジ
    ジャズマス界隈
    Participant
    November 1, 2017

    You can use that plugin (Color The Tag Name) with Dreamweaver.

    Please try to copy the plugin directory into here.

    C:\Users\XXXX\AppData\Roaming\Adobe\Dreamweaver CC 2018\Configuration\Brackets\extensions\user

      garya55570120
      garya55570120
      Participant
      May 19, 2020

      It works for 2020 too. The only thing is that you need to restart DW every time you make a change. The plugin is very easy to customise, you can select which tags you want to override.

      Niharika Jha
      Adobe Employee
      Niharika JhaCorrect answer
      Adobe Employee
      October 30, 2017

      Hi,

      The implementation of Code Coloring in CC 2017 differs from Dw CC 2015, so we can't change colors of specific tags in CC 2017. The most you can go is set a color value to .cm-tag

      Regards,

      Niharika Gupta

      Adobe Dreamweaver

        OhAdobeYouSoCrazy
        OhAdobeYouSoCrazyAuthor
        Inspiring
        October 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.

          Preran
          Community Manager
          PreranCommunity Manager
          Community Manager
          October 30, 2017

          If I understood your request correctly, I don't think this workflow is supported in DW. But I am checking with team members for confirmation.

          Thanks,

          Preran

            OhAdobeYouSoCrazy
            OhAdobeYouSoCrazyAuthor
            Inspiring
            October 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.

              Terms & ConditionsAccessibility statement
              Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices