Changing padding for a specific page

Eric Bobrow · #1 May 15, 2009, 03:51 PM

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.

Flynn · #2 May 15, 2009, 04:02 PM

Look up the ID of that page then use a CSS Insert

HTML Code:

body#body-page-XX td#middle {
padding: ....
}

XX = ID of the page

Eric Bobrow · #3 May 15, 2009, 04:18 PM

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 {
padding: 0 0 0 0;
}

The page number is 119, of course.

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?

Eric Bobrow · #4 May 15, 2009, 04:28 PM

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?

Flynn · #5 May 15, 2009, 07:05 PM

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">

</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>

Flynn · #6 May 15, 2009, 07:26 PM

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">

</script>

Or use -300 (or whatever required until it looks good) instead of +30 in the original code

Eric Bobrow · #7 May 15, 2009, 08:25 PM

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:

Warning: Cannot modify header information - headers already sent by (output started at /homepages/10/d171407036/htdocs/bcg/mastertemplate/blog/wp-content/themes/atahualpa/functions/bfa_bodyclasses.php:70) in /homepages/10/d171407036/htdocs/bcg/mastertemplate/blog/wp-content/themes/atahualpa/functions.php on line 174

Even though it gives this error, the site functions normally and the pages now format properly. Of course, I'd like to resolve the source of this error so I don't get this message while trying to save settings. This error is coming up every time I try to change any settings in Atahualpa, so it's a real nuisance.

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.

Eric Bobrow · #8 May 15, 2009, 08:44 PM

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:

Warning: Cannot modify header information - headers already sent by (output started at /homepages/10/d171407036/htdocs/bcg/mastertemplate/blog/wp-content/themes/atahualpa/functions/bfa_bodyclasses.php:69) in /homepages/10/d171407036/htdocs/bcg/mastertemplate/blog/wp-content/themes/atahualpa/functions.php on line 174

Would it be better to upgrade to Atahualpa 3.3.2 (or is it 3.3.3 now) than to mess around with 3.1.9?

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?

Eric Bobrow · #9 May 15, 2009, 10:24 PM

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.

Flynn · #10 May 16, 2009, 07:18 PM

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

juicyjuicer · #11 Nov 19, 2009, 09:50 AM

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 {
padding: 10px 10px
}

But still the padding is the same as on all other pages, as set in the Style Center Column section. (padding: 15px 130px

Of course the page id is 138.

What am i doing wrong?

juicyjuicer · #12 Nov 19, 2009, 09:53 AM

Quote:

Originally Posted by juicyjuicer

Code:

body#body-page-138 td#middle {
padding: 10px 10px
}

sorry, of course i put

Code:

body#body-page-138 td#middle {
padding: 10px 10px;
}

juggledad · #13 Nov 19, 2009, 11:46 AM

what's the url? try adding !important

HTML Code:

body#body-page-138 td#middle {
padding: 10px 10px !important;
}

juggledad · #14 Nov 19, 2009, 02:34 PM

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 {
padding: 10px 10px;
}

juicyjuicer · #15 Nov 19, 2009, 03:23 PM

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 {
padding: 10px 10px;
}

To be honest i tried around.... and after you said "page-id-138" is a class, i thought, so maybe the whole name must be there including the "-id"

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....

juggledad · #16 Nov 20, 2009, 05:23 AM

Duh...

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