Button Text Color in front page 1

Tagged: button text

This topic has 9 replies, 2 voices, and was last updated 7 years, 10 months ago by Wes.

Viewing 10 posts - 1 through 10 (of 10 total)

Author

Posts
June 19, 2016 at 2:46 pm #18372
Stephanie
Customer
In my top section my button text is taking on the same color as my text overlaying the image. I’d like to make the button text white so that it stands out better. How do I change the text color of that button?

Thanks.
June 19, 2016 at 8:50 pm #18378
Wes
Moderator
If you want to change it to White, add the class white in your code like this –

<a href="https://appfinite.com/shop/ambition/" class="button large white">Buy This Theme</a>

It will change the button color to white since it’s already included in the CSS. If you want to do another color then we’ll have to add it in your CSS first.
June 19, 2016 at 9:35 pm #18379
Stephanie
Customer
Ok but I wanted to change the TEXT on the button to white not the actual button color.
June 19, 2016 at 9:39 pm #18380
Wes
Moderator
Do you have a link to your site? Once I take a look at I can tell you what line you’ll need to edit, or if you’ll need to add new code to change the color.
June 20, 2016 at 9:38 am #18382
Stephanie
Customer
Here is a short GIF you can view which highlights the areas in question:

1)I want to change the purple text on the button that I highlight to white text

2)The next section I highlight on the homepage has too much padding. I want to shrink the top/bottom of this widget area if possible.

http://recordit.co/o43i2YXTOn

Thanks.
June 21, 2016 at 10:21 am #18390
Wes
Moderator
I would still need a link to your site as a screenshot or gif won’t be enough to see what’s going on behind the scenes in the code. Once you can provide a link I can take a look at the source code to see what needs to be adjusted. You can send it as a Private message if needed.
June 21, 2016 at 12:11 pm #18392
Stephanie
Customer
I figured the button issue out. I just created a new button class with the text color and background I wanted.

I still don’t know how to reduce the top or bottom padding in one of the homepage widgets. If you could just point me to where that would be in the CSS that would be helpful?

My site is a staging site and there are like two layers to get to it.

Thanks!
Steph
June 21, 2016 at 8:53 pm #18397
Wes
Moderator
Assuming you’re referring to the Front Page 5 widget area. The padding comes from line 1624 –
```
.flexible-widgets {
    overflow: hidden;
    padding: 120px 0 100px;
}
```
Changing this code will affect all of the other widget areas since they share the .flexible-widgets class. So if you want to add some code that only affects this particular section, try this –
```
.front-page-5 .flexible-widgets {
    padding: 100px 0 80px;
}
```
I lowered the padding by 20px for the top and bottom as an example, you can always lower it more if you want.

Let me know if that helps.
June 22, 2016 at 4:35 pm #18411
Stephanie
Customer
awesome thanks!
June 22, 2016 at 4:38 pm #18412
Wes
Moderator
You’re Welcome!

Let me know if you need anything else.

Also, post a link to your site in the showcase whenever you get it done – https://appfinite.com/forum/showcase/
Author

Posts

Viewing 10 posts - 1 through 10 (of 10 total)

The topic ‘Button Text Color in front page 1’ is closed to new replies.