# Change "close button" position and size

**URL:** <https://forums.ankiweb.net/t/change-close-button-position-and-size/43523>\
**Category:** Add-ons\
**Created:** [April 12, 2024, 4:10pm UTC](https://forums.ankiweb.net/t/change-close-button-position-and-size/43523 "2024-04-12T16:10:20Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![hopelesslylost](https://avatars.discourse-cdn.com/v4/letter/h/bbce88/32.png) [@hopelesslylost](https://forums.ankiweb.net/u/hopelesslylost)\
**Post date:** [April 12, 2024, 4:10pm UTC](https://forums.ankiweb.net/t/change-close-button-position-and-size/43523/1 "2024-04-12T16:10:20Z")

</div>

I want to move, and change the size of the “close” button in the bottom bar of the ImageOcclusionEnhanced plugin.

I think the name is “close\_button”, from a piece of code from the plugin files.

> ![image](https://us1.discourse-cdn.com/flex002/uploads/anki2/original/3X/c/2/c272fa72286a885da9c99d96bf11c5f7cdc7ba7e.png)

I feel this might be possible with the CSS injector, however I am not sure how to write that code.

I imagine it would look something like this, however I have no clue what I’m doing. Would appreciate help or some sort of documentation, and/or plugin that does this [non-payed].

 ![image](https://us1.discourse-cdn.com/flex002/uploads/anki2/original/3X/2/3/23a92cd4fc22c4fd360c2408d6caf6755c2efc51.png)

Thank you in advance!

PS. if I can somehow make a “Hide all, guess one & Close” Button that would also be incredibly useful.

---

<div class="post-metadata">

**Author:** ![andrea924breaux](https://avatars.discourse-cdn.com/v4/letter/a/dfb087/32.png) [@andrea924breaux](https://forums.ankiweb.net/u/andrea924breaux)\
**Post date:** [April 15, 2024, 5:06am UTC](https://forums.ankiweb.net/t/change-close-button-position-and-size/43523/2 "2024-04-15T05:06:43Z")

</div>

> [@hopelesslylost](#):
>
> Thank you in advance!
> 
> PS. if I can somehow make a “Hide all, guess one & Close” Button that would also be incredibly useful.

_To modify the appearance and position of the “close” button in the ImageOcclusionEnhanced plugin, you can use the CSS Injector feature in Obsidian. Here’s how you can do it:_

1. Go to the CSS Injector settings by navigating to Settings \> Plugins \> CSS Injector.
2. Click on the “Add new CSS snippet” button.
3. Give your snippet a name, for example, “Modify ImageOcclusionEnhanced close button”.
4. In the code editor, add the following CSS:

```auto
/* Modify the position and size of the close button */
.imageOcclusionEnhanced .close-button {
  position: absolute;
  bottom: 20px; /* Adjust the vertical position as needed */
  right: 20px; /* Adjust the horizontal position as needed */
  width: 50px; /* Adjust the width as needed */
  height: 50px; /* Adjust the height as needed */
}

```

In this CSS, we’re targeting the .close-button class within the .imageOcclusionEnhanced container. You can adjust the bottom, right, width, and height properties to customize the position and size of the close button.

To create a “Hide all, guess one & Close” button, you’ll need to modify the plugin’s code directly. This is a bit more involved and requires some JavaScript knowledge. Here’s a high-level overview of the steps:

1. Locate the plugin’s [KrogerFeedback] source code. In Obsidian, you can find it in the .obsidian/plugins/image-occlusion-enhanced directory.
2. Identify the relevant code that creates the “Hide”, “Guess One”, and “Close” buttons.
3. Modify the code to create a new button that combines the functionality of “Hide all”, “Guess One”, and “Close”.
4. Replace the original button code with the new combined button code.

_However, modifying the plugin’s source code directly is not recommended, as it can cause issues when the plugin is updated. Instead, you could consider creating a plugin that overrides the original functionality and provides the combined button functionality._

_If you’re not comfortable modifying the plugin’s code directly, you may want to consider looking for an existing plugin or community-contributed solution that provides the functionality you’re looking for. Alternatively, you could reach out to the plugin’s developer and request the feature._

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex002/uploads/anki2/original/1X/8f1279ababc5879d54e4838989f606cfe55af8c7.jpeg) [@system](https://forums.ankiweb.net/u/system)\
**Post date:** [May 15, 2024, 5:06am UTC](https://forums.ankiweb.net/t/change-close-button-position-and-size/43523/3 "2024-05-15T05:06:45Z")

</div>

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.