Archived

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

  • 0

Modal customisation

Question

Posted · Report post

Hi Folks

 

I have been trying unsuccessfully to modify a modal. Essentially I want to add some padding to the content however when I add it, it also adds this padding to the header and footer. The code I have been using is: 

.modal {
    width: 800px;
    padding: 10px;
   
}

I will see I have also changed the width of the modal, but for some reason I am unable to re-centre it on the page. Can't seem to locate the necessary code to change when using firebug

 

I would appreciate some advice or guidance. 

 

Thanks in advance.

 

On a side note, is the styles.css file accessible (not for editing only reference)? Have installed the Pagelines customisation plugin but it giving a complete file.

Share this post


Link to post
Share on other sites

20 answers to this question

Posted · Report post

Hi there, thanks for sending over your login details. I've gone in and checked and this is due to the text formatting inside the modal shortcode. The text you've adding is inside it's own div, so it's not being applied to the .modal-body class, it's going underneath it. See this screenshot to see what I mean, the modal body div opens and closes before your text starts - http://screencast.com/t/ROQ5fUk8O38e

 

A way round this would be to wrap all your text inside the modal in it's own div and give it a name, then you'll be able to control it just like if you were using the modal-body class.

Share this post


Link to post
Share on other sites

Posted · Report post

Hi,

 

To change the padding, you will most likely want to do this in the modal-body class. To increase the width, you will need to also re-position to the center by increasing the margin-left negative value that is used in the modal defaults CSS, see image below.

 

http://cl.ly/image/3n1v1D1Q3l44

 

If you wish to learn more about how to customise PageLines Framework, I recommend you read our customisation methods and custom CSS documentation.

 

http://support.pagelines.me/docs/customization/

Share this post


Link to post
Share on other sites

Posted · Report post

 

To change the padding, you will most likely want to do this in the modal-body class. 

 

Hi Danny

 

That's what I though would happen with this. 

.modal-body {
  	padding: 20px;
}

But has no impact. I figured I was doing something wrong.

 

Thanks for the screen shot above, helped me sort the positioning. 

Share this post


Link to post
Share on other sites

Posted · Report post

Thanks James. Appreciate the help. Was thinking it might have has something to do with the text justification I had. 

Share this post


Link to post
Share on other sites

Posted · Report post

The reason why the padding didn't work is because you have actually reduced it. The default padding for the modal is 21px, so if you want to increase it, you will need to go to a higher value.

 

In the screenshot below, I set it to 50px

 

http://cl.ly/image/1f473H3L3F0P

Share this post


Link to post
Share on other sites

Posted · Report post

Still not Joy. Here is what I am getting.

modalGrab.jpg

Share this post


Link to post
Share on other sites

Posted · Report post

Hi there,

 

I've tested the above for you, if I wanted to add padding to whole modal, I'd use

.modal {padding:30px;}

If I wanted to add padding to just the content of the modal, I'd use

.modal-body {padding:30px;} 

If you find that neither of those are working I'd suggest checking the other css code in your custom code box, if something above is missing a bracket or broken then it will stop any css below it in the list from being read.

Share this post


Link to post
Share on other sites

Posted · Report post

.modal-body {padding:30px;} 

If you find that neither of those are working I'd suggest checking the other css code in your custom code box, if something above is missing a bracket or broken then it will stop any css below it in the list from being read.

 

Hi James 

Thanks for the response. Nothing seems to work for me. All the custome CSS I have is; 

body{}
.fixed-top .plbrand { display: none; }

.popover {
	width: 500px;
}

.masthead .masthead-title {
    font-size: 64px;
    padding: 7px 12px;
}

.modal {
    width: 800px;
    ;
}
.modal-body {
    padding-top: 0px;
    padding-left: 50px;
    padding-right: 50px;
    padding-bottom: 0px;
}

If I change the padding-top to 150px, extra padding is added at the top of the modal. No value what so ever in the padding-left or right makes a difference. The only think that might be contributing to it is that the text in the modal is justified. I really at a loss on this one.

 

NOTE- Line 15 reads ; 

;

Every time I put it in above it takes it back out!

Share this post


Link to post
Share on other sites

Posted · Report post

The code above you have provided is not valid, you have an extra ;

 

Also, the code I provided above

.modal-body { padding: 50px; } 

most certainly works, as I displayed this in the modal image.

 

If the code isn't working, you most likely have errors like you have displayed above or you will need to use a PageLines override such as #page at the start of your code.

 

For example:

#page .modal-body { padding: 60px; }

Share this post


Link to post
Share on other sites

Posted · Report post

For what ever reason it keeps deleting line 15! it states margin-left (colon) -400(semicolon)

Thats why there appears are error in the above. 

Share this post


Link to post
Share on other sites

Posted · Report post

Try putting it in as it's own line, see if it sticks. Don't forget to put in a px amount after the figure.

.modal{;}

Share this post


Link to post
Share on other sites

Posted · Report post

Guys thanks for the help. For what ever reason, the custom code doesn't want to add the padding either left or right. I've got a work around of adding some padding in the text in the input area ie

<div style="text-align: justify; padding: 0px 20px 0px; ">Give him a spanner,.... </div>

Would love to figure out why the other Danny's won't work or me. I'm sure the coding is correct. There must be a wee gremlin running around.

Share this post


Link to post
Share on other sites

Posted · Report post

Is it just in the chrome inspector it doesn't work, like in the screenshot? Or on the actual site once you've saved in the css box?

 

What's the url to the page, I'll try in it firebug and see what happens this end :-)

Share this post


Link to post
Share on other sites

Posted · Report post

Thanks James

Its Safari that I am using mostly but pop into firefox occasionally. At present the site is closed while I get the some of the initial pieces built. 

Share this post


Link to post
Share on other sites

Posted · Report post

Have you used my code with a PageLines override, like I mentioned above ?

If so, then I have no idea as to why the code I have provided doesn't work, as it works on my test site without any issue. I would recommend you disable all non-PageLines plugins and see if this has any effect.

Also, where are you adding your custom code, to a child theme, the CSS/LESS editor option or the customise plugin?

 

I recommend you use Chromes Web dev console over Firebug or Safari.

Share this post


Link to post
Share on other sites

Posted · Report post

Hi Danny

 

Yes tried your code with no luck. Will have a look a little later at disabling plugins. I am entering the code into the CSS/LESS editor. 

Share this post


Link to post
Share on other sites

Posted · Report post

I too entered the code into the editor option, are you copying and pasting or typing the code yourself.

 

Can you paste all the code you have in your editor to our paste service - http://paste.pagelines.com/

 

The most likely reason as to why the code isn't work, is that you have errors in your CSS.

Share this post


Link to post
Share on other sites

Posted · Report post

Hi Danny

Been away from the desk for a while, Have pasted it to the paste service

Share this post


Link to post
Share on other sites

Posted · Report post

Hello, which paste is it in the list?

Share this post


Link to post
Share on other sites

Posted · Report post

used my username keithmagvacom

Share this post


Link to post
Share on other sites