[SOLVED] Article Background Image?

Need help with the Administration of your Joomla! 1.5 site? This is the spot for you.

Moderator: General Support Moderators

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.
Rhombi313
Joomla! Apprentice
Joomla! Apprentice
Posts: 32
Joined: Fri Aug 08, 2008 9:45 pm

[SOLVED] Article Background Image?

Postby Rhombi313 » Fri Aug 08, 2008 9:50 pm

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.

User avatar
ooffick
Joomla! Master
Joomla! Master
Posts: 11063
Joined: Thu Jul 17, 2008 3:10 pm
Location: Ireland
Contact:

Re: Article Background Image?

Postby ooffick » Sat Aug 09, 2008 8:49 am

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

User avatar
dextercowley
Joomla! Virtuoso
Joomla! Virtuoso
Posts: 3290
Joined: Sun Apr 06, 2008 4:44 am
Location: Seattle, WA, USA

Re: Article Background Image?

Postby dextercowley » Sat Aug 09, 2008 1:16 pm

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?"

Rhombi313
Joomla! Apprentice
Joomla! Apprentice
Posts: 32
Joined: Fri Aug 08, 2008 9:45 pm

Re: Article Background Image?

Postby Rhombi313 » Sat Aug 09, 2008 3:45 pm

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.

User avatar
dextercowley
Joomla! Virtuoso
Joomla! Virtuoso
Posts: 3290
Joined: Sun Apr 06, 2008 4:44 am
Location: Seattle, WA, USA

Re: Article Background Image?

Postby dextercowley » Sat Aug 09, 2008 5:19 pm

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?"

smooth-c
Joomla! Apprentice
Joomla! Apprentice
Posts: 37
Joined: Fri Feb 08, 2008 11:03 pm

Re: Article Background Image?

Postby smooth-c » Sun Aug 10, 2008 1:11 pm

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!!

Rhombi313
Joomla! Apprentice
Joomla! Apprentice
Posts: 32
Joined: Fri Aug 08, 2008 9:45 pm

Re: Article Background Image?

Postby Rhombi313 » Sun Aug 10, 2008 5:21 pm

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.

User avatar
dextercowley
Joomla! Virtuoso
Joomla! Virtuoso
Posts: 3290
Joined: Sun Apr 06, 2008 4:44 am
Location: Seattle, WA, USA

Re: Article Background Image?

Postby dextercowley » Sun Aug 10, 2008 6:20 pm

Hi. Actually you can just use this code:

Code: Select all

<div style="background-image: url('images/stories/key.jpg')">

Also, this works for a background color:

Code: Select all

<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?"

debragrant
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 230
Joined: Thu Aug 17, 2006 8:01 am

Re: Article Background Image?

Postby debragrant » Thu Aug 14, 2008 1:55 pm

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.

User avatar
dextercowley
Joomla! Virtuoso
Joomla! Virtuoso
Posts: 3290
Joined: Sun Apr 06, 2008 4:44 am
Location: Seattle, WA, USA

Re: Article Background Image?

Postby dextercowley » Thu Aug 14, 2008 3:43 pm

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?"

User avatar
ooffick
Joomla! Master
Joomla! Master
Posts: 11063
Joined: Thu Jul 17, 2008 3:10 pm
Location: Ireland
Contact:

Re: Article Background Image?

Postby ooffick » Thu Aug 14, 2008 3:49 pm

Mark,

don't forget to add the closing tag like this one:

Code: Select all

</div>
in the last line.

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

User avatar
dextercowley
Joomla! Virtuoso
Joomla! Virtuoso
Posts: 3290
Joined: Sun Apr 06, 2008 4:44 am
Location: Seattle, WA, USA

Re: Article Background Image?

Postby dextercowley » Thu Aug 14, 2008 4:14 pm

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?"

debragrant
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 230
Joined: Thu Aug 17, 2006 8:01 am

Re: Article Background Image?

Postby debragrant » Fri Aug 15, 2008 7:56 am

can you add the div's to the title & date of an article?

User avatar
ooffick
Joomla! Master
Joomla! Master
Posts: 11063
Joined: Thu Jul 17, 2008 3:10 pm
Location: Ireland
Contact:

Re: Article Background Image?

Postby ooffick » Fri Aug 15, 2008 8:03 am

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

debragrant
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 230
Joined: Thu Aug 17, 2006 8:01 am

Re: Article Background Image?

Postby debragrant » Fri Aug 15, 2008 8:20 am

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?

User avatar
ooffick
Joomla! Master
Joomla! Master
Posts: 11063
Joined: Thu Jul 17, 2008 3:10 pm
Location: Ireland
Contact:

Re: Article Background Image?

Postby ooffick » Fri Aug 15, 2008 8:24 am

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

debragrant
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 230
Joined: Thu Aug 17, 2006 8:01 am

Re: Article Background Image?

Postby debragrant » Fri Aug 15, 2008 8:38 am

I don't have...views/article/tmpl/default.php

User avatar
ooffick
Joomla! Master
Joomla! Master
Posts: 11063
Joined: Thu Jul 17, 2008 3:10 pm
Location: Ireland
Contact:

Re: Article Background Image?

Postby ooffick » Fri Aug 15, 2008 8:49 am

You don't have a file called:

Code: Select all

/[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

debragrant
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 230
Joined: Thu Aug 17, 2006 8:01 am

Re: Article Background Image?

Postby debragrant » Fri Aug 15, 2008 9:01 am

maybe coz I've realized this is for 1.5 when I'm on 1.0 :-[ :(

debragrant
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 230
Joined: Thu Aug 17, 2006 8:01 am

Re: Article Background Image?

Postby debragrant » Fri Aug 15, 2008 9:06 am

are these what I should be editing?

Code: Select all

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


Code: Select all

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


Code: Select all

<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>

User avatar
ooffick
Joomla! Master
Joomla! Master
Posts: 11063
Joined: Thu Jul 17, 2008 3:10 pm
Location: Ireland
Contact:

Re: Article Background Image?

Postby ooffick » Fri Aug 15, 2008 9:36 am

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

User avatar
mustaq-ahmed
Joomla! Explorer
Joomla! Explorer
Posts: 314
Joined: Tue May 15, 2007 7:15 am
Location: South Africa
Contact:

Re: Article Background Image?

Postby mustaq-ahmed » Thu Aug 28, 2008 8:58 pm

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

bak1
Joomla! Apprentice
Joomla! Apprentice
Posts: 15
Joined: Thu Sep 11, 2008 3:38 pm

Re: Article Background Image?

Postby bak1 » Sun Sep 21, 2008 8:06 pm

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.

bak1
Joomla! Apprentice
Joomla! Apprentice
Posts: 15
Joined: Thu Sep 11, 2008 3:38 pm

Re: Article Background Image?

Postby bak1 » Sun Sep 21, 2008 8:35 pm

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?

User avatar
mustaq-ahmed
Joomla! Explorer
Joomla! Explorer
Posts: 314
Joined: Tue May 15, 2007 7:15 am
Location: South Africa
Contact:

Re: Article Background Image?

Postby mustaq-ahmed » Mon Sep 22, 2008 5:04 am

Hi

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

bak1
Joomla! Apprentice
Joomla! Apprentice
Posts: 15
Joined: Thu Sep 11, 2008 3:38 pm

Re: Article Background Image?

Postby bak1 » Tue Sep 23, 2008 11:41 pm

yes it was for the same article. i also fixed the problem i hard coded in the url.

Rhombi313
Joomla! Apprentice
Joomla! Apprentice
Posts: 32
Joined: Fri Aug 08, 2008 9:45 pm

Re: Article Background Image?

Postby Rhombi313 » Thu Oct 09, 2008 10:22 pm

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.

Amito
Joomla! Fledgling
Joomla! Fledgling
Posts: 2
Joined: Sun Sep 06, 2009 3:16 am

Re: [SOLVED] Article Background Image?

Postby Amito » Sun Sep 06, 2009 3:30 am

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?

User avatar
dextercowley
Joomla! Virtuoso
Joomla! Virtuoso
Posts: 3290
Joined: Sun Apr 06, 2008 4:44 am
Location: Seattle, WA, USA

Re: [SOLVED] Article Background Image?

Postby dextercowley » Sun Sep 06, 2009 4:06 am

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?"

Amito
Joomla! Fledgling
Joomla! Fledgling
Posts: 2
Joined: Sun Sep 06, 2009 3:16 am

Re: [SOLVED] Article Background Image?

Postby Amito » Sun Sep 06, 2009 5:34 pm

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


Return to “Administration 1.5”

Who is online

Users browsing this forum: No registered users and 4 guests