How to add [square brackets] to a style/style editor[FIXED]

[M33R4]

Hello friends.

To distinguish clicking areas of a screen on my training script, I have highlighted the clickable areas in bold and square brackets - please see attachment, where the word [Request] is an example of the clickable area of the software.

I have a lot of those clickable areas in my document so, to save time, I have created a Style to apply to those words. However, I don't know how to add square brackets within the style editor?

Many thanks for your help.

[Chicago_HPT]

I don't know if you can add them in the style editor—at least not in the Basic View. And, honestly, its probably more complicated to do in the Advanced view than it is to simply edit the CSS file directly in the text editor. I know it sounds complicated but it really isn't. Here's how you can quickly and easily modify the CSS file in the text editor:

1. Right-click the CSS sheet in the Explorer and select Open with>Internal Text Editor.
2. Find your ButtonName style in the CSS file, whatever you call it. For illustration purposes here, I'm going to call it span.ButtonName. The style formatting information will be enclosed in curly braces { }.
3. After the end curly-brace "}" for the style, insert a new blank line.
4. Type the following (replace "ButtonName" with your actual style name):

   Code: Select all

   span.ButtonName:before {
     content: "[";
   }

   Nerd Note: This creates a "before" pseudo-element that automatically inserts content before anything you format with the ButtonName style. Even though it's called "before" it is still actually within the ButtonName style, it's just inserted before the other content, so it has the same styling information unless you change it. For example, in your case, it will be bold.
5. Now insert another blank line and type the following:

   Code: Select all

   span.ButtonName:after{
     content: "]";
   }

   Nerd Note: Yep, this does the same thing but automatically inserts content after anything styled with ButtonName.
6. Save the CSS sheet.

Now anything that you style with ButtonName should be surrounded in brackets.

I hope that helps!
Cheers,
-jeff

[Chicago_HPT]

In my test, I notice that there might be a small space between the name of the button that I styled and the "]" after. If you find that to be the case, don't worry! You can easily remove the space by adding another line to your span.ButtonName:after style.

This worked for me:

Code: Select all

span.ButtonName:after {
  content: "]";
  margin-left:-.25em;
}

The negative left margin value moves the bracket "]" a tiny bit to the left. You may need to play with the exact negative value, depending on the font you're using.

In the example above I used the "em" measurement, which is the width of a capital "M". In this case, I set the measurement to one quarter (.25) of the width of a capital "M". I used it because it is a relative size, depending on the font size. But I also tried it using pixels and I found that -3px (pixels) also worked nicely for the font and size I was using. So, if you're more comfortable using pixels as a measurement, you can use this instead:

Code: Select all

span.ButtonName:after {
  content: "]";
  margin-left:-3px;
}

In either case, you can play with the negative values to get it just right.

Cheers,
-jeff

[M33R4]

..This worked for me:

Code: Select all

span.ButtonName:after {
  content: "]";
  margin-left:-.25em;
}

..... So, if you're more comfortable using pixels as a measurement, you can use this instead:

Code: Select all

span.ButtonName:after {
  content: "]";
  margin-left:-3px;
}

...........

Many thanks Jeff - I shall test this and update you.

Much appreciated

[M33R4]

I ended up using a Pseudo Class in my stylesheet, entering the following code for square brackets:
\005b
\005d