Load Draft dialogue edit - Resolved

[Rebecca]

Hello everyone!

I hope someone can help me with this pop up dialogue box as my coding knowledge is very limited. I tried searching the answer here but I couldn't find exactly what I need.

I would like to change the background of the draft message text box and I would like to be able to edit the close button (corners shape, colour of both X and background and hover colour).




I tried editing some parts of CSS > Style sheet > /* Containers and Dialogs */ but I either mess something up or am unable to make the functioning code.

Thank you in advance and have a great day!

[Kami]

If you right click on the parts you want to change while the box is open and select "inspect", you will be able to see the CSS classes you need to target (: does that help at all?

[Rebecca]

Nov 12, 2016 7:58:21 GMT -8 Kami said:

If you right click on the parts you want to change while the box is open and select "inspect", you will be able to see the CSS classes you need to target (: does that help at all?

I tried to use it but that's the problem - I don't know how to put them to work properly. I either mess up other parts I don't need to edit or it does nothing.

As for close button I know this is the line

.ui-dialog .ui-dialog-titlebar-close:hover span, .ui-dialog .ui-dialog-titlebar-close:focus span { background-image:url('@{image_path}/ui-icons.png'); background-position: -20px, 0px; }

And I know I should start with this:


.ui-dialog .ui-dialog-titlebar-close: { }

but again, my lack of knowledge and skills doesn't help. I can try again as I got an idea of how it should work but I doubt it will work.

If you by any chance know good free online tutorials or classes for coding, it would be very much appreciated.

Thank you for helping.

[Kami]

if you're interested in learning, start here: www.w3schools.com/

They have a space specifically for CSS.

I'd also recommend codeacademy:
www.codecademy.com/learn/web

If you have specific questions I can also help better when I am on my desktop (:

[Rebecca]

Nov 12, 2016 8:29:11 GMT -8 Kami said:

if you're interested in learning, start here: www.w3schools.com/

They have a space specifically for CSS.

I'd also recommend codeacademy:
www.codecademy.com/learn/web

If you have specific questions I can also help better when I am on my desktop (:

Thank you for your recommendation. I'll be sure to visit them and hopefully learn to code properly.

Well, the code I tried didn't work and I don't have any more ideas on how to do it. If you by any chance know how to edit this, I would be grateful.

Either way, thank you for replying.

[Kami]

can you show me what you tried? That way I can see what has been attempted and where the error is (:

One thing I can see is a syntax error. You have a semicolon preceding the opening bracket in your prior post, which should be removed.

.classname { }

Not

.classname: { }

[Rebecca]

Nov 12, 2016 8:50:00 GMT -8 Kami said:

can you show me what you tried? That way I can see what has been attempted and where the error is (:

One thing I can see is a syntax error. You have a semicolon preceding the opening bracket in your prior post, which should be removed.

.classname { }

Not

.classname: { }

.ui-dialog
.ui-dialog-titlebar-close
{ background-color: #FFFFFF;
padding: 1px;
border-width: 1px;
.rounded-corners (0px);
font-size: 20px; }

This makes the close button have square look however, when I changed colour from white to something else it acts like a border. Font doesn't seem to work as X stays the same. And I have no idea how to change hover colour.


.ui-dialog
.ui-dialog-content
.ui-widget-content
div.message {
background-color: blue; border-colour: green; border-width: 1px; .rounded-corners (0px);
}
This does nothing...


.ui-dialog,
.ui-dialog p,
.ui-dialog span,

.ui-dialog-content
.ui-widget-content
div.message {
background-color: blue; border-colour: green; border-width: 1px; .rounded-corners (0px);
}

And this changes things I don't want to be changed.

[Kami]

Rebecca

This code:

---

.ui-dialog
.ui-dialog-titlebar-close
{ background-color: #FFFFFF;
padding: 1px;
border-width: 1px;
.rounded-corners (0px);
font-size: 20px; }

---

The part I marked in red is incorrect syntax, which is likely why what follows after it (the font size) does not display properly. ".rounded-corners" is telling the CSS to find an HTML element that has the class "rounded-corners", not targeting the corners of containers that already exist (which is determined by the "border-radius" property); additionally, having a selector inside the properties list is incorrect which will not function at all.

Instead try:

---

.ui-dialog .ui-dialog-titlebar-close {
    background-color: #FFFFFF;
    padding: 1px;
    border-width: 1px;
    border-radius: 0px;
    font-size: 20px;
}

---

To change the hover colour, you would need to target the hover selector:

.ui-dialog .ui-dialog-titlebar-close:hover {
    whatever changes to the hover appearance you want here
}


NOTE: that you need to use American spelling. "colour" should be "color", for instance.

[Rebecca]

Nov 12, 2016 9:34:23 GMT -8 Kami said:

Rebecca

This code:

---

.ui-dialog
.ui-dialog-titlebar-close
{ background-color: #FFFFFF;
padding: 1px;
border-width: 1px;
.rounded-corners (0px);
font-size: 20px; }

---

The part I marked in red is incorrect syntax, which is likely why what follows after it (the font size) does not display properly. ".rounded-corners" is telling the CSS to find an HTML element that has the class "rounded-corners", not targeting the corners of containers that already exist (which is determined by the "border-radius" property); additionally, having a selector inside the properties list is incorrect which will not function at all.

Instead try:

---

.ui-dialog .ui-dialog-titlebar-close {
    background-color: #FFFFFF;
    padding: 1px;
    border-width: 1px;
    border-radius: 0px;
    font-size: 20px;
}

---

To change the hover colour, you would need to target the hover selector:

.ui-dialog .ui-dialog-titlebar-close:hover {
    whatever changes to the hover appearance you want here
}


NOTE: that you need to use American spelling. "colour" should be "color", for instance.

I tried only with background colour but it doesn't change the background of X. It acts like a border and the rest doesn't seem to do anything.




.ui-dialog
.ui-dialog-titlebar-close
{
   background-color: #FFFFFF;
}

And I still can't change the white background where draft text is shown.

English is my second language and I have studied from British English books. Thank you for reminding me about that.

[Kami]

I cannot seem to replicate this issue -- I used the same CSS as above and was able to change the background colour just fine. Could you link me to your forum (feel free to send it to me via PM if you want to keep it private) so I can see what's going on?

And you're welcome, I have the same problem myself (:

[Rebecca]

I put the CSS on another theme and on default PB theme on my test site and I see the same result. Is it possible that my browser is not showing it right? Or is it because it is an icon and I am targeting the placeholder?

Just a moment because I need to make it open for public.

[Kami]

Nov 12, 2016 12:28:05 GMT -8 Rebecca said:

I put the CSS on another theme and on default PB theme on my test site and I see the same result. Is it possible that my browser is not showing it right? Or is it because it is an icon and I am targeting the placeholder?

Just a moment because I need to make it open for public.

It's theoretically possible it's a browser issue but it's unlikely. What you're doing by adding the background colour is cross-browser compatible (as in, you do not need a different syntax for IE versus a webkit browser, for example) and you wouldn't be running into a problem with an older browser not accepting the syntax because 'background-color' has been a property since ... well since CSS existed.

Let me know when you've got it ready for me to view.

[Rebecca]

Alright, I think I understand and checked on Opera - no it is the same. (I'm using Firefox)

It is a test site and you can access the first board and use search to see the red border around the X. Can I link you now?

[Kami]

Nov 12, 2016 12:44:26 GMT -8 Rebecca said:

Alright, I think I understand and checked on Opera - no it is the same. (I'm using Firefox)

It is a test site and you can access the first board and use search to see the red border around the X. Can I link you now?

Go right ahead (:

[Kami]

So here is the dealio.

I see you have set the background to red and it looks like a border. That is because the background is being covered up by a second element.


storage.proboards.com/forum/images/ui-icons.png

This is the image that is governing what appears in the close area.

If I add a background colour, watch what happens:

As you can see, the "border" is a result of the image blocking the rest of the background from being seen. I am not entirely sure if this particular thing can be changed.

As far as the content of the load draft, try this:

#autosave .message {
    background-color: #000000
    color: #000000
}