2

This is my first post here.

I run Ubuntu 18.04 and I recently installed the MacBuntu theme packages that are available.

Looks great, the only thing is -- I would like to know if anyone knows how to remove the shadow effect on text and icons that you get on the top bar when using the MacBuntu-O shell theme?

Does anyone perhaps know the relevant section of code to edit in the relevant gnome-shell.css file?

PS -- it creates the shadow effect no matter the font used.

Edit: as requested, what I think is the relevant part(s) of the code in the gnome-shell.css file:

/* Text Styles */

/* default text style */
stage {
    font-family: sfns display, product sans, helvetica, open sans, source sans pro, segoe ui, ubuntu, nokia pure text, lucida grande, cantarell, sans-serif;
    font-size: 11pt;
    color: #333;}

/* links */
.shell-link {
    color: #0000ff;
    text-decoration: underline;}

.shell-link:hover {
    color: #0000e0;}

/*medium 12 pt*/
.nm-dialog-item,
.calendar-month-label,
.calendar-day,
.datemenu-today-button,
.message-list-section-title,
.message-content,
.notification-banner .message-title,
.notification-banner .message-content,
.app-well-menu, {
font-size:100%}

/*large 18pt*/
.headline,
.no-frequent-applications-label,
.show-processes-dialog-subject,
.mount-question-dialog-subject,
.end-session-dialog-subject,
.prompt-dialog-headline,
.login-dialog-title,
.nm-dialog-header,
.no-network-label {
font-size: 120%;}

/* small */
.run-dialog-error-label,
.end-session-dialog-app-list-item-description,
.show-processes-dialog-app-list,
.show-processes-dialog-app-list-item-name,
.prompt-dialog-error-label,
.prompt-dialog-info-label,
.prompt-dialog-null-label {
    font-size: 90%;}

/* small bold*/ 
.dash-label,
.window-caption,
.switcher-list, 
.app-well-app .overview-icon,
.show-apps .overview-icon,
.grid-search-result .overview-icon,
.login-dialog-banner,
.summary-source-counter {
    font-size: 90%;
    font-weight: bold;}


/* Panel */

#panel {
    background-gradient-direction:none;
    background-color: rgba(255,255,255,0.75);
/*    background-color: rgba(46,51,56,0.9);
    border:1px solid rgba(200,200,200,.5);*/
    box-shadow: 0px 1px 3px 1px rgba(0,0,0,0.5);
    border: 0px solid rgba(90,105,111,0.5);
 /*    box-shadow: 0px 0px 0px 1px rgba(0,0,0,0.15);*/
    border-top:0px;border-right:0px;border-left:0px;
    font-weight: bold;
    height: 26px;}
#panel:overview {
    background-color: transparent;
    border-color: transparent;
    box-shadow: inset 0px rgba(0,0,0,0)}
#panel:overview .panel-button {
      color: rgba(255,255,255,.5);
      border-radius: 0px 0px 4px 4px}
#panel:overview .panel-button:hover,
#panel:overview .panel-button:active {color:white}
#panel:overview #panelActivities:active,
#panel:overview #panelActivities:overview {
    color:transparent
}

#panel.unlock-screen,
#panel.login-screen {
    background-color: transparent;}

#panelLeft, #panelCenter {
    spacing: 4px;}

#panelLeft:ltr {
    padding-right: 4px;}

#panelLeft:rtl {
    padding-left: 4px;}

#panelRight:ltr {
    padding-left: 4px;}

#panelRight:rtl {
    padding-right: 4px;}

.panel-corner {
    -panel-corner-radius: 0px;
    -panel-corner-background-color: transparent;
    -panel-corner-border-width: 0px;
    -panel-corner-border-color: transparent;}

.panel-corner:active,
.panel-corner:overview,
.panel-corner:focus {
    -panel-corner-border-color: transparent;}

.panel-corner.lock-screen,
.panel-corner.unlock-screen,
.panel-corner.login-screen {
    -panel-corner-background-color: transparent;
    -panel-corner-border-color: transparent;}

#appMenu {
    spinner-image: url("resource:///org/gnome/shell/theme/process-working.svg");
  padding: 0 8px 0 0px;
  spacing: 4px;
    font-weight: bold}

/* used for the app menu header only */
.label-shadow {
    color: rgba(0,0,0,0.0);}
.panel-button #appMenuIcon {
    app-icon-bottom-clip: 0px;
    height: 0px;
    width: 12px;}
.panel-button:active #appMenuIcon,
.panel-button:checked #appMenuIcon,
.panel-button:focus #appMenuIcon {
    app-icon-bottom-clip: 0px;}
.app-menu-icon {
    width: 0px;
    height: 0px;
    margin: 4;
    -st-icon-style: regular;}
.panel-button {
    -natural-hpadding: 6px;/*jarak item2 panel def 12px*/
    -minimum-hpadding: 4px;
    font-weight: normal;
    color: #333;/*tulisan toolbar scr umum*/
    transition-duration: 200ms;/*nonstatus*/}
.panel-button:hover {
    background-color: #4a90d9;
    color: white;
    text-shadow:white 0px 0px 0px;}
.panel-button:active,
.panel-button:overview,
.panel-button:focus {
/*    border-image: url("panel-button-border.svg") 6 10 0 2;
    background-image: url("panel-button-highlight-wide.svg");*/
    border-image: none;
    background-image: url("./assets/panel-button-highlight-wide.svg");
    background-size:contain;
    color: white;
    text-shadow:white 0px 0px 0px;
    background-color: #0169d9;
    box-shadow: inset 0px 0 0 rgba(0,0,0,0);}
.panel-status-button:active,
.panel-status-button:checked,
.panel-status-button:focus {
    background-image: url("./assets/panel-button-highlight-narrow.svg");
    background-size: contain;}
.panel-button:active > .system-status-icon,
.panel-button:checked > .system-status-icon,
.panel-button:focus > .system-status-icon {
    icon-shadow:white 0px 0px 0px;}

#panel.unlock-screen .panel-button,
#panel.lock-screen .panel-button,
#panel.login-screen .panel-button {
    color: #e6e6e6;}
#panel.unlock-screen .panel-button:hover,
#panel.lock-screen .panel-button:hover,
#panel.login-screen .panel-button:hover,
#panel.unlock-screen .panel-button:active,
#panel.lock-screen .panel-button:active,
#panel.login-screen .panel-button:active,
#panel.unlock-screen .panel-button:focus,
#panel.lock-screen .panel-button:focus,
#panel.login-screen .panel-button:focus {
    color: white;
}

.panel-menu {
    -boxpointer-gap: 1px;}
.panel-status-indicators-box,
.panel-status-menu-box {
    spacing: 2px;}


/* Replaces the activities text with a custom image. Height and width should use the same size as the image file. */
#panelActivities {
    border: none;
    background-image: url("./assets/distributor.svg");
    background-position: center 20 20;
    width: 48px;
    height: 28px;
    color: rgba(0,0,0,0);
font-weight:bold;
transition-duration:300ms;
}

#panelActivities:hover {
    /*background-image:  url("./assets/distributor-logo.svg");
        background-gradient-direction:none;
        background-color:transparent;*/
transition-duration:300ms;
    background-image: url("./assets/distributor-over.svg");
        background-gradient-direction:none;
}
#panelActivities:active,
#panelActivities:overview {
    background-image:  url("./assets/distributor-active.svg");
        background-color:transparent;
        background-gradient-direction:none;
        border-image:none;
}

.system-status-icon {
    icon-size: 1.09em;
    padding: 0 4px;
}

.aggregate-menu {
    width: 300px /*old=320*/;}
.aggregate-menu .popup-menu-icon {
    padding: 0 4px;
}

  • Please edit the question and post a link to the theme you are using so that we can review the code. Thanks! – mchid Jul 4 at 8:22
  • Hi mchid, I was not entirely sure how to link to the whole theme (it was a large package I downloaded), but I have added some of the code in the gnome-shell.css file. I don't know yet which parts are relevant, it's quite a long file (too long to post above), so I'm still in the process of going through it ATM. – Adrian Jul 4 at 9:26
  • I'm quite new to this forum, is there a way I could upload the gnome-shell.css file? – Adrian Jul 4 at 9:34
  • OK guys, I think it's the "Panel" part which is important. – Adrian Jul 4 at 15:06
0

Just a Workaround..

at the lines 696, 775 edit the content like below
text-shadow: none

#panel {
    background-gradient-direction:none;
    background-color: rgba(255,255,255,0.75);
/*    background-color: rgba(46,51,56,0.9);
    border:1px solid rgba(200,200,200,.5);*/
    box-shadow: 0px 1px 3px 1px rgba(0,0,0,0.5);
    border: 0px solid rgba(90,105,111,0.5);
 /*    box-shadow: 0px 0px 0px 1px rgba(0,0,0,0.15);*/
    border-top:0px;border-right:0px;border-left:0px;
    font-weight: bold;
    height: 26px;
    text-shadow: none; } #696

.panel-button {
    -natural-hpadding: 6px;/*jarak item2 panel def 12px*/
    -minimum-hpadding: 4px;
    font-weight: normal;
    color: #333;/*tulisan toolbar scr umum*/
    transition-duration: 200ms;/*nonstatus*/
    text-shadow: none; } #775

#panel.solid .panel-button { text-shadow: none; } #777

at line 777 add the below line
#panel.solid .panel-button { text-shadow: none; }

at the line 859, 2097 edit the content like below
icon-shadow: none;

.system-status-icon {
    icon-size: 1.09em;
    padding: 0 4px;
    icon-shadow: none; #859
}

.popup-menu-arrow {
  width: 16px;
  height: 16px; 
  icon-shadow: none; } #2097

enter image description here

  • Thanks Mogli! Adding the text-shadow piece did remove the shadow from the text. Unfortunately, it did not around the icons (e.g. power, volume, network). I also tried to add a similar line for icon-shadow below text-shadow, but it did not change anything. – Adrian Jul 4 at 16:51
  • Just a question guys, when I open a window or app of some kind, the shadows around the icons also disappear then. Is this related to the panel-button:focus part? Further down that section is a part that says icon-shadow:white 0px 0px 0px. – Adrian Jul 4 at 16:55
  • Thanks Mogli! Much appreciated. – Adrian Jul 4 at 16:59
  • Need to add/clarify -- also noticed the shadow goes away from the icons when a window is in maximized mode. Small windows like terminal for e.g. still make the icons appear with a shadow. – Adrian Jul 4 at 18:50
  • @Adrian Please show your thanks by upvoting this answer by clicking the icon to the left. Also, if you accept this as the answer to your question, please click the check mark icon to the left of the question to mark this as the accepted answer to your question. Thanks! – mchid Jul 5 at 7:04
0

Thanks ever so much @Mogli!

As you guys can see, @Mogli's answer worked a treat:

What I didn't consider was the system-status-icon and popup-menu-arrow parts.

The different font to before is also just because I decided to change that too (right in the beginning of the .css file) -- not a huge fan of the "helvetica-like" look.

I just have to tell you guys though, do exercise some caution when scratching with this stuff, I did mess up a little at one time (don't really know what) and Ubuntu wouldn't start! Had to start in recovery mode to restore the gnome-shell.css file. The incident was preceded by a "Configuration change - need to restart message" (although you do get those frequently and it restarts without a hitch).

Thanks again for all the effort @Mogli!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.