Hi there,
Can you post a link to your site?
I found your site at https://portwalks.ie/
This would change the colour of text and links:
.home .entry-content {
color: #000000; /* regular text */
}
.home .entry-content a {
color: #bb00bb; /* links */
}
That said, any coloured text is probably going to be tricky to read over your selected image. You may want to put a translucent overlay behind it instead, or choose an image that doesn’t have quite so much colour/saturation variation in it. Here’s an example of a translucent overlay:
.home .entry-content {
background-color: rgba(255, 255, 255, 0.3);
padding: 10px 20px;
}
Let me know how it goes.
Hi Kathryn
Thanks for getting back to me so quickly i’ve implemented that code and it improves legibility but u r right the image is making things difficult – but it will have to stay for the moment until I can sort something else out.
Thanks you
Sheelagh
actually maybe i should use a button??
If you’d like to keep the white text, you could try a different colour (grey) for the translucent overlay. Give this a try instead of what I gave you above:
.home .entry-content {
background-color: rgba(0, 0, 0, 0.2);
padding: 10px 20px;
}
You can play with the opacity value, changing 0.2 (20% black) to make the overlay darker or lighter, until you get an effect you’re happy with.
Hi Kathryn that CSS certainly improved things – but if I could get the button to work that would be even better.
The following code produces a perfect button but when you hover over it it turns black with a circular Stop symbol like a traffic sign
<a href="https://tinyurl.com/mnhptya">Register</a>
I picked the code from the Goran theme implementation documentation
-
This reply was modified 9 years ago by
Kathryn Presner. Reason: put HTML in code tags
That’s definitely easier to read!
Try adding Goran’s built-in button class to get the button effect:
<a href="https://tinyurl.com/mnhptya" class="button">Register</a>
Let me know how that goes. I also wrote a guide to making call-to-action buttons that you can check out for more info! The first example there is actually from Goran.
Hi Kathryn that CSS certainly improved things – but if I could get the button to work that would be even better.
The following code produces a perfect button but when you hover over it it turns black with a circular Stop symbol like a traffic sign
Register
I picked the code from the Goran theme implementation documentation
Hi Sheelagh – did you mean to post the same reply again? Your button looks good to me now, but if you want to tweak it in some way, just let me know if you need help with it!
Hi Kathryn
the URL linking is working fine now thanks you. I checked the button documentation you shared and tried to change the hover state to white on red (currently its white on black)
using this code – but no success
/* Add a rollover background colour but keep the text white */
.button:hover,
.button:focus,
.button:active {
background: #B23D3C;
color: #fff;
}
You’re close!
Give this a try and let me know how it goes:
.entry-content a.button:hover, .entry-content a.button:focus, .entry-content a.button:active {
background-color: #b23d3c;
border-color: transparent;
}
That button looks really great on chrome Kathryn except that on an iphone the button doesn’t respond quite the same way – when you hover the whole button turns a kind of grey brown translucent colour please take a look at this screenshot https://drive.google.com/file/d/0By6dWjvsJpvpZ3ZxV2dlTXNiN2pBVW9nQ1ZlM1Q1Q1o1SGZR/view?usp=sharing
Could you try removing the default transition style by replacing what I gave you above with this:
.entry-content a.button:hover, .entry-content a.button:focus, .entry-content a.button:active {
background-color: #b23d3c;
border-color: transparent;
transition: none;
}
Let me know if that’s better on the phone.
Hi Kathryn
Thanks that is much improved on the iphone. There is a definite change of colour on click .. but not hover ..if your finger lingers lightly on the button a popup window offering Open| Open in new tab | Add to reading list | Copy | Cancel – so I guess that’s ios having its on way. Its good enough to be going on with so unless something springs to your mind I think we can say case closed – with your help the front page looks a lot better than before.
Thank you, Sheelagh
OK, one more try! There isn’t actually a hover state on mobile – that’s a mouse/trackpad only state, but I do see something slightly funky on the phone. Could you remove the previous button CSS and try this instead.
.entry-content a.button {
border: none;
}
.entry-content a.button:hover, .entry-content a.button:focus, .entry-content a.button:active {
background-color: #b23d3c;
border: none;
transition: none;
}
Let me know if any better with the above!
