[SOLVED] Black start panel and start menu

[IDG]

And are you using it on Cinnamon or another desktop?

I'm using Linux Mint 19 Cinnamon.

[smurphos]

Ok I will take a look tomorrow.

[IDG]

Ok I will take a look tomorrow.

Thank you. I appreciate it.

[smurphos]

Ok this is the section of cinnamon.css you need to edit - line 624 onwards. The first style-class .calendar will control the overall dimensions. Try doubling the values of the padding, spacing-rows and spacing-columns entries initially. Save and hit Ctrl-Alt-Esc to restart cinnamon and force the theme to reload. Tweak, repeat until you get a size you like. You may also want to try tweaking the values in the subsequent style-classes, particularly the font sizes and padding to fit your expanded calendar. Changing the sizes of the image assets may well make them look a bit blurry

I'd suggest regularly saving as you edit and restarting cinnamon to see the effect of your change.

Original

Code: Select all

.calendar {
    padding: 6px 18px 8px 18px;
    spacing-rows: 5px;
    spacing-columns: 5px;
    background-color: #1f1f1f;
}

.datemenu-date-label {
    padding: .5em 0 .5em 0;
    font-size: 10pt;
    font-weight: normal;
    text-align: center;
    color: #fff;
    background-color: #1f1f1f;
}

.calendar-month-label {
    padding-top: 2px;
    font-size: 8pt;
    font-weight: normal;
    color: #888;
}

.calendar-change-month-back,
.calendar-change-month-forward:rtl {
    background-image: url("control-assets/calendar-arrow-left.svg");
    background-size: 16px;
    height: 16px;
    width: 16px;
}

.calendar-change-month-back:hover {
    background-image: url("control-assets/calendar-arrow-left-hover.svg");
    background-size: 16px;
    height: 16px;
    width: 16px;
}

.calendar-change-month-forward,
.calendar-change-month-back:rtl {
    background-image: url("control-assets/calendar-arrow-right.svg");
    background-size: 16px;
    height: 16px;
    width: 16px;
}

.calendar-change-month-forward:hover {
    background-image: url("control-assets/calendar-arrow-right-hover.svg");
    background-size: 16px;
    height: 16px;
    width: 16px;
}

.calendar-day-base {
    font-size: 9pt;
    text-align: center;
    width: 26px;
    height: 26px;
}

.calendar-day-base:active {
}

.calendar-day-heading {
    font-size: 9pt;
    color: #fff;
    padding-top: 12px;
    padding-bottom: 6px;
    height: 15px;
}

.calendar-week-number {
    color: rgba(255, 255, 255, .3);
    font-size: 8pt;
    height: 16px;
    width: 12px;
    padding-top: 7px;
    padding-right: 6px;
}

If you want a head start here is that section with some suggested edits applied - see if it works well for you.

Code: Select all

.calendar {
    padding: 12px 36px 16px 36px;
    spacing-rows: 10px;
    spacing-columns: 10px;
    background-color: #1f1f1f;
}

.datemenu-date-label {
    padding: .5em 0 .5em 0;
    font-size: 16pt;
    font-weight: normal;
    text-align: center;
    color: #fff;
    background-color: #1f1f1f;
}

.calendar-month-label {
    padding-top: 8px;
    font-size: 12pt;
    font-weight: normal;
    color: #888;
}

.calendar-change-month-back,
.calendar-change-month-forward:rtl {
    background-image: url("control-assets/calendar-arrow-left.svg");
    background-size: 32px;
    height: 32px;
    width: 32px;
}

.calendar-change-month-back:hover {
    background-image: url("control-assets/calendar-arrow-left-hover.svg");
    background-size: 32px;
    height: 32px;
    width: 32px;
}

.calendar-change-month-forward,
.calendar-change-month-back:rtl {
    background-image: url("control-assets/calendar-arrow-right.svg");
    background-size: 32px;
    height: 32px;
    width: 32px;
}

.calendar-change-month-forward:hover {
    background-image: url("control-assets/calendar-arrow-right-hover.svg");
    background-size: 32px;
    height: 32px;
    width: 32px;
}

.calendar-day-base {
    font-size: 12pt;
    text-align: center;
    width: 32px;
    height: 32px;
}

.calendar-day-base:active {
}

.calendar-day-heading {
    font-size: 10pt;
    color: #fff;
    padding-top: 12px;
    padding-bottom: 6px;
    height: 15px;
}

.calendar-week-number {
    color: rgba(255, 255, 255, .3);
    font-size: 6pt;
    height: 16px;
    width: 12px;
    padding-top: 7px;
    padding-right: 6px;
}

[IDG]

Ok this is the section of cinnamon.css you need to edit - line 624 onwards. The first style-class .calendar will control the overall dimensions. Try doubling the values of the padding, spacing-rows and spacing-columns entries initially. Save and hit Ctrl-Alt-Esc to restart cinnamon and force the theme to reload. Tweak, repeat until you get a size you like. You may also want to try tweaking the values in the subsequent style-classes, particularly the font sizes and padding to fit your expanded calendar. Changing the sizes of the image assets may well make them look a bit blurry

I'd suggest regularly saving as you edit and restarting cinnamon to see the effect of your change.

Original

Code: Select all

.calendar {
    padding: 6px 18px 8px 18px;
    spacing-rows: 5px;
    spacing-columns: 5px;
    background-color: #1f1f1f;
}

.datemenu-date-label {
    padding: .5em 0 .5em 0;
    font-size: 10pt;
    font-weight: normal;
    text-align: center;
    color: #fff;
    background-color: #1f1f1f;
}

.calendar-month-label {
    padding-top: 2px;
    font-size: 8pt;
    font-weight: normal;
    color: #888;
}

.calendar-change-month-back,
.calendar-change-month-forward:rtl {
    background-image: url("control-assets/calendar-arrow-left.svg");
    background-size: 16px;
    height: 16px;
    width: 16px;
}

.calendar-change-month-back:hover {
    background-image: url("control-assets/calendar-arrow-left-hover.svg");
    background-size: 16px;
    height: 16px;
    width: 16px;
}

.calendar-change-month-forward,
.calendar-change-month-back:rtl {
    background-image: url("control-assets/calendar-arrow-right.svg");
    background-size: 16px;
    height: 16px;
    width: 16px;
}

.calendar-change-month-forward:hover {
    background-image: url("control-assets/calendar-arrow-right-hover.svg");
    background-size: 16px;
    height: 16px;
    width: 16px;
}

.calendar-day-base {
    font-size: 9pt;
    text-align: center;
    width: 26px;
    height: 26px;
}

.calendar-day-base:active {
}

.calendar-day-heading {
    font-size: 9pt;
    color: #fff;
    padding-top: 12px;
    padding-bottom: 6px;
    height: 15px;
}

.calendar-week-number {
    color: rgba(255, 255, 255, .3);
    font-size: 8pt;
    height: 16px;
    width: 12px;
    padding-top: 7px;
    padding-right: 6px;
}

If you want a head start here is that section with some suggested edits applied - see if it works well for you.

Code: Select all

.calendar {
    padding: 12px 36px 16px 36px;
    spacing-rows: 10px;
    spacing-columns: 10px;
    background-color: #1f1f1f;
}

.datemenu-date-label {
    padding: .5em 0 .5em 0;
    font-size: 16pt;
    font-weight: normal;
    text-align: center;
    color: #fff;
    background-color: #1f1f1f;
}

.calendar-month-label {
    padding-top: 8px;
    font-size: 12pt;
    font-weight: normal;
    color: #888;
}

.calendar-change-month-back,
.calendar-change-month-forward:rtl {
    background-image: url("control-assets/calendar-arrow-left.svg");
    background-size: 32px;
    height: 32px;
    width: 32px;
}

.calendar-change-month-back:hover {
    background-image: url("control-assets/calendar-arrow-left-hover.svg");
    background-size: 32px;
    height: 32px;
    width: 32px;
}

.calendar-change-month-forward,
.calendar-change-month-back:rtl {
    background-image: url("control-assets/calendar-arrow-right.svg");
    background-size: 32px;
    height: 32px;
    width: 32px;
}

.calendar-change-month-forward:hover {
    background-image: url("control-assets/calendar-arrow-right-hover.svg");
    background-size: 32px;
    height: 32px;
    width: 32px;
}

.calendar-day-base {
    font-size: 12pt;
    text-align: center;
    width: 32px;
    height: 32px;
}

.calendar-day-base:active {
}

.calendar-day-heading {
    font-size: 10pt;
    color: #fff;
    padding-top: 12px;
    padding-bottom: 6px;
    height: 15px;
}

.calendar-week-number {
    color: rgba(255, 255, 255, .3);
    font-size: 6pt;
    height: 16px;
    width: 12px;
    padding-top: 7px;
    padding-right: 6px;
}

Thanks a lot. It worked