Skip to main content
Participant
January 17, 2019
Answered

Automated Tasks

  • January 17, 2019
  • 2 replies
  • 853 views

Is there a way to automate a particular task/action like there is in Photoshop? That would be great!

One of the things I do quite frequently is to  (in my CSS file) put a temporary border round a div or section etc. so I can see exactly where it is. It might sound silly, but I works for me. I would like to hit a hotkey or a Ctrl-something and it adds a "border: solid thin color:" to where I put my cursor. Is there anything like that?

This topic has been closed for replies.
Correct answer Jon Fritz

You could save the border style as a Snippet, then (in newer versions of DW) use a Snippet Keyword to drop the code in place. It's essentially creating a custom Emmet shortcut...

1. In an open html file, create your style, something like: style="border:1px solid red;"
2. Highlight the code and click the New Snippet button in the Snippets panel (Shift + F9 if it's not open)
3. In the dialogue that comes up, give the Snippet a name and a Keyword, something like: redb
4. In your code of any future page, place the cursor where you want your style to appear
5. Type your keyword, followed by the Tab key

2 replies

Jon Fritz
Community Expert
Community Expert
January 17, 2019

I would probably use Ben's suggestion, create the .border class in my external stylesheet.

Once the class is in your css file, you can add it to elements pretty quickly...

From Live View (newer versions of DW)
1. Click the element to highlighted in blue

2. Click the small + icon in the Element Tab that appears with the border
3. Add your border class name and hit Enter
3a. You can also remove it in a very similar way, click the element and then click the X next to the class you want to remove

From Design View
1. Click the element to highlight it

2. Select your border class from the Class dropdown menu in the Properties window

2a. To remove it, select the element and then select "none" from the Class Dropdown in the Properties window

newsong80Author
Participant
January 17, 2019

Thank you for the replies! I was looking for more of a "Shift-Ctrl-B" or something. I don't use that CSS property thing. I just type the code. It is faster.

Jon Fritz
Community Expert
Jon FritzCommunity ExpertCorrect answer
Community Expert
January 17, 2019

You could save the border style as a Snippet, then (in newer versions of DW) use a Snippet Keyword to drop the code in place. It's essentially creating a custom Emmet shortcut...

1. In an open html file, create your style, something like: style="border:1px solid red;"
2. Highlight the code and click the New Snippet button in the Snippets panel (Shift + F9 if it's not open)
3. In the dialogue that comes up, give the Snippet a name and a Keyword, something like: redb
4. In your code of any future page, place the cursor where you want your style to appear
5. Type your keyword, followed by the Tab key

BenPleysier
Community Expert
Community Expert
January 17, 2019

I think that the easiest way to do this in Dreamweaver is to create style rules for a class named border. You can the apply that class to any element in your document.

Example CSS:

.border {

     border: 5px solid red;

}

Example HTML:

<div class="col">

  <h5 class="border">Tipo documento</h5>

  <p>Ricevuta di acqui</p>

</div>

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!