# Perspective vessel open side with no agitator **URL:** \ **Category:** Ignition\ **Tags:** perspective, ignition81\ **Created:** [August 27, 2021, 2:09pm UTC](https://forum.inductiveautomation.com/t/perspective-vessel-open-side-with-no-agitator/50383 "2021-08-27T14:09:23Z")\ **Posts on this page:** 6\ **Page:** 1
**Author:** ![chase.dorsey](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/chase.dorsey/32/75606_2.png) [@chase.dorsey](https://forum.inductiveautomation.com/u/chase.dorsey)\ **Post date:** [August 27, 2021, 2:09pm UTC](https://forum.inductiveautomation.com/t/perspective-vessel-open-side-with-no-agitator/50383/1 "2021-08-27T14:09:23Z")
Hello! I am currently doing one of my first few perspective projects and I really like the mimic style of the vessel symbol, however I do not need to show the agitator and when I hide it in the props the side of the tank closes up leaving very little room to see the water level. Is there a simple solution to hide the agitator while still keeping the side of the tank open or do I need to dive into SVGs and HTML to accomplish this? ---
**Author:** ![YF129701](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/yf129701/32/60498_2.png) [@YF129701](https://forum.inductiveautomation.com/u/YF129701)\ **Post date:** [August 27, 2021, 4:46pm UTC](https://forum.inductiveautomation.com/t/perspective-vessel-open-side-with-no-agitator/50383/2 "2021-08-27T16:46:29Z")
Hi Chase, welcome! If you’re up to adding custom CSS, there’s a simple way to accomplish this. Here are the steps: 1. Add a style class of `remove-agitator` to the Vessel component. ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/c/d/cd830f7a02d15241d7f63af3d7b8330abef318ba.png) 2. Go to your Ignition installation location, into the themes directory. If you’re on Windows, this will likely be `C:/Program Files/Inductive Automation/Ignition/data/modules/com.inductiveautomation.perspective/themes/`. 3. Create a folder in `/themes` called `custom` or whatever you want to call it. Add a file called `style.css` into `/themes/custom`. 4. Open up `style.css` and add these lines: ```css .psc-remove-agitator .vessel_cylindricalTank_agitator_rotor { display: none; } .psc-remove-agitator .vessel_cylindricalTank_agitator { display: none; } ``` 1. Save the file. This might require administrative privileges. 2. Go back into `/themes`, the root directory for Perspective themes and styles. Open up `light.css` (if you’re using the `light` theme, which is the default option). 3. Add this line **to the end** of the file (as the last line): ```css @import "./custom/style.css"; ``` ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/d/9/d9c3af6067ed0175fdc36bb1287a8c2991fb82d9.png) 1. Save all of the files you made changes to. 2. Merge changes (the little box with the down arrow next to the save button in the Designer). 3. Refresh your browser and you should see the changes: ---
**Author:** ![chase.dorsey](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/chase.dorsey/32/75606_2.png) [@chase.dorsey](https://forum.inductiveautomation.com/u/chase.dorsey)\ **Post date:** [August 27, 2021, 5:44pm UTC](https://forum.inductiveautomation.com/t/perspective-vessel-open-side-with-no-agitator/50383/3 "2021-08-27T17:44:54Z")
That seems easy enough @YF129701 ! My next question is how did you come up with step number 4? I would like to learn more about the nuts and bolts of perspective but I have no clue how to figure out something like step number 4. Can you point me towards some resources about learning CSS and how it interacts with Perspective? ---
**Author:** ![YF129701](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/yf129701/32/60498_2.png) [@YF129701](https://forum.inductiveautomation.com/u/YF129701)\ **Post date:** [August 27, 2021, 6:10pm UTC](https://forum.inductiveautomation.com/t/perspective-vessel-open-side-with-no-agitator/50383/4 "2021-08-27T18:10:08Z")
The good thing is, this is standard CSS, which has **tons** of resources online, both in video form on YouTube and text form on sites like [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS). The most important concept to understand in CSS (imo) is selectors. That is the bulk of what I'm doing. Let's take a look at this example: ```css .psc-remove-agitator .vessel_cylindricalTank_agitator_rotor { display: none; } ``` ## Concepts to understand #### Class Selectors When you see a phrase or a word that has a `.` prepended to it, that indicates it is a class selector. So, in our case, we added the style class `remove-agitator` to the Vessel Perspective component, so that is where `.psc-remove-agitator` comes from (the `.psc-` gets prepended to all style classes by Ignition - if you were to just use `.remove-agitator`, you wouldn't be selecting any elements). Our second class selector is `.vessel_cylindricalTank_agitator_rotor`, which I found by going to the browser dev tools and hovering over the component I want to style and seeing which classes are unique to that element. This might need some trial and error. #### Nesting Selectors Why do `.psc-remove-agitator .vessel_cylindricalTank_agitator_rotor` appear right after each other, separated only by a space? This has a special meaning as well: this means that only those elements that have the second class **that are child elements of an element that has the first class** will be selected. I don't know if that makes sense, it would be much easier to show you. [Here](https://www.youtube.com/watch?v=nTzKGn4QGYo) is an Ignition-specific resource that has some information on CSS that you might find useful. ---
**Author:** ![paul-griffith](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/paul-griffith/32/37249_2.png) [@paul-griffith](https://forum.inductiveautomation.com/u/paul-griffith)\ **Post date:** [August 27, 2021, 7:57pm UTC](https://forum.inductiveautomation.com/t/perspective-vessel-open-side-with-no-agitator/50383/5 "2021-08-27T19:57:43Z")
A _really_ valuable tool for understanding Perspective is browser’s dev tools. Because Perspective elements are true HTML elements, you can also open any Perspective page in the browser and see the full component hierarchy, the style tree, etc. ---
**Author:** ![Neal\_Bunt](https://avatars.discourse-cdn.com/v4/letter/n/8dc957/32.png) [@Neal\_Bunt](https://forum.inductiveautomation.com/u/Neal_Bunt)\ **Post date:** [May 4, 2022, 6:49pm UTC](https://forum.inductiveautomation.com/t/perspective-vessel-open-side-with-no-agitator/50383/6 "2022-05-04T18:49:26Z")
Is there a simple way to move the agitator so that it’s coming up from the bottom of the tank? I have an application where the actual equipment has an agitator that’s mounted on the bottom of the tank, and I’d like to make my screen emulate that more closely.