Coding CSS : BRINE/WAV : Body+Footer hyperlink hover color

Site URL: https://destoursrecords.squarespace.com

Hi everybody, 

First of all I hope you all are save and good with this covid-19 virus raging around the world. 

I'm far from beeing a coder/website builder but i'm trying with the experience and resources I have to build a website for music label. And I would like to adapt the standard Brine / WAV template but i'm running in some problems that I tried to fix with some CSS code... but it maked it more worse then better. So I'm asking your help guys. 

SITE : https://destoursrecords.squarespace.com

PASS : destours2020

So I would like to change with some CSS coding : 

1. Standard in every text box on every page, that a hyperlink is in the same color as the text // hsl(180, 35%, 14%) // and when hovering over the hyperlink it turns in yellow // hsl(45, 100%, 54%) // but WITHOUT underlining (like in the header menu above)

2. Standard in the footer box on every page, that a hyperlink is in the color // hsl(46, 0%, 35%) // and when hovering over the hyperlink it urns in yellow // hsl(45, 100%, 54%) // but WITHOUT underlining (like in the header menu above)

3. In the footer I have a subscribe box... It's making the footer to big. Is it possible to "compress" it more horizontally? That the space between every line is smaller?

I tried some CSS coding from the help section and here on the forum but it more harm then good to my site, 

Thank for you time reading my problem! Hope you guys can help me! 

All the best, 
Maurice

1. Standard in every text box on every page, that a hyperlink is in the same color as the text // hsl(180, 35%, 14%) // and when hovering over the hyperlink it turns in yellow // hsl(45, 100%, 54%) // but WITHOUT underlining (like in the header menu above)

Add to Home > Design > Custom CSS

.sqs-block-content p a {
    color: hsl(180, 35%, 14%);
}
.sqs-block-content p a:hover {
    border-bottom: none;
    color: red;
}

2. Standard in the footer box on every page, that a hyperlink is in the color // hsl(46, 0%, 35%) // and when hovering over the hyperlink it urns in yellow // hsl(45, 100%, 54%) // but WITHOUT underlining (like in the header menu above)

hover, underline will disappear or change color?

3. In the footer I have a subscribe box... It's making the footer to big. Is it possible to "compress" it more horizontally? That the space between every line is smaller?

.newsletter-block .newsletter-form-field-element {
    padding-top: 10px;
    padding-bottom: 10px;
}
.newsletter-block .newsletter-form-wrapper .newsletter-form-button {
    padding-top: 10px;
    padding-bottom: 10px;
}

18 hours ago, tuanphan said:

1. Standard in every text box on every page, that a hyperlink is in the same color as the text // hsl(180, 35%, 14%) // and when hovering over the hyperlink it turns in yellow // hsl(45, 100%, 54%) // but WITHOUT underlining (like in the header menu above)

Add to Home > Design > Custom CSS

.sqs-block-content p a {
    color: hsl(180, 35%, 14%);
}
.sqs-block-content p a:hover {
    border-bottom: none;
    color: red;
}

2. Standard in the footer box on every page, that a hyperlink is in the color // hsl(46, 0%, 35%) // and when hovering over the hyperlink it urns in yellow // hsl(45, 100%, 54%) // but WITHOUT underlining (like in the header menu above)

hover, underline will disappear or change color?

3. In the footer I have a subscribe box... It's making the footer to big. Is it possible to "compress" it more horizontally? That the space between every line is smaller?

.newsletter-block .newsletter-form-field-element {
    padding-top: 10px;
    padding-bottom: 10px;
}
.newsletter-block .newsletter-form-wrapper .newsletter-form-button {
    padding-top: 10px;
    padding-bottom: 10px;
}

 

Hello TuanPhan! 

Thank you!

For point / question nr2 : hover, underline will disappear or change color? 

Please, no underlining standard and when hovering over it.  Only change color to the yellow. Same as the menu above in the header. 

BTW if I copy paste your CODE. nothing happen? Did I do something wrong? 

The code in the design / css box is this : 

.Header, .Mobile {
  width: 100%;     /* for IE and Edge */
  position: fixed; /* for IE and Edge */
  position: -webkit-sticky; /* For Safari 6.1+ */
  position: sticky; /* Latest browsers */
  top: 0;
  z-index: 4;
}
.sqs-block-content p a {
    color: hsl(180, 35%, 14%);
}
.sqs-block-content p a:hover {
    border-bottom: none;
    color: red;
}
.newsletter-block .newsletter-form-field-element {
    padding-top: 10px;
    padding-bottom: 10px;
}
.newsletter-block .newsletter-form-wrapper .newsletter-form-button {
    padding-top: 10px;
    padding-bottom: 10px;

}

On 4/22/2020 at 4:32 PM, destoursrecords said:

Hello T

Have you solved yet?

Hi TuanPhan!

Non sadly... I tried some coding but no luck. 

I try to explain with some picture examples. 

First Picture 

• Social link bar : - Icons must be yellow when hover over 
• Footer has unnecessary space between subscribe and "destours records playlist" link. 

Second Picture 

• All the links to extern pages has a underline over it -> no underline for links
• When hovering over the link it turns yellow (thats good!) but stil has a underline -> no underline when hovering over links

Third Pictures 

• This "head" type : No need for underline for links
• No underline when hovering over it
• need to be yellow when hovering over it 

My CSS CODE so far : 

.Header, .Mobile {
  width: 100%;     /* for IE and Edge */
  position: fixed; /* for IE and Edge */
  position: -webkit-sticky; /* For Safari 6.1+ */
  position: sticky; /* Latest browsers */
  top: 0;
  z-index: 4;
}
.sqs-block-content p a {
  color: hsl(180%, 35%, 14%);
}
.sqs-block-content p a:hover {
    border-bottom: none;
    color: hsl(45, 100%, 54%);
}
.newsletter-block .newsletter-form-field-element {
    padding-top: 10px;
    padding-bottom: 10px;
}
.newsletter-block .newsletter-form-wrapper .newsletter-form-button {
    padding-top: 10px;
    padding-bottom: 10px;
}

WHAT i'm doing wrong!?

THANK YOU so much for your effort!