0 votes
by (260 points)

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!!

2 Answers

0 votes
by (44.7k points)
selected by
 
Best answer

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!  :-)

by (159k points)

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;
}

 

by (260 points)
Wow, thank you so much!! this worked perfectly~
0 votes
by (260 points)

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!

...