Jump to content

MiguelFerrao

Member
  • Posts

    43
  • Joined

  • Last visited

Posts posted by MiguelFerrao

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

    Quote

    You could try this. It probably has something to do with how your blocks are laid out there but without rearranging things in your site I can't really tell. This code should fix it. If it doesn't right away just leave the code in and let me know.

    .sqs-layout:not(.sqs-editing) .sqs-row .sqs-block:not(.float):not(.sqs-feature-gated-wrapper):first-child:last-child {
      padding-bottom: 17px !important;
    }

     

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

  3. 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?

     

    Screenshot 2024-01-08 at 15.51.06.png

  4. 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>

  5. 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;} 

  6. Thanks a lot for helping, @tuanphan and @jaeveedee.

    The code below is almost getting it all:

    Quote

     

    <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 .play-button {border-left-color: black!important;} 
    .sqs-widgets-audio-player .action .pause{border-color: black!important;}
    .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: 50% !important;
      transform: translate(-50%,-50%) !important;}   
    </style>

    <style>
    div#page-section-65798fa962771a6b7f4a6a5a * {
        background-color: transparent !important;
    }
    .sqs-widgets-audio-player .track .icon {
        display: none !important;
    }
    .sqs-widgets-audio-player .action {
        position: fixed !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%,-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;
        }
      }
    }
      </style>

     

    The only thing unneeded is the right border (in grey) next to the play button.

    Do you think we can remove this?

  7. Site URL: https://banjo-recorder-36fe.squarespace.com

    Hi there!

    I am trying to fix an odd problem with my website. 

    I am creating a button for language selection that translates every page to a second language, separately. 

    This button is to be included in the navigation (header) and it has to link to specific pages, corresponding to the page you are.

    I've used the EDIT SITE HEADER>ELEMENTS>BUTTON option to allow buttons on navigation and a script by @creedon to add the button I want. Then I used CUSTOM CSS to hide the first button created by EDIT SITE HEADER>ELEMENTS>BUTTON and kept the one I've created using the script by @creedon visible.

    I've done this and it is working but as the navigation links are load first and when the button is loaded the navigation moves to fit it in. This is the main problem.

    The other problem is that some pages overlap the navigation links with the page content on loading. I would also like to correct this.

    Is there anyone available to help?

    Website password: musa

    Thanks a lot!

    Miguel 

     

  8. Hi @tuanphan and thank you for your answer.

    I am hiding navigation items using code injection because those hidden elements vary accordingly to the language of each page. I am building a bilingual website. If I move the code in Code Injection into Design > Custom CSS it will change website as a whole and it will not allow to hide half of the elements in one language and show these same elements in the other language.

    Let me explain: 

    To accomplish a bilingual 7.1. website using navigation this way and to have a button to change language on each individual page (the button seems the same but it links to the translated page where you are, so it needs to use specific code each time) I had to use the "add a button to navigation" official option and to add a script to allow and addition of multiple buttons to navigation. But, unfortunately, I couldn't find any solution for having this "official" button to link to different pages depending on the page you are, as so, I had to put something on the "button text" label and to hide this button with Custom CSS.  Then, with the script, I could add as many buttons as I wanted with as many links and description I wanted.

    This all fine, the only is that, sometimes, the hidden button appears for a brief moment and changes the set-up of the navigation.

    Any way, this issue of having the navigation sliding to the left and then to the right, for a second, when loading pages, was already occuring on my 7.0 version of this website (www.musaparadisiaca.net), and I couldn't find any solution to this problem either.

    Any ideas?

    Thanks a lot.

  9. Site URL: https://banjo-recorder-36fe.squarespace.com/knows

    Dear all,

    I am experiencing an issue with my 7.1 website concerning the navigation items.

    When the page loads, the items quickly slide to the left just before returning to their desired position. I suspect that this is related with the amount of CSS custom code it has to read before opening the page. 

    The password for the website is Musa.

    Any help would be really appreciated!

    All best,

    Miguel

  10. Dear @creedon, this code is amazing and works perfectly to create multiple buttons, thanks a lot! However, would it be possible to use a similar method to create a single button without using the "edit header > elements > button" path? I am trying to have a single button linking to different pages on each page of the website, making it a language selector for each of those individual pages.
    Thanks for your help.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.