Archived

This topic is now archived and is closed to further replies.

  • 0

Resolved Can You Change The Size Of A Modal Button?


Question

Posted · Report post

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!

Share this post


Link to post
Share on other sites

5 answers to this question

Posted · Report post

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?

Share this post


Link to post
Share on other sites

Posted · Report post

The topic was marked as resolved.

Share this post


Link to post
Share on other sites

Posted · Report post

Well done, thank you!

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

Share this post


Link to post
Share on other sites

Posted · Report post

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

Share this post


Link to post
Share on other sites

Posted · Report post

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;}

Share this post


Link to post
Share on other sites