Jump to content
itarsenal

Can You Change The Size Of A Modal Button?

Recommended Posts

itarsenal+    3
itarsenal

Hi,

I have a modal button that brings up a window with a form in it, is there a setting to make it larger?

Here's the page it's on. http://itarsenal.com/question-answer-support/

I've already looked at http://demo.pagelines.me/tools/

I'm essentially using this code

[pl_modal title="Title" type="btn" colortype="info" label="Click Me!"]

Some content here for the cool modal pop up. Labels, badges, and buttons can open them!

[/pl_modal]

...but would like to know if I can make the button huge!


Robert Granholm

http://itarsenal.com | Technical Support for Online Entrepreneurs

Share this post


Link to post
Share on other sites
batman    389
batman

Hi itarsenal

You can modify the #px as you like and add this CSS rules, this is the default CSS


.btn {

padding: 4px 10px;

margin-bottom: 0px;

font-size: 14px;

line-height: 20px;

text-shadow: 0px 1px 1px rgba(255, 255, 255, 0.75);

vertical-align: middle;

border-width: 1px;

border-style: solid;

border-radius: 4px 4px 4px 4px;

box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.2) inset, 0px 1px 2px rgba(0, 0, 0, 0.05);}

You can begin add for example, and see what happened
.btn {font-size: 30px;}


Life is too short to remove USB safely ...

Share this post


Link to post
Share on other sites
itarsenal+    3
itarsenal

Well done, thank you!

This will change sitewide though hmm? I'll have to learn how to target it per page.


Robert Granholm

http://itarsenal.com | Technical Support for Online Entrepreneurs

Share this post


Link to post
Share on other sites
batman    389
batman

Hi again

You can try with something like


.page-id-55 .btn {font-size: 30px;}

If you also wish to know how I find the page ID, all you need to do is load up FireBug or Google Chromes web dev tool and inspect your page html, at the top you should see body which has a number of classes assigned to it, one of these is page-id-XX (replace XX with your pages id value.

I have added a Danny´s screenshot to assist you.

http://screencast.com/t/HOsjhjnUIYX


Life is too short to remove USB safely ...

Share this post


Link to post
Share on other sites
itarsenal+    3
itarsenal

You're the man batman.

When I searched with Firebug for page-id i got this though...

<body class="page page-id-2872 page-template-default logged-in custom static pagelines-template-theme default full_width " data-twttr-rendered="true">

We're you just giving an example with 55?


Robert Granholm

http://itarsenal.com | Technical Support for Online Entrepreneurs

Share this post


Link to post
Share on other sites
James B    436
James B

The topic was marked as resolved.


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now


  • Similar Content

    • Samuel Costa - UDF
      By Samuel Costa - UDF+
      Hi.
      I need a shortcode activate a popup windows with contact form. It is possible without code?
      Link: https://www.udf.org.br/lancamentos/curso-mulher-que-prospera/
      Button: FAÇA SUA INSCRIÇÃO.
      Tks
    • Samuel Costa - UDF
      By Samuel Costa - UDF+
      Hi.
      i like to know if i can use signup button shortcode inside text editor or embed section.
      Tks.
    • DanatTLFN
      By DanatTLFN
      Site URL: thelocalfilmnetwork.com
      DMS Firmware: 2.2.1
      Wordpress: 4.5.1
      --------------------------------------
      Ticket Reference: 
       
      At the bottom of this post, there is a CSS only option that I have implemented into my site. It looks brilliant, and I am super grateful for that addition to the thread. The only issue I am having is that the code he provides does not include all of the styling options for the button itself.
      My question is, how might I go about editing the styling of the button i.e. shadows, every element of the coloring, and border colors?
      No big deal if it's not easy to fix. Happy to provide any further information if necessary.
      Kind regards,
      Dan
      P.S. I have opened up the button in Google Dev window with Inspect and start editing it there, but it looks like there are some areas of the code that are connected to an external source (most likely bootstrap) and therefore I can't seem to edit it as much as I would like.
    • Jesper
      By Jesper+
      Is there a way to create modal popups? It was possible ind DMS2
    • norbert
      By norbert
      With the great options to make price tables, i would skip the button under every option. But .... how can I do this?
×