How to remove 1px border on default SugarCube 2 menu buttons?? (hide menu, back/forward, and saves)

Question

Hi there,

Working on my first story for a class project and I was wondering how to remove the default 1px border on the SugarCube 2 menu buttons. The borders are taking away from the minimal aesthetic I'm going for, but I really need to keep the back/forward buttons and save buttons as the content of my story will be getting marked.

For the menu bar, I have this going on in my Stylesheet:
 

#ui-bar {
    background-color: rgba(0,0,0,0.3);
    width: 250px;
    padding: 2em .58em 0 1.5em;
    border: none;
}
#menu li a {
  color: #fff;
  text-decoration: none;
  background:rgba(0,0,0,0.5);
  transition: .6s background;
  border: none;
}
#menu li a:hover {
  background: rgba(0,0,0,0.9);
  color: white;
  text-decoration: bold;
}

Thank you so much in advance!!

Answer 1

The easiest way to figure these things out is to right-click on the element, choose "Inspect", and then look at the HTML and CSS in the inspection window to see what to modify.  You can modify the CSS there to make sure it looks the way you want, and then just copy those changes to your Stylesheet section.
 

Here's what you need to remove the remaining borders:

/* Hide border around UI Bar toggle button */
#ui-bar-toggle {
	border: none;
}

/* Hide borders around Saves and Restart buttons */
#menu li a {
	border: none;
}
#menu ul {
	border: none;
}
#menu li:not(:first-child) {
	border-top: none;
}

Hope that helps!  :-)

Comments

Also the CSS required to removing the border from the conditional "Go backward" and "Go forward" navigator buttons can be simplified to just.

/* Hide border around Backward/Foreward navigator buttons */
#ui-bar-history [id|=history] {
	border: none;
}

 

---

Wow, thank you so much!! this worked perfectly~

Answer 2

So I figured out how to remove the borders for the history buttons:
 

#ui-bar-history [id|="history"] {
  color: #fff;
  text-decoration: none;
  background:rgba(0,0,0,0.5);
  transition: .6s background; 
  border: none;
}

Now I'm just figuring out the save and hide menu tab button (is that what it's called? clearly I'm new to this) - if anyone has any clue!