Hello Everyone. I am relatively new to css and php but I am making my own theme for my owncloud server for home use. I was wondering if it was possible to change the background of the login page when the screen is a certain size. Below is my style.css and defaults.php:
Style.css
/**
* @author Jan-Christoph Borchardt, http://jancborchardt.net
* @copyright Copyright (c) 2018, ownCloud GmbH
* @license AGPL-3.0
*
* This code is free software: you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License, version 3,
* as published by the Free Software Foundation.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details.
*
* You should have received a copy of the GNU Affero General Public License, version 3,
* along with this program. If not, see <http://www.gnu.org/licenses/>
*/
/* header color */
/* this is the main brand color */
#body-user #header,
#body-settings #header,
#body-public #header {
background-color: #515054;
}
/* log in screen background color and image */
/* gradient of the header color and a brighter shade */
/* can also be a flat color or an image */
#body-login {
/* Login background image */
background-image: url("../img/background.jpg") !important;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
/* End of using background image */
background: #515054; /* Old browsers */
background: -moz-linear-gradient(top, #947bea 0%, #745bca 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#947bea), color-stop(100%,#745bca)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #947bea 0%,#745bca 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #947bea 0%,#745bca 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #947bea 0%,#745bca 100%); /* IE10+ */
background: linear-gradient(top, #947bea 0%,#745bca 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#947bea', endColorstr='#745bca',GradientType=0 ); /* IE6-9 */
}
/* primary action button, use sparingly */
/* header color as border, brighter shade again, here as background */
.primary,
input[type="submit"].primary,
input[type="button"].primary,
button.primary,
.button.primary,
.primary:active,
input[type="submit"].primary:active,
input[type="button"].primary:active,
button.primary:active,
.button.primary:active {
border-color: #515054;
background-color: #515054
}
.primary:hover,
input[type="submit"].primary:hover,
input[type="button"].primary:hover,
button.primary:hover,
.button.primary:hover,
.primary:focus,
input[type="submit"].primary:focus,
input[type="button"].primary:focus,
button.primary:focus,
.button.primary:focus {
background-color: #515054;
}
.primary:active, input[type="submit"].primary:active, input[type="button"].primary:active, button.primary:active, .button.primary:active,
.primary:disabled, input[type="submit"].primary:disabled, input[type="button"].primary:disabled, button.primary:disabled, .button.primary:disabled,
.primary:disabled:hover, input[type="submit"].primary:disabled:hover, input[type="button"].primary:disabled:hover, button.primary:disabled:hover, .button.primary:disabled:hover,
.primary:disabled:focus, input[type="submit"].primary:disabled:focus, input[type="button"].primary:disabled:focus, button.primary:disabled:focus, .button.primary:disabled:focus {
background-color: #515054;
}
/* use logos from theme */
#header .logo {
background-image: url('../img/logo.png');
width: 250px;
height: 121px;
}
#header .logo-icon {
background-image: url('../img/logo-icon.png');
height: 34px;
line-height: initial;
}
#owncloud {
padding: 3px;
}
/* show Claim */
#body-user #logo-claim {
display: initial !important;
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
padding-top: 17px;
padding-left: 170px;
height: 45px;
}
#body-user #logo-claim a {
color: #fff;
}
/* hide on small screens */
@media only screen and (max-width: 767px) {
#body-user #logo-claim {
display: none !important;
}
}
@media only screen and (min-width : 320px) and (max-width : 480px) {
#body-login {
background-image: url("../img/background-mobile.jpg") !important;
}
}
@media only screen and (min-width : 480px) {
#body-login {
background-image: url("../img/background.jpg") !important;
}
}
Defaults.php
<?php
/**
* @author Björn Schießle <schiessle@owncloud.com>
* @author Jan-Christoph Borchardt, http://jancborchardt.net
* @copyright Copyright (c) 2018, ownCloud GmbH
* @license AGPL-3.0
*
* This code is free software: you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License, version 3,
* as published by the Free Software Foundation.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details.
*
* You should have received a copy of the GNU Affero General Public License, version 3,
* along with this program. If not, see <http://www.gnu.org/licenses/>
*/
class OC_Theme {
/**
* Returns the base URL
* @return string URL
*/
public function getBaseUrl() {
return 'https://example.com';
}
/**
* Returns the URL where the sync clients are listed
* @return string URL
*/
public function getSyncClientUrl() {
return 'https://owncloud.org/install';
}
/**
* Returns the URL to the App Store for the iOS Client
* @return string URL
*/
public function getiOSClientUrl() {
return 'https://itunes.apple.com/us/app/owncloud/id543672169?mt=8';
}
/**
* Returns the AppId for the App Store for the iOS Client
* @return string AppId
*/
public function getiTunesAppId() {
return '543672169';
}
/**
* Returns the URL to Google Play for the Android Client
* @return string URL
*/
public function getAndroidClientUrl() {
return 'https://play.google.com/store/apps/details?id=com.owncloud.android';
}
/**
* Returns the documentation URL
* @return string URL
*/
public function getDocBaseUrl() {
return 'https://doc.owncloud.org';
}
/**
* Returns the title
* @return string title
*/
public function getTitle() {
return 'obeenhamFileServer';
}
/**
* Returns the short name of the software
* @return string title
*/
public function getName() {
return 'Custom Cloud';
}
/**
* Returns the short name of the software containing HTML strings
* @return string title
*/
public function getHTMLName() {
return '<b>obeenham</b>FileServer';
}
/**
* Returns entity (e.g. company name) - used for footer, copyright
* @return string entity name
*/
public function getEntity() {
return '<b>obeenham</b>Fileserver';
}
/**
* Returns slogan
* @return string slogan
*/
public function getSlogan() {
return 'A fileserver made by Ollie Beenham';
}
/**
* Returns logo claim
* @return string logo claim
public function getLogoClaim() {
return '<a href="https://example.com">Custom Claim</a>';
}
*/
public function getPrivacyPolicyUrl() {
try {
return \OC::$server->getConfig()->getAppValue('core', 'legal.privacy_policy_url', '');
} catch (\Exception $e) {
return '';
}
}
public function getImprintUrl() {
try {
return \OC::$server->getConfig()->getAppValue('core', 'legal.imprint_url', '');
} catch (\Exception $e) {
return '';
}
}
public function getL10n() {
return \OC::$server->getL10N('core');
}
/**
* Returns short version of the footer
* @return string short footer
*/
public function getShortFooter() {
$l10n = $this->getL10n();
$footer = '<a href="'.$this->getBaseUrl().'" target="_blank\">'.$this->getEntity().'</a>'.
'<br/>' . $this->getSlogan();
if ($this->getImprintUrl() !== '') {
$footer .= '<span class="nowrap"> | <a href="' . $this->getImprintUrl() . '" target="_blank">' . $l10n->t('Imprint') . '</a></span>';
}
if ($this->getPrivacyPolicyUrl() !== '') {
$footer .= '<span class="nowrap"> | <a href="'. $this->getPrivacyPolicyUrl() .'" target="_blank">'. $l10n->t('Privacy Policy') .'</a></span>';
}
return $footer;
}
/**
* Returns long version of the footer
* @return string long footer
*/
public function getLongFooter() {
$l10n = $this->getL10n();
$footer = '<a href="'.$this->getBaseUrl().'" target="_blank\">'.$this->getEntity().'</a>'.
'<br/>' . $this->getSlogan();
if ($this->getImprintUrl() !== '') {
$footer .= '<span class="nowrap"> | <a href="' . $this->getImprintUrl() . '" target="_blank">' . $l10n->t('Imprint') . '</a></span>';
}
if ($this->getPrivacyPolicyUrl() !== '') {
$footer .= '<span class="nowrap"> | <a href="'. $this->getPrivacyPolicyUrl() .'" target="_blank">'. $l10n->t('Privacy Policy') .'</a></span>';
}
return $footer;
}
public function buildDocLinkToKey($key) {
return $this->getDocBaseUrl() . '/server/10.0/go.php?to=' . $key;
}
/**
* Returns mail header color
* @return string
*/
public function getMailHeaderColor() {
return '#515054';
}
}
I have confirmed that both of the background files exist and are in the correct path but nothing I do works.
Thanks for your help in advance