source code that determines css files -

Source code Sponsor

source code that determines css files

Fri, 21 Jul 2023 03:56:41 -0700

Hubzilla | Contribute

contribute@hubzilla.org

od wrote the following post Fri, 21 Jul 2023 03:56:39 -0700

source code that determines css files

Which php file(s) is/are responsible for the various stylesheets to be used in hubzilla web pages?

It looks that some stylesheets are in:
'/hubzilla/webserver/addon...'
'/hubzilla/webserver/library/forkawesome/...'
'/hubzilla/webserver/vendor...'
'/hubzilla/webserver/view/css...'

show all 21 Comments

Fri, 21 Jul 2023 04:25:14 -0700

_jayrope

jrp@hub.kliklak.net

@od Mostly /view/theme/redbasic/css/style.css is important.

Editing this should not be done by beginners (my own opinion), and requires devtools open in browser to get somewhere.
Options missing from Hubzilla's GUI, like controlling fonts, line-height and general padding, can be taken care of in this file.
As these custom alterations can be reversed anytime there is a new HZ update, i'd recommend mostly refraining from this and instead make a proper feature request at the git.

Fri, 21 Jul 2023 04:34:02 -0700

Harald Eilertsen

harald@hub.volse.no

There's several:

boot.php calls head_get_css() which is defined in include/plugin.php
include/plugin.php defines head_get_css() but also head_add_css() and head_remove_css(). You can use these to add extra CSS files if you need in your addon or module. Search for head_add_css in the codebase and you'll find the different places stylesheets are added.
view/theme/redbasic/php/style.php is what actually generates the stylesheet for the theme itself.

Hope that helps!

Sat, 22 Jul 2023 03:49:03 -0700 last edited: Sat, 22 Jul 2023 03:49:26 -0700

Harald Eilertsen

harald@hub.volse.no

@_jayrope @od There's actually a couple of ways you can modify the default theme CSS without changing the original. In case you want some custom adjustments for your hub.

Add a file view/theme/redbasic/schema/$myschema.css where $myschema is your chosen name for your schema. This CSS file will be included after the default styles from the theme.

If you want this schema to be the default for your hub, create a symlink from view/theme/redbasic/schema/default.css to your custom schema file.

If you need to be able to run php code to render the stylesheet, you can add a $myschema.php in the same location, and optionally a default.php symlink to it.

Sat, 22 Jul 2023 04:03:08 -0700 last edited: Sat, 22 Jul 2023 04:03:57 -0700

_jayrope

jrp@hub.kliklak.net

@Harald Eilertsen Great tip! Now i am wondering, if /schema/$myschema.css will be overwritten during a HZ update? This is the case, when having your own code inside the official redbasic/css/style.css.

I am using style.css, though, because i can add my own rules to the top, effectively saving me from having all too many !important; as part of my own rules, as the first listed rule over the later.

Sat, 22 Jul 2023 05:04:24 -0700

Harald Eilertsen

harald@hub.volse.no

@_jayrope No, these files are not in the repo, so an update will not overwrite them.

Tue, 15 Aug 2023 02:02:47 -0700

od@zotum.net

file /hubzillahub.domain/view/theme/redbasic/php/style.php

The language causes confusion:

"
Now load the scheme. If a value is changed above, we'll keep the settings
"

What "scheme"?

Suppose a "value above" is:

"
$schema = get_pconfig($uid,'redbasic','schema');
"

If 'redbasic' is changed to 'customtheme' what will "keep the settings" do, keep 'redbasic' and change to 'customtheme'?

"
// Allow layouts to over-ride the schema
...
// Set the schema to the default schema in derived themes. See the documentation for creating derived themes how to override this.
"

Anyone know please where is the documenation, derived schemes?

file /hubzillahub.domain/include/plugin.php

The functions to (not) use css are there, but no details of how to amend if wanted.

The objective is to be able to write documentation about the correct procedures to use custom css file for module 'webpages'.
Thank you.

Wed, 16 Aug 2023 19:18:32 -0700

Scott M. Stolz

scott@authorship.studio

Are you talking about webpages made in the webpages app (i.e. /page/username/pagename), or do you mean the CSS that Hubzilla themes use?

Webpages App

If you are referring to creating pages in the webpages app, I was told that you were supposed to create blocks for the CSS if you want to add or override the default theme's CSS.

https://completehostingguide.com/article/creating-a-custom-page-on-a-channel-in-hubzilla

Themes

Otherwise, if you want to change the CSS for the entire website, you create a theme and override the CSS there.

To give you an example of how I changed the CSS in the Red Tab theme (still under development), view:

https://github.com/WisTex/Neuhub/blob/main/view/theme/red-tab/php/style.php

https://github.com/WisTex/Neuhub/blob/main/view/theme/red-tab/php/theme_init.php

In these two files, you can specify whatever CSS files you want, and even use different CSS files than Redbasic if you want. For example, I used Tabler's CSS instead of Hubzilla's Bootstrap files in the Red Tab theme.

I haven't figured out how schemas work, so if you figure that out, I would love to hear it.

But, basically, you shouldn't be editing any of the files in the redbasic theme, but instead should be creating a child theme that overrides what Redbasic is doing. When you do it that way, you don't have to worry about Hubzilla core updates overwriting anything.

Thu, 31 Aug 2023 03:18:21 -0700

od@zotum.net

@Scott M. Stolz
Behaviour is requested to be understood about both the webpages module and themes, to contribute documentation.

"
...
// You can add CSS (or override the CSS in the Redbasic theme) by putting it in this file.
echo @file_get_contents('view/theme/red-tab/css/style.css');
...
"

What file is "this file"? The file 'style.php'? Excuse the simplicity but the objective is to contribute documentation for someone is not a programmer or technical author.

The extract obvious implies that if a CSS element is added to file 'view/theme/red-tab/css/style.css' but it not understood if addition makes this css file priority to be applied to the html file.

How is the css is the theme overidden (or lowered in priority to be applied to the html file)?

Fri, 01 Sep 2023 02:19:39 -0700

Scott M. Stolz

scott@authorship.studio

I don't know the inner workings, but I do know if you modify the contents of view/theme/name-of-theme/css/style.css it overrides the default redbasic formatting for all pages using that theme.

And I know that if you put CSS in the blocks as I described, it overrides the theme's CSS.

So I think the priority is:

1. CSS in the page itself or in a block.
2. CSS from the theme (style.css and other files).
3. CSS from redbasic (assuming the theme references redbasic CSS).

That knowledge comes from playing around with it and asking questions, mostly.

Tue, 24 Oct 2023 02:06:38 -0700 last edited: Tue, 24 Oct 2023 02:07:30 -0700

od@zotum.net

layout:
"
[template]
none
[/template]
[region=content]
$content
[/region]
"

webpage module, web page created with header:
"
<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="publicwebsite.css" />
        <link rel='preconnect' href=publicwebsite.ttf' />
        <title>test</title>
    </head>
"

The public web site recognises the css and font, because it is visible on that public web site.
Attempt to use the 'webpages' module in hubzilla, the html page does not load the external css nor the external font style
Any help to understand why not please?

Tue, 24 Oct 2023 05:22:34 -0700 last edited: Tue, 24 Oct 2023 05:24:08 -0700

Ema エマ

emanuel@labonneheure.ch

@od put

        <meta charset="UTF-8">
        <link rel="stylesheet" href="publicwebsite.css" />
        <link rel='preconnect' href=publicwebsite.ttf' />
        <title>test</title>

into a block myhead

Layout:

[template]
none
[/template]
[region=htmlhead]
[block][var=wrap]none[/var]myhead[/block]
[/region]
[region=content]
$content
[/region]

Tue, 24 Oct 2023 07:58:15 -0700

Scott M. Stolz

scott@authorship.studio

There is a missing quotation mark one of the lines.

link rel='preconnect' href='publicwebsite.ttf'

Attempt to use the 'webpages' module in hubzilla, the html page does not load the external css nor the external font style

If you mean font and CSS files located outside of your domain name, Hubzilla's default security will block that. It only allows you to use CSS and font files located on your domain name. This is to keep your users from messing up the website's appearance by referencing broken CSS or fonts.

There is a way to override that, but I am not sure how.

Tue, 24 Oct 2023 13:19:24 -0700

od@zotum.net

@Ema エマ
no success
@Scott M. Stolz
typographic error to "anonymise" url
The design decision to block external css and font seems strange; broken css and/or fonts could still occur with local files.
Until the security can be changed, the next question to ask is the correct location of css, font files for the hubzilla domain please?

Thu, 26 Oct 2023 05:00:51 -0700

Scott M. Stolz

scott@authorship.studio

@od

The design decision to block external css and font seems strange; broken css and/or fonts could still occur with local files.

For an instance where you are the only user or you have trusted users, then it does not make sense. But if you have a public server with random people on there creating web pages, you could get some, well, interesting results. I am not sure if you are old enough to remember the original Geocities, but let's just say they let users modify everything, and it resulted into some, let's say, "interesting" designs, to say the least. It also protects against users added malicious code via an outside link.

Thu, 26 Oct 2023 05:03:52 -0700 last edited: Thu, 26 Oct 2023 05:11:56 -0700

Scott M. Stolz

scott@authorship.studio

@od

Until the security can be changed, the next question to ask is the correct location of css, font files for the hubzilla domain please?

The security can be changed.

Edit .htconfig.php and change App::$config['system']['content_security_policy'] to 0 (zero).

// These lines set additional security headers to be sent with all responses
// You may wish to set transport_security_header to 0 if your server already sends
// this header. content_security_policy may need to be disabled if you wish to
// run the piwik analytics plugin or include other offsite resources on a page

App::$config['system']['transport_security_header'] = 1;
App::$config['system']['content_security_policy'] = 0;
App::$config['system']['ssl_cookie_protection'] = 1;

For adding custom files locally, you have some options.

Themes Method

If you are creating a custom theme or using a child theme, then you would place them in the following directories:

CSS: Place it in the /view/theme/name-of-theme/css
Javascript: Place it in the /view/theme/name-of-theme/js
Fonts: Place it in any folder in /view/theme/name-of-theme/ (I usually put it in /view/theme/name-of-theme/fonts but it can actually be any directory)

To give you an idea of the directories available, check out: https://github.com/WisTex/Neuhub/tree/main/view/theme/redbasic-child

Custom Files Method

If you want the font to be available to everyone on the site, you can put it in the /custom folder (or /custom/fonts or whatever subdirectory you want). Anything in the /custom folder will not be overwritten when you update Hubzilla).

If you are creating webpages using the build-in app, you may want to check out:
https://completehostingguide.com/article/creating-a-custom-page-on-a-channel-in-hubzilla

This gives you two ways to modify your website: themes or webpages. There are other ways to do this, but I think these are the most appropriate based on what you are doing.

Sorry for so many edits. The Markdown addon and BBCode fight over how to display bulleted lists, and if you edit your post, it screws it up. If you fail to notice that, you have to edit your post again to fix it.

Sat, 28 Oct 2023 02:00:01 -0700

od@zotum.net

@Scott M. Stolz

App::$config['system']['content_security_policy'] = 0;

Change made, but webpage module does not recognise the css code in the block module
External css code continues to be not recognised

Sat, 28 Oct 2023 05:57:14 -0700

Scott M. Stolz

scott@authorship.studio

Did you enabled code for that channel as described in:

https://completehostingguide.com/article/creating-a-custom-page-on-a-channel-in-hubzilla

If the administrator does not enable code, it will strip out those sort of things.

Also, CSS needs to be put in a block, and not placed in the main webpage itself.

Sat, 28 Oct 2023 11:05:53 -0700

od@zotum.net

Code has been enabled; this is evident with the ability to select additional webpage module content type such as 'php' option.

CSS code in previous post within thread (without typographical errors), placed in a block as advised by @Ema エマ post previously

Example functionality:

https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face

Sun, 29 Oct 2023 00:36:37 -0700

Scott M. Stolz

scott@authorship.studio

Do you see any errors when you use inspect element in your browser?

Mon, 30 Oct 2023 15:04:03 -0700

od@zotum.net

Good suggestion.
It seems that hubzilla removes the header content, then inserts some ecmascript code. Since this is not expected nor desired, seems to be a bug

Wed, 01 Nov 2023 09:15:38 -0700

Scott M. Stolz

scott@authorship.studio

If it is a bug or unexpected behavior, maybe it should be reported.

Sorry, you have got no notifications at the moment...