Posts: 24
Threads: 10
Joined: Nov 2020
Reputation:
0
I've made some progress in figuring out how to edit css to create a screen layout that I like. However, I'd like to have my changes affect the local display only. Can anyone suggest how to do this?
One method that occurs to me is that there might be a way to link it to screen size, similar to the reformatting that I see if I view the URL on my smartphone, where there's a different layout for portrait vs landscape. Is this based on orientation (only) or screensize, or some other factor? Where are the different display options stashed?
To clarify, I'm customizing the screen layout for an attached 800x480 touchscreen, and I'd like my modifications not to affect the display for larger screens or for other orientations. Is this in panels.css or in a script somewhere else?
Any advice would be appreciated.
Also, if anyone else is modifying their display and is interested in exchanging tips, let me know...
Regards,
Michael
Michael
RPi4 —> HiFiBerry DAC+ —> Rotel RA01 —> Celestion DL8
Posts: 11,932
Threads: 271
Joined: Mar 2018
Reputation:
456
Have a look at /var/www/css/moode.css in the section /* Pi 7" Touch */
Posts: 24
Threads: 10
Joined: Nov 2020
Reputation:
0
(12-26-2020, 10:33 PM)Tim Curtis Wrote: Have a look at /var/www/css/moode.css in the section /* Pi 7" Touch */
Hi Tim, thanks for pointing me there.
There are many different @media sections, based on width, height, orientation. How are they kept separate? Is the total impact of moode.css @media rules the cumulative effect of all that apply? Is there a heirarchy of order?
BTW, I'm seeing duplicated code in moode.css. Line 462 to 465 and again line 466 to 469. Both sections say
@media (width:896px) and (height:414px) {
#playback-queue {margin-left:calc(env(safe-area-inset-left) - 2rem);}
#playback-cover {margin-right:calc(env(safe-area-inset-right) - 2rem);}
}
Michael
RPi4 —> HiFiBerry DAC+ —> Rotel RA01 —> Celestion DL8
Posts: 24
Threads: 10
Joined: Nov 2020
Reputation:
0
(12-28-2020, 08:30 AM)grumbleweed Wrote: CSS is cascading so read from top to bottom.
With regard to media queries they get applyed when the rule fits, so you can build sets of rules. It sounds like you need to find some reading material to get up to speed tbh.
And always remember specificity.
You're right, gw! The problem when I started on moOde was that my previous experience with websites ended when HTML was the only way to go, but CSS and JS had just begun to be used. I wasn't sure where to begin with moOde, and whether there were good books or online sources. You and Tim have helped me narrow it down to CSS, and I've found what appear to be some good online references/tutorials.
I've always interpreted "cascading" as a reference to the heirarchicial structure, but I've just realized that if you consider specificity, the combination of those rules and the order you read the file is just a different way to reference the heirarchy, and you don't need to learn how a document is structured from the top down if you recognize the structural (specificity) signals and work your way up.
The developer tools are starting to make more sense too!
I was doing some reading this morning, and the section on specificity started with "Memorize the rules on specificity."
Thanks for your help.
Michael
RPi4 —> HiFiBerry DAC+ —> Rotel RA01 —> Celestion DL8
Posts: 11,932
Threads: 271
Joined: Mar 2018
Reputation:
456
Starting with moOde 7 series we use a build process based on Gulp which bundles and minifies the CSS/JS/HTML. This provides a nice performance improvement on the client.
There is a Gulp build guide in the repo under moode/other/build
Posts: 190
Threads: 12
Joined: Aug 2020
Reputation:
1
ok, nice,
Thanks Kent, I will look into it.