Hi everyone,
I’m new here and to Volumio.
I didn’t like the way my touchscreen shown the playback, knowing a thing or two about css I did.
This only affects the 1024x600 resolution screens. Everything else remains the same.
Volume removed (I don’t use it) but usable in other resolutions.
Declaimer: I’m not responsible is you mess-up your Volumio. Do it at your own risk.
Note to the dev team: I like a lot Volumio, THANKS!!! To be perfect you need to add some kind of tool that allow personalization (ex. just the “now playing screen”)
How to:
- Select the Classic layout in Volumio (settings->Appearance->User Interface layout design)
- Use a SSH tool (ex Filezilla) and edit the file:
/volumio/http/www/styles/app-e831b7a181.css - Append to the end of the file this code:
/* ADAPT TO 7" SCREEN 1024*600 */
@media (min-width:1023px) and (max-width:1025px)
{
#playbackPanelWrapper #rightPanel {
display:none;
}
#trackInfo #trackDetails
{
text-align:center;
margin-left: -440px;
width:470px;
height: 200px;
overflow: hidden;
}
#playbackPanelWrapper #leftPanel,
#playbackPanelWrapper #rightPanel {
float: left;
width: 40%
}
#playbackPanelWrapper #centerPanel {
float: left;
width: 60%
}
#trackInfo {
position: relative;
float: left;
width: 100%;
min-height: 1px;
padding-left: 0px;
padding-right: 0px;
text-align: right;
margin-top: 20px;
line-height: 1;
margin-left: 25px;
}
#trackInfo img {
width: 100%;
margin: 0;
max-width: 530px;
max-height: 530px;
border: 10px solid rgba(0, 0, 0, .5);
margin-top: -230px;
}
#trackManager,
.volumeManager {
/**/
margin-top: 230px;
margin-left: 80px
}
#footer .footerContent {
height: 30px;
background-color:transparent;
}
.tabBar button {
height: 30px;
font-size: 12px;
}
footer {
height: 30px
}
#trackDetails>div
{
padding: 0;
overflow-y:scroll; /*comment this line for text scrolling*/
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
#trackDetails>div::-webkit-scrollbar {
display: none;
}
#trackInfo-album {
margin-top: 20px;
max-height:40px;
}
#trackInfo-title
{
margin-top: 15px;
font-size:40px;
width: 100%; /*comment this line for text scrolling*/
max-height:80px;
}
#trackInfo-artist
{
margin-top: 15px;
font-size:30px;
max-height:30px;
}
#playerButtons .playPauseBtnGreyWrapper {
border-radius: 0px;
height: 62px;
background-color: transparent;
}
#playerButtons .playPause {
border: 0;
}
.tabBar button img
{
width: 15px;
height: 15px;
}
#contentWrapper
{
top: 50px;
bottom: 0;
}
.tabBar .btn.btn-default.selected
{
background-color: transparent!important;
color: #54c688;
}
.tabBar button.playbackBtn
{
background-color: transparent;
}
#header .headerContent
{
background-color:transparent;
}
/*uncomment this block for text scrolling*/
/*
#trackInfo-title {
display: inline-block;
white-space: nowrap;
animation: floatText 15s infinite linear;
padding-left: 100%!important;
}
#trackInfo-title:hover {
animation-play-state: paused;
}
@keyframes floatText {
to {
transform: translateX(-100%);
}
}
*/
EDIT: Code changed, some tracks with long names break the design. Now we have:
- As is only 2 lines max for track name
- Or if you like scrolling text you can comment and uncomment the lines/blocks indicated