Jump to content

Two buttons, one page, two different colors

Recommended Posts

Hello.

First things first, I'm extremely, HUGELY ignorant abour codification. But I have my website almost finished and I don't want to call a designer after I managed to solve every single question I had along the way (which I assume are very silly questions but an endeavor I'm very proud of). My website has became a sort of a hobby and like all hobbysts I want it all to myself. 

As a matter of fact, is not a very complex website. It's more photograph album family. Had it been professional or with intention to monetize I'd called the designer hands down.

But in the last inch of the field I came across the dreaded codification...

I just want to put in some pages (not all of them) two buttons with different color, say blue and green one on top of the other. In some pages there'll be several of these couples of buttons, in some just one couple, in some just one button, in some none at all. 

In my ignorance, I'm assuming it's an easy piece of code I can insert in the CSS editor in the Design module. But of course, if it's too hard I don't want to abuse anybody asking for something very expensive in the market. 

Can you help me or should I remove completely this feature of the album?

Regards. 

Link to comment

Hello. 

Now, usign a Block Identifier Plugin for Chrome I've managed to change the specific button.

#block-98f4117fe9611e045cba .sqs-block-button-element--small {color: #0000ff; border-color: #0000ff;}

Now there only remains to change the color when hover with the cursor. I understand this is the code I need 

.btn1:hover {      background-color: #0000ff;      color: white; }

But I don't understand the syntax. Should How do I join those two codes?

Regards

Edited by lftenorio
Link to comment
#block-98f4117fe9611e045cba .sqs-block-button-element--small {
  color: #0000ff; 
  border-color: #0000ff;
}
#block-98f4117fe9611e045cba .sqs-block-button-element--small:hover {
	background: red;
	color: black;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Hello everyone and thank you for so useful tip.

 

I've downloaded Block Identifier Plugin for Chrome so I get the button ID: #block-f74f43e2ad2fe1d526db

but I don't know how to get this: .sqs-block-button-element--small...

Is it in any part of my pages that I can get it?

Thank you very much.

Link to comment
6 minutes ago, Montse_Soria said:

Hello everyone and thank you for so useful tip.

 

I've downloaded Block Identifier Plugin for Chrome so I get the button ID: #block-f74f43e2ad2fe1d526db

but I don't know how to get this: .sqs-block-button-element--small...

Is it in any part of my pages that I can get it?

Thank you very much.

Hover on button > Right Click > Inspect Element

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Thank you very much tuanphan

At the moment I am not been able to solve it, even with your explanation, but it's been very useful and I hope I could soon 😉

 

----

Hello everyone and thank you for so useful tip.

 

I've downloaded Block Identifier Plugin for Chrome so I get the button ID: #block-f74f43e2ad2fe1d526db

but I don't know how to get this: .sqs-block-button-element--small...

Is it in any part of my pages that I can get it?

Thank you very much.

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

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