nifty cube images limited to template?

[terimurphy]

Is there a way to use Nifty Cube to place rounded images that vary from page to page (as opposed to say, a logo, which is fixed by the template.) ?

If I understand correctly, only background images can be rounded by Nifty Cube, and the CMS Pages input form won't let me place a div styled with a background image. (the HTML editor keeps changing "url (whatever)" to "none.") Therefore, it seems that divs with rounded images must be placed in a template  and cannot be used to place images that vary on individual pages. Is there a way around this?

Thanks,
Teri

[streever]

Hi Teri,

I am not familiar with nifty cube, but the basic principle is very familiar:
you essentially need to place background images on pages.

There are a number of ways you could do this: but, I'm not sure what "final effect" you are looking for: can you post a link, or detail what you want to happen, both front-end & back-end, and how it will be used?

[terimurphy]

Hi Streever,

In regard to this "Info" page and its two sub-pages:
http://myharbourisland.com/property/index.php?page=info

After putting "div#news" in layout.js, I am successfully getting a rounded image on the right side of EVERY page using this code in my template:

       
           
           
             
                {content block='news1'}
             
           
         

But I want a different rounded image in the same location on each page. (Plus I guess I still have some goobers with padding or something in IE, and Firefox isn't rounding at all yet.)

Teri

[terimurphy]

Adding to my prior note:

I now see that instead of having "padding goobers" on the sub pages, I apparently needed content in the divs to get them to round, heh?
Teri

[Dr.CSS]

You can round any div indifferent to the image or content in it...

You will need to use the transparent call to get it...

/*nifty corners layout*/

window.onload=function(){
Nifty("div#header","transparent");
Nifty("div#menu a","transparent");
Nifty("ul#intro li","same-height");
Nifty("div.date");
Nifty("div#content img.rownd","transparent");
Nifty("div#content,div#side","same-height");
Nifty("div.comments div");
Nifty("div#footer");
Nifty("div#container","all");
}

Used here... you can call the image from CSS...

http://multiintech.com/index.php/Home/sesame.html

[streever]

hey teri,

I suggest in the CSS you change it:

so, you have,


in your html

instead, have it be set in the CSS file like so:
/* ROUNDED CORNERS SET BY SECTION
-----------------------------------------------------------------------*/

body#pageAlias div#news {
background: url("uploads/images/site/aerial.jpg");
height: 297px;
}

body#SOMEOTHERpageAlias div#news {
background: url("uploads/images/site/SOMEOTHERIMAGE.jpg");
height: 500097px;
}

NOW--you change your HTML:



this ensures that EVERY page will have a body id="pagealiasPage"...

does this make sense? I apologize if it doesn't...

[terimurphy]

Whoa! I think you guys just taught me something new, but I'm not clear on whether I need Steevr's technique IN ADDITION to Mark's or instead. Mark, are you saying that if I add "transparent" in the call, it will round a FOREGROUND image (and thus one I can place as content on every page rather than in the stylesheet)?

And Steevr, which part of this address constitutes the alias for this purpose:
http://myharbourisland.com/property/index.php?page=info
Is it just "Info"?
I think you've just given me a way to make happy a client who says she wants a different background color on every page!

Big thanks, guys

[streever]

hmm, i am not sure about mark's way, I have nooo familiarity with the nifty cubes js

but, I do know that it's good to have a special alias for each page and that is exactly what this gives you

now let's say that you have CHILDREN pages of the Parent: and you want them to have the SAME background image as daddy/mommy?

you can do that too! you just use a plugin I wrote--"sectiontitle"--and put it in like this:


and yes, in your sample URI:
info is the page alias

the page alias is the part that comes after index=?

it's also listed for every page in the OPTIONS tab!

[terimurphy]

This is SO exciting--but I can't get it to work yet. I'm trying to put a different image in the "news" div of each of two child pages of the "Info" page: "Buying" and "Building" ( as seen at http://myharbourisland.com/property/index.php?page=building)

In the nifty cube template I added EXACTLY this:
 

and removed reference to the image in the News div so it's just plain:
           
           
           
             
                {content block='news1'}
             
           
         

And in the stylesheet I added this:

body#buying div#news {
background: url("uploads/images/site/aerial.jpg");
height: 297px;
}

body#building div#news {
background: url("uploads/images/site/kaseman.jpg");
height: 480px;
}

The result is that the images are not showing at all. Whereas in my prior test (of putting the background image style directly in the News div) I did get the same rounded image on both pages.  (Plus I also added "transparent" in the js, though I didn't see it make a difference.)

[streever]

hey teri,

you are so close

do you see the body id="" part?

we manually added the word "Page" to the end of each alias

so it'd be, "infoPage", "newsPage", etc....

check "source" of the HTML Document on your site to see the proper id !

[streever]

opps Teri

I'm sorry!!!

I gave you the wrong tag for Page alias

it's ACTUALLY:
$page_alias

I just double checked

so change it to:



Now, if you are unsure what the final id is, check the HTML output of the page: look at source: and you will see body id="newsPage" or "infoPage" etc....

[terimurphy]

Ooh, sorry, you've lost me. My two pages are "buying" and "building"
If I put in my template:



I'll need a separate template for the "Buying" page, huh? --which is what I was trying to avoid.
What am I missing?

[streever]

hey teri,

it's easy!

just this is the call:



that will produce the following:



you set it in ONE template, and it will work for all pages!

I think I'm making it confusing by showing you the expected output, no? I am just showing you that so you can make sure you did it right: as long as drop into your template, this will work!

[Dr.CSS]

@streever

Just curious why you use Page on the page alias tag?...

Could just be {$page_alias}...

The page alias could just be put on the news div as a class to use as a style option... class="{$page_alias}"...

[terimurphy]

Boo hoo, Boo hoo!   So close, and yet so far.

Your marvelous trick is in fact producing output of and SO COOL!
But the "News" div is not picking up any attributes from your addition to the style sheet. I added a background color to rule out the problem being with Nifty Cube (at the page http://myharbourisland.com/property/index.php?page=buying)

body#buying div#news {
background-color:#0000ff;
/*background: url(uploads/images/site/aerial.jpg);*/
height:279px;
}

body#building div#news {
background-color:#00ff00;
/*background: url(uploads/images/site/kaseman.jpg);*/
height:480px;
}

The template still says:

       
           
           
             
               {content block='news1'}
             
           
         

And the js call is in the last line below:

window.onload=function(){
Nifty("div#menu a","transparent");
Nifty("ul#intro li","same-height");
Nifty("div.date");
Nifty("div#content,div#side,div#sideleft");
Nifty("div.comments div");
Nifty("div#footer");
Nifty("div#container","all");
Nifty("div#header","bottom","transparent");
Nifty("div#menu_vert");
Nifty("div#news","transparent");
}