Changing padding for a specific page
I have just moved my support forum from a separate site into an iFrame on a single page of my WP site. It works pretty well, although the padding on the left and right sides is more than I'd like.
Is there a way to change the padding (currently set in the Center preferences to be "padding: 10px 15px;") for this specific page? I tried putting in the code "<padding: 0px 0px;>" into the HTML of that page, to see if it would override the general Center setting, but it didn't work. I imagine this should be pretty simple, but I just don't know where to place the correct code, and how to make it apply to one specific page. By the way, I'm using the EmbedIt plugin to place the iFrame HTML code, so the code doesn't get mangled by WP. In general I like that plugin, it's easy to use and does the job. One simply creates one or more custom variables for each page or post that you want to use HTML code in, naming them HTML1, HTML2, etc.; then type or paste into the custom variable the actual code; then put "[HTML1]" etc. into the page or post. The EmbedIt plugin substitutes the code when the page is actually viewed. |
Look up the ID of that page then use a CSS Insert
HTML Code:
body#body-page-XX td#middle { |
Thanks for responding right away!
I tried putting this into the Atahualpa section on HTML/CSS Inserts, in the final section titled CSS Inserts: Code:
body#body-page-119 td#middle { However nothing seemed to happen with the padding - there still is too much white space on left and right. If you want to take a quick look, please go to www.archicadtemplate.com, and click on page menu link for the "AMT Forum" page. Did I put the code into the right place? |
By the way - I forgot to ask - is there a better way to embed a Forum into a WordPress site? I have checked out Simple:Press Forum and it looks pretty good, but they don't have an import function so I'd have to manually import all my users and posts - not something I want to do at this point.
The iFrame seems to work nicely except it adds a separate vertical scroll bar within the page. I tried to give the iFrame a 100% setting for vertical height, so it would show the entire contents without a scroll bar, but that didn't work (it only showed 100 pixels in height or something like that). So I've compromised with a height of 1200px, but don't like how there is an internal scroll bar separate from the main page scroll. Any suggestions for doing this better? |
The padding didn't work because you don't have the bodyclasses functions in your theme version yet. This was introduced in 3.3.2. To add it to your theme version see http://forum.bytesforall.com/showthread.php?t=1485 post # 14
For the iframe height you'd need Javascript. 1. Add an ID to the iframe by editing the Wordpress page <iframe id="myiframe" width="100%" height="1200" frameborder="0" src="http://forum.bobrow.com/forum"> 2. On the forum page (the external forum page that you pull into the iframe, not the Wordpress page) add this in the header section, between <head> and </head>: <script type='text/javascript' src='http://www.archicadtemplate.com/blog/wp-content/themes/atahualpa/js/jquery-1.2.6.min.js'></script> <script type="text/javascript"> <!-- jQuery.noConflict(); jQuery(document).ready(function(){ var theFrame = jQuery("#myiframe", parent.document.body); theFrame.height(jQuery(document.body).height() + 30); }); //--> </script> If you keep using this, you may have to change the URL to the jQuery library in a later Atahualpa version. You can also pull jQuery from Google servers instead. To do that, replace the above line with <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js'></script> |
I see that you got white space at the bottom now. Looks like the (invisible) lightbox containers that you have at the bottom of the forum pages are being added to the Javascript's document height calculation. Try this code instead
<script type='text/javascript' src='http://www.archicadtemplate.com/blog/wp-content/themes/atahualpa/js/jquery-1.2.6.min.js'></script> <script type="text/javascript"> <!-- jQuery.noConflict(); jQuery(document).ready(function(){ var theFrame = jQuery("#myiframe", parent.document.body); theFrame.height(jQuery("div#container").height() + 70); }); //--> </script> Or use -300 (or whatever required until it looks good) instead of +30 in the original code |
HELP! (See Error Message below!)
I was partially successful, after much struggle. My web editor was mangling the online header.php and functions.php files, so I had to recover them from the original 3.1.9 source, edit them in Notepad and then manually upload via FTP. I have now got the padding working OK, thank you very much! However, I got an error message when I tried to SAVE SETTINGS for the CSS Insert: Quote:
By the way, I haven't yet tried the iframe resizing script you suggested, that's why the white space is there at the bottom. I simply made the iframe height much larger so that most pages wouldn't have internal scroll bars. I'll try your scripting later this evening. |
I copied the text from your original posting, and created the bodyclasses.php file again in Notepad, and reuploaded it.
The error message changed very slightly: Quote:
I'm happy to do that, if I won't have to rework my settings, and it simplifies this whole topic. I have careful notes on my customizations to other PHP pages in Atahualpa, so I can repeat the process (although some of the options may now be built in to the latest version of your theme). To upgrade to your latest version, do I need to back up my database and all files on my server in the blog area? Or can I simply upload your new Atahualpa folder and then change the theme in the WP control area? Also, I am on WP 2.7 rather than 2.7.1. Does this make much or any difference? Is it worth updating WP? |
I upgraded to Atahualpa 3.3.3 and the error message still came up whenever I changed the settings in Atahualpa.
However, after a while of playing with things, the error went away! Perhaps there was some sort of caching going on?? Anyway, I've got my padding worked out, and along the way, I figured out how to turn off the page headlines for selected pages using the new feature in the CSS Inserts. Although the option to use custom styles for each page is powerful, using this CSS stuff just to turn off page headlines seems very clumsy. As a wishlist item - please consider putting in the main Atahualpa settings (under Post/Page Info Items) a box in which one can enter the series of numbers for pages that should not get a headline title. This would be exactly like the "Exclude Pages from Page Menu Bar" option, and be much easier to understand. In fact, this "Exclude Page Headlines" could be right in that same area for greatest simplicity. |
This was on the todo list for some time and I'll include it in the next version.
"headers already sent" is usually caused by a blank line in atahualpa/functions.php or /wp-config.php but can be caused by blank lines in other PHP files too |
Hello, i seem to have the same problem, but even after searching a lot in the forum i cant figure out how to change the padding for one particular page.
I'm using Atahualpa 3.4.4 and the newest WP version. I did put the following in the CSS insert section: Code:
body#body-page-138 td#middle { Of course the page id is 138. What am i doing wrong? |
Quote:
sorry, of course i put Code:
body#body-page-138 td#middle { |
what's the url? try adding !important
HTML Code:
body#body-page-138 td#middle { |
there are two errors with your selector
1) it's 'page-id-138' not 'body-id-138' 2) since 'page-id-138' is a class, you need to use a '.' instead of a '#' so it should be HTML Code:
body.page-page-138 td#middle { |
Thanks so much for your quick reply.
But it still did not work like this. But with your answer you brought me on the right path. It works now when i put this: Code:
body.page-id-138 td#middle { Very confusing for a newbie like me. But its nice to have people that are willing to help. I will look into this donation thingie.... :) |
Duh...:o you're right - I had fumble fingers when I typed that. I had 'body-id-138' and typed 'page-body-id-138' went to delete 'body' and it looks like I deleted teh 'id' instead. Teach me not re-read what I've tiped...I mean typed;)
|
All times are GMT -6. The time now is 08:30 AM. |
Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.