Affiliate Coupons Help

tjstaste
(@tjstaste)

8 years, 4 months ago

I need help with some custom CSS. I am so dense with it. Lol.

It is in regards to the Affiliate Coupons plugin. I contacted them for help with this but they said they could not. I’m pretty sure it’s pretty simple, I’m just so dense with this.

Here’s the page where I am testing the plugin

Here’s what I’d like to do:

1) The obvious. Get the black background just behind the text to go away.
2) Change the text for the percent off, coupon title, subtitle (type), coupon code, expiration date, and button text to Oswald and so I can change it to whatever color I want.
3) Change the background of each entire coupon box to white.
4) Place a yellow dashed border with curved (border radius) corners around the entire coupon box.
5) Change the background of the coupon code to light gray.
6) If possible and not overly complicated, make the percentage box into a circle that overlaps over the outer edge of the whole coupon box a little.

Doable yes? Help please. Thank you kindly!

The blog I need help with is tjstaste.com.

The page I need help with: [log in to see the link]

Viewing 7 replies - 1 through 7 (of 7 total)

RossMitchell
(@rossmitchell)

8 years, 4 months ago

All you need to know about css is here:
https://www.w3schools.com/css

You need to use your browser inspector to identify the css class or id used on your html elements, then using the theme customizer > “additional css” to enter your changes, the changes in customizer are live which makes it easy. Start small and attack the style changes element by element.

Feel free to ask questions when you need to.
dacasper
(@dacasper)

8 years, 4 months ago
1. Add this to your theme’s CSS:
```
.entry-content code {
background-color: #fff
color: #000
}
```
2.
For changing the font, you’ll need to use a font plugin, or see whether your theme supports Google fonts.

3 and 4.
Add this CSS to your theme, to change the coupon code background:
```
.affcoups .affcoups-coupon-code {
background: #FFF
border: 2px dashed #FF0
}
```
Thread Starter tjstaste
(@tjstaste)

8 years, 4 months ago
Thank you, @rossmitchell and @dacasper! That made a HUGE difference.

A couple things I’m having trouble figure out:

1) There’s a light gray strip at the bottom of some of the coupon boxes and I can’t get it to turn to white.
2) I can’t reduce the space between the bottom of the button and the bottom of the yellow dashed line.
3) I can’t figure how to put padding/blank space between the bottom of one dashed yellow line and the top of the one below it (like not the background in red dashed border, on the coupons where there is no code).

https://tjstaste.com/3553-2/
- This reply was modified 8 years, 4 months ago by tjstaste.
- This reply was modified 8 years, 4 months ago by tjstaste.
- This reply was modified 8 years, 4 months ago by tjstaste.
Thread Starter tjstaste
(@tjstaste)

8 years, 4 months ago

Last comment went into moderation and I tried to delete it because I changed things up a bit and made it look all right. So I don’t think I need further help at the moment. I’ll let you know if that changes though. 🙂

Thank you, @rossmitchell and @dacasper!

Thread Starter tjstaste
(@tjstaste)

8 years, 4 months ago

I did find one more thing:

How do I change the “Valid until” text to “Expires:”?
Thread Starter tjstaste
(@tjstaste)

8 years, 4 months ago
Moved it all to here: https://tjstaste.com/coupons-deals/

Just need to know about the valid until text now, disregard previous ones (one is stuck to be moderated anyway).
- This reply was modified 8 years, 4 months ago by tjstaste.
Moderator bcworkz
(@bcworkz)

8 years, 4 months ago

That’s a more difficult question for anyone to answer than CSS issues. I suggest you ask in the plugin’s dedicated support forum. I’m assuming the text is generated by the plugin. The trick is to change the text in a way that does not get overwritten when the plugin is updated. How to do that depends on how the plugin is written, so best to ask where the author and expert users will see your question.

If the plugin is setup to use translations, you could use the “gettext” filter to change the string. It’s meant to change languages, but changing to alternate text in the same language is equally valid. The plugin may have a more specific filter that would be better.