Change "close button" position and size

Add-ons
1

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
image1574×494 57.9 KB

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
image1198×334 36.4 KB

Thank you in advance!

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

2

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:
/* 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.