Jump to content

Can I change the position of buttons on a cover page?

Recommended Posts

Posted

I have a cover page on my site that serves as the home page (seen here) and it contains two buttons: one to enter the site itself and a new one I just made so people can subscribe to my newsletter. Currently the two buttons are side by side. Is there a way to change the CSS/html for this cover page and move the Subscribe button down so it's centered just above the social media icons at the bottom? The Enter Site button used to be the main focus of the page and I'd like to keep it that way.

The Custom CSS page in the Design section says you can't edit cover pages from there. Is this even possible to do?

I'm using the Five theme, by the way.

EDIT: In the event that I can't change the position of the Subscribe button (which is actually a form), can I at least switch the buttons around to where Enter Site is on the left?

I'm an indie science fiction author using Squarespace as my website platform.

  • Replies 16
  • Views 16.8k
  • Created
  • Last Reply
Posted

You might try this in Settings > Advanced > Page Header Code Injection for the Cover Page:


<style>
/*
** reposition the newsletter form 
** subscribe link on the landing page
** down and right
*/
[data-slice-id="575b233d4d088eebd1fbb631"] {
 position: absolute;
 top: 200px;
 left: 335px;
)
</style>  

Let me know how it works.

-Steve

I'm a retired attorney who was asked by a friend to build a website. In a prior lifetime, in a galaxy far, far away and long, long ago, I was a computer systems analyst / programmer. I'm a novice autodidact in CSS, JavaScript and HTML learning in part by example.. I've asked questions on this forum and been lucky enough to have others help me, so I'm inclined to answer any question I can. Pay it forward.

Posted

Thanks for the reply Steve. It doesn't look like it's working. The code is copying over perfectly fine and I don't have any syntax errors, but it's not actually affecting the buttons. I know I mentioned that the cover pages supposedly can't be edited with custom CSS, but now that I think about it, one of my friends (who also uses the Five theme, albeit with a different cover page layout) appears to have done some customization on hers (seen here) so I feel like it's got to be possible...

I'm an indie science fiction author using Squarespace as my website platform.

Posted

(I did also try injecting your code into the page header - no luck with that either)

I'm an indie science fiction author using Squarespace as my website platform.

Posted

My mistake. You said Cover Page and I know better, just had a senior moment. :-)

I edited the answer. To be used in Page Header Code Injection, the CSS needs to be wrapped in

<style></style>

tags.

But I see you've inserted a third button. Can you put the Enter Site and EJ's Blog buttons on the left and the Subscribe button on the right? If so, I think I can give you a look you will like using Flex Box.

I'm a retired attorney who was asked by a friend to build a website. In a prior lifetime, in a galaxy far, far away and long, long ago, I was a computer systems analyst / programmer. I'm a novice autodidact in CSS, JavaScript and HTML learning in part by example.. I've asked questions on this forum and been lucky enough to have others help me, so I'm inclined to answer any question I can. Pay it forward.

Posted

So just for fun I went ahead and got rid of the blog button (it was kind of unnecessary and merely there to create some symmetry) and tried pasting the edited code back into the page header. The Subscribe form button moved down, but so did the Enter Site one. I'm thinking I need to swap them and maybe get the Subscribe button on the right so it moves by itself, but I'm honestly not sure how to do that (pardon my noobiness!).

But It's almost like the edits aren't taking for some reason. I went ahead and changed the top margin to 250 just to bring the buttons down a bit further, and (cont'd)

I'm an indie science fiction author using Squarespace as my website platform.

Posted

(cont'd) nothing happened. But when I first applied your edited code, the screen turned white and reloaded and then the changes had been put into effect. With any other edits I've tried to make, it just sits there, looking the same, and refreshing doesn't do anything. Even tried logging out and logging back in. So it might just be a matter of the site being glitchy or something.

I'm an indie science fiction author using Squarespace as my website platform.

Posted

Can you get the Subscribe button on the right and the Enter Site button on the left? If you can, do so. Let me know either way.

I'm sure there's nothing glitchy about your site. We'll get it working.

Keep a separate browser tab open and navigated to your site as a visitor -- not logged in. When you want to test whether a change has worked, switch to that tab and reload the page. Be sure to click Apply and Save everywhere.

In the meantime, I edited the answer. Try it as the page is right now.

I'm a retired attorney who was asked by a friend to build a website. In a prior lifetime, in a galaxy far, far away and long, long ago, I was a computer systems analyst / programmer. I'm a novice autodidact in CSS, JavaScript and HTML learning in part by example.. I've asked questions on this forum and been lucky enough to have others help me, so I'm inclined to answer any question I can. Pay it forward.

Posted

(replying here because for some reason it's not letting me reply to the latest comment) -- okay, we're making progress! I copied the new code and tweaked the values a little to get the Subscribe button further down where I wanted. I feel like such a noob because I just now figured out how to view all the HTML for the site, which is what I'd always been wishing I could do. If you could look one more time and see if both buttons are showing up centered, one below the other, that would be great! Otherwise, I think I've got it from here! Thanks so much for your help and patience :)

I'm an indie science fiction author using Squarespace as my website platform.

Posted

I checked the site. When I first landed on the Cover Page, the buttons were there and looked good. But when I reloaded the page the subscribe button was gone. Can't get it back no matter what I do.

If you can get the Enter button on the left and the Subscribe on the right, I think I can get them to align nicely in a column using the CSS Flex Box technology. But for the Enter button to be on top in the column, it has to be on the left in the row.

Let me know if I can help.

I'm a retired attorney who was asked by a friend to build a website. In a prior lifetime, in a galaxy far, far away and long, long ago, I was a computer systems analyst / programmer. I'm a novice autodidact in CSS, JavaScript and HTML learning in part by example.. I've asked questions on this forum and been lucky enough to have others help me, so I'm inclined to answer any question I can. Pay it forward.

Posted

Agh not sure why it's not letting me reply to the latest comment...anyway, sorry for the delay. Yes, what you're seeing is correct. I got both buttons all lined up the way I wanted them using a slightly-altered version of your code, but then they were totally screwed up on mobile. After consulting with a friend who has done some web design work, she suggested doing away with the Subscribe button entirely (which is how it was originally) and just have a different subscribe option within the site itself. So that's what I did! I may come back to this later and figure out the mobile interface

I'm an indie science fiction author using Squarespace as my website platform.

Posted

OK. Redesign is always an option. :-)

You should have said something. We could try writing a rule just for mobile sizes. If you do come back to it and want some help or input, just leave a comment here and use my username.

Good luck.

I'm a retired attorney who was asked by a friend to build a website. In a prior lifetime, in a galaxy far, far away and long, long ago, I was a computer systems analyst / programmer. I'm a novice autodidact in CSS, JavaScript and HTML learning in part by example.. I've asked questions on this forum and been lucky enough to have others help me, so I'm inclined to answer any question I can. Pay it forward.

  • 2 weeks later...
Posted

Thank you EJFisch for code suggestions!

I have a similar need: to move WELCOME button on a cover page using Five theme.http://idc-design.squarespace.com/

On mobile, the button covers the text in the images (which I understand is not recommended, but yay marketing messages.)

I'd like to move it up 100 pixels or so, into the space reserved for body text on this cover design, which we are not using. It would be awesome if it could be centered, too.

Also: Is it possible to change position display only on mobile?

thank you,Christine

  • 2 weeks later...
Posted

@alxfyv - thank you for the CSS to modify cover buttons!

I have a similar need: to move WELCOME button on a cover page using Five theme: http://idc-design.squarespace.com/

On some mobile devices, the button covers the text in the images (which I understand is not recommended, but yay marketing messages.)

I'd like to move it up 100 pixels or so, into the space reserved for body text on this cover design, which we are not using. It would be awesome if it could be centered, too.

Also: Is it possible to change position display only on mobile?

thank you, Christine

Posted

@castigliano:

Hi Christine,

So as not to hijack this question, and to keep it a clean thread, would you please post your issue as a separate question? Then leave a comment here with the url to and title of your question. I will try to help.

Thanks for your understanding.

-Steve

I'm a retired attorney who was asked by a friend to build a website. In a prior lifetime, in a galaxy far, far away and long, long ago, I was a computer systems analyst / programmer. I'm a novice autodidact in CSS, JavaScript and HTML learning in part by example.. I've asked questions on this forum and been lucky enough to have others help me, so I'm inclined to answer any question I can. Pay it forward.

  • 2 years later...
Posted

I'm trying to reposition the buttons on my Coverpage so that they're centered and just above the headline. Any clue how to do that with code injection?

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.