Learn More button

rmccrickard · Member · September 4, 2016 at 12:46 pm
Copy link

Add topic to favorites
Can you give me the code for centering the Learn More button in the middle of the banner image, as well as for creating an all white button with black lettering on the Learn More button?

The blog I need help with is: (visible only to logged in users)
staff-therezzap · Staff · September 4, 2016 at 5:11 pm
Copy link
Hello!

The Learn More button will be centered over the featured images in the slider automatically when you have added text in the ‘Excerpt’ meta-box and are using the standard post-format. Are you trying to add the button somewhere else?

You can change the styling of the Learn More button to white with black lettering with the following CSS:
```
a.more-link {
    background: #FFF;
}
.text-white a.more-link {
    color: rgba(0,0,0,1);
    border: 2px solid rgba(255, 255, 255, 1);
}
```
Thank you!

Rebecca
rmccrickard · Member · September 4, 2016 at 11:55 pm
Copy link
Thank you Rebecca. I tried that, but it didn’t work. any other advice?

Also, I removed the titles from the images on the Services and Support page with the following code:

.headline {
display: none;
}

However, when i did that, i think it took away the “Who We Are”, “What We Do” titles from the home page. How can i keep the titles on the Home page, but remove them from the Services, Support and Contact Us pages?
rmccrickard · Member · September 5, 2016 at 12:27 am
Copy link
Also, is there any way to avoid the cutting off of the top of some images on a few of the pages?
staff-therezzap · Staff · September 5, 2016 at 1:30 pm
Copy link
Hello!

I’m not seeing any excerpt text in your slideshows when I inspect the site. Can you confirm you’ve added text to the ‘excerpt’ meta-box as shown here: https://www.dropbox.com/s/jvqlhngnhlxzl9v/Screenshot%202016-09-05%2014.24.09.png?dl=0

To hide the headlines, try using the following instead:
```
.headline.img-headline {
     display: none;
}
```
If you’re headlines on the front page are still hidden after adding this add the following:
```
.featured-pages .headline {
    display: block !important;
}
```
To avoid the images getting cut off, I would recommend resizing them so they aren’t so large. Because the images you have uploaded seem to be quite large, the best way to ensure they need to be resized is to have them smaller. In the demo we’ve used images 1800x1200px so I would recommend something along those lines.

Thanks!

Rebecca
rmccrickard · Member · September 5, 2016 at 10:28 pm
Copy link
Thank you Rebecca –

The code for the headlines worked perfectly.

I’m still having trouble with the Learn More button. I did enter the code in the excerpt box, exactly like the link you sent – but the button is not white, as i was wanting. It’s also not centered on the page, which i can’t figure out how to fix.
staff-therezzap · Staff · September 6, 2016 at 2:04 pm
Copy link
Hello!

I may be misunderstanding what you are trying to achieve then with the Learn More button. Can you add the button back to the slide so I can see what you mean? Where is the button showing if it’s not centered? Are you trying to replicate the look we have at the top of the demo in the ‘Working In Paradise’ slide: https://purposedemo.wordpress.com/ but with an all white button with black text centered on the page?

Thanks for clarifying! Hopefully we can get this working for you.

Cheers,

Rebecca
rmccrickard · Member · September 7, 2016 at 1:49 am
Copy link
I’ve added it back in so that you can see what i mean. I’ve added the code to the excerpt section of the What We Do page, but it shows up on the right of the screen and without the white background/black lettering.
staff-therezzap · Staff · September 7, 2016 at 3:31 pm
Copy link
Are you referring to the ‘Our Services Button’? I’m sorry I’m not seeing any other button in that section. If you’re adding the button to one of the Featured Pages, you’ll need to add a button using html instead of the More Tag.

The button shows when text is added to the Excerpt field on posts which display in the slider, but this won’t be the case on pages. On the pages you need to add something like the following:

</p>
<p style=”text-align: center;”>Learn More</p>

You would then need to change the styling of the button class so that it’s as you want it to display through CSS.

Thanks!

Rebecca

No items found.