customize button styles | PenciDesign Support

Penci Design replied

7 years ago

Staff Reply

Hi,

Please send me your website managment information ( admin url site, username and password ) in order for me to have access to know the exact issue. We will take it a lock on this help you.

Best Regards,

PenciDesign

luciazw replied

7 years ago

Customer Reply

Hi Penci,

I changed the custom button style and now it works to some extent. The remaining issues:

- button BG color on hover is not pink color #d3347b (as in the css code), it is still blue color as in theme default.

- After I saved the "custom-button" style without the fontawesome icon, when I use the shortcut insert and input "custom-button", there is still an icon.

Please advise, thanks!

Penci Design replied

7 years ago

Staff Reply

Hi,

If you want add id or class to button. You can add theme with add class when new create button as screenshot ( http://prntscr.com/mtdsz5 ) or add param ' class="custom-button"' to button shortcode

[penci_button link="#" icon="fa fa-address-book" icon_position="left" size="small" class="custom-button"]Click me[/penci_button]

then add custom css with custom class you add to shortcode ( http://prntscr.com/mtduiv , http://prntscr.com/mtduq8)

a.custom-button.pencisc-button {
 background: transparent;
 color: #D3347B;
 border: 2px solid #D3347B;
 line-height: 36px;
 padding: 0 20px;
 font-size: 14px;
 font-weight: bold;
 }
 a.custom-button.pencisc-button:hover {
 background: #D3347B;
 color: #fff;
 border: 2px solid #D3347B;
 }
 a.custom-button.pencisc-button.pencisc-small {
 line-height: 28px;
 font-size: 12px;
 }
 a.custom-button.pencisc-button.pencisc-large {
 line-height: 46px;
 font-size: 18px;
 }

Please check it again.

If it doesn't work, let's send me your website managment information ( admin url site, username and password ) in order for me to have access to know the exact issue. We will take it a lock on this help you.

Best Regards,

PenciDesign

luciazw replied

7 years ago

Customer Reply

Hi Penci,

I'm not really sure how to write the CSS styles. Attached is my design.

I only want these buttons to be available in my post editor, I don't want my home page buttons (black background) to be all replaced by them.

Is there a way to save these pink buttons by a specific ID so I can insert them by ID for select pages and not on the entire site?

The color hex for the pink color is D3347B, top padding 16px, left/right padding is 20px, font size 14px, font weight bold, border 3px.

Penci Design replied

7 years ago

Staff Reply

Hi,

Please go to Customize > Addtional CSS, then add custom css to default style of button:

a.button.pencisc-button {
 background: #000000;
    color: #ffffff;
    line-height: 36px;
    padding: 0 15px;
    font-size: 14px;
}
a.button.pencisc-button.pencisc-small {
    line-height: 28px;
    font-size: 12px;
}
a.button.pencisc-button.pencisc-large {
    line-height: 46px;
    font-size: 18px;
}

You can change color, background color, padding, font size button to any you want

Best Regards,

PenciDesign

luciazw replied

7 years ago

Customer Reply

To add on to my question, I'm talking about inserting button from the paragraph editor, and not seeing the other theme button styles appearing in the design option.

I'd like to change the default button styles, have them as options in the paragraph editor, or assign them a class/ID that can be re-used every time I put in that class/ID name.

luciazw started the conversation

7 years ago

Conversation Start

Hi Penci,

I want to change the default button style, and add a few button styles as drop-down options.

I want to change the default button background color, text size and on hover color. How do I do that?
Can I add a secondary button style, save it, and have the style appear as an option when I do the button insert from front-end editor? S

Thanks.