Visual theme – Next/Previous link colours reversed
-
The Visual theme’s default colours display all links as green but with white on hover. However, the Next and Previous links display reversed (white but green on hover), which are lost at the bottom of the blog.
I’d like to make this consistent with the rest of my site and used this code, but it’s not changing anything:
.nav-previous a, .nav-next a {
color: #40d7bc;
}.nav-previous a, .nav-next a:hover {
color: #FFFFFF;
}Is the above wrong? Any help would be great, thanks!
The blog I need help with is: (visible only to logged in users)
-
Please try this CSS:
[class*="navigation"] .nav-previous a, [class*="navigation"] .nav-next a { color: #40d7bc } [class*="navigation"] .nav-previous a:hover , [class*="navigation"] .nav-next a:hover { color: #FFF } -
Great, that worked perfectly! Many thanks for your help:)
Another question and hope you can help, I’ve plugged in my copyright info in the footer but it doesn’t display on every page i.e. only on the Home page then it disappears. This is what I’ve used:
.blog-credits::before {
content: “©2015 Image Earth Blog | All rights reserved.”;
padding-right: 60px;
}I’ve padded it so there’s space between the WP site info. However ideally, what I’m after is for the above copyright to wrap around (be incorporated in) the existing default “Image Earth Blog” text that displays on the left-side but to also display on every site page as a footer should.
I’d like to display the WP default them info on the right-side at all times on all pages – at the moment, it seems to display on the right-side of the Home page but then moves to the left-side for the rest of the site pages. -
It might be difficult to replicate the homepage footer style on individual post pages.
Please try this style and see if you like it.
.site-info { text-align: right; } .site-info a[href="https://wordpress.com/?ref=footer_blog"]:before { content: "©2015 Image Earth Blog | All rights reserved."; float:left; } -
Thanks again staff-happychia! The code works well for all pages except the 1st Home infinite scroll page although the 2nd Home infinite scroll page is correct. I need to play around with it so the 1st Home page displays consistent to all other pages in my site.
Thanks again – excellent help!
-
My footer code so far:
.site-info {
text-align: right;
font-size: 11px;
}.site-info {
content: “©2015 Image Earth Blog | All rights reserved.”;
font-size: 11px;
}.site-info a[href=”https://wordpress.com/?ref=footer_blog”]:before {
content: “©2015 Image Earth Blog | All rights reserved.”;
float: left;
}#infinite-footer .blog-info a:before {
content: “© 2015 “;
font-weight:normal;
font-size: 11px;
}#infinite-footer .blog-info a:after {
content: ” | All rights reserved. “;
font-weight:normal;
font-size: 11px;
} -
Forgot to note, the a[href=”https://wordpress.com/?ref=footer_blog”] links in your above code takes me to a WP login page, is this correct? Thought that each page’s footer link should go back to my blog’s Home page or have I got this completely wrong?
-
Footer credits does take the user to WordPress.com login page. That’s the correct behavior.
-
-
Still can’t get the Home infinite scroll page’s default “Image Earth Blog” text to display as the rest of the footer text, this is the code I’ve also tried:
#infinity-blog-title .blog-info {
font-weight: normal;
font-size: 11px;
}Also, I’m trying to change the colour of the category in my Related Posts (not the green link, just the “In Category”), is this the correct code? (not sure if I’ve mucked something up as now they’re not displaying at all!)
#jp-relatedposts-items p {
color: #DDD;
font-size: 13px;
} -
I am sorry I can’t help you with getting the blog name to the footer on the other pages.
However here is the CSS for changing the “In Category” color:
p.jp-relatedposts-post-context { color: yellow; font-size: 13px; }You almost got it correct. We should use dot(.) instead of hash(#) because jp-relatedposts-post-context is a CSS class name, not ID.
-
I tried this code last night and also with the “p” first (before your reply):
.jp-relatedposts-post-context {
color: #DDD;
font-size: 13px;
}But, this doesn’t change anything, so not sure what’s wrong here – may have to leave it as is.
I’m trying to force the default “Image Earth Blog” text to display the same as the rest of the surrounding footer. Should I post this as another thread?
-
-
But, this doesn’t change anything, so not sure what’s wrong here – may have to leave it as is.
I can see #DDD color taking effect on your blog. But the contrast between #DDD and the default color is not much so it is not noticeable unless we observe it carefully. If you change #DDD to some dark color like yellow, you will notice the change. So leave #DDD as is unless you want a different color.
I’m trying to force the default “Image Earth Blog” text to display the same as the rest of the surrounding footer. Should I post this as another thread?
I think it is a good idea. I’d like to learn how to do it so please create another new topic :-)
-
Thanks again for your topic – I did try a different colour but couldn’t see any result. I’ll leave it as is for the moment.
No problem, I’ll start a new topic, thanks again for your help:)
-
I was going to start a new topic as you suggested, but the footer seems to be working now, this is code:
.site-info {
text-align: right;
font-size: 11px;
}.site-info {
content: “©2015 Image Earth Blog | All rights reserved.”;
font-size: 11px;
}.site-info a[href=”https://wordpress.com/?ref=footer_blog”]:before {
content: “©2015 Image Earth Blog | All rights reserved.”;
float: left;
font-weight: normal;
font-size: 11px;
}#infinite-footer .blog-info a {
float: left;
font-weight: normal;
font-size: 12px;
}#infinite-footer .blog-info a:before {
content: “© 2015 “;
font-weight:normal;
font-size: 11px;
}#infinite-footer .blog-info a:after {
content: ” | All rights reserved. “;
font-weight:normal;
font-size: 11px;
}The only thing that’s not working is the underline on hover for the static page footers – not sure how to fix this one?
-
Hi Nilla,
On static pages, the custom text added to the footer is not a link, so it won’t display the same behavior as links.
With CSS alone it’s not possible to insert links into content. If you have any other questions, please let us know.
-
-
Hi, my following code for “In Category” isn’t changing anything:
p.jp-relatedposts-post-context {
color: #CCC;
font-size: 12px;
}I’ve tried different sizes and colours but to no avail, staff-happychia suggested it was because of the #DDD colour I used but regardless of the colour, nothing seems to change. Do I have the wrong code?
Many thanks again -
On a closer look, I found another specific rule that is setting opacity to 0.6 which is why the full color is not visible.
So let’s try this rule in which we make the “In Category” fully opaque and set the color:
div#jp-relatedposts div.jp-relatedposts-items .jp-relatedposts-post .jp-relatedposts-post-context { opacity: 1; color: #ccc; font-size: 12px; }
- The topic ‘Visual theme – Next/Previous link colours reversed’ is closed to new replies.
WordPress.com Forums 