Pop-up Dialogue Close Button Edit

[Rebecca]

Hello everyone!

I was making a theme for my forum and I wanted to edit close button and draft message background in pop up dialogue. Since my knowledge on coding is very limited, I posted the question here and Kami helped me edit message draft box but was unable to help me edit close button, providing the explanation as to why that may not be possible to do through template modification.

I would like to know if it is possible to edit close button and how could that be achieved.

Thank you in advance and have a great day!

[Brian]

Hi, Rebecca .

This would be done entirely through CSS rather than the templates. Since the close button is just an element with a background image you should be able to make an addition to the bottom of Themes > Advanced Styles & CSS > Style Sheet to replace that background image with your own.

.ui-icon-closethick {
    background-image: url(IMAGE URL);
}

.ui-dialog .ui-dialog-titlebar-close:hover span {
    background-image: url(HOVER IMAGE URL);
    background-position: left top;
}

There's no template associated with the dialogs which is why it's not possible to modify their underlying HTML through a template modification.

[Rebecca]

Nov 13, 2016 14:04:30 GMT -8 Ulises said:

Hi, Rebecca .

Question, do you want to change this close button no matter what dialogue box it is or for a specific dialogue box?

Hello Ulises.

I would like the change to be the same for every dialogue box.

May I ask would it be too much to ask for code for specific dialogue box as well as it might come in handy for other themes.

Thank you.

[Rebecca]

Nov 13, 2016 14:09:36 GMT -8 Brian said:

Hi, Rebecca .

This would be done entirely through CSS rather than the templates. Since the close button is just an element with a background image you should be able to make an addition to the bottom of Themes > Advanced Styles & CSS > Style Sheet to replace that background image with your own.

.ui-icon-closethick {
    background-image: url(IMAGE URL);
}

.ui-dialog .ui-dialog-titlebar-close:hover span {
    background-image: url(HOVER IMAGE URL);
    background-position: left top;
}

There's no template associated with the dialogs which is why it's not possible to modify their underlying HTML through a template modification.

Hello Brian Ordonez.

I posted before I saw your reply.

Thank you for the code.

[Rebecca]

Just wanted to say the code works perfectly.

Thank you very much Brian !