Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

When setting custom theme (outside of Theme app) it isn't taken #5036

Closed
X4LD1M0 opened this issue May 22, 2017 · 43 comments
Closed

When setting custom theme (outside of Theme app) it isn't taken #5036

X4LD1M0 opened this issue May 22, 2017 · 43 comments
Labels
1. to develop Accepted and waiting to be taken care of bug feature: theming regression
Milestone

Comments

@X4LD1M0
Copy link

X4LD1M0 commented May 22, 2017

Steps to reproduce

  1. Create theme folder
  2. create '/core/img/background.jpg' file

Expected behaviour

Expect background on login page to change

Actual behaviour

Default NC background is shown
Also original core/css file structure has changed. The example theme folder is also not consistent as the file /themes/example/core/css/styles.css is not equal to /core/css/styles.scss

Server configuration

Operating system: Debian 16.04
Web server: Apache 2.4.18
Database: MySQL 5.5.53
PHP version: 7.0.15
Nextcloud version: 12.0.0
Updated from an older Nextcloud/ownCloud or fresh install: Upgrade from 12.0.0RC3
Where did you install Nextcloud from: NC website

Signing status:

Signing status

No errors have been found.

List of activated apps:

App list

Enabled:

  • activity: 2.5.2
  • admin_audit: 1.2.0
  • announcementcenter: 3.1.0
  • bookmarks: 0.10.0
  • bruteforcesettings: 1.0.2
  • comments: 1.2.0
  • dav: 1.3.0
  • deck: 0.1.4
  • federatedfilesharing: 1.2.0
  • federation: 1.2.0
  • files: 1.7.2
  • files_accesscontrol: 1.2.3
  • files_downloadactivity: 1.1.1
  • files_external: 1.3.0
  • files_pdfviewer: 1.1.1
  • files_retention: 1.1.2
  • files_sharing: 1.4.0
  • files_texteditor: 2.4.1
  • files_trashbin: 1.2.0
  • files_versions: 1.5.0
  • files_videoplayer: 1.1.0
  • firstrunwizard: 2.1
  • gallery: 17.0.0
  • logreader: 2.0.0
  • lookup_server_connector: 1.0.0
  • nextcloud_announcements: 1.1
  • notifications: 2.0.0
  • oauth2: 1.0.5
  • passman: 2.1.2
  • password_policy: 1.2.2
  • previewgenerator: 1.0.6
  • provisioning_api: 1.2.0
  • richdocuments: 1.12.27
  • serverinfo: 1.2.0
  • sharebymail: 1.2.0
  • socialsharing_email: 1.0.1
  • socialsharing_facebook: 1.0.1
  • spreedme: 0.3.8
  • survey_client: 1.0.0
  • systemtags: 1.2.0
  • twofactor_backupcodes: 1.1.1
  • updatenotification: 1.2.0
  • workflowengine: 1.2.0
    Disabled:
  • encryption
  • theming
  • user_external
  • user_ldap

Nextcloud configuration:

Config report

{
"system": {
"instanceid": "occ3bgzu13dp",
"passwordsalt": "REMOVED SENSITIVE VALUE",
"secret": "REMOVED SENSITIVE VALUE",
"trusted_domains": [
"cloud.domain.tld",
"192.168.7.245"
],
"forwarded_for_headers": [
"HTTP_X_FORWARDED",
"HTTP_FORWARDED_FOR"
],
"datadirectory": "/media/nextcloud",
"overwrite.cli.url": "https://cloud.domain.tld",
"dbtype": "mysql",
"version": "12.0.0.29",
"dbname": "nextcloud",
"dbhost": "192.168.7.244",
"dbtableprefix": "nc_",
"dbuser": "REMOVED SENSITIVE VALUE",
"dbpassword": "REMOVED SENSITIVE VALUE",
"logtimezone": "UTC",
"installed": true,
"trusted_proxies": [
"192.168.7.241",
"127.0.0.1"
],
"overwriteprotocol": "https",
"overwritehost": "cloud.domain.tld",
"overwritewebroot": "/",
"overwritecondaddr": "^192\.168\.7\.[1-254]$",
"mail_from_address": "cloud",
"mail_smtpmode": "smtp",
"mail_domain": "domain.tld",
"memcache.local": "\OC\Memcache\Redis",
"filelocking.enabled": true,
"memcache.locking": "\OC\Memcache\Redis",
"redis": {
"host": "localhost",
"port": 6379
},
"maintenance": false,
"log_type": "owncloud",
"logfile": "/var/log/nextcloud.log",
"loglevel": "2",
"log_rotate_size": "104857600",
"mail_smtpauthtype": "PLAIN",
"mail_smtpauth": 1,
"mail_smtphost": "REMOVED SENSITIVE VALUE",
"mail_smtpport": "587",
"mail_smtpname": "REMOVED SENSITIVE VALUE",
"mail_smtppassword": "REMOVED SENSITIVE VALUE",
"htaccess.RewriteBase": "/",
"htaccess.IgnoreFrontController": true,
"updater.server.url": "https://updates.nextcloud.org/updater_server/",
"filesystem_check_changes": 1,
"enable_previews": true,
"preview_max_x": 800,
"preview_max_y": 800,
"preview_max_scale_factor": 4,
"skeletondirectory": "/media/nextcloud/skeleton",
"session_keepalive": true,
"activity_expire_days": 365,
"theme": "theme name",
"mail_smtpsecure": "tls",
"enabledPreviewProviders": [
"OC\Preview\PNG",
"OC\Preview\JPEG",
"OC\Preview\GIF",
"OC\Preview\BMP",
"OC\Preview\XBitmap",
"OC\Preview\MP3",
"OC\Preview\TXT",
"OC\Preview\MarkDown",
"OC\Preview\PDF"
],
"asset-pipeline.enabled": true,
"share_folder": "/Shares"
}
}

Are you using external storage, if yes which one: SMB

Are you using encryption: no

Are you using an external user-backend, if yes which one: N/A

Client configuration

Browser: Google Chrome 58.0.3029.96

Operating system: Debian 8

Logs

Logs don't show any issues regarding theming.

@juliushaertl
Copy link
Member

Please make sure you disable the theming app when using custom themes.

Why should /core/css/styles.scss and /themes/example/core/css/styles.css be equal?

@X4LD1M0
Copy link
Author

X4LD1M0 commented May 22, 2017

Sorry should have mentioned that I also disabled the theming app.

You would expect that an example would follow the same structure as the original theme. How else can somebody make changes to a theme, without having a similar file structure.

I have had 'styles.css' (as pre NC12) but this isn't loaded in the browser.

@X4LD1M0
Copy link
Author

X4LD1M0 commented May 22, 2017

Been able to have my own background working (which is located in /themes/[theme name]/core/img/background.jpg) by copying the /core/css/guests.scss to /themes/[theme name]/core/css/guest.css

I do this since I have a separate script running which cycles through a few different backgrounds.

Have not been able to have my own fav-icon and logo to work yet.

@phatair
Copy link

phatair commented May 22, 2017

Same problem here.
I have a custom theme since the first nextcloud version and until now no problems with that.

i have a folder in /themes and a logo in /themes/mytheme/core/img and some css changes in /themes/mytheme/core/css

In the config file i have my theme activated but no logo and no custom login background is shown.
The favicon will be displayed if i disable the theme app.

I didnt have this behavior in the past.

@juliushaertl
Copy link
Member

Looks like the styles.css inside the theme folder is not applied because of the newly added guest.css.

@juliushaertl
Copy link
Member

We should add a guest.css to the example theme and update the documentation on that. cc @nextcloud/documentation

@X4LD1M0
Copy link
Author

X4LD1M0 commented May 23, 2017

But isn't the guest.css only used for guest and login views? it wouldn't seem obvious that to change the logo on the top left corner once you are logged in, you will need to add that to the guest.css file.

@X4LD1M0
Copy link
Author

X4LD1M0 commented May 23, 2017

I just tried to add the logo-icon css section to the guest.css file, without success. Looking at the browser details it shows that the .logo-icon css details comes from server.css (which is still the default one)

@juliushaertl
Copy link
Member

Ah those are two issues. So styles.css will not be loaded anymore since Nextcloud 12 has a merged css file called server.css. Can you test if it will be fixed when you rename that file in your theme?

@blackcrack
Copy link

blackcrack commented May 23, 2017

but is should work, because if a factory or a private person want have his own theme, where he have long time developed .. :\ should work again ..
thank you ...
if my theme so far finish, then i want make different others, also with small pictures instead background-colour only.. ;) so, should it already again working :) (with full themestructure include icons.css and so on)
best regards
Blacky

@X4LD1M0
Copy link
Author

X4LD1M0 commented May 23, 2017

I can confirm that the logo-icon in the server.css file now works.

So I had to do the following to change the logos:

  • login logo - copy guest.css to theme and change the "#header .logo" section
  • upper-left logo - create server.css and add the "#header .logo-icon" section (or rename styles.css to server.css

The only thing that doesn't get changed at this moment is the fav-icon

@blackcrack
Copy link

blackcrack commented May 23, 2017

i am confirm it too, this works..
http://blackysgate.net/test/index.php/login

io-node, if you whant test my theme, there
http://www.blackysgate.de/files/folder-root/nextcloud/

edit: copy style.css to server and guest.css , background of the login have it self not changed, like it should be. And i mus rewrite the fully theme.. it is works nothing like it should :\ behind root login

this is a remarkable and heavy changing of the theme structure and nobody know it !

also it is in the Adminarea the information about opcache still available (i have adjust it in the php.ini and no change)

i guess, the "theme" including it is before the whole theme default it is used,
if you make the include you're the style.css behind of the default css-files , can
at all overwritten and then it is use the custom theme.
the background-image should remove if use an own style.css !

the soulution with server.css and guest.css it is a bad "specially,extra solution who make more code as it must be.

where i see that, i have open the firefox and "Inspect element" on the login and see at bottom the code,
there i am see to be owerwrite the custom code with the default code, but must be other around.

the default code mus overwritten with the custom code.. so we see, the default css code
it is use behind the custom style.css

best regards
blacky

best regards
Blacky

@juliushaertl
Copy link
Member

The only thing that doesn't get updates at this moment is the fav-icon

Works fine here with the example theme from #5061. Can you check what files are loaded in the <head> section of your Nextcloud?

@X4LD1M0
Copy link
Author

X4LD1M0 commented May 23, 2017

In the head section it only shows:

<link rel="icon" href="/core/img/favicon.ico">

not the source file it comes from. I assume this is from the template files layout.guest.php and layout.user.php. The problem is that print_unescaped(image_path('', 'favicon.ico')); doesn't translate to the theme folder when setting the theme in config.php.

Only work around I can think of is copying both the layout.guest.php and layout.user.php to the theme folder and set a static path to the favicon.

@phatair
Copy link

phatair commented May 23, 2017

Works for me, too. I renamed the styles.css in server.css and now the theme is working.

But there is one thing i dont understand. Is the guest.css necessary? My theme looks good without the guest.css.

@X4LD1M0
Copy link
Author

X4LD1M0 commented May 23, 2017

True, you can do it with server.css only. Also just removed the guest.css and have all details in server.css and all looks fine (excl the favicon)

@blackcrack
Copy link

blackcrack commented May 23, 2017

please read ^^ : #5036 (comment)

because overwrite the custom css code ..

so why mus rename the style.css if it mus be only setting up in the code and use behind the default design.

best regards
Blacky

@phatair
Copy link

phatair commented May 23, 2017

Thanks io-node.

Thats strange because i see my favicon ...

@X4LD1M0
Copy link
Author

X4LD1M0 commented May 23, 2017

When I check the code it states <link rel="icon" href="/core/img/favicon.ico"> which goes to the link https://cloud.domain.tld/core/img/favicon.ico and not https://cloud.domain.tld/themes/<theme>/img/favicon.ico

@juliushaertl
Copy link
Member

True, you can do it with server.css only. Also just removed the guest.css and have all details in server.css and all looks fine (excl the favicon)

Good catch. I've adjusted the pull request to that.

@io-node I cannot reproduce that. Maybe the url is cached somewhere.

@X4LD1M0
Copy link
Author

X4LD1M0 commented May 23, 2017

It is strange, I done a "Emtpy Cache and Hard Reload" in Chrome, and still goes to the default favicon. Not giving up yet :)

@blackcrack
Copy link

blackcrack commented May 23, 2017

#body-login {background-image: url(https://blackysgate.net/test/core/img/background.jpg?v=0);} 
/*this is bad ! this is to overwriting , i have color if you see at bottom, 
but the picture it is over all, and this is bad ! if i disable that do i see the colors from back
i have try with :
#body-login { background-image: url();}
but it works not !
*/

#header .logo {
    background-image: url('../img/logo.png');
   }

#body-login { 
/* Permalink - use to edit and share this gradient: 
http://colorzilla.com/gradient-editor/#001659+0,7a7a7a+72,aaaaaa+100 */
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#0079c4+0,353535+39,000000+100 */
background: rgb(0,121,196); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(0,121,196,1) 0%, rgba(53,53,53,1) 39%, rgba(0,0,0,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(0,121,196,1) 0%,rgba(53,53,53,1) 39%,rgba(0,0,0,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(0,121,196,1) 0%,rgba(53,53,53,1) 39%,rgba(0,0,0,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0079c4', endColorstr='#000000',GradientType=0 ); /* IE6-9 */

} ```

@X4LD1M0
Copy link
Author

X4LD1M0 commented May 23, 2017

That doesn't change the favicon of the browser-tab. I have now been able to fix it. It seems, during testing, I disabled the Theming app. Once I enabled the Theming app it did generate the correct favicon link.

@phatair
Copy link

phatair commented May 23, 2017

if i have the theming app enabled i got this:
<link rel="icon" href="/index.php/apps/theming/favicon/files?v=15">

if i disable the theming app i got this:
<link rel="icon" href="/themes/mytheme/core/img/favicon.ico">

@blackcrack
Copy link

oky, i have disable the themeingapp too, and the backgroundpicture it is away,
but this must at first knowing.. :\ !!

so 2 things, disable theme-app (woh it exist a theme app?!) and rename the style.css to server.css ..
humm this is bad..

@X4LD1M0
Copy link
Author

X4LD1M0 commented May 23, 2017

For me to get my theme to work again was:

  • Rename styles.css to server.css (to change colours, login logo and menu logo)
  • Make sure Theming app is enabled (to get favicon to work)

@blackcrack
Copy link

blackcrack commented May 23, 2017

na, the theme-app must not work,
because the favicon can put in the root of nextcloud and this can be changed too..
so it is need only the setting up to use the favicon.ico in the same folder where it is
extract nextcloud so it is able toe change the favicon.ico very easy as branding later,
if anybody want use an other icon .. or, maby a entry in the Admin-area, what maybe it is better..

but the changing the name of the style.css
is really bad ! because no one know it, only we are there..

and what it is with the icons.. i have custom upload png and something.. like it looks ..
moment..
works this also nomore ..

@X4LD1M0
Copy link
Author

X4LD1M0 commented May 23, 2017

It would have been good to have known this in advance of this change, so people could have prepared this better and incorporate it into the upgrade process, so they don't loose their own theme.

@blackcrack
Copy link

++1

@juliushaertl
Copy link
Member

It would have been good to have known this in advance of this change, so people could have prepared this better and incorporate it into the upgrade process, so they don't loose their own theming.

The theming app has been created for a reason. Custom themes were breaking on update since ages 😉 But yes, this should be states somewhere in the changelog so people are aware of this before upgrading.

@BenS89
Copy link

BenS89 commented May 23, 2017

I also noticed a problem with custom mail notification templates for the activity app. I have a custom theme and a custom mail template for the activity app under /themes/<custom_theme>/apps/activity/templates/email.notification.php

This templates was correctly used with NC11. After the upgrade to NC12, I get the default mail notifications.

@blackcrack
Copy link

imho should it reedit the line where it is fixed as server.css back to style.css
and try to make all compatible to the standart theme names and files,
because the icons.css works also no more in 12 ! and this is bad, if all must be renamed
and change for 12 !

Ben you right, i say +1

also should programmed in, if setting up a theme in config.php, should the theme-app automatical disable !
what maybe a possible be ..

best regards
blacky

@juliushaertl
Copy link
Member

@BenS89 Can you open a separate issue for that?

@blackcrack This is because the number of css files requested with Nc12 has been reduced by using a combined server.css file. I see no change for adding a fallback to old files, but you can basically add a server.css file to your theme that just includes all your old css files.

@blackcrack
Copy link

blackcrack commented May 23, 2017

i have see the scss files and the "@include" the files, i have try it with
the server.css and there include the style.css .
The problem it is, if you all use in one file, like the icons too (like i whant not make) gives a huge file and really
heavy to find the right entry.. so it is (imho) bescheuert /not really okey .. if at all changes
and makes extra .. look you have all included in server.scss but you have extra files for
icons and the other one, and this should be removed as possible in the theme-folder ?
and the user should all squeeze /mash in one file ?? wow, this is user/designer support ! :\
hmmm.. imho is this crap.. if i can speak open with you :) would really nice if exist a possible
for hold all apart like in the core/css folder !
(warum zum teufel habt ihr alles umbenennen müssen ?
/ Why the hack did you have to rename everything? )

best regards und liebe Grüße
Blacky

@X4LD1M0
Copy link
Author

X4LD1M0 commented May 25, 2017

I have now also noticed that the favicon only works on the login page, not when a user is logged in:

Scenario 1:

  • Theming app disabled
  • Custom theme set
  • User not logged in

Result = favicon comes from themes folder

Scenario 2:

  • Theming app disabled
  • Custom theme set
  • User logged in

Result = favicon comes from default core folder

@phatair
Copy link

phatair commented May 26, 2017

Hi,

there is just another problem on my NC12 installation. In my mail template is the default icon used, not my custom icon i use in the custom theme. Where can i change this? Is this the same problem? Is it necessary to rename the css file in the mail template too? Where can i find the mail template?

@juliushaertl
Copy link
Member

@phatair See nextcloud/activity#160

@io-node I cannot reproduce the wrong favicon here. In case it still exists, can you open a separate bug report for that?

@X4LD1M0
Copy link
Author

X4LD1M0 commented May 27, 2017

@juliushaertl it seems I am unable to reproduce the issue with the favicon. I assume it had something to do with caching. At least I have tried it few times and as for now the favicon is working as expected.

@phatair
Copy link

phatair commented May 29, 2017

Hi,

thats funny - juliushaertl linked me to nextcloud/activity#160 and nickvergessen linked me back to this issue :-)

The problem is still the same - in my mail notification is used the default "custom cloud" logo and not my own logo. How can i change the logo in the mail notification?

The logo in the mail notification is linked to:
https://my.url.de/themes/mytheme/core/img/logo.png?v=fe63de357e3784c69ab4448b7e67a25c63856b1e

I replaced the logo.png with my logo.png. But the logo is still the "custom cloud" logo.
The Link https://my.url.de/themes/mytheme/core/img/logo.png shows my logo but the mail notification add a strange code "?v=fe63de357e3784c69ab4448b7e67a25c63856b1e" behind the png and this is linked to the custom cloud logo...

Thanks for your help.

@juliushaertl
Copy link
Member

@phatair This issue is about themes css files.

I think the mail issue has been fixed with #5268

@MorrisJobke
Copy link
Member

Fixed in #5061

@MorrisJobke MorrisJobke added this to the Nextcloud 13 milestone Jun 13, 2017
@minimalic
Copy link

So what about 12.0.1? :)

@gcommit
Copy link

gcommit commented Apr 17, 2018

I have the same issue on 13.0.1
As a workaround you can install the app "Unsplash" and deactivate it. For some reason this triggers a update of the login screen (do it that way, if you don't want to do changes on system itself)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
1. to develop Accepted and waiting to be taken care of bug feature: theming regression
Projects
None yet
Development

No branches or pull requests

8 participants