Change button transparency, Change font color, Make a link to open to a section

Shapely
1

Hi,

Can I please get some assistance with editing the demo template. I am new to CSS as I previously built with html.
If there is a handy guide to learn the basics of CSS on youtube please tell me.

  • I want to change the Button 2 transparency on the first paralax section.

  • Also changing the font color is needed on the title.

  • I need to create a url link that opens to a lower section of my home page.

  • I want to add a twitter feed update box to the call for action section.

That should be enough questions for now. Thanks for your help team!

2

Hey there,

I hope you are well today and thank you for your question.

You can try achieving this by adding the following CSS code in the Custom CSS option of your theme on the below path.

Admin Area -> Appearance -> Customize -> Additional CSS

/*change button transparency*/
.image-bg .btn.btn-filled {
    background: rgba(116, 92, 249, 0.27);
    border-color: rgba(116, 92, 249, 0.27);
  }

Can you state which titles you’d like to change.

/*change title color*/
.text-center h1 {
    color: #d611d6;
}
  1. You can look into using an achor link for that.
    Scroll to Anchor – WordPress plugin | WordPress.org

Adding a twitter field to the call to action section isn’t possible.
However, you can add another widget to the home page, and use for example a twitter plugin.

Best regards,
Support.

3

Thank you for your response.

The change button transparency suggestion does not work. Adding this path actioned no changes.

  • I want to make the first button which is currently transparent, to follow the same background as the second button, of which the color follows in the theme options.

The title color change worked perfectly, thank you.

Rather than using the Scroll to Anchor plugin, I found another way to anchor to a section instead.
I went to my site and right clicked on the section I wanted to scroll to and chose inspect element. I then found the id for that section which was ‘shapely_home_parallax-5’ and then added that path alone in the link field with a ‘#’ in front of it. This also worked when adding it to my menu option as ‘#shapely_home_parallax-5’. To my surprise it also has a smooth scroll effect! I hope this helps someone else too!

I managed to find a Twitter Timeline widget from Jetpack which is now working, but…

  • I would like to center the timeline as currently it is to the left. If it helps, I believe the id is #twitter_timeline-4

Thanks for your help!