The Joomla! Forum ™



Forum rules


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



Post new topic Reply to topic  [ 34 posts ]  Go to page 1, 2  Next
Author Message
PostPosted: Fri Aug 08, 2008 9:50 pm 
Joomla! Apprentice
Joomla! Apprentice

Joined: Fri Aug 08, 2008 9:45 pm
Posts: 32
I'm quite new to this particular wonderland, and I am sure this will qualify as a dumb question, but I was wondering...
Is there a way to create a background image in an article?

[mod edit: added solved to subject]

_________________
I like to say, this is what you should watch out for. This is what you're likely to screw up. If you do screw it up it's no big deal. In fact, I expect you to screw this up the first, and the second, and even the third time.


Top
 Profile  
 
PostPosted: Sat Aug 09, 2008 8:49 am 
User avatar
Joomla! Master
Joomla! Master

Joined: Thu Jul 17, 2008 3:10 pm
Posts: 10948
Location: Ireland
Do you want to add it to just one article or do you want to add to all articles?

In case you want to add it to all articles, you can use a css style sheet to add a background-image to each article.

Olaf

_________________
Olaf Offick - Global Moderator
http://learnskills.org


Top
 Profile  
 
PostPosted: Sat Aug 09, 2008 1:16 pm 
User avatar
Joomla! Virtuoso
Joomla! Virtuoso

Joined: Sun Apr 06, 2008 4:44 am
Posts: 3290
Location: Seattle, WA, USA
Hi. If you want to change the background image for one menu item, you can use the Page Class Suffix. This changes the class for elements on a given page, so it allows you to edit the CSS and only have it affect the desired menu items. Here is a link with a little more info on this: http://forum.joomla.org/viewtopic.php?f=428&t=309178 Hope this helps. Mark

_________________
Mark Dexter
"Well...how did I get here?"


Top
 Profile  
 
PostPosted: Sat Aug 09, 2008 3:45 pm 
Joomla! Apprentice
Joomla! Apprentice

Joined: Fri Aug 08, 2008 9:45 pm
Posts: 32
I was looking to only create a background image for a single article. OR, if possible, different background images for different articles.

_________________
I like to say, this is what you should watch out for. This is what you're likely to screw up. If you do screw it up it's no big deal. In fact, I expect you to screw this up the first, and the second, and even the third time.


Top
 Profile  
 
PostPosted: Sat Aug 09, 2008 5:19 pm 
User avatar
Joomla! Virtuoso
Joomla! Virtuoso

Joined: Sun Apr 06, 2008 4:44 am
Posts: 3290
Location: Seattle, WA, USA
It can be done easily for an article layout. Just use page class suffix as in my previous post. But for a blog layout (front page, category, section), it will be a little tricky, since there is no page class suffix parameter on a per article basis.

If you can write PHP code, you could do this with a template override. You could use an unused parameter (like key reference, which you probably wouldn't use for anything else) and make it work like a page class suffix (that is, modify the PHP code to add the key reference parameter to the end of the class for the content item). That would get you different style classes for different articles and it would be easy to enter when writing the article. Then you would modify the CSS to style these classes with different background images. You can read about template overrides here: http://docs.joomla.org/How_to_override_the_output_from_the_Joomla!_core

If you don't know PHP, you could look through extensions to see if there is anything there.

Hope this helps. Mark

_________________
Mark Dexter
"Well...how did I get here?"


Top
 Profile  
 
PostPosted: Sun Aug 10, 2008 1:11 pm 
Joomla! Apprentice
Joomla! Apprentice

Joined: Fri Feb 08, 2008 11:03 pm
Posts: 37
Guys, not sure if there is any limitations with this or if it causes any problems but upon first look it works!

Paste this before any content or text in your article and replace the image source accordlngly;

<div id=layer1 style="z-index:1; padding:5px; border: #FFFFFF 0px solid; background-image:url(http://coolidgeavenue.net/images/backgr ... orembg.gif); layer-background-image:url(http://coolidgeavenue.net/images/backgr ... orembg.gif);">

Works for me!!


Top
 Profile  
 
PostPosted: Sun Aug 10, 2008 5:21 pm 
Joomla! Apprentice
Joomla! Apprentice

Joined: Fri Aug 08, 2008 9:45 pm
Posts: 32
Thanks for the tips Mark. I'm gonna give it a whirl tomorrow when I have a little time to play around. I'll let you know! Thanks again ;)

_________________
I like to say, this is what you should watch out for. This is what you're likely to screw up. If you do screw it up it's no big deal. In fact, I expect you to screw this up the first, and the second, and even the third time.


Top
 Profile  
 
PostPosted: Sun Aug 10, 2008 6:20 pm 
User avatar
Joomla! Virtuoso
Joomla! Virtuoso

Joined: Sun Apr 06, 2008 4:44 am
Posts: 3290
Location: Seattle, WA, USA
Hi. Actually you can just use this code:
Code:
<div style="background-image: url('images/stories/key.jpg')">

Also, this works for a background color:
Code:
<div style="background-color: #dddddd">


It works best to use the HTML button in the editor to add or edit this. Hope this helps. Mark

_________________
Mark Dexter
"Well...how did I get here?"


Top
 Profile  
 
PostPosted: Thu Aug 14, 2008 1:55 pm 
Joomla! Enthusiast
Joomla! Enthusiast

Joined: Thu Aug 17, 2006 8:01 am
Posts: 230
can I use this to make the background colour of each frontpage article standout from the main background?

Currently everything is one colour and seems to be in the same class 'TD'. how do I go about seperating them if at all? I want the article to be one colour, date another and title/header another.


Top
 Profile  
 
PostPosted: Thu Aug 14, 2008 3:43 pm 
User avatar
Joomla! Virtuoso
Joomla! Virtuoso

Joined: Sun Apr 06, 2008 4:44 am
Posts: 3290
Location: Seattle, WA, USA
Hi. I just created a Tip & Trick article for this. Here is the link: http://docs.joomla.org/Put_a_background_image_or_color_on_an_article. Hope this helps. Mark

_________________
Mark Dexter
"Well...how did I get here?"


Top
 Profile  
 
PostPosted: Thu Aug 14, 2008 3:49 pm 
User avatar
Joomla! Master
Joomla! Master

Joined: Thu Jul 17, 2008 3:10 pm
Posts: 10948
Location: Ireland
Mark,

don't forget to add the closing tag like this one:
Code:
</div>
in the last line.

Olaf

_________________
Olaf Offick - Global Moderator
http://learnskills.org


Top
 Profile  
 
PostPosted: Thu Aug 14, 2008 4:14 pm 
User avatar
Joomla! Virtuoso
Joomla! Virtuoso

Joined: Sun Apr 06, 2008 4:44 am
Posts: 3290
Location: Seattle, WA, USA
Hi Olaf. Good point. TinyMCE automatically adds the </div> tag when you save the file. I'll include that in the Tip article. Thanks. Mark

_________________
Mark Dexter
"Well...how did I get here?"


Top
 Profile  
 
PostPosted: Fri Aug 15, 2008 7:56 am 
Joomla! Enthusiast
Joomla! Enthusiast

Joined: Thu Aug 17, 2006 8:01 am
Posts: 230
can you add the div's to the title & date of an article?


Top
 Profile  
 
PostPosted: Fri Aug 15, 2008 8:03 am 
User avatar
Joomla! Master
Joomla! Master

Joined: Thu Jul 17, 2008 3:10 pm
Posts: 10948
Location: Ireland
You would need to use the template overwrite to do that or follow Mark's other suggestion with the "Page Class Suffix".

Olaf

_________________
Olaf Offick - Global Moderator
http://learnskills.org


Top
 Profile  
 
PostPosted: Fri Aug 15, 2008 8:20 am 
Joomla! Enthusiast
Joomla! Enthusiast

Joined: Thu Aug 17, 2006 8:01 am
Posts: 230
as mentioned above they are all in the same class - title, date, content. 'Main' for everything together and 'td' for them individually. Do articles have their own template that I can work with?


Top
 Profile  
 
PostPosted: Fri Aug 15, 2008 8:24 am 
User avatar
Joomla! Master
Joomla! Master

Joined: Thu Jul 17, 2008 3:10 pm
Posts: 10948
Location: Ireland
Hi,

as I said you can do that with the template overwrites:
  1. create a folder in your template folder called "html" (if it doesn't exists)
  2. create a folder in that html folder called "com_content" (if it doesn't exists)
  3. create a folder in that com_content folder called "article" (if it doesn't exists)
  4. copy the file .../components/com_content/views/article/tmpl/default.php in this .../templates/[your-template]/html/com_content/article/ folder
  5. edit that file

Olaf

_________________
Olaf Offick - Global Moderator
http://learnskills.org


Top
 Profile  
 
PostPosted: Fri Aug 15, 2008 8:38 am 
Joomla! Enthusiast
Joomla! Enthusiast

Joined: Thu Aug 17, 2006 8:01 am
Posts: 230
I don't have...views/article/tmpl/default.php


Top
 Profile  
 
PostPosted: Fri Aug 15, 2008 8:49 am 
User avatar
Joomla! Master
Joomla! Master

Joined: Thu Jul 17, 2008 3:10 pm
Posts: 10948
Location: Ireland
You don't have a file called:

Code:
/[your-joomla-path]/components/com_content/views/article/tmpl/default.php


Well, then you would need to get that from your version of the J! 1.5.x zip file.

Olaf

_________________
Olaf Offick - Global Moderator
http://learnskills.org


Top
 Profile  
 
PostPosted: Fri Aug 15, 2008 9:01 am 
Joomla! Enthusiast
Joomla! Enthusiast

Joined: Thu Aug 17, 2006 8:01 am
Posts: 230
maybe coz I've realized this is for 1.5 when I'm on 1.0 :-[ :(


Top
 Profile  
 
PostPosted: Fri Aug 15, 2008 9:06 am 
Joomla! Enthusiast
Joomla! Enthusiast

Joined: Thu Aug 17, 2006 8:01 am
Posts: 230
are these what I should be editing?

Code:
<tr>
   <td valign="top" class="createdate">
      <?php echo JHTML::_('date', $this->article->created, JText::_('DATE_FORMAT_LC2')) ?>
   </td>
</tr>


Code:
<td valign="top">
<?php if (isset ($this->article->toc)) : ?>
   <?php echo $this->article->toc; ?>
<?php endif; ?>
<?php echo $this->article->text; ?>
</td>


Code:
<tr>
   <?php if ($this->params->get('show_title')) : ?>
   <td class="contentheading<?php echo $this->params->get( 'pageclass_sfx' ); ?>" width="100%">
      <?php if ($this->params->get('link_titles') && $this->article->readmore_link != '') : ?>
      <a href="<?php echo $this->article->readmore_link; ?>" class="contentpagetitle<?php echo $this->params->get( 'pageclass_sfx' ); ?>">
         <?php echo $this->escape($this->article->title); ?></a>
      <?php else : ?>
         <?php echo $this->escape($this->article->title); ?>
      <?php endif; ?>
   </td>


Top
 Profile  
 
PostPosted: Fri Aug 15, 2008 9:36 am 
User avatar
Joomla! Master
Joomla! Master

Joined: Thu Jul 17, 2008 3:10 pm
Posts: 10948
Location: Ireland
Sorry, you are in the wrong Forum, I don't have a working copy of Joomla! 1.0.x at the moment.

Olaf

_________________
Olaf Offick - Global Moderator
http://learnskills.org


Top
 Profile  
 
PostPosted: Thu Aug 28, 2008 8:58 pm 
User avatar
Joomla! Explorer
Joomla! Explorer

Joined: Tue May 15, 2007 7:15 am
Posts: 314
Location: South Africa
Hi

Try this article HerdBoy Web Design - Adding a Background Image to Your Joomla Articles

Hope it was helpful

_________________
Mustaq -War defines who's left , not who's right...
Live. Love, Learn and Joomla ! FREE ! Joomla Extensions and Tutorials @ http://www.herdboy.com Joomla Web Design and Development / Joomla Retainer Club


Top
 Profile  
 
PostPosted: Sun Sep 21, 2008 8:06 pm 
Joomla! Apprentice
Joomla! Apprentice

Joined: Thu Sep 11, 2008 3:38 pm
Posts: 15
Hi

I tried the <div> tags but the background image only shows up in the article editor window but not on the web site. it initially was but no longer any ideas.


Top
 Profile  
 
PostPosted: Sun Sep 21, 2008 8:35 pm 
Joomla! Apprentice
Joomla! Apprentice

Joined: Thu Sep 11, 2008 3:38 pm
Posts: 15
Hi again
Ok it seems to work sporadically. When I do this for an article that is accessed from the main menu it works but when i place the article on a sub menu the image doesn't show.

Any ideas why?


Top
 Profile  
 
PostPosted: Mon Sep 22, 2008 5:04 am 
User avatar
Joomla! Explorer
Joomla! Explorer

Joined: Tue May 15, 2007 7:15 am
Posts: 314
Location: South Africa
Hi

Quote:
Ok it seems to work sporadically. When I do this for an article that is accessed from the main menu it works but when i place the article on a sub menu the image doesn't show.


Is this for the same article ? Have you asked on the site there ?

Later

_________________
Mustaq -War defines who's left , not who's right...
Live. Love, Learn and Joomla ! FREE ! Joomla Extensions and Tutorials @ http://www.herdboy.com Joomla Web Design and Development / Joomla Retainer Club


Top
 Profile  
 
PostPosted: Tue Sep 23, 2008 11:41 pm 
Joomla! Apprentice
Joomla! Apprentice

Joined: Thu Sep 11, 2008 3:38 pm
Posts: 15
yes it was for the same article. i also fixed the problem i hard coded in the url.


Top
 Profile  
 
PostPosted: Thu Oct 09, 2008 10:22 pm 
Joomla! Apprentice
Joomla! Apprentice

Joined: Fri Aug 08, 2008 9:45 pm
Posts: 32
dextercowley wrote:
Hi. I just created a Tip & Trick article for this. Here is the link: http://docs.joomla.org/Put_a_background_image_or_color_on_an_article. Hope this helps. Mark


This helped out quite a bit. Thanks Mark.

_________________
I like to say, this is what you should watch out for. This is what you're likely to screw up. If you do screw it up it's no big deal. In fact, I expect you to screw this up the first, and the second, and even the third time.


Top
 Profile  
 
PostPosted: Sun Sep 06, 2009 3:30 am 
Joomla! Fledgling
Joomla! Fledgling

Joined: Sun Sep 06, 2009 3:16 am
Posts: 2
Mark, I have tried using your code for adding a background image to an article. It worked fine except for one problem - Even though I resized the image I am using to exactly the size I wanted
650x829 - when I published the article, it was chopped off vertically, with a large white margin
on the right between the article and the menus. The whole body of text published, but not all of the background image. I tried making the text go all the way to the right hand border as a test, which helped somewhat, but still did not fill the whole space over to the menus.

When I preview the article, I notice that it has added another thin strip of the background image on the right which seems to be the problem. I don't know enough about codes to fix this, but assume that there is something that I'm not doing right.

Any ideas?


Top
 Profile  
 
PostPosted: Sun Sep 06, 2009 4:06 am 
User avatar
Joomla! Virtuoso
Joomla! Virtuoso

Joined: Sun Apr 06, 2008 4:44 am
Posts: 3290
Location: Seattle, WA, USA
Hi. Can you please paste the html code for the article when you view source? Thanks. Mark

_________________
Mark Dexter
"Well...how did I get here?"


Top
 Profile  
 
PostPosted: Sun Sep 06, 2009 5:34 pm 
Joomla! Fledgling
Joomla! Fledgling

Joined: Sun Sep 06, 2009 3:16 am
Posts: 2
Hi Mark - here it is

<div style="background-image: url('images/stories/home2.jpg')">
<div style="text-align: center;"><span style="font-size: 14pt; color: #ffffff;"><span style="font-family: comic sans ms,sans-serif;"><br />A Place to Stop<br /></span></span></div>
<div style="text-align: center;"><span style="font-size: 14pt; color: #ffffff;"><span style="font-family: comic sans ms,sans-serif;">A Place to Be</span></span></div>
<div style="text-align: center;"><span style="color: #ffffff;"><br /></span></div>
<div style="text-align: left; padding-left: 150px;"><span style="font-size: 8pt; color: #ffffff;"><span style="font-family: comic sans ms,sans-serif;"><br /> Stillpoint is located in the Santa Cruz mountains of<br />California above Monterey Bay. It is a Zen community<br />that has formed around the Enlighten Master Umi,<br />around whom has flowered the rhythm and practices<br />toward Awakening. Umi invites all to participate in<br />this banquet of life. Umi invites all to awaken to their<br />Buddha nature.<br /><br /> Stillpoint is a place of creativity, of delight,<br />where you can cease the habitual worries and move into<br />your true delight of who you really are. It is a place<br />to settle into your inner bliss.<br /><br /> At Stillpoint, there is an experience of peace. It<br />envelopes you when you are walking the grounds or<br />wandering through the gardens. The colors and <br />fragrance of the flowers, the sounds of the birds,<br />the silence in the air - all bring you fully to This.<br /><br /> Umi holds public gatherings, called Satsangs, on<br />Wednesday evenings and Sunday mornings (click on<br />Satsang for times).<br /><br /> Satsangs with Umi are also available on CD <br />(click on Satsang CD's).<br /><br /> Umi is available to all who are open to waking up to<br />their true nature. Everyone at Stillpoint is also<br />available to support this.<br /></span></span></div>
<div style="text-align: left; padding-left: 150px;"><br /></div>
<div style="text-align: left; padding-left: 510px;"><span style="font-size: 8pt; color: #ffffff;"><span style="font-family: comic sans ms,sans-serif;"> A Place to Stop<br /> A Place to Be <br /></span></span></div>
<div style="text-align: left; padding-left: 150px;">
<div style="text-align: right;"><br /></div>
</div>
</div>

looking forward to your reply


Top
 Profile  
 
Display posts from previous:  Sort by  
Post new topic Reply to topic  [ 34 posts ]  Go to page 1, 2  Next



Who is online

Users browsing this forum: No registered users and 29 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