Andrew Checkley

Hi all,

In the interest of sharing as I have found many additions on the community that have been helpful, we are using the above method within our help centre but have amended the code as follows to fit in with our style.

span[class=wysiwyg-color-red130] {
background: #ffefef;
color: #631010;
text-align: justify;
border-left: 5px solid #ff0000;
margin: 1.5em 10px;
padding: 0.5em 10px;
display: block;
}

span[class=wysiwyg-color-red130]:before {
display: block;
white-space: pre;
content: "Important:";
font-size: 2em;
}

Or

span[class=wysiwyg-color-green130] {
background: #e2ffe4;
color: #1b591f;
text-align: justify;
border-left: 5px solid #00ba0c;
margin: 1.5em 10px;
padding: 0.5em 10px;
display: block;
}

span[class=wysiwyg-color-green130]:before {
display: block;
white-space: pre;
content: "Tip:";
font-size: 2em;
}

We have further uses as well to highlight other items but using the above and just changing the swatch color 

This bit span[class=wysiwyg-color-green130]

you can have as many as you wish ensuring you don't use any colors that are used as actual font changes. (We only use the bottom row swatches for example with all staff made aware that they are only used to achieve the notice windows)

You would need to be logged in as an admin and then

1. click on "Guide Admin" Top right.

2. Eye icon (left bar) Customize design.

3. View theme

4. three little dots in a square icon "Edit code"

5. scroll to the bottom of the list on the left and open the file "style.css"

6. Scroll to the bottom and add the code (on a new line.)

Note. I add the following before hand to indicate the change should you review at a later date

/* Start Custom blockquote font color swatch CSS */

Anything between the open /* and the close */ is ignored and treated as a note. Its useful if you ever want to change or remove changes. 

I then close with the following.

/* End Custom blockquote font color swatch CSS */

Thanks

Andrew

@Wes

I have had this in place for some time now for outage notifications and works great love it!

I want to put a second one in place for announcements (I want to keep it separate as announcements we do allot so don't want to detract away from outage notifications that we use to drive call volume down during these periods. If we have a banner up regular we run the risk of it being ignored when its important.

My view is we keep the alert box for outages. big red banner and then second one that is green for an announcement.     

I assume i just enter all sets of code in the appropriate places but rename css classes so they are different and use a different tag? and the webkit items just need a single reference at the end as these would be the same. I'm only looking to change the background/font colors and the icon between the two.

But in some instances we would want the outage notification as well as the announcement to appear.

Hope that makes sense

Thanks

Andrew

K using it from that method and it logs as IE 11 so its down to the browser or the plugin? the script is working correctly though so thanks for the assistance :)

Hmm ok that also tells me chrome. (using edge sorry not IE) which then has the option in a drop down to open with IE which then shows to be IE

Don't think I'm using chrome frame? I assume this is a plug in?

I have only used the source you provided also. I'll try with the source from the stack.

Thanks

Andrew

I'm just testing with this as its a great idea, however I use two browsers, Chrome by default and IE for testing.

I do all admin stuff within chrome then use IE with a test user. when logging a request through IE with my test user the ticket is reporting the browser to be chrome?

Answered own question mouse over :) 

Thanks though

Excellent thank you. how did you locate the color swatches number? I want to extend on your code on one of the other swatches to set up some other customer text for articles.

Thanks

Andrew

Hi,

I have been searching the CSS for this to change the font size and placement but have been unable can anyone advise?

I am going to change the size of the search box but it looks odd without doing the text also.

Thanks