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.
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
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.
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 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.
Hi Penci,
I want to change the default button style, and add a few button styles as drop-down options.
Thanks.
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.
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
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.
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
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
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!
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