Hello,

All I want is the same background image on:

1. Login
2. Splash screen
3. Desktop
4. Lock-screen
and
5. Leave (logout / shutdown / restart).

I have fixed 1-4 (unexpectedly difficult!) but I can't get 5. I've scoured all the web forums and Q&A sites but can't find anything about the leave background other than two unanswered questions (here: https://askubuntu.com/questions/837105/kubuntu-shutdown-restart-closing-wallpaper-vanishing and here: https://askubuntu.com/questions/943127/splash-screen-missing-background-image-on-restart-shutdown).

When I click the K-gear button in the bottom left and select Leave followed by logout, restart or shutdown, the desktop background wallpaper disappears and is replaced by a plain blank white screen with the timeout bar overlaid. I don't want this white screen. I want the same desktop background image that I have usually.

Can someone tell me how I can set the image that is used as the background during logout / restart / shutdown please?

Many thanks.

FYI - For anyone who is having trouble with the first three items, here's how I fixed them:

Login:

- Install package 'kde-config-sddm' to get the settings page System Settings > Startup and Shutdown > Login Screen (SDDM)
- Install package 'sddm-theme-breeze' to get a theme
- (Optionally) Install your theme of choice from the internet, e.g. here: https://store.kde.org/browse/cat/101/
- Go to System Settings > Startup and Shutdown > Login Screen (SDDM)
- Select the theme you want
- Set the background image to the picture you want

Splash-screen:

- This is my own hack way. For a safer way, see here: https://forum.manjaro.org/t/kde-change-splash-screen-background-of-existing-theme/7102 and here: https://www.kubuntuforums.net/showthread.php/67599-Plasma-5-background-images?p=370231&viewfull=1#post370231. However, my way works for me and was a lot quicker / easier.
- Assuming you're using the breeze (or breeze dark) look and feel, run these commands...
- First, make a backup in case there is a problem:

Code: Select all

sudo mv /usr/share/plasma/look-and-feel/org.kde.breeze.desktop/contents/components/artwork/background.png /usr/share/plasma/look-and-feel/org.kde.breeze.desktop/contents/components/artwork/background.png.bak

- Then, replace the image with the one you want:

Code: Select all

sudo cp /path/to/image.png /usr/share/plasma/look-and-feel/org.kde.breeze.desktop/contents/components/artwork/background.png

Desktop background:

- This one is easy!
- Right-click on the desktop > Desktop Settings > Wallpaper > Get New Wallpapers...
- Take your pick!

Lock-screen:

- Install 'kde-config-screenlocker' to get the settings page System Settings > Desktop Behaviour > Screen Locking
- Go to the above and select custom background

Steve Biggs wrote:Hello,

All I want is the same background image on:

1. Login
2. Splash screen
3. Desktop
4. Lock-screen
and
5. Leave (logout / shutdown / restart).

I have fixed 1-4 (unexpectedly difficult!) but I can't get 5. I've scoured all the web forums and Q&A sites but can't find anything about the leave background other than two unanswered questions (here: https://askubuntu.com/questions/837105/kubuntu-shutdown-restart-closing-wallpaper-vanishing and here: https://askubuntu.com/questions/943127/splash-screen-missing-background-image-on-restart-shutdown).

When I click the K-gear button in the bottom left and select Leave followed by logout, restart or shutdown, the desktop background wallpaper disappears and is replaced by a plain blank white screen with the timeout bar overlaid. I don't want this white screen. I want the same desktop background image that I have usually.

Can someone tell me how I can set the image that is used as the background during logout / restart / shutdown please?

Plasma 5.13 & 5.14

The log out screen is part of the plasma look and feel theme. Look and feel themes are using qml: https://en.wikipedia.org/wiki/QML

Plasma 5.13 & 5.14 logout screen can edited from the LnF theme ../contents/logout/Logout.qml.

As default, the plasma 5.13 & 5.14 & Breeze LnF, are using darkened rectangle to hide the desktop :

Code: Select all

 Rectangle {
        id: backgroundRect
        anchors.fill: parent
        //use "black" because this is intended to look like a general darkening of the scene. a dark gray as normal background would just look too "washed out"
        color: root.isLightColor(PlasmaCore.ColorScope.backgroundColor) ? PlasmaCore.ColorScope.backgroundColor : "black"
        opacity: 0.5
    }

The rectangle can be replaced with a solid image: http://doc.qt.io/qt-5/qml-qtquick-image.html


An example

Making a new LnF theme by using the Breeze as a template.Plasma sdk has a tool - Plasma Look and Feel explorer:




Editing the $HOME/.local/share/plasma/look-and-feel/Breeze LogOut/contents/logout/Logout.qml

Disabling:

Code: Select all

//property alias backgroundColor: backgroundRect.color

and

Code: Select all

    /*Rectangle {
        id: backgroundRect
        anchors.fill: parent
        //use "black" because this is intended to look like a general darkening of the scene. a dark gray as normal background would just look too "washed out"
        color: root.isLightColor(PlasmaCore.ColorScope.backgroundColor) ? PlasmaCore.ColorScope.backgroundColor : "black"
        opacity: 0.5
    }*/

Adding:

Code: Select all

    Image {
        id: backgroundImage
        height: parent.height
        width: parent.width
        fillMode: Image.PreserveAspectCrop
        source: "../components/artwork/BackgroundImage.jpg"
    }

and adding a picture - $HOME/.local/share/plasma/look-and-feel/Breeze LogOut/contents/components/artwork/BackgroundImage.jpg




Picking the new LnF theme:



... and the log out screen is:


Full image: https://imgur.com/s2KezsK

Hi Rog131,

Thank you for your quick and detailed answer. I have learned something already!

Unfortunately, the fix didn't quite work. My default Logout.qml script was different:

Code: Select all

import QtQuick 2.1
import "../components"

Item {
    id: root
    height: units.largeSpacing*14
    width: screenGeometry.width

    signal logoutRequested()
    signal haltRequested()
    signal suspendRequested(int spdMethod)
    signal rebootRequested()
    signal rebootRequested2(int opt)
    signal cancelRequested()
    signal lockScreenRequested()

    LogoutScreen {
        anchors.fill: parent

        mode: switch (sdtype) {
            case ShutdownType.ShutdownTypeNone:
                return "logout";
            case ShutdownType.ShutdownTypeHalt:
                return maysd ? "shutdown" : "logout";
            case ShutdownType.ShutdownTypeReboot:
                return maysd ? "reboot" : "logout";
            default:
                return "logout";
        }

        onShutdownRequested: {
            root.haltRequested()
        }

        onRebootRequested: {
            root.rebootRequested()
        }
        canShutdown: maysd && choose
        canReboot: maysd && choose
        canLogout: true

        onCancel: root.cancelRequested()
    }
}

By default I get a white background (not dark) with a dark bar overlaid.

I tried inserting the 'Image { ... }' block you suggested in between the 'signal' declarations and the 'LogoutScreen' block. However, this makes my background image appear in the dark bar but the background is still white. I want the background image behind the dark bar, not in it.

So then I tried changing 'height: units.largeSpacing*14' to 'height: screenGeometry.height'. The dark bar containing the background image then fills the screen but the logout icon is HUGE and nearly fills the screen too. But even if I could get the icon to be smaller this is still not quite right as the white background still exists behind the full-screen dark bar as can be seen for the moment before the dark bar appears and for a few seconds after I confirm / cancel the logout. Really, the dark bar was fine as it was; it's the white background that needs to be replaced.

Digging around I also found ../components/LogoutOptions.qml and ../components/LogoutScreen.qml which are shown below. I'm sure there's some setting(s) within those that need changing but I'm new to QML and this one's a bit beyond me at the moment. Any ideas?

Many thanks for your help so far. Hopefully you can help me work this one out.

../components/LogoutOptions.qml:

Code: Select all

import QtQuick 2.1
import QtQuick.Layouts 1.1

import org.kde.plasma.core 2.0 as PlasmaCore
import org.kde.plasma.components 2.0 as PlasmaComponents


PlasmaComponents.ButtonRow {
    id: root
    spacing: 0

    property bool canReboot
    property bool canShutdown
    property bool canLogout
    property string mode
    onModeChanged: {
        switch (mode) {
        case "reboot":
            restartButton.checked = true;
            break;
        case "shutdown":
            shutdownButton.checked = true;
            break;
        case "logout":
            logoutButton.checked = true;
            break;
        default:
            restartButton.checked = false;
            shutdownButton.checked = false;
            logoutButton.checked = false;
            break;
        }

    //Don't show the buttons if there's nothing to click
    visible: !exclusive || (canReboot+canShutdown+canLogout)>1

    PlasmaComponents.ToolButton {
        id: restartButton
        flat: false
        iconSource: "system-reboot"
        visible: root.canReboot
        checkable: true
        Accessible.name: i18ndc("plasma_lookandfeel_org.kde.lookandfeel", "Button to restart the computer", "Reboot")
        activeFocusOnTab: true

        onClicked: {
            root.mode = "reboot"
        }
    }

    PlasmaComponents.ToolButton {
        id: shutdownButton
        flat: false
        iconSource: "system-shutdown"
        visible: root.canShutdown
        checkable: true
        Accessible.name: i18ndc("plasma_lookandfeel_org.kde.lookandfeel", "Button to shut down the computer", "Shutdown")
        activeFocusOnTab: true

        onClicked: {
            root.mode = "shutdown"
        }

    }

    PlasmaComponents.ToolButton {
        id: shutdownButton
        flat: false
        iconSource: "system-shutdown"
        visible: root.canShutdown
        checkable: true
        Accessible.name: i18ndc("plasma_lookandfeel_org.kde.lookandfeel", "Button to shut down the computer", "Shutdown")
        activeFocusOnTab: true

        onClicked: {
            root.mode = "shutdown"
        }

    }

    PlasmaComponents.ToolButton {
        id: logoutButton
        flat: false
        iconSource: "system-log-out"
        visible: root.canLogout
        checkable: true
        Accessible.name: i18ndc("plasma_lookandfeel_org.kde.lookandfeel", "Button to log out of the desktop session", "Log ou
        activeFocusOnTab: true

        onClicked: {
            root.mode = "logout"
        }

    }
}


and ../components/LogoutScreen.qml:

Code: Select all

import QtQuick 2.1
import QtQuick.Layouts 1.1
import QtQuick.Controls 1.1 as Controls

import org.kde.plasma.core 2.0 as PlasmaCore
import org.kde.plasma.components 2.0 as PlasmaComponents
import org.kde.plasma.extras 2.0 as PlasmaExtras

BreezeBlock {
    id: root
    property string mode: "shutdown"
    property var currentAction
    property real timeout: 30
    property real remainingTime: root.timeout
    property bool canReboot
    property bool canLogout
    property bool canShutdown
    onModeChanged: remainingTime = root.timeout

    signal cancel()
    signal shutdownRequested()
    signal rebootRequested()

    Controls.Action {
        onTriggered: root.cancel()
        shortcut: "Escape"
    }

    onRemainingTimeChanged: {
        if(remainingTime<0)
            root.currentAction()
    }
    Timer {
        running: true
        repeat: true
        interval: 1000
        onTriggered: remainingTime--
    }

    main: ColumnLayout {
        spacing: 0
        BreezeHeading {
            id: actionLabel
            Layout.alignment: Qt.AlignHCenter
        }

        Item { height: units.largeSpacing }

        PlasmaCore.IconItem {
             id: actionIcon
            Layout.alignment: Qt.AlignHCenter
            Layout.fillHeight: true
            Layout.minimumWidth: height
            Layout.maximumWidth: height
            colorGroup: PlasmaCore.ColorScope.colorGroup
            opacity: actionIconMouse.containsMouse ? 1 : 0.7
            MouseArea {
                id: actionIconMouse
                hoverEnabled: true
                anchors.fill: parent
                onClicked: root.currentAction();
            }
        }

        PlasmaComponents.ProgressBar {
            id: progressBar
            Layout.alignment: Qt.AlignHCenter
            anchors.horizontalCenter: parent.horizontalCenter

            //wanted to use actionIcon.paintedWidth but it doesn't work well when the image changes
            width: units.largeSpacing*7
            minimumValue: 0
            maximumValue: root.timeout
            value: root.remainingTime
        }

        BreezeLabel {
            anchors.horizontalCenter: progressBar.horizontalCenter
            text: i18ndp("plasma_lookandfeel_org.kde.lookandfeel", "in 1 second", "in %1 seconds", root.remainingTime);
        }

        state: mode
        states: [
            State {
                name: "shutdown"
                PropertyChanges { target: root; currentAction: shutdownRequested }
                PropertyChanges { target: actionLabel; text: i18nd("plasma_lookandfeel_org.kde.lookandfeel","Shutting down")
                PropertyChanges { target: actionIcon; source: "system-shutdown" }
            },
            State {
                name: "logout"
                PropertyChanges { target: root; currentAction: logoutRequested }
                PropertyChanges { target: actionLabel; text: i18nd("plasma_lookandfeel_org.kde.lookandfeel","Logging out") }
                PropertyChanges { target: actionIcon; source: "system-log-out" }
            },
            State {
                name: "reboot"
                PropertyChanges { target: root; currentAction: rebootRequested }
                PropertyChanges { target: actionLabel; text: i18nd("plasma_lookandfeel_org.kde.lookandfeel","Rebooting") }
                PropertyChanges { target: actionIcon; source: "system-reboot" }
            }
        ]
    }

    controls: Item {
        Layout.fillWidth: true
        height: buttons.height

        RowLayout {
            id: buttons
            anchors.centerIn: parent

            PlasmaComponents.Button {
                id: cancelButton
                text: i18nd("plasma_lookandfeel_org.kde.lookandfeel","Cancel")
                onClicked: root.cancel()
                Layout.preferredWidth: Math.max(commitButton.implicitWidth, cancelButton.implicitWidth)
            }

            PlasmaComponents.Button {
                id: commitButton
                Layout.preferredWidth: Math.max(commitButton.implicitWidth, cancelButton.implicitWidth)
                onClicked: root.currentAction()
                focus: true

                function trigger() {
                    if (commitButton.activeFocus) {
                        root.currentAction()
                    }
                }

                Controls.Action {
                    onTriggered: commitButton.trigger()
                    shortcut: "Return"
                }
                Controls.Action {
                    onTriggered: commitButton.trigger()
                    shortcut: "Enter" // on numpad
                }
            }
        }

        LogoutOptions {
            id: logoutOptions
            anchors.right: parent.right
            anchors.rightMargin: 5
            canReboot: root.canReboot
            canLogout: root.canLogout
            canShutdown: root.canShutdown
            onModeChanged: root.mode = mode

            exclusive: true
            Component.onCompleted: mode = root.mode;
        }

        state: mode
        states: [
            State {
                name: "shutdown"
                PropertyChanges { target: commitButton; text: i18nd("plasma_lookandfeel_org.kde.lookandfeel","Shut down") }
            },
            State {
                name: "logout"
                PropertyChanges { target: commitButton; text: i18nd("plasma_lookandfeel_org.kde.lookandfeel","Log out") }
            },
            State {
                name: "reboot"
                PropertyChanges { target: commitButton; text: i18nd("plasma_lookandfeel_org.kde.lookandfeel","Reboot") }
            }
        ]
    }
}


Steve Biggs wrote:Hi Rog131,

Thank you for your quick and detailed answer. I have learned something already!

Unfortunately, the fix didn't quite work. My default Logout.qml script was different:...

Hi !

My example is for the Plasma 5.13 & 5.14 & Breeze LnF.

You could see the plasma version from the KInfoCenter: https://www.kde.org/applications/system/kinfocenter/

Looking what plasma versions Ubuntu has: https://packages.ubuntu.com/search?keyw ... ection=all

Are you using Xenial with the Plasma 5.5 ?


With the Plasma 5.5 the Breeze LnF theme was using ./contents/components/BreezeBlock.qml

Code: Select all

PlasmaCore.ColorScope {
    colorGroup: PlasmaCore.Theme.ComplementaryColorGroup
    property alias main: mainView.sourceComponent
    property alias controls: controlsView.sourceComponent
    readonly property alias mainItem: mainView.item
    readonly property alias controlsItem: controlsView.item

    property bool canShutdown: false
    property bool canReboot: false

    Rectangle {
        color: PlasmaCore.ColorScope.backgroundColor
        opacity: 0.8
        anchors {
            fill: parent
        }
    }


If you add the Image section after the Rectangle:



You will get the Logout screen with background image:


Full image: https://imgur.com/ZYPzeeH

The background image is in "../components/artwork/background.png"



Notes !

This is with the Plasma 5.14 and Breeze 5.5 look and feel theme.



The BreezeBlock.qml is a common for the lock screen. If you are using different image in the lock screen it will show:


Full image: https://imgur.com/Qy5ZQNJ

A workaround is to pick the same image from the lock screen settings:

Full image: https://imgur.com/u0F7FeS

Hi,

I managed to get as far as the image you posted with the giant logout icon. However, this isn't quite right because the image is IN the BreezeBlock but I want it to be BEHIND the BreezeBlock, as is the case for the other background image in your lock-screen image.

I'm running Trisquel 8.0, KDE Plasma 5.5.5 and Breeze Dark 5.16.

So I guess my question is, how do I put an imaged behind the BreezeBlock that is used in the LogoutScreen such that the BreezeBlock is in its default state but there is an image behind it just like it is on the lock-screen?

Many thanks

FYI - This has magically fixed itself now! i.e. it wasn't working how I wanted it to work and then at some random point later having not changed anything it suddenly started working in an acceptable way - namely, the BreezeBlock that is the LogoutScreen is rendered over the desktop, e.g. over the desktop background or over the browser window, or whatever. Don't know how this happened. Don't understand it. But it works so I'm not going to touch it. Thanks again for your help