By MisterBox on

Help , I want to add different backgrounds to some of the nodes on a website !
I'm using Tiny-Imce . Is there an easy way to do that ! Please help
I tried with difeferent HTML codes but didn't succeed ????
THXS

Comments

taherk’s picture

taherk commented

If you are using tinymce then you should be able to add the background if you have enabled all the functionality of tinymce.

Make sure your input format is FULL HTML.
______________________________________
Drupal Tips, how-to, Themes @ http://mydrupal.com
http://mydrupal.com/drupal-services

MisterBox’s picture

MisterBox commented

I've enabled everything ? Is there something special to enable . A button , I enabled advanced image
Or a precise code to use other that works ???

MisterBox’s picture

MisterBox commented

Is there something i'm missing ???

henns20’s picture

henns20 commented

you can access the CSS in you theme folder styles.css

1) disable rich text for the tinymce so you can enter code
2) wrap the area that you want to have a different background color in <div class="mybackgroundcolor"><p> this some text and this is some more</p></div>

3)submit it
4) add a class to your style sheet .mybackgoundcolor { background: blue;}
5) save it and refresh you the page that you created

henns20

joshua55’s picture

joshua55 commented

Just what I need to know. Thanks!

MisterBox’s picture

MisterBox commented

it works !!!
saved me a lot of time !!!

ashley.brown.eyes’s picture

ashley.brown.eyes commented

I'm trying to figure out how to have a different background image on some single nodes, to no avail. Would this work as a way to get an image in there?

wimvb’s picture

wimvb commented

Let's assume that the location of the background-image for your page is: /drupal/sites/default/files/RIMG0027.JPG

Then edit your page (in text-mode or code-mode) and wrap the full page in a DIV-block like shown below.
Save your page and youre done.
(take care that the image is large enough or skip the repeat or add width and height to the style attribute)


<div style="background-image: url(/drupal/sites/default/files/RIMG0027.JPG); background-repeat: no-repeat">

*
*Your old page-content
*

</div>
summit’s picture

summit commented

Subscribing, greetings, Martijn

ashley.brown.eyes’s picture

ashley.brown.eyes commented

So it works -- except -- that it only shows the background image as far down as I have text, and then it cuts the image off. do you have any idea how I get it to show the whole thing even if I don't have text all the way to the bottom of the page?

(the page I'm working on is:

http://inprogress-sitebyashley.net)

wimvb’s picture

wimvb commented

In this particular case I see a better solution in a hack of the page.tpl.php in your theme-folder

Suppose you want a special background for the page in node/14

Look for the following code in page.tpl.php 

       <td valign="top">
	<div id="main" >
	<?php print $breadcrumb ?>
	<h1 class="title"><?php print $title ?></h1>         
	<div class="tabs"><?php print $tabs ?></div>
        <?php if ($show_messages) { print $messages; } ?>
        <?php print $help ?>

and replace this by

<td valign="top">
	<div id="main" <?php  if ($node->nid==14){ ?>
	   style="background-image: url(/drupal/sites/default/files/RIMG0027.JPG);" <?php } ?> >
	<?php print $breadcrumb ?>
	<h1 class="title"><?php print $title ?></h1>         
	<div class="tabs"><?php print $tabs ?></div>
        <?php if ($show_messages) { print $messages; } ?>
        <?php print $help ?>

This should do the trick. Of course you can include or exclude other pages in the same way by a corresponding style attribute.

Be carefull in typing the changed lines - a lot of brackets etc.

ashley.brown.eyes’s picture

ashley.brown.eyes commented

So that sounds like a great hack -- my one question is this:

the page I want to change (right now) is the index page, which I've created using the advanced front page module. how do i find out what the node # is on that? (also, I'm using pathauto, so all my urls are changed into words not node numbers...)

wimvb’s picture

wimvb commented

For the front-page just use $is_front or $node==0 in the if statement. As to using pathauto I can't help you - my only suggestion is to test for the node-name in the if-condition. However I think the test: if ($node->path=='your_page_alias') might work !

Success

ashley.brown.eyes’s picture

ashley.brown.eyes commented

my code is different than the code you thought I would find. I tried this:

if ($node==0){
style="background-image: url(/files/back_frontpage.jpg) no-repeat;" }
if (isset($primary_links)) :
print theme('links', $primary_links, array('class' => 'links primary-links'))
endif;

if($title):

print $title

endif;

print $tabs

if ($help): print $help; endif;
if ($messages): print $messages; endif;
print $content;

and it didnt' work. when i had it in there without the no-repeat, the image did show up, but it repeated horizontally and messed up my divs. with the no repeat nothing shows up at all. so i've put it back now to the half-chopped off image for tonight, and I'm going to revisit the question in the morning.

any suggestions would be grand.
-ashley

wimvb’s picture

wimvb commented

In your code it is IMPORTANT that the full code with $primary_links, $title,$tabs,.. $feed_icons up to the
printing of the page-footer is wrapped into a DIV. If these DIV's are not there, you HAVE TO ADD THEM just
like I did in the code below.

I explicitly marked these DIV's with ## at the left margin . BEWARE, these ## are NOT PART of
the code but only for marking purpose here and have to be removed !

In this way, the DIV actually gets an attribute style="... and later will generate a HTML-code
of the form <DIV id="main" style="background-image ...>
The id="main" attribute helps to apply CSS-control later ("main" can be any other name).

Pay attention to the double > > tokens at the line <?php } ?> > as the last > token is the matching bracket
of the <DIV ..> statement!

I also changed the 'no-repeat' to the correct syntax.

So now you should change your code more or less as follows (the ##-lines mark the changes) :

<table border="0" cellpadding="0" cellspacing="0" id="content" height="700px">
  <tr>
    <?php if ($left) { ?><td id="sidebar-left" rowspan="2">
      <?php print $left ?>
    </td><?php } ?>
    <td valign="top">

## <DIV id="main" <?php  if ($node==0){ ?>
##    style="background-image: url(/files/back_frontpage.jpg);background-repeat: no-repeat;" 
##    <?php } ?> >

	<?php if (isset($primary_links)) : ?>
	<?php print theme('links', $primary_links, array('class' => 'links primary-links')) ?
	<?php endif; ?>
	<?php if($title): ?>
	<?php print $title ?>
	<?php endif; ?>
	<?php print $tabs ?>
  	<?php if ($show_messages) { print $messages; } ?>
        <?php print $help ?>
        <?php print $content; ?>
        <?php print $feed_icons; ?>

##  </DIV>

        etcetera ....

Let me know how things develop

ashley.brown.eyes’s picture

ashley.brown.eyes commented

so the strangest thing. I inserted your code and it worked -- the image only showed up on the home page, though it was still cut off at the bottom where the text content of the page ended. also, the image spilled over my wrapper about 20px on the right side. I had made the background image too wide for the content div. So I went into photoshop and made the image narrower, and then when I replaced it in my files directory, it just ceased showing up at all. I didn't change the code one bit. This is the code I'm using:

if ($node==0){
style="background-image: url(/files/back_frontpage.jpg);background-repeat: no-repeat;"
} >

if (isset($primary_links)) :
print theme('links', $primary_links, array('class' => 'links primary-links'))
endif;

if($title):

print $title

endif;

print $tabs

if ($help): print $help; endif;
if ($messages): print $messages; endif;
print $content;

and now the page is loading really slowly.
the page remains: http://inprogress-sitebyashley.net

ashley.brown.eyes’s picture

ashley.brown.eyes commented

I re-pasted the code in. the image is back, and overlapping strangely. I have to get away from the computer now. this is driving me nuts.

ashley.brown.eyes’s picture

ashley.brown.eyes commented

i tried pasting in all the code you suggested -- including the table specifications and the left sidebar stuff -- and it made the page go nuts, sidebar down below the content, everything all over the place, so i took it out.

ashley.brown.eyes’s picture

ashley.brown.eyes commented

I went back to the original advice about creating a class for the background image.

I added the following to my style sheet:
.custombackgroundimage {
background: url(images/back_frontpage.jpg) repeat-y;
}

and then wrapped the content of my page in

content

and created a transparent .png image to use as a spacer when my text wasn't quite long enough to get the whole background to display. you can see the result here:
http://inprogress-sitebyashley.net.

(I'm going to change the actual image. it was just a test to see if i could get it all working.)

thanks for help everyone

MisterBox’s picture

MisterBox commented

I always us the style sheets to add backgrounds and it works well
If you don't have a lot of pages or if you just want to add a background to a sspecific node use this it's simple and it works
you can change margin, padding, max size etc...
#node-17 {
background: url('/files/u1/frais.jpg') no-repeat; height:652px;
font-size: 122%;color: #000000;
padding-left:110px;
padding-top:140px;
padding-right:25px:
margin-left:25px;
max-width: 652px;
max-height:652px;
}
a site where I applied it : http://www.picnik.be/startpagina

if you want to add a background at the complete site i also use the stylesheet
for instance on these both sites there is a background behind the container and there is a different background on the node.
http://www.i-love-it.be/ and http://www.experia.be/intro2
It's a litle bit more work to do since there are a lot off things to check but with webdeveloper or firebug you schould get it right !
This is the part of the code where I changed everything ,each template has other css so you'll have tocheck it anyway but this might help you to get an idea ! This is the way to adapt Tapestry from the great Rooplethemes !
You will notice that there are different places where you have to change stuff,but finally it works.
I hope that I helped domebody with this.

body { color: #FFFFFF;
background: #fff url(../images/modoffice/dakenback.gif);
}
a { color: #E7C60F; }
#outer-container { #fff url(../images/modoffice/dakenback.gif); }
#container { background: #1A1921 url(../images/modoffice/backnode.jpg); }
#container { color :#E8E7E7; }
#banner { background-color: #fff; }
#container .page-bottom { display:none background: #fff url(../images/modoffice/page-bottom.png) repeat-x; }
#leaderboard { display: none; }
#trailerboard { background: #4F6373; }
#header { background: #E7C60F url(../images/modoffice/dakenback.gif); }
#headercontainer { background: #E7C60F; }
#header a { color: #D9D7AC; }
.site-slogan { color: #8F8164; }
#header-bottom { display:none; background:#996600; }

wimvb’s picture

wimvb commented

Dear Ashley,

I think we did not quite understand each other - I assumed that the unmarked lines in my code turned up somewhere in your page.tpl.php which they probably did'nt.

It is in most cases only necessary to modify the line <?php print $content ?> as this line produces the main content of your page.
So only REPLACE THE LINE <?php print $content ?> with

<DIV <?php if ($node==0){ ?>
    style="background-image: url(/files/back_frontpage.jpg);background-repeat: no-repeat;" 
    <?php } ?> > <?php print $content ?>
</DIV>

If adequate you may add the attribute background-attachment: fixed; to above style-part.

This small modification should work -- no need to worry about sidebars and links etc.

Greetings
Wim