WordPress.org

1. benmoore
   Member
   Posted 3 years ago #

   Greetings all.

   I am having an issue with the width of a theme that I am using. The theme itself is working great, but I am having to embed a link in an iframe which in and of itself is working as intended. However, the width of the main colum (where posted content and the iframe live) is not wide enough to display the entire page being framed.

   I am unclear what edits need to be made to correct this issue. I would like to simply bump out the header, footer, side panel, and main content width by 100 or so to ensure that there is enough room for the content to be displayed. The additional width only needs to be reflected in the primary content area, but I do understand that this increase will bump out the other areas by the same amount. (sorry if this isn't a very good description)

   I would be very grateful for any assistance in getting over this hurdle. The link to my site and the page in question is http://www.bgreenidaho.com/?page_id=3

   Thanks!

   Ben

2. benmoore
   Member
   Posted 3 years ago #

   This may help... The page that is being linked is actually this size (see link below)

   http://www.searchpoint.net/search.asp?_org_id=idswrmls-r&_agent_public_id=14945&_sponsor_office_id=1834

3. benmoore
   Member
   Posted 3 years ago #

   Anybody have a tip or two?

   Please

4. moshu
   Member
   Posted 3 years ago #

   Pick another theme that is wide enough. Scroll up > Extend > Themes.

5. jberghem
   Member
   Posted 3 years ago #

   I think moshu has the simplest solution for you here. There is unfortunately no way to change the style inside the IFRAME with CSS because it has it's own CSS.

   If possible you could maybe, and I say maybe, add the file as an SSI. that would give you more control, but you'd really have to know what you're doing.

   I don't know, is a javascript popup an option?

6. benmoore
   Member
   Posted 3 years ago #

   I'm not trying to change the style inside the i-frame. I just want to widen the main body (where blog text and this search lives) and be on my way.

   If this isn't possible I suppose I will have to find a new theme that will work. The problem with that is that I really like the implementation of the dtabs in this theme and I really like the look. Having very little knowledge of manipulating code, I had hoped to stay with this plug & play solution.

   :*(

7. jberghem
   Member
   Posted 3 years ago #

   You can't change the dimensions of the content of the IFRAME because this is determined by the style of the page in the frame. Frames including IFrames are actually more of a thing of the past and it's generally recommended not to use them because of the lack of flexibility, high maintenance and a host of other problems including the one you're having.

   Changing the theme you're using so it will fit, means changing the CSS and widening the graphic background images with a image editor. In your case I really think choosing an other theme would be easiest. There are some great ones out there.

   PS. Did you contact the owner of the site you're displaying inside the IFRAME to ask if he/she is okay with you displaying their content on your site? - just a friendly reminder to do so. You don't want to get yourself into any trouble.

8. Dgold
   Member
   Posted 3 years ago #

   You don't really have to change the entire theme.

   Just make a new, custom page template, and add it to your current theme. Under the Edit Page area of your WP-Admin, Apply your wide-page.php template to your Iframe Page.

   http://codex.wordpress.org/Pages#Creating_Your_Own_Page_Templates

9. benmoore
   Member
   Posted 3 years ago #

   Thanks for the feedback all.

   jberghem: The content displayed within the iframe is mine actually. The data is hosted through our MLS system. Rather then linking visitors out to a my off-site source to search for property I want to find a solution to allow them to conduct a search while still feeling that they are still on my site.

   I have sent out an email to the template designer and got a suggestion that helped a bit but it's still not quite wide enough. Will try the suggestion above as well, but with a very limited knowledge of code I usually just tinker till it either works the way I want or it's hopelessly broken and I revert back to the original. :)

10. jberghem
    Member
    Posted 3 years ago #

    I see you changed the theme. Looks good! I think you can solve the little width problem that's left by zero-ing out the margins and paddings on the IFRAME and making it a little wider. Possibly use negative margins on the left and right.

    The code you have is:
    

    <p><iframe src="http://www.searchpoint.net/search.asp?_org_id=idswrmls-r&_agent_public_id=14945&_sponsor_office_id=1834" width="100%" align="left" height="1150" frameborder="0" scrolling="auto"></iframe></p>

    change it to:
    

    <iframe class="prsearch" src="http://www.searchpoint.net/search.asp?_org_id=idswrmls-r&_agent_public_id=14945&_sponsor_office_id=1834" frameborder="0" scrolling="auto"></iframe>

    then add the class selector to your style.css file like this
    

    .prsearch {
          width: 100%;
          heigth: 1150px;
          border: none;
          margin-top: 0px;
          margin-bottom: 0px;
          margin-left: 0px;
          margin-right 0px;
          padding: 0px;
    }

    Maybe you'll need to set the left and right margins to -5px to get it to fit. Just play around with it.

    Another option is:
    Since the source site is yours you have access to the source ASP files. If the server running your WordPress has ASP installed you could create a template file with this code in it. Then you wouldn't have to use an IFRAME. (or convert the ASP to PHP since ASP is the Microsoft version of PHP)

11. benmoore
    Member
    Posted 3 years ago #

    jberghem: You're my HERO! Thank you for your suggestion. Utilizing your modification got me closer to my goal. For some reason however when I made those changes and started monkeying with a negative value on the left and right margin the content would only shift left. What I mean is that the content would move to the left, but would not display any additional content on the right edge. Still cutting off halfway through the u in logout.

    Starring at the code for the .prsearch in the style.css just before bashing my head on the desk it occurred to me that maybe I didn't want a width value in percentage. Thinking that forcing a px value might bump me out on the right enough to display the whole iframe content and with a little tweaking and trial and error I think we're across the finish line.

    One thing that I did notice is that Firefox sure handles overstatements better then IE. I tried a width of 650px which looked just fine in FF 3 but in IE7 the beige background on the left nav was blown out like nobody's business leaving lots of white space and looking very very bad. Trial and error down to 610 width seems to have resolved that issue and results in no scroll bars. YAY!

    Thanks again for the assist. Your time and expertise are very much appreciated. Now I can get on with finishing navigation and start putting content up. :D

    Have a great day!
    Ben

12. jberghem
    Member
    Posted 3 years ago #

    Well, when you add the negative margin you can increase the width of your IFRAME by the same amount of pixels. (sorry that I wasn't clear on that.)
    Indeed if the width is not changed it will only appear to shift to one side. Remember that the 100% is the width of the parent element, and therefore when using negative margins the width needs to be set above 100%. I just used the 100% value because I was too lazy to calculate the pixel width of the parent element.

13. LuCaniTy
    Member
    Posted 2 years ago #

    jberghem: thanks for your suggestion. I follow everything that you posted but having a problem with the height.
    http://www.luctran.com/?page_id=46
    Please Help

14. Mark / t31os
    Moderator
    Posted 2 years ago #

    That's because there's a typo with height...

    .prsearch {
    width: 100%;
    heigth: 100000px;
    border: none;
    margin-top: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    margin-right 0px;
    padding: 0px;
    }

    Correct the typo and it'll be fine.. ;)

    NOTE: You might wanna bring it down from 100'000 before loading up the page... ;)

15. jberghem
    Member
    Posted 2 years ago #

    Oh yeah typo's, you spend hours working around typo's or a missing semicolon, Now that's a lot of fun!!

16. Mark / t31os
    Moderator
    Posted 2 years ago #

    You can style the CSS in the iframe by the way....

    For example to target the body in the iframe..
    iframe body {}
    Or..
    body iframe body {}
    Or...
    body body {}

    Assuming you don't use iframes extensively this should only match in one place on your site... because no other pages will have a body tag sat inside another body tag...

    body body table {}
    ..would target the tables in the iframe site, since the second body doesn't exist until the iframe...

Topic Closed

This topic has been closed to new replies.