Styling of button

Hi mikaeleliasson,

Here are parameters that can help you to change button size:

.fac.fac-button-template .fac-button {
    font-size: 14px !important;
    height: 22px;
    line-height: 22px;
    width: 22px;

}

.fac.fac-button-template .fac-button i {
    font-size: 16px !important;
    height: 22px;
    line-height: 22px !important;
    width: 22px;
}

These parameters should be changed corresponding to your purposes.

Please let me know, if this info will help you.

With best regards,
Alexey

Hi Alexey

Thanks for the reply.
I’m afraid that does not work. Those were the parameters i thought i needed to change so tried it before and tried it again now but no change.

thanks

mikael

As described in plugin FAQ section:

How to style the Shortcode content

The plugin includes CSS file “assets/css/style.css”. You can copy this file in your active theme and customize it for your needs. Path to the styles inside the active theme:

[ActiveTheme]/templates/agp-font-awesome-collection/assets/css/style.css

You can try to use this solution in case if styles overlap via your css file doesn’t work. Also, I want to pay your attantion on that fact that you need to change complex of parameters, not only height value as you described in your initial request

Hi, mikaeleliasson

Do you have any news about your issue?

Hi Alexey

I got it to work. Sort of.
However the AGP plugin has now caused an issue with SiteOrigin Pagebuilder plugin with means I’m no longer able to update my site, so I will have to remove your plugin unless I can find a workaround. It was running fine until I tried to create the custom style and created my own shortcode. Will experiment a bit to try and get the page builder to work again as I really like your plugin and want to keep using it if possible

Mikael

Hi again,

I deleted the Templates folder for AGP contents and then the page builder plugin started working again. So, at least I can use it but it seems that I won’t be able to style it. Could I change the css directly in the plugin? I understand my changes would be lost in an update but I could simply edit the css again after updating if this is an option.

Cheers

mikael

Hi, Mikael

I will tested the plugin with SiteOrigin PageBuilder and I have no trouble with it. It’s very strange and I have no one ideas what can be wrong.
With regard to changes in CSS directly inside the plugin, usually I am not recommend doing so. But if it’s appropriate solution for you – Yes, you can do it.

Alexey

Hi Alexey

Thanks for the reply.

It works for me with the sitebuilder plugin, but when i add the template folder it breaks the sitebuilder. Is it working for you with template folder?

Thanks

Mikael

Hm…
I think I found the problem.
Please, update the plugin to the latest version.
It will help you.

Alexey

Seems to work now.
Thanks for the update.

Do I need to have the whole css file in the templates folder or do I just add the changes? I’m not sure if it makes a difference but presumably it would load quicker if less css has to be read?

thanks

Mikael

Yes.
You need to have the whole css file in the templates folder, because the plugin fully overrides the existing css file. This allows you to make changes directly in the file without using additional “!important;” constructions.
It is also known that two СSS files loaded longer than one.

Alexey

Smart solution to make it override the original css file!
thanks again for your help

Mikael

Currently I mark this topic as resolved. If you have other questions or comments you can reopen this topic or create a new one.

Hi again, Alexey.
For some reason this has now stopped working. I checked my files and it is named correctly and in the right place and the code changed is what you described.

It outputs them as the default 22px size.

.fac.fac-button-template .fac-button {
background: #263238;
color: #fff;
border-radius: 20px;
display: inline-block;
border: 1px solid transparent;
width: 18px;
height: 18px;
cursor: pointer;
text-align: center;
text-decoration: none;
padding: 3px;
font-weight: bold;
margin: 1px;
font-size: 14px!important;
line-height: 18px;
box-sizing: content-box;
overflow: hidden;
vertical-align: middle;

}

.fac.fac-button-template .fac-button i {
padding: 0;
font-size: 14px!important;
line-height: 18px!important;
vertical-align: middle;
text-align: center;
width: 18px;
height: 18px;
overflow: visible;
display: block;
float: left;
font-weight: normal;
}

Any ideas?

Thanks

Mikael

Hi, Mikael

I will need to see the page with a problem for any ideas.
Can you provide me URL to this page?

Alexey