Adding a button: button class

  • Resolved zapa2005

    (@zapa2005)


    8 years, 5 months ago

    I am looking at adding a button. I am taking the example of the theme and using “inspect element”, I am looking at the demo page: https://shoreditchdemo.wordpress.com/?demo

    I am not too sure how to use the element: Button . This is HTML and not CSS and I can not add it right away (I understand button minimal is a pre-defined class that can be “plugged in”).

    Further inspecting the demo page, I see:
    .button.minimal:before, .button.alt:before {
    border: 2px solid;
    border-radius: 5em;
    content: “”;
    display: block;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;

    Should I use this instead? And, in the customiser, how to define where I want to use this button?

    I am getting my head round CSS and starting with this might not be the easiest. So apols if I am on the wrong track!

    Tks for your help.

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

Viewing 10 replies - 1 through 10 (of 10 total)
  • Thread Starter zapa2005

    (@zapa2005)

    8 years, 5 months ago

    I meant to say:

    I am not too sure how to use the element: Button which, using the inspect element, is shown using: class=”button minimal” href=”https://shoreditchdemo.wordpress.com?demo”>Button

    sacredpath

    (@sacredpath)

    Automattic Happiness Engineer

    8 years, 5 months ago

    Hi there, if you go to the Shoreditch Theme Showcase page at WordPress.com, and scroll down to Extras, it explains how to set up buttons in your pages and posts.

    Thread Starter zapa2005

    (@zapa2005)

    8 years, 5 months ago

    God, I can’t believe I missed this. What an oversight. Looking stupid on this one. Tks for pointing it out. Actually, brings one question. Easy to add on a page. But any idea how to add the button in the widget section? I can not use the HTML editor in a widget as far as I understand?

    Moderator Kathryn Presner

    (@zoonini)

    8 years, 5 months ago

    @zapa2005 Yes, you can add button code to a widget area. I’d recommend the new Custom HTML widget for this. Let us know how it goes.

    Thread Starter zapa2005

    (@zapa2005)

    8 years, 5 months ago

    This is fantastic Kathryn. All done. Tks a mil. I am trying to reduce the space between the text and the button. I have added this custom CSS but not sure it works. Any idea what would work better?

    /* reduce padding of fancy a chat*/

    .widget.widget_text {
    padding-bottom: 1em;
    }

    Moderator Kathryn Presner

    (@zoonini)

    8 years, 5 months ago

    Could you link to a a page or post with a button in the widget? I spot-checked but not seeing one. Thanks!

    Thread Starter zapa2005

    (@zapa2005)

    8 years, 5 months ago

    Sorry, I didn’t specify. It’s the widget at the bottom of the page, blue rectangle “Fancy a chat”. It appears on all pages.

    It’s really a tiny thing reducing this padding thing but will help me understand what I missed.

    Moderator Kathryn Presner

    (@zoonini)

    8 years, 5 months ago

    Thanks for pointing it out!

    I’m not quite sure why you’re using two separate widgets in that area – you only need the HTML widget for both the paragraph of text and the button.

    I would first start by moving your text above the button in the HTML widget and see how that looks. We can then tweak as needed!

    Thread Starter zapa2005

    (@zapa2005)

    8 years, 5 months ago

    I see what I’ve done! Makes sense. Done, simplified. That actually makes it better, removed the large area underneath the text. This is great. Thanks Kathryn, I’ll close it here as it fixed it.

    Moderator Kathryn Presner

    (@zoonini)

    8 years, 5 months ago

    Looks good!

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

The topic ‘Adding a button: button class’ is closed to new replies.