CSS Tweak to bigger cover album Touchscreen 7" (1024x600)

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. :wink:

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
2 Likes

2 Likes

*/

this is my version 800 x 600 orginal 7 inch touchscreen of raspberry
this version has scoll title… [ Updated ! ]

 /* ADAPT TO 7" SCREEN 800*600 raspberry */
@media (min-width:799px) and (max-width:810px) 
{
	#playbackPanelWrapper #rightPanel {
		display:none;
		
	}
	
	#trackInfo #trackDetails
	{
		text-align:left;
		margin-left: -440px;
		width:440px;
		height: 230px;
		overflow: hidden;
	
	}
	
	#playbackPanelWrapper #leftPanel,
	#playbackPanelWrapper #rightPanel {
		float: left;
		width: 43%
	}
	
	#playbackPanelWrapper #centerPanel {
		float: right;
		width: 54%
	}
	
	#trackManager,
	.volumeManager {
		
		margin-top: 110px;
		margin-left: 50px
	} 
	
	#trackInfo {
		position: relative;
		float: center;
		width: 100%;
		min-height: 1px;
		padding-left: 0px;
		padding-right: 0px;
		color:000000;
		text-align: center;
		margin-top: 10px;
		line-height: 1;
		margin-left: 50px;
		
		
	}
	
	#trackInfo img {
		width: 100%;
		margin: 0;
		max-width: 800px;
		max-height: 530px;
		min-height: 390px;
		border: 0px solid rgba(0, 0, 0, .5);
		margin-top: -235px;
		
	}
	
	
	
	
	
	#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;

	}
	/* track info - top text */
	#trackInfo-album {
		width: 100%;
		text-align: center;
		margin-top: 13px;
		margin-left: -15px;
		max-height:20px;
		color: #FFFFFF;
		background-color: transparent!important;		

	}
	/* Track Scroller */
	#trackInfo-title
	{
		margin-top: 5px;
		font-size:20px;
		/* width: 100%; /*comment this line for text scrolling*/
		max-height:40px;
		background-color:transparent;
		
	}
	/* Title on bottom */
	#trackInfo-artist
	{
		width: 100%;
		text-align: center;
		margin-left: -10px;
		margin-top: 5px;
		font-size:15px;
		max-height:30px;
		color: #FFFFFF;
		background-color: transparent!important;
	}
	
	
	
	#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: #FFFFFF;

	}
	
	.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;
		background-color: transparent!important;
	
	}
	#trackInfo-title:hover {
	  animation-play-state: paused;

	}
	@keyframes floatText {
	  to {
		transform: translateX(-100%);
	  }
	}
	*/
1 Like

i updated my version now it looks more streamlined …
for the contemporary version you could use this one :

2 Likes

That is awesome! is exactly what I was looking for: a kind of play-mode screen.
I will try this code in a minute, and post the results.