StarkMenu respectively CinnXPStarkMenu

[NikoKrause]

@petrucci4prez Hey, the StarkMenu together with your theme looks a little bit ugly. I made some changes in StarkMenu to make it look better (see screenshots below):

For this I had to make some changes in your cinnamon.css file. In your theme I made changes, which only effect the StarkMenu. And in the StarkMenu I made changes, which only effect the look of that menu with CinnXP theme.

I explained in my repo, what to change in your theme, to make it work. But I would appreciate, if you could integrate this few lines by default in your theme. (see: https://github.com/NikoKrause/CinnXPStarkMenu)

Maybe you could make it even better? I tried to make the separator look better (i.e. XP like), but still have some problems with it. (see my post here https://github.com/lestcape/Configurable-Menu/issues/86#issuecomment-219512909)

P.S.: I've tried this menu only in Linux Mint 17.3 Cinnamon 2.8. I don't know, if it will work in Cinnamon 3.0, for I'm waiting for Linux Mint 18 to be released.

[ndwarshuis]

can't load the applet. mint 17.3, cinn2.8 fully updated

[NikoKrause]

The terminal commands to install are:

1. Download ZIP File wget -O CinnXPStarkMenu@NikoKrause.zip "https://github.com/NikoKrause/CinnXPStarkMenu/archive/master.zip"
2. Unzip this file unzip CinnXPStarkMenu@NikoKrause.zip
3. Rename folder: mv CinnXPStarkMenu-master/ CinnXPStarkMenu@NikoKrause
4. Move folder to "~/.local/share/cinnamon/applets/" mv CinnXPStarkMenu@NikoKrause ~/.local/share/cinnamon/applets/
5. Now it should be available in the "Add applets to panel"

I tried this on a Linux Mint 17.3 Live USB. If this still doesn't work, let me know.

[ndwarshuis]

looks good to me for most part, a few padding things that I couldn't override because hardcoded

[NikoKrause]

Thanks for integrating this in your theme. Which padding things are you talking about? You have a better eye for such things than I. Is it something, I could change in the menus code?

I just try to ./compile-theme -m. But it's broken now. It shows me the cinnamon theme.

[ndwarshuis]

my bad on the compile-theme, hopefully will be fixed within the next day. for now just go into the cinnamon directory and run ./parse-css.sh (install necessary ruby packages as prompted) to make the cinnamon.css file.

as for the padding, just a few things that don't seem to be aligned/sized correctly. On the favorites pane, the entry box is really wide compared to everything else, and the favorites buttons are really big compared to all the other buttons. Also, the min-height for the favorites box needs to be increased to account for the padding in the box on the right (I currently have a dirty hack to fix this which involves forcing the right side to be taller by fixing the height of the StBin in the favorites box, which seems to shift the favorites buttons down in a weird way).

On the applications pane, the padding for the applications box (the one on the right) doesn't seem to have an easy way to pad the buttons on the inside (the left box has a menu-categories-box on the inside of the scrollview for this). The default menu accomplishes this using a menu-applications-inner-box class for the content inside the applications scrollview.

Obviously these are subjective things; it's your menu so you control the look however you want. Point is that the style appears to be hardcoded/limited in the applet code, and can't be overridden by the css theme file

[NikoKrause]

Hey,

I don't know if I got everything right what you said. So tell me if I got something wrong. To your points:

On the favorites pane, the entry box is really wide compared to everything else

The search-entry-box is set to be the same width as the Button with the label "All Programms". In cinnamon.css there is an option .popup-menu StEntry which is set to padding: 4px 12px;. If I change the 12px to 6px, the search-entry and the button do have the same width. But I don't know what else it messes up. I think you know better, what it does?

the favorites buttons are really big compared to all the other buttons There is an option in the settings of the menu to set the size of the favorites button. Does this solves this problem? Or do you mean something else?

the min-height for the favorites box needs to be increased to account for the padding in the box on the right (I currently have a dirty hack to fix this which involves forcing the right side to be taller by fixing the height of the StBin in the favorites box, which seems to shift the favorites buttons down in a weird way).

I've tried it out. Yes it is indeed weird. I now set the min-height for the favsBox to 421 pixel.

On the applications pane, the padding for the applications box (the one on the right) doesn't seem to have an easy way to pad the buttons on the inside (the left box has a menu-categories-box on the inside of the scrollview for this). The default menu accomplishes this using a menu-applications-inner-box class for the content inside the applications scrollview.

I added the menu-applications-inner-box. It should work now.

P.S.: I also fixed some major problem, I had with the padding of the favoritesBox, i.e. the menu shouldn't jump any more, when switching between AllProgramms and Favorites. Even with other themes. In this process I deleted some stuff in cinnamon.css and added some new stuff. I updated the changes I made in the README of my Repo.

I really appreciate your help.

[NikoKrause]

@petrucci4prez Sorry to bother you again. I compiled your theme with ./compile-theme -m on Linux Mint 17.3 Cinnamon.

I get the following lines in cinnamon.css. They seem a little bit messed up to me.

/* ===================================================================
 * CinnXPStarkMenu 
 * ===================================================================*/
.starkmenu-background {
  padding: 54px 1px 29px 1px; }
  .starkmenu-background .menu-favorites-box {
    color: #373738;
    background-color: transparent;
    border: 0 solid #000; }
    .starkmenu-background .menu-favorites-box StBin {
      min-height: 421px; }
    .starkmenu-background .menu-favorites-box .popup-separator-menu-item {
      background: #cac6af; }
    .starkmenu-background .menu-favorites-box > CinnamonGenericContainer {
      padding: 0 6px; }
  .starkmenu-background .right-buttons-box {
    color: #0a246a;
    background-color: #d3e5fa;
    padding: 8px;
    border: 0 solid #95bdee;
    border-left-width: 1px; }
    .starkmenu-background .right-buttons-box .hover-label {
      color: #0a246a; }
    .starkmenu-background .right-buttons-box .hover-user-icon {
      border-color: #ccccbe; }
    .starkmenu-background .right-buttons-box .popup-separator-menu-item {
      height: 1px;
      border: 4px solid #d3e5fa;
      border-right-width: 0;
      border-left-width: 0;
      background-clip: content-box;
      background-color: #95bdee; }
  .starkmenu-background .menu-selected-app-box {
    color: #373738;
    padding: 3px 3px 7px 3px; }
  .starkmenu-background .menu-applications-box {
    padding: 0; }
    .starkmenu-background .menu-applications-box .menu-categories-box {
      padding: 0; }
      .starkmenu-background .menu-applications-box .menu-categories-box .menu-category-button {
        color: #0a246a; }
    .starkmenu-background .menu-applications-box StScrollView {
      background-color: #d3e5fa;
      border-width: 1px; }
      .starkmenu-background .menu-applications-box StScrollView:last-child {
        border-left-width: 0; }

I expected something like this

/* ===================================================================
 * CinnXPStarkMenu 
 * ===================================================================*/
.right-buttons-box {
    background-color: #D3E5FA;
    padding: 8px;
}
.starkmenu-background {
    padding: 54px 1px 29px 1px;
}
.starkmenu-selected-app-box {
    color: black; 
}
.starkmenu-favorites-box {  
        background-color: white;
    border: 0px solid white;
}
.starkmenu-applications-box {
    padding: 0px 0px 0px 0px;
}
.starkmenu-applications-inner-box {
    background-color: white;
}
.starkmenu-applications-box StScrollView {
    border-right-width: 1px;
    border-bottom-width: 1px;
    background-color: #ece9d8;
    color: black;
}
.starkmenu-search-box {
    padding-bottom: 0px;
}

I also have a request, if it is not too much asked, again :/ Could you use borderimages to make the border at the user-icon more like in XP? The style class for this is called: hover-user-icon

Elbullazul did this for his Vista theme here: https://github.com/NikoKrause/CinnXPStarkMenu/issues/6 And it looks amazing.