Inserting a back button on attachment pages

[tatami]

I'm using a portfolio with quite long descriptions so I've included the opening copy followed by a 'Read more' button, which takes the user to the attachment page. Can anyone tell me how I can include on attachment pages a 'Back' button in the same style as the 'Read more' button? I'd really appreciate some help here. Thanks.

http://aenigma-images.com

[Marcy]

It looks like you have this as you describe above. If so, can you please mark it Resolved?
How to is 7. on this page

Community Forum FAQs

---

Marcy | Amethyst Website Design | Twitter

[tatami]

Marcy, thanks for noticing. I've resolved it to an extent but not entirely. What I'd really like to do is style the button so the roll-over color of button matches my theme – i.e. it looks and works like the other buttons on my website. Can you help with that?

[Tom]

Hi @tatami,

Your new button includes a lot of unnecessary inline style code that is not present with the plugin's button on the grid. That kinda gets in the way of matching it to your theme. (not impossible, just more futzing to make it work).

Could you share with us how you placed the button? PHP/ JS / code / plugin / etc.

---

Choose your next site design from over 350 Genesis themes.
[ Follow me: Twitter ] [ Follow Themes: Twitter ] [ My Favourite Webhost ]

[tatami]

Tom, thanks for taking an interest. As you can see, I have little experience of coding so I used a button from Shortcode Ultimate and messed around with it until it approximated to what I was looking for.

This is the shortcode:

[su_button background="#0b0c0b" size="3" radius="0" Back]Back[/su_button]

And this is what it references:

.su-button span {
text-transform: none !important;
font-family: Oswald, Arial, sans-serif;
font-size: 13px;
font-weight:bold;
text-align:center;
background-color: transparent;
}

The result is not great, though, and if you could help me get it right I'd be really grateful.

[Marcy]

Try adding this just below the CSS above:

.su-button span:hover {
  background: #28ac86; !important;
}

If that doesn't work, then try:

.single-attachment .su-button span:hover {
  background: #28ac86; !important;
}

---

Marcy | Amethyst Website Design | Twitter

[Tom]

Marcy: your code is, of course, on the mark 🙂

@tatami: The style (default) style selected in SU adds an inline border style also, that doesn't want to be messed with. Please try your button with the "flat" style, plus Marcy's CSS to change the color on hover (I'm really surprised that there's no button hover settings in Shortcodes Ultimate.)

You could also just use a native "button" and use (or mod) your theme styles to suit, or to make all buttons the same.
(Eleven40 green doesn't match your plugin's button color.)

<a class="button" href="http://aenigma-images.com/">Back</a>

---

Choose your next site design from over 350 Genesis themes.
[ Follow me: Twitter ] [ Follow Themes: Twitter ] [ My Favourite Webhost ]

[tatami]

Marcy, thank you so much for your suggestions. Both code snippets work and provide a big improvement over what I had originally, except that the button font has reverted to Palatino instead of Oswald.

Tom, you're right that I'm getting a border when I mouseover the back button. I'd love to get this just right but I'm afraid I'll need you to give me step-by-step instructions for how to do that. Could I persuade you to? I'd really appreciate your help here.

[anusorbet]

Thanks for all of that!

[Marcy]

To the CSS that you posted, you may need to add !important to anything that doesn't do what you want, like the font. I also added border: none. So it would be:

.su-button span {
text-transform: none !important;
font-family: Oswald, Arial, sans-serif !important;
font-size: 13px;
font-weight:bold;
text-align:center;
background-color: transparent;
border: none !important;
}

The above is if there are not settings to set the font and remove the border in the plugin.
And you may still need to add

border: none !important;

to the span:hover code I posted above.

---

Marcy | Amethyst Website Design | Twitter

[tatami]

Thanks for getting back to me, Marcy.

So the code I now have looks like this:

.su-button span:hover {
background: #28ac86; !important;
text-transform: none !important;
font-family: Oswald, Arial, sans-serif !important;
font-size: 13px;
font-weight:normal;
text-align:center;
background-color: transparent;
border: none !important;
}

Unfortunately it doesn't quite solve things. While the mouseover font is correct, the steady state font is Palatino. And the mouseover is not picking up the green of my theme. Do you have any more suggestions? Thanks again.

[Marcy]

Do you see above that I recommended adding the Oswald font with !important to the
.su-button span
(the NO HOVER .su-button span)?

Style everything you need on that selector - .su-button span - and use !important as needed.

Only THEN style the .su-button span:hover state; the one that you said worked. You should not need to have a font-family or font-size on the hover, if you have styled them in the span.

And if you need to use !important in the :hover state, you will need !important for the same declaration in the normal span state.

So start with this

.su-button span {
text-transform: none !important;
font-family: Oswald, Arial, sans-serif !important;
font-size: 13px;
font-weight:bold;
text-align:center;
background-color: transparent;
border: none !important;
}

.su-button span:hover {
  background: #28ac86; !important;
}

And then decide what else you need.

---

Marcy | Amethyst Website Design | Twitter

[tatami]

Marcy, you've solved it for me except that the mouseover state shows a black border. I tried this:

.su-button span:hover {
background: #28ac86; !important;
border: none !important;
}

But the black border persists. Is there a way of getting rid of it?

I hope I'm not pushing my luck by being so persistent! And thanks again.

[Marcy]

Add this before the code above. That should do it.

a.su-button.su-button-style-default {
  border: 0 !important;
}

The border: none !important lines in the code above are not needed.

---

Marcy | Amethyst Website Design | Twitter

[tatami]

Marcy, for some reason, it seems necessary to retain the border: none !important lines in the code. But I'm not worried about that because the final line of code you've suggested has got me to where I want to be. I'm really, really grateful for your help and I wish there was some way in which I could reciprocate. Thank you so much.

[Marcy]

I'm glad it's working for you now!

Please mark this Resolved. The instructions are 7. in the FAQs at the top of this page.

---

Marcy | Amethyst Website Design | Twitter

[Author]

Posts