Jump to content


Photo
- - - - -

Modal customisation


Best Answer James B , 25 April 2013 - 01:38 AM

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.

Go to the full post


  • Please log in to reply
20 replies to this topic

#1 keithmagvacom

keithmagvacom

    Advocate

  • Members
  • 327 posts
  • Framework Version:2.4
  • Country: Country Flag

Posted 23 April 2013 - 07:23 AM

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: 

Please Login or Register to see this Hidden Content

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.



#2 Danny

Danny

    Is Awesome!

  • Moderators
  • 13021 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 23 April 2013 - 08:07 AM

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.

 

Please Login or Register to see this Hidden Content

 

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

 

Please Login or Register to see this Hidden Content



#3 keithmagvacom

keithmagvacom

    Advocate

  • Members
  • 327 posts
  • Framework Version:2.4
  • Country: Country Flag

Posted 23 April 2013 - 12:11 PM

 

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. 

Please Login or Register to see this Hidden Content

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

 

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



#4 Danny

Danny

    Is Awesome!

  • Moderators
  • 13021 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 23 April 2013 - 12:43 PM

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

 

Please Login or Register to see this Hidden Content



#5 keithmagvacom

keithmagvacom

    Advocate

  • Members
  • 327 posts
  • Framework Version:2.4
  • Country: Country Flag

Posted 23 April 2013 - 01:31 PM

Still not Joy. Here is what I am getting.

modalGrab.jpg



#6 James B

James B

    Advocate

  • Moderators
  • 4979 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 23 April 2013 - 09:29 PM

Hi there,

 

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

Please Login or Register to see this Hidden Content

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

Please Login or Register to see this Hidden Content

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.



#7 keithmagvacom

keithmagvacom

    Advocate

  • Members
  • 327 posts
  • Framework Version:2.4
  • Country: Country Flag

Posted 23 April 2013 - 09:38 PM

Please Login or Register to see this Hidden Content

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; 

Please Login or Register to see this Hidden Content

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 ; 

Please Login or Register to see this Hidden Content

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



#8 Danny

Danny

    Is Awesome!

  • Moderators
  • 13021 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 23 April 2013 - 09:44 PM

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

 

Also, the code I provided above

Please Login or Register to see this Hidden Content

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:

Please Login or Register to see this Hidden Content



#9 keithmagvacom

keithmagvacom

    Advocate

  • Members
  • 327 posts
  • Framework Version:2.4
  • Country: Country Flag

Posted 23 April 2013 - 09:48 PM

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. 



#10 James B

James B

    Advocate

  • Moderators
  • 4979 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 23 April 2013 - 10:05 PM

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.

Please Login or Register to see this Hidden Content



#11 keithmagvacom

keithmagvacom

    Advocate

  • Members
  • 327 posts
  • Framework Version:2.4
  • Country: Country Flag

Posted 23 April 2013 - 11:32 PM

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.

#12 James B

James B

    Advocate

  • Moderators
  • 4979 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 24 April 2013 - 12:24 AM

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 :-)



#13 keithmagvacom

keithmagvacom

    Advocate

  • Members
  • 327 posts
  • Framework Version:2.4
  • Country: Country Flag

Posted 24 April 2013 - 08:12 AM

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. 



#14 Danny

Danny

    Is Awesome!

  • Moderators
  • 13021 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 24 April 2013 - 08:25 AM

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.



#15 keithmagvacom

keithmagvacom

    Advocate

  • Members
  • 327 posts
  • Framework Version:2.4
  • Country: Country Flag

Posted 24 April 2013 - 08:33 AM

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. 



#16 Danny

Danny

    Is Awesome!

  • Moderators
  • 13021 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 24 April 2013 - 08:47 AM

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 -

Please Login or Register to see this Hidden Content

 

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



#17 keithmagvacom

keithmagvacom

    Advocate

  • Members
  • 327 posts
  • Framework Version:2.4
  • Country: Country Flag

Posted 24 April 2013 - 02:38 PM

Hi Danny

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



#18 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 24 April 2013 - 03:21 PM

Hello, which paste is it in the list?



#19 keithmagvacom

keithmagvacom

    Advocate

  • Members
  • 327 posts
  • Framework Version:2.4
  • Country: Country Flag

Posted 24 April 2013 - 03:47 PM

used my username keithmagvacom



#20 James B

James B

    Advocate

  • Moderators
  • 4979 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 25 April 2013 - 01:38 AM   Best Answer

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 -

Please Login or Register to see this Hidden Content

 

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.