0

I am using a plugin which has the following code for a button:

<a class="bwg_load_btn_1 bwg_load_btn" href="javascript:void(0);">Load More...</a>

I would like to increase the size of the font used for the text to be 16x. How do I do this? I believe I need to add code to my style.css for my theme but I am not 100% sure what to add.

Thank you in advance

  • 3
    .bwg_load_btn_1.bwg_load_btn{font-size:16px;} – David Lee Nov 15 '17 at 5:00
  • 1
    Yes it will be better if you add it in your style.css as it will not be over ridden by any other css . I case if you make any changes in your plugin files there are chances to loose it when you update the plugin – Pratik bhatt Nov 15 '17 at 6:58
2

You can solve this in two ways

No.1 to find the 'a' tag with class name ' bwg_load_btn_1 bwg_load_btn ' in your plugin and add inline style like this

<a class="bwg_load_btn_1 bwg_load_btn" href="javascript:void(0);" style="font-size:16px;">Load More...</a>

2nd in your style.css add font-size for this class with !important,

 .bwg_load_btn_1.bwg_load_btn{
      /* !important will override the style */
      font-size:16px !important;
 }
| improve this answer | |
  • 1
    I will not recommend the above as the changes will be lost in case you update the plugin. – Pratik bhatt Nov 15 '17 at 6:58
  • Can you please elaborate what will be lost & how will style effect the whole plugin with just adding font-size to the button class? – HeroWeb512 Nov 15 '17 at 7:28
  • 2
    I have given 2 options in my answer if you see just to solve the problem @Pratik – HeroWeb512 Nov 15 '17 at 8:16
  • 1
    its good now I think option 2 is better – Pratik bhatt Nov 15 '17 at 8:19
  • 1
    Thanks @Pratik, I will also recommend option 2 for better use – HeroWeb512 Nov 15 '17 at 8:22
0

If you install Jetpack you'll be able to write custom CSS to be loaded after any other css. I'm sure there are other plugins which will do just the css injection if you don't want the full Jetpack. Or you could add the css to your own theme css.

You'll want to add something like the following in order to change the font size:

.bwg_load_btn_1 {
  font-size: 2em;
}

It's a bit challenging to say exactly what will work without seeing the css for the btn itself, but the code over should work. Alternatively you can chain the selector with itself in order to increase the specificity:

.bwg_load_btn_1.bwg_load_btn_1.bwg_load_btn_1 {}

Don't use !important if you don't need to, you'll just introduce more problems for yourself than you need. That said, if the plugin uses !important to style the button, you'll need to use !important yourself.

| improve this answer | |
0

As long as there are no "!important"s in the plugins css, the best practice would be to stick to the golden rule of css:

the more specific the rule, the more important it is.

So, if you want to overwrite a rule, put a rule in your css that is more specific in the selectors. If the plugins.css says

.bwg_load_btn_1.bwg_load_btn {
    font-size:12px;
}

then you can "outspecify" this rule by using for example

body .bwg_load_btn_1.bwg_load_btn {
    font-size:16px;
}

No need for additional plugins or importants.

| improve this answer | |
0

A simply solution is to click on Customize on the Dashboard Menu under Appearance, after it switches you can add any custom CSS to where it says Additional CSS. It will automatically override.

I think the benefit of doing this for new developers is that you are able to save the CSS modifications here, whereas if you modify the style.css directly and forget to save it, you could forget and lost it later when updating the theme.

For this reason, it's better to place Custom CSS in the above mentioned place, or in the Custom CSS Option provided by your particular Theme's Options.

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.