Welcome to Geeklog, Anonymous Thursday, May 02 2024 @ 09:56 pm EDT

Geeklog Forums

Pictures as backgrounds for stories


Anonymous

Anonymous
Im trying to create a custom geeklog theme with pictures as backgrounds for normal and featured stories, but what ever I try I still cant format the background options, Ive tried creating backgrounds per table, and even per cell in the table but I still cant format them. I ve edited featured storytext.thtml, storytext.thtml, featuredstorybodytext.thtml and storybodytext.thtml on several different themes but still came up with the same result. Is this possable with geeklog, and if so how do I do it? Thanks
 Quote

Anonymous

Anonymous
You should be able to do this with CSS in a style sheet. If there's a class already set up for your story and one for your featured story, then add the background attribute and define which images you want displayed for each. If there is no class already, then create one and do this.
 Quote

Status: offline

Creator

Forum User
Full Member
Registered: 07/11/02
Posts: 181
Location:Austin, TX
In your style.css file look for .blockinfo and/or .storyinfo. These two control the content inside the blocks and stories. Most themes have this, though some do not.

If your theme does not have it, then look inside the other themes that do and see where those styles are used in leftblocks.thtml and rightblocks.thtml as well as storybody.thtml and featuredstorybody.thtml.

---
L. Whitworth
www.finiserv.com


L. Whitworth
 Quote

Anonymous

Anonymous
Dont suppose you know any themes that do this? Ive searched high and low but cant find 1 Frown
 Quote

Anonymous

Anonymous
Look inside the theme you are modifying and see if it uses a class for the regular stories and one for the featured story. If you don't know what a class is, then you probably want to read a basic tutorial. If they contain a class (or id), then add this line to the class (or id) inside your style sheet:
Text Formatted Code

background: url(background.gif);
or
background-image: url(background.gif);
 
***** NOTE: make sure the link in the url() points to wherever you have the background image.

If the class already has the background defined, then just add the url to it. For example, if the class looks like this:
Text Formatted Code

.story {
font-family: arial, sans serif;
font-size: 14px;
background: #ffffff;
}
 
then just add the url to it like so:
Text Formatted Code

.story {
font-family: arial, sans serif;
font-size: 14px;
background: #ffffff url(background.gif);
}
 
IF the theme you are modifying doesn't have a class, then just make one up but don't select any already being used. Pick any name but hopefully one that's meaningful to you. Add the background attribute as described above. For example:
Text Formatted Code

.regularstory {
background: #ffff00 url(prettybackground1.gif);
}

.featuredstory {
background: #cccccc url(prettybackground2.gif);
}
 
It's a good idea to include a color just in case the background image doesn't display for some reason to the visitor. Set the background color to whatever you want. Now take your made up classes and put them in your style sheet.

Inside the theme files, you need to add the class so the browser knows to display it. If you want the background to display in a row, then place the class in your theme like this:
Text Formatted Code

<tr class="regularstory">
 
or if you want it in a column like this:
Text Formatted Code

<td class="regularstory">
 
Place one class in your story template and one in your featured story template. You can make the classes the same or different -- your choice.

Make sure the url used inside url() points to where the images are. On some servers, you can just put the relative path (eg ../images/prettybackground.gif) and on others you have to specify the complete path (eg http://yourdomainname/pathtobackground/prettybackground.gif)

That's it.
 Quote

All times are EDT. The time is now 09:56 pm.

  • Normal Topic
  • Sticky Topic
  • Locked Topic
  • New Post
  • Sticky Topic W/ New Post
  • Locked Topic W/ New Post
  •  View Anonymous Posts
  •  Able to post
  •  Filtered HTML Allowed
  •  Censored Content