style.css content.ticket with Jinja2

[Mo]

Hi,
after migrating from Trac 1.2.3 to 1.4, my custom style.css does not work anymore. I have this to make tickets use more horizontal space on our default 24" 1920px screens:

$ cat htdocs/style.css
#content.ticket
{
    width: auto;
    max-width: 1400px;
}

I guess this is caused by the genshi > Jinja2 migration. How can I do this modification now?

Best regards.

[Jun Omae]

Try to use site_head.html file.
See https://trac.edgewall.org/wiki/TracInterfaceCustomization#SiteAppearance.

--
Jun Omae <jun...@gmail.com> (大前 潤)

[Mo]

Am Freitag, 15. November 2019 09:24:15 UTC+1 schrieb Jun Omae:

Try to use site_head.html file.
See https://trac.edgewall.org/wiki/TracInterfaceCustomization#SiteAppearance.

Ok, what do I need there to change the width. I found the example:

<!-- site_head.html: Add site-specific style sheet -->
<link rel="stylesheet" href="${href.chrome('site/style.css')}" />
<!-- /site_head.html -->

..which makes use of the style.css again. I deployed both as static content. In the sources of a ticket package I can't find that .css anymore. What do I need to change the page width. I feel like that should be a configuration option anyway or should be adapting to modern screen resolutions.

[Jonathan Laufersweiler]

In the sources of a ticket package I can't find that .css anymore  

Here's the stock ticket.css for the 1.4 branch:

https://trac.edgewall.org/browser/tags/trac-1.4/trac/htdocs/css/ticket.css  

The others live in that directory too, rather than with their modules.

Best,

--Jonathan Laufersweiler

--
You received this message because you are subscribed to the Google Groups "Trac Users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to trac-users+...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/trac-users/1af33081-4480-4dbe-afe7-1003e3050148%40googlegroups.com.

[Mo]

Am Freitag, 15. November 2019 21:34:31 UTC+1 schrieb Jonathan Laufersweiler:

https://trac.edgewall.org/browser/tags/trac-1.4/trac/htdocs/css/ticket.css 

There is also a #content.ticket section. I added my previous setting there and deployed, but it is not used:

$ cat ~/projects/trac-pp/htdocs/ticket.css

[Jun Omae]

Try the following steps:

1. Confirm Your $ENV/htdocs/ticket.css is readable via your browser
with force-reload.

e.g. $ curl http://your-hostname/trac-pp/site/ticket.css
(Correct with your Trac project's URL)

If not readable, fix it.

2. Confirm your rules in $ENV/htdocs/ticket.css work as expected
using Developer tools in Chrome.

If your rules do not work as expected, fix the rules in
$ENV/htdocs/ticket.css.

Also, I suggest to use the following rules to overwrite "#content.ticket":

body #content.ticket {
width: auto;
max-width: 1400px
}


If unable to fix the issue, please describe the details of your
encountered issues and what you did to fix it.

[Mo]

Am Montag, 18. November 2019 11:16:30 UTC+1 schrieb Jun Omae:

Try the following steps:

 1. Confirm Your $ENV/htdocs/ticket.css is readable via your browser
with force-reload.

    e.g. $ curl http://your-hostname/trac-pp/site/ticket.css
         (Correct with your Trac project's URL)

Error: Not Found
No handler matched request to /site/ticket.css

But the URL http://my-hostname/trac-pp/chrome/site/ticket.css
gets the following content from my deployed file:

body #content.ticket { width: auto; max-width: 1400px }

 2. Confirm your rules in $ENV/htdocs/ticket.css work as expected
using Developer tools in Chrome.

    If your rules do not work as expected, fix the rules in
$ENV/htdocs/ticket.css.

    Also, I suggest to use the following rules to overwrite "#content.ticket":

    body #content.ticket {
      width: auto;
      max-width: 1400px
    }

I pasted these lines to my $ENV/htdocs/ticket.css, then did

trac-admin $ENV deploy $ENV/static

as usual. But still does not work. The page source of a ticket contains:

<link rel="stylesheet" href="/trac-pp/chrome/common/css/ticket.css" type="text/css">

Inside this ticket.css there is

#content.ticket { width: 56em; max-width: 100%; margin-left: auto; margin-right: auto; }

So my definition does not seem to arrive there.
Same when I try the Firefox Developer Tools, { } Style Editor, I see the ticket.css with 101 rules and this content above...

 
Best regards,
Mo

[Jun Omae]

On Mon, Nov 18, 2019 at 9:35 PM Mo <burcheri...@gmail.com> wrote:
> as usual. But still does not work. The page source of a ticket contains:
>
> <link rel="stylesheet" href="/trac-pp/chrome/common/css/ticket.css" type="text/css">

Instead, you should confirm the following line in ticket view:

<link rel="stylesheet" href="/trac-pp/chrome/site/ticket.css" type="text/css" />

[Mo]

Am Montag, 18. November 2019 13:42:50 UTC+1 schrieb Jun Omae:

Instead, you should confirm the following line in ticket view:

<link rel="stylesheet" href="/trac-pp/chrome/site/ticket.css" type="text/css" />

I cannot confirm. Searching for "ticket.css" in the source of a ticket, I can only find

    <link rel="stylesheet" href="/trac-pp/chrome/common/css/ticket.css" type="text/css">

Is there something wrong in the webserver configuration or static deployment here?

[Jun Omae]

Works fine in my environment. See attached image, custom-style.png.

My Trac Env is ~/var/trac/1.4-sqlite.

$ cat ~/var/trac/1.4-sqlite/htdocs/style.css

body #content.ticket { width: auto; max-width: 1400px }

$ cat ~/var/trac/1.4-sqlite/templates/site_head.html
<link rel="stylesheet" href="${href.chrome('site/style.css')}" />

[Mo]

Am Montag, 18. November 2019 13:53:31 UTC+1 schrieb Jun Omae:

Works fine in my environment. See attached image, custom-style.png.

Now it works here as well:

 

$ cat ~/var/trac/1.4-sqlite/htdocs/style.css
body #content.ticket { width: auto; max-width: 1400px }

We have been talking about a /htdocs/ticket.css. I renamed my file now.
 

$ cat ~/var/trac/1.4-sqlite/templates/site_head.html
<link rel="stylesheet" href="${href.chrome('site/style.css')}" />

This one I didn't have anymore...
Works now, thanks.

[Mo]

Am Montag, 18. November 2019 15:37:27 UTC+1 schrieb Mo:
 

$ cat ~/var/trac/1.4-sqlite/templates/site_head.html
<link rel="stylesheet" href="${href.chrome('site/style.css')}" />

This one I didn't have anymore...
Works now, thanks.

Coming from https://trac.edgewall.org/ticket/13226#comment:7 ...
how do I customize multiple css?

Currently I have this:

$ cd $PROJECTENV
$ for file in htdocs/style.css htdocs/report.css templates/site_head.html; do echo -e "\n## $file:";cat $file;done

## htdocs/style.css:
body #content.ticket {
    width: auto;
    max-width: 1400px;
}

body #content.narrow #wikipage {
    max-width: 1400px;
}

## htdocs/report.css:
.report div.reports h3 :link, .report div.reports h3 :visited {
    color: #000;
    border-bottom: 1px dotted lightgrey;
    display: block;
}

## templates/site_head.html:

<link rel="stylesheet" href="${href.chrome('site/style.css')}" />

<link rel="stylesheet" href="${href.chrome('site/reports.css')}" />

After that I deployed like

trac-admin $PROJECTENV deploy $PROJECTENV/static

[Jun Omae]

On Fri, Nov 29, 2019 at 5:58 PM Mo <burcheri...@gmail.com> wrote:
> ## htdocs/report.css:
^^^^^^

> ## templates/site_head.html:
> <link rel="stylesheet" href="${href.chrome('site/style.css')}" />
> <link rel="stylesheet" href="${href.chrome('site/reports.css')}" />

^^^^^^^

Not matched. You could find such issues using Network Monitor of
Developer tools in your browser.

[Mo]

Am Freitag, 29. November 2019 10:34:33 UTC+1 schrieb Jun Omae:

On Fri, Nov 29, 2019 at 5:58 PM Mo <burcher...@gmail.com> wrote:
> ## htdocs/report.css:
            ^^^^^^

> ## templates/site_head.html:
> <link rel="stylesheet" href="${href.chrome('site/style.css')}" />
> <link rel="stylesheet" href="${href.chrome('site/reports.css')}" />
                                                   ^^^^^^^

Not matched. You could find such issues using Network Monitor of
Developer tools in your browser.

My mistake. But in Developer tools -> Network I don't see that issue. All GET are 200 OK. But filtering for CSS I can't see any CSS loaded on a /report reload.
Also in the Console there is no GET for any .css file, only lots of .js. Sorry, I'm not the web developer.
Anyway, fixing the typo and it works. Thanks.