Highlighting portfolio items on home page « Support Forum | Kriesi.at

Support Forum » Angular

Highlighting portfolio items on home page

10 posts from 2 voices

Started 6 months ago by kizuri
Latest reply from Ismael
This topic is not a support question

Tags:

No tags yet.

kizuri
Member

Hello,

I'm so in love with theme!

Is there a way to highlight the portfolio name on the home page? Rather like Eunoia?

At the moment when the mouse hovers over a portfolio name it underlines the name. I'd like to highlight the white box instead.

Thanks so much!

Posted 6 months ago #

Ismael
Moderator

Hi,

You can add something like this on your custom.css

.portfolio-title a {
width: 202px;
height: 38px;
display: block;
position: relative;
padding: 18px 0 0 30px;
}

.portfolio-title a:hover {
background: red;
}

#top .portfolio-title {
padding: 0!important;
}

Regards,
Ismael

Posted 6 months ago #

kizuri
Member

Awesome, thank you!

Would I insert the text change color in the same code? To replace the underline?

Thanks again.

Posted 6 months ago #
Ismael
Moderator
Hi kizuri,

Yes, you can change the color in the same code. Just insert it inside this block of code:
```
.portfolio-title a {
   color: #000;
}
```
If you want to change it when the title is hovered, put it inside :
```
.portfolio-title a:hover {
   color: #000;
   text-decoration: none;
}
```
just adjust the color value. Also, the text-decoration: none; removes the underline on the title when hovered.

Regards,
Ismael
Posted 6 months ago #
kizuri
Member

Hello,

I'm sorry if I'm missing something obvious, but it doesn't seem to be working:

}
#top .portfolio-title, .portfolio-sort-container .inner-entry, .ajax_loading, .ajax-control a, .inner_column, .ajax_slide .inner_slide, #top .ajax_slide .slideshow, #top .inner-entry .slideshow, .ajax_slide .entry-content {
background-color: #fcf2fc;
}
.portfolio-title a {
width: 202px;
height: 38px;
display: block;
position: relative;
padding: 18px 0 0 30px;
}

.portfolio-title a:hover {
background: #4f044f;
}
.portfolio-title a:hover {
color: #ffffff;
text-decoration: none;
}

I'd like the font colour to be white when the hover color is purple.

Thanks SO much.

Posted 6 months ago #
Ismael
Moderator

Hi kizuri,

I don't think there's something wrong in your code. Can you post a link to your site? so we can have a look at it and check why the code isn't working.

Regards,
Ismael

Posted 6 months ago #
kizuri
Member

Thank you!

The site is http://www.hummingbirdhall.org

This is a test site until I move it to the proper domain.

I'd like the text to be white when the background is purple, please.

Thanks again!

Posted 6 months ago #

Ismael
Moderator

Hi kizuri,

Try to replace this code:

.portfolio-title a:hover {
color: #ffffff;
text-decoration: none;
}

With this code:

#top .portfolio-title a:hover {
color: white !important;
text-decoration: none;
}

Hope this helps. :)

Regards,
Ismael

Posted 6 months ago #

kizuri
Member

Yay! Amazing! Thank you so much!

Posted 6 months ago #
Ismael
Moderator

Hi kizuri,

Glad we could help. :)

Cheers,
Ismael

Posted 6 months ago #

RSS feed for this topic

Reply

You must log in to post.

Kriesi.at - Wordpress Themes and HTML Templates

Highlighting portfolio items on home page

Reply

Support Forum usage - Please read

Check out some of our WordPress Themes

Blog Categories

Latest Themes

Pages

About me…