By cheryl.workbooks on

Hey,

I've added an iFrame to one of my pages, it needs to go wider than standard due to the page that's displayed within the frame.

I've experimented with changing #content-sub (found in style.css) from 960px to 100% however this changes the width of everypage.

How can get a wider content area for a single page?

My iFrame code is:

<style type="text/css">
#left {
display: none;
float: left;
width: 212px;
}
#right {
display: block;
float: right;
width: 100%;
}</style>
<div align="left">
<iframe height="1000" src="https://secure.workbooks.com/process/=YjN4gDN/case_portal" style="width:100%"></iframe></div>

Many thanks,

Sam

⋅ Categories: Drupal 7.x

Comments

ral1239’s picture

ral1239 commented

Drupal supplies each node with unique classes so if you follow the DOM hierarchy going up, you'll find a class that's specific to that node along with your element.

For example, if you look at the body tag using Chrome Dev Tools, you'll see it has a class with something like .page-node-73, so you could target your element on that specific page by doing something like ".page-node-73 #content-sub" to target that element in your css.

cheryl.workbooks’s picture

cheryl.workbooks commented

Interesting. Thanks for the reply.

Could I use the page title instead of the node number? I.E. .section-portal-test #content-sub

Thanks,

Sam

ral1239’s picture

ral1239 commented

You can use whatever you want as long as your #content-sub element is nested under the parent/s you're targeting in your css. I'm not sure how the DOM looks for your page, but I believe the page title is outside the body tag, which contains your #content-sub element. If this is the case then you can't use do it by title.

If your element is nested like this:

.section-portal-test (Parent)
- .some-example-element
-- #content-sub (your element)

In this case, you can target #content-sub using the title. You can target it anyway you want, but I choose the node number class as an example because you said you wanted it to be on a specific page. Since a node number is unique, its unlikely for another node to have the same class.

cheryl.workbooks’s picture

cheryl.workbooks commented

Thanks Ral,

How can I be sure I'm nesting it under the parent?

ral1239’s picture

ral1239 commented

Using Chrome, Mozilla, or Internet Explorer as your browser you can use the Dev Tools to inspect your DOM elements by pressing F12. https://developer.chrome.com/devtools/docs/dom-and-styles