changing archive-item-link display settings

i’m hopping using some CSS code to change a display of a link.

In some of my blogs, the first posting I am using as an “introduction” page. In these pages I have placed an archive block set to an index in order to make a “page index”. This is working just fine.

What I would like to do is make the links to the pages appear like my hyperlinks. These links have a red color for the text and have a hover background.

Now I found I can change a few text display setting of these links by using:

.archive-item-link

I can add an underline, and change the font size and weight.

But when trying to change the color or add a hover using the code I have been using, nothing changes.

Is this possible? Are these display settings set some where else? Or are the setting codes different?

Here are the settings I am using for hyperlinks:{color:#ff0206!important;}

a:hover{background:#c0c0c0!important; border-radius:4px!important; transition-duration: .4s;}

Website: ofwhitewalls.com

Here is a link to one of my introduction pages with a page index.

https://www.ofwhitewalls.com/hexagon-blog/blog-post-title-one-89c3t-c8gkl

I am using 7.1.

Thanks for any help.

Thank you so much! That worked!

Hi @tuanphan I currently have a blog page to display different projects for a website i am making for a client. I used the blog page so i would be able to filter through different category work titles (experience, public work, strategic change). 

I have then used an archive block to display these three categories to be filtered by. 

What i want to do now is: Create a hover and selection effect to these archive block items so you know what category is being selected (what projects are being displayed below)

Idealy i would want this selction to be shown as a black underline, or black box behind (like the button style used on the site). 

Even better - when hovered over, the title item has a black underline, and when selected it is highlighted with a black box behind, and text is white. 

I am currently using this code (but it is not quite working properly):

.archive-group-name-link{
  display: flex;
  width: 100%;
}

.archive-group-name-link:after {
  display: flex;
  content: '';
  width: 0px;
  height: 1px;
  transition: width .5s ease;
}

.archive-group-name-link:hover:after {
  width: 100%;
  background: black;
}

Any help or guidance on this would be very much appreciated. 

I have attached some visuals below 🙂

Site URL: https://ranunculus-lizard-zsfk.squarespace.com/work-blog

Password: kokoloco

8 hours ago, koko1234 said:

Hi @tuanphan I currently have a blog page to display different projects for a website i am making for a client. I used the blog page so i would be able to filter through different category work titles (experience, public work, strategic change). 

I have then used an archive block to display these three categories to be filtered by. 

What i want to do now is: Create a hover and selection effect to these archive block items so you know what category is being selected (what projects are being displayed below)

Idealy i would want this selction to be shown as a black underline, or black box behind (like the button style used on the site). 

Even better - when hovered over, the title item has a black underline, and when selected it is highlighted with a black box behind, and text is white. 

I am currently using this code (but it is not quite working properly):

.archive-group-name-link{
  display: flex;
  width: 100%;
}

.archive-group-name-link:after {
  display: flex;
  content: '';
  width: 0px;
  height: 1px;
  transition: width .5s ease;
}

.archive-group-name-link:hover:after {
  width: 100%;
  background: black;
}

 

Any help or guidance on this would be very much appreciated. 

I have attached some visuals below 🙂

Site URL: https://ranunculus-lizard-zsfk.squarespace.com/work-blog

Password: kokoloco

With Hover

Add this to Design > Custom CSS

a.archive-group-name-link[href*="blog/category"]:hover {
    background-color: black !important;
    color: white !important;
}
a.archive-group-name-link[href*="blog/category"] {
    padding-left: 3px;
    padding-right: 3px;
    white-space: nowrap;
}

With selected

Do you use Business or Commerce Plan?

12 hours ago, tuanphan said:

With Hover

Add this to Design > Custom CSS

a.archive-group-name-link[href*="blog/category"]:hover {
    background-color: black !important;
    color: white !important;
}
a.archive-group-name-link[href*="blog/category"] {
    padding-left: 3px;
    padding-right: 3px;
    white-space: nowrap;
}

With selected

Do you use Business or Commerce Plan?

@tuanphan that works! Thanks so much.

Is there a way to adjust the size of the black box? Make it bigger/more padding around the text?

Additionally, is there a way to keep the black box there, highlighting the title that has been selected?

I use the Business Plan for this website.

2 hours ago, koko1234 said:

@tuanphan that works! Thanks so much.

Is there a way to adjust the size of the black box? Make it bigger/more padding around the text?

Additionally, is there a way to keep the black box there, highlighting the title that has been selected?

I use the Business Plan for this website.

#1. Just adding padding value

If you need to add space on top/bottom, add attribute

padding-top

padding-bottom

#2. With selected, it will be more complex

Add this code to Code Injection > Footer

<script>
if (document.location.pathname.indexOf("/work-blog/category/Experience") == 0) {
    document.querySelector('body').classList.add('t-active')
}
  if (document.location.pathname.indexOf("/work-blog/category/Public+Work") == 0) {
    document.querySelector('body').classList.add('t-active')
}
  if (document.location.pathname.indexOf("/work-blog/category/Strategic+Change") == 0) {
    document.querySelector('body').classList.add('t-active')
}
  </script>
<style>
  body.t-active a.archive-group-name-link{
    background-color: black !important;
    color: white !important;
     padding-left: 3px;
    padding-right: 3px;
    white-space: nowrap;
}
</style>

20 hours ago, tuanphan said:

#1. Just adding padding value

If you need to add space on top/bottom, add attribute

padding-top

padding-bottom

#2. With selected, it will be more complex

Add this code to Code Injection > Footer

<script>
if (document.location.pathname.indexOf("/work-blog/category/Experience") == 0) {
    document.querySelector('body').classList.add('t-active')
}
  if (document.location.pathname.indexOf("/work-blog/category/Public+Work") == 0) {
    document.querySelector('body').classList.add('t-active')
}
  if (document.location.pathname.indexOf("/work-blog/category/Strategic+Change") == 0) {
    document.querySelector('body').classList.add('t-active')
}
  </script>
<style>
  body.t-active a.archive-group-name-link{
    background-color: black !important;
    color: white !important;
     padding-left: 3px;
    padding-right: 3px;
    white-space: nowrap;
}
</style>

 

Thank you for all that!

#1. the padding works great. 

#2. the section works, however it selects all three titles in the arhive block instead of just one - is there something i can change so it just highlights the one title clicked on? 

And, would it be possible to just have an underline instead of the black box?

Again, thank you so much for all your help!

4 hours ago, koko1234 said:

Thank you for all that!

#1. the padding works great. 

#2. the section works, however it selects all three titles in the arhive block instead of just one - is there something i can change so it just highlights the one title clicked on? 

And, would it be possible to just have an underline instead of the black box?

Again, thank you so much for all your help!

Try this new code

<script>
if (document.location.pathname.indexOf("/work-blog/category/Experience") == 0) {
    document.querySelector('body').classList.add('t-active1')
}
  if (document.location.pathname.indexOf("/work-blog/category/Public+Work") == 0) {
    document.querySelector('body').classList.add('t-active2')
}
  if (document.location.pathname.indexOf("/work-blog/category/Strategic+Change") == 0) {
    document.querySelector('body').classList.add('t-active3')
}
  </script>
<style>
  body.t-active1 a.archive-group-name-link[href="/work-blog/category/Experience"] {
    border-bottom: 1px solid black;
    padding-left: 3px;
    padding-right: 3px;
    white-space: nowrap;
}
body.t-active2 a.archive-group-name-link[href="/work-blog/category/Public+Work"] {
    border-bottom: 1px solid black;
    padding-left: 3px;
    padding-right: 3px;
    white-space: nowrap;
}
body.t-active3 a.archive-group-name-link[href="/work-blog/category/Strategic+Change"] {
    border-bottom: 1px solid black;
    padding-left: 3px;
    padding-right: 3px;
    white-space: nowrap;
}
</style>