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

juicyjuicer · #7 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 · #8 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 · #9 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 · #10 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 · #11 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....