Chance hover-effect and link color

Hi there!

The following part of the code Kathryn provide would change the hover effect of the links to #e06d5e (the same as Illustratr’s):

#infinite-footer .blog-credits, #infinite-footer .blog-credits a, #infinite-footer .blog-credits a:hover, #infinite-footer .blog-info a, #infinite-footer .blog-info a:hover, #infinite-handle span button:focus, #infinite-handle span button:hover, .comment-metadata, .comment-metadata a, .comments-area .comment-likes .comment-like-feedback, .entry-footer, .entry-footer a, .entry-meta, .entry-meta a, .hentry div#jp-relatedposts div.jp-relatedposts-items .jp-relatedposts-post-context, .hentry div.sd-rating h3.sd-title, .hentry div.sharedaddy h3.sd-title, .jetpack-portfolio:not(.has-post-thumbnail) .project-info .entry-meta, .jetpack-portfolio:not(.has-post-thumbnail) .project-info .entry-meta a, .page-links>.page-links-title, .page-links a, .pd-rating, .portfolio-entry-meta, .portfolio-entry-meta a, .post-navigation .meta-nav, .site .tiled-gallery-caption, .site-content .contact-form label span, .site-content .jetpack-recipe .jetpack-recipe-meta, .site-description, .site-footer, .site-footer a, .taxonomy-description, .widget_goodreads div[class^="gr_custom_author"], .widget_goodreads div[class^="gr_custom_title"] a:focus, .widget_goodreads div[class^="gr_custom_title"] a:hover, .widget_jetpack_display_posts_widget .jetpack-display-remote-posts p, .widget_recent_entries .post-date, .widget_rss .rss-date, .widget_rss .rssSummary, .widget_rss cite, .wp-caption-text, a:active, a:focus, a:hover, blockquote, button:focus, button:hover, input[type="button"]:focus, input[type="button"]:hover, input[type="reset"]:focus, input[type="reset"]:hover, input[type="submit"]:focus, input[type="submit"]:hover, #comments #comment-form-share-text-padder textarea, #comments #respond #comment-form-comment textarea, #comments #respond .comment-form-service a:focus, #comments #respond .comment-form-service a:hover, #comments #respond form *, #comments #respond p.comment-subscription-form label, .widget.top_rated #top_posts, .widget_akismet_widget .a-stats a:focus, .widget_akismet_widget .a-stats a:hover, .widget_flickr #flickr_badge_uber_wrapper td a:last-child:focus, .widget_flickr #flickr_badge_uber_wrapper td a:last-child:hover, .widget_upcoming_events_widget .event-when {
    color: #e06d5e;
}

Let me know how that works out for you!

Hi,

im more and morge getting into it but:
– do i only hove to chance the color code to #e06d5e or do i have to replace the hole part of the code Kathryn provided?
– when i only chance the color code i see a few things chancing red – but not the hover-effect on the pictures
– also i want my project titels not ‘in’ but ‘under’ the pictures

Is there a tool where i can compare css, now it’s hard for me to find out iff the code you provide differ from the code Kathryn provided, or that only the color code differ.

Cheers

Hi @jasperh,

– do i only hove to chance the color code to #e06d5e or do i have to replace the hole part of the code Kathryn provided?

You only need to change the colour code to #e06d5e. The rest of the CSS can remain the same.

when i only chance the color code i see a few things chancing red – but not the hover-effect on the pictures

You can change the colour of the hover effect on the pictures with the following snippet:

.jetpack-portfolio.hover .image-link,
.jetpack-portfolio.hover .image-link:hover {
	background: #e06d5e;
}

– also i want my project titels not ‘in’ but ‘under’ the pictures

You could move the title underneath the portfolio photos with the following custom CSS:

.project-info {
    position: static;
    opacity: 1;
}

If you use the above, the please also remove the following part of the custom CSS provided by Kathryn (which sets the title to white) so that the titles remain visible on the white background:

.portfolio-wrapper .project-info .entry-title a, .portfolio-wrapper .project-info .entry-title a:focus, .portfolio-wrapper .project-info .entry-title a:hover {
    color: #FFF;
}

For future: Can you please create different threads on this forum for each different question that you have? It’s much easier for us to keep track that way. ??

Is there a tool where i can compare css, now it’s hard for me to find out iff the code you provide differ from the code Kathryn provided, or that only the color code differ.

What Operating System and browser are using? Many have a find tool that you can copy text to in order to find any matching text.

Chrome has the following documentation on how to use their tool:

https://support.google.com/chrome/answer/95635?hl=en-GB

Thanks for helping, maybe i’m not clear enough in my questions:

– what i want is exactly the same hover effect as in the Illustratr Theme (the red square and whit cross, and not hovering over the titels)

– or maybe i can solve all topics at once by chancing to the Illustratr Theme and ask you the help me get the tekst of this theme on the left side (as in the Orvis Theme)

Is this an option?

– what i want is exactly the same hover effect as in the Illustratr Theme (the red square and whit cross, and not hovering over the titels)

The CSS required to achieve that is fairly advanced and, if you prefer the look and feel of Illustratr, then switching to that theme may be the better option here.

– or maybe i can solve all topics at once by chancing to the Illustratr Theme and ask you the help me get the tekst of this theme on the left side (as in the Orvis Theme)

If you choose to switch to a different theme, then you could consider create two columns on individual portfolio pages using HTML. You could also have a browse through the plugin repository for plugins that create columns on your behalf.

You can find some further guidance around those two options here:

https://vip.wordpress.com/documentation/how-to-create-columns-in-posts/

Let me know what you decide to do. ??

Hi there @siobhyb,

this day i had the feeling that all of this customizing was getting just to complicated for me. When i told a friend he suggested me to buy the Avada Theme and so i did just now. I wanted to tell you this before you started te help me any further. But you where just a few minutes ahead…sorry

A hope i didn’t bother you to much and i hope this Avada works for me
Have a nice weekend!

Hi @jasperh,

Thank you for letting me know! I hope Avada works out for you and we’re right here if you decide to give one of our themes another try.

Have a lovely weekend.