The Joomla! Forum ™

Download

Demo


Board index » Joomla! Older Version Support » Joomla! 1.5 » General Questions/New to Joomla! 1.5

Forum rules


Forum Rules
Absolute Beginner's Guide to Joomla! <-- please read before posting.
Forum Post Assistant - If you are serious about wanting help, you should use this tool to help you post.



Post new topic Reply to topic  Page 1 of 1
  [ 5 posts ] 
  Print view Previous topic | Next topic 
Author Message
abcrobots
PostPosted: Sat Jul 19, 2008 10:09 pm 
Joomla! Apprentice
Joomla! Apprentice

Joined: Mon May 07, 2007 5:26 pm
Posts: 22
Hi.
My apologies if this question has been answered already.

I have tried to add a background image in my content item (one page) in my 1.54 installation. I have tried to add a short .css declaration in <body> tags at the start of the page, and it looks fine in the editor, but on the live site, the bg image does not load.
I suspect that the global .css is overriding my additional .css declarations.

Can someone please explain to my dense brain how to do this?

Thanks guys.
:-[ :D :)
Top
 Profile  
 
dextercowley
PostPosted: Sun Jul 20, 2008 2:37 am 
User avatar
Joomla! Virtuoso
Joomla! Virtuoso

Joined: Sun Apr 06, 2008 4:44 am
Posts: 3289
Location: Seattle, WA, USA
Hi. I didn't know how to do it, so I did some experimenting. This is one way to do it. There may be a better or easier way.

1. In the menu item(s) that you want to show the background image, set the Page Class Suffix in the Paramters (System) to something like "_mybackground".
2. Edit your template.css file (in the <joomla home>/templates/<your template>/css/" folder). Find the part of the file where "table.componentopen" is being set. Add a new section to set the table.contentpaneopen_mybackground, as follows (assuming your image is in "images" folder):
Code:
table.contentpaneopen_mybackground {
   background-image: url(../images/<your image>);
}


That should work. You can set as many Page Class Suffixes as you like, so you could have different backgrounds for different menu items (pages). Hope this helps. Please post back if it works. Mark

_________________
Mark Dexter
"Well...how did I get here?"
Top
 Profile  
 
dextercowley
PostPosted: Sun Jul 20, 2008 3:07 am 
User avatar
Joomla! Virtuoso
Joomla! Virtuoso

Joined: Sun Apr 06, 2008 4:44 am
Posts: 3289
Location: Seattle, WA, USA
Hi. I forgot to add that you may need to make some other changes to your template to fix up headings. For example, in playing around with this using the rhuk_milkyway template, I found I needed to add ".contentheading_mybackgroundimage" to the "h2, .contentheading" line and ".componentheading_mybackgroundimage" to the h3, ".componentheading, table.moduletable th, legend" line.

I also needed to add ".componentheading_mybackgroundimage" to the "h3, .componentheading, table.moduletable th" section of the "blue.css" file (I'm using the default Blue color).

Without these changes, you lose the styling for the article headings. There may be some other tweaks needed, depending on the menu item type. You can use Web Developer to figure out where the styling is coming from for each heading and then fix it accordingly. You can also use "View Page Source" to see where Joomla! is putting the new class suffix.

This is actually a pretty cool feature. I was wondering how you actually used the "Page Class Suffix". I might just put some background colors on my site!

Hope this helps. Mark

_________________
Mark Dexter
"Well...how did I get here?"
Top
 Profile  
 
abcrobots
PostPosted: Tue Jul 22, 2008 1:06 am 
Joomla! Apprentice
Joomla! Apprentice

Joined: Mon May 07, 2007 5:26 pm
Posts: 22
Hi Mark-
This sounds like a really promising idea.
however, I'm using the JA_purity template, which is really cool, and I'm not sure about where I need to park that code.
Here's where I put it in- Let me know if I'm close, or if that's what you meant.

Code:
table.contentpane {
   border: none;
   width: 100%;
}

table.contentpaneopen {
   border: none;
   border-collapse: collapse;
   border-spacing: 0;
}

table.contentpaneopen_washed {
   background-image: url(../images/mylogo.png);
         
}


table.contenttoc {
   margin: 0 0 10px 10px;
   padding: 0;
   width: 35%;
   float: right;
}

table.contenttoc a {
   text-decoration: none;

As you can see, I've chosen to call this style _washed because it is a washed-out logo that I want ghosetd in the background.
However, I'm a code NUBE (apologies) but I'm learning more as time goes by. Please dumb down your explanation so that I can follow you.

Thanks for helping.
Top
 Profile  
 
dextercowley
PostPosted: Tue Jul 22, 2008 5:26 am 
User avatar
Joomla! Virtuoso
Joomla! Virtuoso

Joined: Sun Apr 06, 2008 4:44 am
Posts: 3289
Location: Seattle, WA, USA
Hi. I'm not very familiar with the ja_purity template. It doesn't look like the styling works the same way on that one, so I'm afraid my suggestion doesn't seem to work for that template.

If you just want to put a background image behind every article, you could try inserting the following into your template.css file:
Code:
div.article-content {
   background-image: url(../images/<your image>);
}


But this will not give you the option to use it selectively. Hope this helps. Mark

_________________
Mark Dexter
"Well...how did I get here?"
Top
 Profile  
 
Display posts from previous:  Sort by  
Post new topic Reply to topic  Page 1 of 1
  [ 5 posts ] 


Board index » Joomla! Older Version Support » Joomla! 1.5 » General Questions/New to Joomla! 1.5

Who is online

Users browsing this forum: Yahoo [Bot] and 21 guests

You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Jump to:  
Powered by phpBB® Forum Software © phpBB Group