Divi Gallery Module - default close icon view

Divi Gallery Module – default close icon view

The Elegant Themes, Divi Gallery Module, allows each image in the gallery to be viewed in a large format by simply clicking on the image. 

However, the close icon for this view is barely visible and new users sometimes have a difficulty in locating it.

An example of an opened image is shown here.  You can see the  X (close) icon at the top right of the image.  It is circled in red and it is faintly visible.

 

Divi Gallery default Icon view - after style editsWe can use a bit of CSS to change this icon so that it is more visible. 

This second image shows the result of our change.  We changed both the visibility (opacity) and the color as well.  The Close Icon is now easier to locate for the user.

The following steps show how to make this change.

To do this we will use the INSPECT feature of the Chrome browser, and the Divi Theme feature that lets us place small bits of CSS custom code in the Divi options.  This is important, because we do not want our code to be overwritten with later WordPress updates. 

Here are the steps to accomplish this.

Step 1. Access the Inspect menu

While viewing an expanded image in the Divi Gallery right-click on the X (close) icon at the top right of the image. 

When we do this the drop down menu shown at the top right appears. 

Select the last option – Inspect. (Which is the Chrome browser feature that we want to use)

 

 

Step 2. View the Inspect Window

When the Inspect option is selected the Chrome “Inspect” tool window opens.  In our case it opens below the image, however this location can be changed. You can see the many options in the Inspect Window.

The Element Close (mfp-close) is highlighted in the left hand pane of the window

And the right hand window shows the CSS code that controls the style of the X (close) icon.  This is what we want to change.

 

 

Step 3. Inspect Window Left-hand  pane

The part highlighted in blue is the code element that we wish to change.   While this element is highlighted we will determine what CSS needs to be changed in the right-hand pane of the Inspect Window.

We can see that the CSS class is “mfp-close“.  So this is what we will look for in the right-hand pane

 

Step 4. The CSS code for the Close Icon.

The right-hand pane shows the part of the CSS that we need to edit.  We can see that the opacity of the X(Close) icon is set to .2 (20%) on the last line of the displayed code.

Although the color is not set we will add the color CSS code as well.  To see what this would look like we can click on the code in the right-hand pane and make the changes.  This will have no effect on our website because we are simply editing the code that has been already downloaded from the website server.  Also this temporary change cannot be saved back to the server.

The next step shows the CSS code changes that have been made and the results of the change.

Step 5. The CSS code changes.

The right-hand pane shows CSS code with the changes that we made. The changes were:

  • opacity changed to .7 (80%)
  • color: red

 We can copy these changes to the Divi/Optons/The next step shows the CSS code changes that have been made and the results of the change.

Step 6 . Insert CSS edits into Divi.

We now copy the CSS code on the CSS pane and paste it into the Divi / Theme Option/Custom CSS Code box.  The code box is shown here on the right with the code pasted in place.

It is found at the very bottom of the Divi Theme options

Finally we click the SAVE button in just under the Code box to update our changes.

When we view images in the Gallery now, the expanded image will have a much more visible Close (X) icon and it will be in red.

 

Share