Customizing Popup Buttons

Normal Button #

Normally by default the buttons looks like primary WordPress buttons.

GLFW Manual

Default CSS selector for DearPDF popup button is

.dp-element[data-lightbox=button] {
 //your style goes here
 }

Changing Color #

Customizations can be achieved using custom CSS. On WordPress – We recommend using Theme Customizer -> Additional CSS section for adding Custom CSS. Or a custom code plugin if you change themes often.

GLFW Manual
.dp-element[data-lightbox=button] {
      background: yellow;
      border: none;
  }
  .dp-element[data-lightbox=button]:hover {
      background: orange;
      color: white;
  }

Custom Class #

Extra classes can be used to change style for certain buttons only.

GLFW Manual
.dp-element.red_button {
     background: crimson;
     color:white;
     border: none;
 }
 .dp-element.red_button:hover {
     background: orange;
 }

Leave a Reply

Your email address will not be published. Required fields are marked *