MiguelFerrao

I to everyone. The solution has been found by @jaeveedee.

Hi again @Ziggy. Thanks for your reply. Just did it and didn’t change the behaviour. Any clue?

I do have @Ziggy, all over. CUSTOM CSS: a#site-title { font-family: BioRhyme Expanded!important; font-style: italic!important; } a:link {text-decoration:none!important;} a:visited {text-decoration:none!important;} a:hover {color:white !important;} a:active {text-decoration:underline!important;} .header#header {position: fixed!important; background-color: transparent!important} /* Change Line Color */ .sqs-block-horizontalrule hr { background: #c0c0c0!important; } .btn:first-of-type {display: none!important} .btn:nth-child(2) {margin-left: 35px!important} .btn:hover { color: black!important; background-color: white!important; transition: 0.2s!important; text-decoration: none!important} CODE INJECTION: Varies across the website. Here is an example on that specific page: https://www.musaparadisiaca.net/projects <style> body {background-color: #E6E6E6;} #canvas {background-color: #E6E6E6;} </style> <style> #header .header-nav-item:nth-child(1) {display:none} #header .header-nav-item:nth-child(2) {display:none} #header .header-nav-item:nth-child(3) {display:none} #header .header-nav-item:nth-child(4) {display:none} #header .header-nav-item:nth-child(5) {display:none} @media screen and (max-width:1511px){#header .header-menu-nav-item:nth-child(1) {display:none}} @media screen and (max-width:1511px){#header .header-menu-nav-item:nth-child(2) {display:none}} @media screen and (max-width:1511px){#header .header-menu-nav-item:nth-child(3) {display:none}} @media screen and (max-width:1511px){#header .header-menu-nav-item:nth-child(4) {display:none}} @media screen and (max-width:1511px){#header .header-menu-nav-item:nth-child(5) {display:none}} </style> <script> $( ( ) => { /* add buttons to header SS Version : 7.1 */ let buttonsNewData = [ { buttonText : 'PT', url : 'https://www.musaparadisiaca.net/projectos' } ] // do not change anything below, there be the borg here $( '.header-actions-action--cta, .header-menu-cta' ).each ( function ( ) { let $this = $( this ); $.each ( buttonsNewData, function ( index, buttonNewData ) { let $buttonNew = $( '.btn:first', $this ) .clone ( ) .attr ( 'href', buttonNewData.url ) .text ( buttonNewData.buttonText ) .appendTo ( $this ); } ); } ); } ); </script>

Yes, of course @Ziggy https://www.musaparadisiaca.net/projects

Hello to everyone, I find it across the whole template. Is it possible to make vertical spaces between rows of blocks equal? Everytime I add a row of blocks, the top one is appearing differently from all the others. Can you please help me on this?

Hi @jaeveedee Yes, I am putting this on code injection because this is the only page I want with this behaviour. The code is now working perfectly: https://www.musaparadisiaca.net/for-a-history-of-smells Thanks a LOT for your precious help. All best, Miguel

Thanks a lot @jaeveedee Should I substitute any code already there? <style> body {background-color: #E6E6E6;} #canvas {background-color: #E6E6E6;} </style> <style> #header {display: none;} </style> <style> .sqs-widgets-audio-player {background:white!important;} .sqs-widgets-audio-player .action:hover {background-color:transparent!important;} .sqs-widgets-audio-player .action .play-button { box-sizing: border-box; height: 40px; border-style: solid; border-width: 25px 0 25px 40px; border-color: transparent transparent transparent white;} .sqs-widgets-audio-player .action .pause{box-sizing: border-box; height: 50px; border-style: double; border-width: 0px 0px 0px 40px; border-color: transparent transparent transparent white;} .sqs-widgets-audio-player .progress {display: none !important;} .sqs-widgets-audio-player .time {display: none !important;} .sqs-widgets-audio-player .progress-bar {display: none !important;} .sqs-widgets-audio-player .action { position: fixed !important; top: 50% !important; left: 49% !important; transform: translate(-50%,-50%) !important;} .sqs-widgets-audio-player .track .icon { background-color: none!important;} </style> <style> div#page-section-65798fa962771a6b7f4a6a5a * { background-color: transparent !important;} .sqs-widgets-audio-player .track .icon {display: none !important;} </style> <style> .sqs-widgets-audio-player .action { .play, .pause { left: 50% !important; transform: translateX(-50%) !important; } }</style> <style> .sqs-block-audio { text-align: center; .sqs-audio-embed { display: inline-block; } .sqs-widgets-audio-player { .track, .labels, .secondary-controls { display: none; } .action { border-right: none !important; } } } </style>

Hi @jaeveedee. Here it is: https://www.musaparadisiaca.net/for-a-history-of-smells

Ok, I’ve created exactly the play/pause button I wanted. Unfortunately, it is not centred. Can we fix that? Here is the code I used: .sqs-widgets-audio-player .action .play-button { box-sizing: border-box; height: 40px; border-style: solid; border-width: 25px 0 25px 40px; border-color: transparent transparent transparent white; margin: 0;} .sqs-widgets-audio-player .action .pause{box-sizing: border-box; height: 50px; border-style: double; border-width: 0px 0px 0px 40px; border-color: transparent transparent transparent white;}

How about changing the size of the play/pause? Is that possible @tuanphan @jaeveedee? Thanks a lot for your help.

Thanks a lot for helping, @tuanphan and @jaeveedee. The code below is almost getting it all: The only thing unneeded is the right border (in grey) next to the play button. Do you think we can remove this?

Hi @jaeveedee, thanks for your answer. I’ve made a version of the page as you've suggested. www.musaparadisiaca.net/for-a-history-of-smells-test

Sure @jaeveedee https://www.musaparadisiaca.net/for-a-history-of-smells Thanks!

Is there a way to remove the playbar (progress bar) from the audio player and to have a play/pause player only?

Site URL: https://www.musaparadisiaca.net/home-en Hi there! I would like to replace navigation item text on hover with fade out and fade in. On hover, the text should fade out and another text should fade in, but the active item (when clicked) should stay equal to the text replacing the original one. Is this possible? Thanks a lot for your help.