Welcome to the Invelos forums. Please read the forum rules before posting.

Read access to our public forums is open to everyone. To post messages, a free registration is required.

If you have an Invelos account, sign in to post.

    Invelos Forums->DVD Profiler: Layouts and Reports Page: 1 2 3  Previous   Next
Background image
Author Message
DVD Profiler Unlimited Registrantseancur
Registered: May 13, 2010
Posts: 45
Posted:
PM this userView this user's DVD collectionDirect link to this postReply with quote
Hey all,
I would like to add an image to my background display.  I'm not a huge HTML guy so is there a way and if so how do you do it?  Thanks in advance.
Buzz
DVD Profiler Unlimited RegistrantStar ContributorVirusPil
uncredited
Registered: January 1, 2009
Reputation: Highest Rating
Germany Posts: 3,087
Posted:
PM this userDirect link to this postReply with quote
What do you mean with background display?
DVD Profiler Unlimited Registrantseancur
Registered: May 13, 2010
Posts: 45
Posted:
PM this userView this user's DVD collectionDirect link to this postReply with quote
I want to add a jpg to the background.
DVD Profiler Unlimited Registrantseancur
Registered: May 13, 2010
Posts: 45
Posted:
PM this userView this user's DVD collectionDirect link to this postReply with quote
Just so I'm on the correct topic here:

view - HTML window - edit

On the HTML page I would like to adda jpg as a background.

Thanks
DVD Profiler Unlimited RegistrantStar ContributorVirusPil
uncredited
Registered: January 1, 2009
Reputation: Highest Rating
Germany Posts: 3,087
Posted:
PM this userDirect link to this postReply with quote
http://www.quackit.com/html/codes/html_background_image_codes.cfm

Sorry, no other idea, but there are much better experienced users in the forum, so I think you'll get your answer.
DVD Profiler Unlimited Registrantxyrano
41215.reg 70320.urk
Registered: March 13, 2007
Sweden Posts: 646
Posted:
PM this userView this user's DVD collectionDirect link to this postReply with quote
Click the Image tab in Edit HTML Section.
Add your image. For this example name it bgimage.jpg
Then Click HTML Section tab.
Add a new section and paste the below code (All for effect).
Quote:
<HTML>
<HEAD>

<SCRIPT TYPE="text/javascript">
<!--
<DP NAME="HEADER_VARS" Language="JavaScript" Comments="True" IncludeCast="False" IncludeCrew="False">
//-->
</SCRIPT>
<style type="text/css">
<!--
* { color: white; font-family: verdana; font-size: 10pt; }
html,body { margin: 10; padding: 0; background-color: rgb(0, 0, 83); }
body { background-repeat: repeat-x; background-image: url($DPIMAGES.bgimage.jpg); }
-->
</style>

</HEAD>
<BODY>
<DP NAME="BOXSETCONTENTS" Divider="<br>" ShowUPCs="true">
</BODY>
</HTML>
 Last edited: by xyrano
DVD Profiler Unlimited Registrantseancur
Registered: May 13, 2010
Posts: 45
Posted:
PM this userView this user's DVD collectionDirect link to this postReply with quote
Here is the HTML for my layout.  I'm not too sauvy with HTML maybe I placed it in the wrong place, but if someone could help me out, I would appreciate it.
Thanks

<HEAD>
<STYLE TYPE="text/css">
<!--
HR {
color: #003399;
}

TD.leftcolumn {
background: url(images/left_graybar_tile2.jpg) gray repeat-y fixed center;
}

TD.bluecolumn {
background: #9e9772;
}
-->
</STYLE>
</HEAD>
<BODY BGCOLOR="#c7be87">

<tr><td ALIGN="RIGHT" BGCOLOR="#72799c">
</a></td></TR></TABLE>

<TABLE BORDER="0" CELLPADDING="0" CELLSPACING="0" WIDTH="100%">
<TR valign=top>
<td VALIGN="top">
<table BORDER="0" CELLPADDING="5" CELLSPACING="15" width="155" ALIGN="left">
<tr>
<td colspan="3">
<DP NAME="IMAGE" WIDTH="360">
<br></td></tr>
</table><table BORDER='0' CELLPADDING='0' CELLSPACING='4'><tr><td VALIGN='top'><font FACE='GARAMOUND' SIZE='7' COLOR='#800000'><b>
<DP NAME="TITLE" REORDER="YES">
</b></font><p><table border='0' cellpadding='0' cellspacing='0'><tr><td valign='top' width='10'><font face='arial,helvetica' size='2' COLOR='#CC6600'>
<b>Starring:</b>
</font></td><td valign='top' align='left'><font face='arial,helvetica' size='2'>&nbsp;
<DP NAME="ACTORS" DIVIDER=", " MAXLIST="4">
</font></td></tr><tr><td width='10' valign='top'><font face='arial,helvetica' size='2' COLOR='#CC6600'>
<b>Director:</b>
</font></td><td valign='top'><font face='Arial, Helvetica' size='2' color='#000000'>&nbsp;
<DP NAME="DIRECTOR" DIVIDER=", " MAXLIST="2">
</font></td></tr><tr><td width='10' valign='top'><font face='arial,helvetica' size='2' COLOR='#CC6600'><b>Rated:</b></font></td><td>
<DP NAME="RATING">
DVD Profiler Unlimited RegistrantMuckl
That's my common name.
Registered: April 9, 2009
Reputation: Great Rating
Germany Posts: 858
Posted:
PM this userVisit this user's homepageView this user's DVD collectionDirect link to this postReply with quote
Follow the steps xyrano posted and you should be fine...

In your example you have to add the file left_graybar_tile2.jpg like xyrano wrote and then
replace
Quote:
background: url(images/left_graybar_tile2.jpg)

with
Quote:
background: url($DPIMAGES.left_graybar_tile2.jpg)
 
1.0.1, iPhone 3GS, iOS 4.1.0

Trivia v0.3.1
My HSDB v5 additions, HTML windows and other stuff
DVD Profiler Unlimited Registrantseancur
Registered: May 13, 2010
Posts: 45
Posted:
PM this userView this user's DVD collectionDirect link to this postReply with quote
Did it and nothing happened in the preview.
DVD Profiler Unlimited Registrantxyrano
41215.reg 70320.urk
Registered: March 13, 2007
Sweden Posts: 646
Posted:
PM this userView this user's DVD collectionDirect link to this postReply with quote
Quoting seancur:
Quote:
Did it and nothing happened in the preview.

Curious, I know it works because it's one of my HTML sections.

Hope you didn't paste anything else then from <html> to </html>, from my example.
DVD Profiler Unlimited Registrantseancur
Registered: May 13, 2010
Posts: 45
Posted:
PM this userView this user's DVD collectionDirect link to this postReply with quote
This is the HTML after:

<HEAD>
<STYLE TYPE="text/css">
<!--
HR {
color: #003399;
}

TD.leftcolumn {
background: url($DPIMAGES.MovieClipBackground_000.jpg.left_graybar_tile2.jpg);
}

TD.bluecolumn {
background: #9e9772;
}
-->
</STYLE>
</HEAD>
<BODY BGCOLOR="#c7be87">

<tr><td ALIGN="RIGHT" BGCOLOR="#72799c">
</a></td></TR></TABLE>

<TABLE BORDER="0" CELLPADDING="0" CELLSPACING="0" WIDTH="100%">
<TR valign=top>
<td VALIGN="top">
<table BORDER="0" CELLPADDING="5" CELLSPACING="15" width="155" ALIGN="left">
<tr>
<td colspan="3">
<DP NAME="IMAGE" WIDTH="360">
<br></td></tr>
</table><table BORDER='0' CELLPADDING='0' CELLSPACING='4'><tr><td VALIGN='top'><font FACE='GARAMOUND' SIZE='7' COLOR='#800000'><b>
<DP NAME="TITLE" REORDER="YES">
</b></font><p><table border='0' cellpadding='0' cellspacing='0'><tr><td valign='top' width='10'><font face='arial,helvetica' size='2' COLOR='#CC6600'>
<b>Starring:</b>
</font></td><td valign='top' align='left'><font face='arial,helvetica' size='2'>&nbsp;
<DP NAME="ACTORS" DIVIDER=", " MAXLIST="4">
</font></td></tr><tr><td width='10' valign='top'><font face='arial,helvetica' size='2' COLOR='#CC6600'>
<b>Director:</b>
</font></td><td valign='top'><font face='Arial, Helvetica' size='2' color='#000000'>&nbsp;
<DP NAME="DIRECTOR" DIVIDER=", " MAXLIST="2">
</font></td></tr><tr><td width='10' valign='top'><font face='arial,helvetica' size='2' COLOR='#CC6600'><b>Rated:</b></font></td><td>
<DP NAME="RATING">




</font></td></tr><tr><td width='10' valign='top'><font face='arial,helvetica' size='2' COLOR='#CC6600'><b>DVD#:</b></font></td><td>
<DP NAME="COLLNUM">

</font></td></tr><tr><td width='10' valign='top'><font face='arial,helvetica' size='2' COLOR='#FF0000'><b>Review:</b></font></td><td>
<DP NAME="NOTES"><br>




















<br></td></tr></table></td><td valign='top'><br></td></tr></table><font FACE='Arial, Helvetica, sans-serif' SIZE='3'>
<DP NAME="OVERVIEW">
</font><br clear='all'><table BORDER='0' CELLPADDING='0' CELLSPACING='0'><tr><td colspan='2'><br><font FACE='Arial, Helvetica, sans-serif' Size='2' COLOR='#003399'><a name='ad_info'><b>Additional information</b></a></font></td></tr><tr><td VALIGN='top'><font FACE='Arial, Helvetica, sans-serif' SIZE='2' COLOR='#003399'>
Copyright:</font>&nbsp;</td><td VALIGN='top'><font FACE='Arial, Helvetica, sans-serif' SIZE='2'>
<DP NAME="PRODYEAR">
&nbsp; <NOBR>
</font></td></tr>
<tr><td>
<font FACE='Arial, Helvetica, sans-serif' SIZE='2' COLOR='#003399'>Studios:</font>&nbsp;</td><td VALIGN='top'><font FACE='Arial, Helvetica, sans-serif' SIZE='2'>
<DP NAME="STUDIOS">
</font></td></tr><tr><td VALIGN='top'><font FACE='Arial, Helvetica, sans-serif' SIZE='2' COLOR='#003399'>
Special Features:</font>&nbsp;</td><td VALIGN='top'>
<font face='Arial, Helvetica, sans-serif' size=2 color=#000000>
<DP NAME="FEATURES" DIVIDER=" ">
</font></td></tr><tr><td VALIGN='top'><font FACE='Arial, Helvetica, sans-serif' SIZE='2' COLOR='#003399'>Video Format:</font>&nbsp;
</td><td VALIGN='top'><font FACE='Arial, Helvetica, sans-serif' SIZE='2'><NOBR>
<DP NAME="VIDFORMATS" RATIOS="YES" DIVIDER=", ">
</a></NOBR> <NOBR><a href="open_new_win(&quot;/consumer/siteHelp/tech_tips.asp?TechTip=Widescreen+2%2E35%3A1+aspect+ratio&quot;)"></a></NOBR> <br></font></td></tr><tr><td VALIGN='top'><font FACE='Arial, Helvetica, sans-serif' SIZE='2' COLOR='#003399'>
Add'l Features:</font>&nbsp;
</td><td VALIGN='top'><font FACE='Arial, Helvetica, sans-serif' SIZE='2'>
<NOBR>
<DP NAME="16X9" TEXT="Enhanced for 16x9 TVs">
</NOBR><br>
</font></td></tr>
<tr><td VALIGN='top'><font FACE='Arial, Helvetica, sans-serif' SIZE='2' COLOR='#003399'>Layers:</font>&nbsp;</td><td VALIGN='top'><font FACE='Arial, Helvetica, sans-serif' SIZE='2'><NOBR>
<font face='Arial, Helvetica, sans-serif' size=2 color=#000000>
<DP NAME="LAYERS" SINGLE="Single" DUAL="Dual">
</font></NOBR></font></td></tr>
<tr><td VALIGN='top'><font FACE='Arial, Helvetica, sans-serif' SIZE='2' COLOR='#003399'>Other:</font>&nbsp;</td><td VALIGN='top'><font FACE='Arial, Helvetica, sans-serif' SIZE='2'>
DVD Released <DP NAME="RELDATE">; &nbsp; running time of&nbsp;<DP NAME="RUNTIME" TOTALINMINS="YES">
&nbsp;minutes; </font></td></tr></table><br>
<font COLOR='#003399' FACE='Arial, Helvetica, sans-serif' SIZE='2'>
<b>
<DP NAME="REGION" TEXT="This DVD is Regionally Coded for Region " NOREGION="This DVD is not Regionally Coded">
</b></font><br><br></font></center><br></td><td WIDTH='10'>&nbsp;</td>
<br></td></tr><TR>
<TD colspan=4>
</TD>
</TR>
</table>

</body>
</html>

Again, I'm not great in HTML (obviously) so if I'm doing something stupid, please let me know.
Thanks
DVD Profiler Unlimited Registrantxyrano
41215.reg 70320.urk
Registered: March 13, 2007
Sweden Posts: 646
Posted:
PM this userView this user's DVD collectionDirect link to this postReply with quote
This right here is your first problem!
Quote:
TD.leftcolumn {
background: url($DPIMAGES.MovieClipBackground_000.jpg.left_graybar_tile2.jpg);
}

$DPIMAGES is a DVD Profiler internal "tag", so to speak. After that there is one (1) full stop. After that the name of the image. Unless the name of your image is MovieClipBackground_000.jpg.left_graybar_tile2, you should change it to the name of the image. After the image name comes another full stop. Last is the file format.

Second: If you leave out the stuff you previously had, after the url() then you need to add -image to the background part of the CSS tag. Like so: background-image The line will be ignored if you don't.

Third: Add class="leftcolumn" to a TD tag to enable the background image in that cell. Like so: <td class="leftcolumn" colspan="3">

Hope that helps!
DVD Profiler Unlimited Registrantseancur
Registered: May 13, 2010
Posts: 45
Posted:
PM this userView this user's DVD collectionDirect link to this postReply with quote
Thanks for the help, but you have me totally confused.  I'm not good by any means with HTML so you REALLY need to dumb it down. Let's pretend I'm a 6 year old...

Thanks again.
DVD Profiler Unlimited Registrantseancur
Registered: May 13, 2010
Posts: 45
Posted:
PM this userView this user's DVD collectionDirect link to this postReply with quote
I know I'm asking for alot, but please be more exact.  I copied and pasted my html on a previous post... what goes where?  Thanks sooooooooooo much, I really want a kick ass layout.
DVD Profiler Unlimited RegistrantMuckl
That's my common name.
Registered: April 9, 2009
Reputation: Great Rating
Germany Posts: 858
Posted:
PM this userVisit this user's homepageView this user's DVD collectionDirect link to this postReply with quote
I'll try to explain the procedure again:

[1] Import the image you want to use inside a HTML section (like your background) into DVD Profiler:
• Go to "View" --> "HTML Windows" --> "Edit..."
• In the opened window go to "Images" --> "Add..." and browse to your image file, select it and hit "Open"
• Now it should show up in the preview panel and its filename should be listed on the left

[2] Now reference the imported image in your layout:
• Switch to the HTML Sections (tab under the icon toolbar) and choose your HTML Section you posted here
• In the style part replace the whole line
Quote:
background: url($DPIMAGES.MovieClipBackground_000.jpg.left_graybar_tile2.jpg);

with
Quote:
background: url($DPIMAGES.<FILENAME>) gray repeat-y fixed center;

• Replace the red coloured part with the actual filename (the one that also shows in the list on the "Images" tab)

[3] The last part is to fix the CSS/HTML you already have:
• If you want the background to be displayed on the whole page, not only inside the tables you defined, just replace
Quote:
TD.leftcolumn

with
Quote:
body

• If your intention was to display the background inside the description fields of the tables, then you have to reference the class you defined (= leftcolumn) in the appropiate table cells (TD  tags), e.g.:
Quote:
<DP NAME="TITLE" REORDER="YES">
</b></font><p><table border='0' cellpadding='0' cellspacing='0'><tr><td class="leftcolumn" valign='top' width='10'><font face='arial,helvetica' size='2' COLOR='#CC6600'>
<b>Starring:</b>
</font></td><td valign='top' align='left'><font face='arial,helvetica' size='2'>&nbsp;
<DP NAME="ACTORS" DIVIDER=", " MAXLIST="4">
</font></td></tr><tr><td class="leftcolumn" width='10' valign='top'><font face='arial,helvetica' size='2' COLOR='#CC6600'>
<b>Director:</b>
</font></td><td valign='top'><font face='Arial, Helvetica' size='2' color='#000000'>&nbsp;
<DP NAME="DIRECTOR" DIVIDER=", " MAXLIST="2">
</font></td></tr><tr><td class="leftcolumn" width='10' valign='top'><font face='arial,helvetica' size='2' COLOR='#CC6600'><b>Rated:</b></font></td><td>
<DP NAME="RATING">
</font></td></tr><tr><td class="leftcolumn" width='10' valign='top'><font face='arial,helvetica' size='2' COLOR='#CC6600'><b>DVD#:</b></font></td><td>
<DP NAME="COLLNUM">
</font></td></tr><tr><td class="leftcolumn" width='10' valign='top'><font face='arial,helvetica' size='2' COLOR='#FF0000'><b>Review:</b></font></td><td>
<DP NAME="NOTES"><br>

(That's just a snippet of your code, the parts I added are in red.)

[4] Finally save the section (button "OK") and activate it ("View" --> "HTML Windows" --> choose it so that the check mark appears in front of the name)


Also, you should consider learning a bit HTML and CSS, not only trial and error by copy-and-pasting stuff. It's really not that difficult, and easier than real programming languages... One link to start with would be the W3Schools Website. Have fun! 
 
1.0.1, iPhone 3GS, iOS 4.1.0

Trivia v0.3.1
My HSDB v5 additions, HTML windows and other stuff
DVD Profiler Unlimited Registrantseancur
Registered: May 13, 2010
Posts: 45
Posted:
PM this userView this user's DVD collectionDirect link to this postReply with quote
Thanks soooo much, that helped wonders.  I'm hoping I have one last question.  As you can see from this pic, the right side is cutting off some words.  How do I correct this?  I've tried everything.


Here is the current HTML.  Again I appreciate any knowledge.  I'm really geting the hang of this.

<HEAD>
<STYLE TYPE="text/css">
<!--
HR {
color: #003399;
}

body {
background: url($DPIMAGES.reel11.jpg) ;
}

TD.bluecolumn {
background: #9e9772;
}
-->
</STYLE>
</HEAD>
<BODY BGCOLOR="#c7be87">

<tr><td ALIGN="RIGHT" BGCOLOR="#FFFFFF">
</a></td></TR></TABLE>

<TABLE BORDER="0" CELLPADDING="0" CELLSPACING="0" WIDTH="100%">
<TR valign=top>
<td VALIGN="top">
<table BORDER="0" CELLPADDING="0" CELLSPACING="33" width="1" ALIGN="left">
<tr>
<td colspan="1">
<DP NAME="IMAGE" WIDTH="345">
<br></td></tr>
</table><table BORDER='0' CELLPADDING='0' CELLSPACING='3'><tr><td VALIGN='top'><font FACE='GARAMOUND' SIZE='16' COLOR='#800517'><b>
<DP NAME="TITLE" REORDER="YES">
</b></font><p><table border=4' cellpadding='4' cellspacing='1'><tr><td valign='top' width='10'><font face='arial,helvetica' size='2' COLOR='#CC6600'>
<b>Starring:</b>
</font></td><td valign='top' align='left'><font face='arial,helvetica' size='2'>&nbsp;
<DP NAME="ACTORS" DIVIDER=", " MAXLIST="4">
</font></td></tr><tr><td width='10' valign='top'><font face='arial,helvetica' size='2' COLOR='#CC6600'>
<b>Director:</b>
</font></td><td valign='top'><font face='Arial, Helvetica' size='2' color='#000000'>&nbsp;
<DP NAME="DIRECTOR" DIVIDER=", " MAXLIST="2">
</font></td></tr><tr><td width='10' valign='top'><font face='arial,helvetica' size='2' COLOR='#CC6600'><b>Rated:</b></font></td><td>
<DP NAME="RATING">




</font></td></tr><tr><td width='10' valign='top'><font face='arial,helvetica' size='2' COLOR='#800517'><b>DVD#:</b></font></td><td>
<DP NAME="COLLNUM">

</font></td></tr><tr><td width='10' valign='top'><font face='arial,helvetica' size='2' COLOR='#FF0000'><b>Review:</b></font></td><td>
<DP NAME="NOTES"><br>
</font></td></tr><tr><td width='10' valign='top'><font face='arial,helvetica' size='2' COLOR='#CC6600'><b>Description:</b></font></td><td>
<br>






















<font FACE='Arial, Helvetica, sans-serif' SIZE='3' COLOR='#000000'>
<DP NAME="OVERVIEW">
</font><br clear='all'><table BORDER='0' CELLPADDING='0' CELLSPACING='0'><tr><td colspan='1'><br><font FACE='Arial, Helvetica, sans-serif' Size='2' COLOR='#FFFFFF'><a name='ad_info'><b>Additional information</b></a></font></td></tr><tr><td VALIGN='top'><font FACE='Arial, Helvetica, sans-serif' SIZE='2' COLOR='#003399'>
Copyright:</font>&nbsp;</td><td VALIGN='top'><font FACE='Arial, Helvetica, sans-serif' SIZE='2'>
<DP NAME="PRODYEAR">
&nbsp; <NOBR>
</font></td></tr>
<tr><td>
<font FACE='Arial, Helvetica, sans-serif' SIZE='2' COLOR='#003399'>Studios:</font>&nbsp;</td><td VALIGN='top'><font FACE='Arial, Helvetica, sans-serif' SIZE='2'>
<DP NAME="STUDIOS">
</font></td></tr><tr><td VALIGN='top'><font FACE='Arial, Helvetica, sans-serif' SIZE='2' COLOR='#003399'>
Special Features:</font>&nbsp;</td><td VALIGN='top'>
<font face='Arial, Helvetica, sans-serif' size=2 color=#000000>
<DP NAME="FEATURES" DIVIDER=" ">
</font></td></tr><tr><td VALIGN='top'><font FACE='Arial, Helvetica, sans-serif' SIZE='2' COLOR='#003399'>Video Format:</font>&nbsp;
</td><td VALIGN='top'><font FACE='Arial, Helvetica, sans-serif' SIZE='2'><NOBR>
<DP NAME="VIDFORMATS" RATIOS="YES" DIVIDER=", ">
</a></NOBR> <NOBR><a href="open_new_win(&quot;/consumer/siteHelp/tech_tips.asp?TechTip=Widescreen+2%2E35%3A1+aspect+ratio&quot;)"></a></NOBR> <br></font></td></tr><tr><td VALIGN='top'><font FACE='Arial, Helvetica, sans-serif' SIZE='2' COLOR='#003399'>
Add'l Features:</font>&nbsp;
</td><td VALIGN='top'><font FACE='Arial, Helvetica, sans-serif' SIZE='2'>
<NOBR>
<DP NAME="16X9" TEXT="Enhanced for 16x9 TVs">
</NOBR><br>
</font></td></tr>
<tr><td VALIGN='top'><font FACE='Arial, Helvetica, sans-serif' SIZE='2' COLOR='#003399'>Layers:</font>&nbsp;</td><td VALIGN='top'><font FACE='Arial, Helvetica, sans-serif' SIZE='2'><NOBR>
<font face='Arial, Helvetica, sans-serif' size=2 color=#000000>
<DP NAME="LAYERS" SINGLE="Single" DUAL="Dual">
</font></NOBR></font></td></tr>
<tr><td VALIGN='top'><font FACE='Arial, Helvetica, sans-serif' SIZE='2' COLOR='#003399'>Other:</font>&nbsp;</td><td VALIGN='top'><font FACE='Arial, Helvetica, sans-serif' SIZE='2'>
DVD Released <DP NAME="RELDATE">; &nbsp; running time of&nbsp;<DP NAME="RUNTIME" TOTALINMINS="YES">
&nbsp;minutes; </font></td></tr></table><br>
<font COLOR='#003399' FACE='Arial, Helvetica, sans-serif' SIZE='2'>
<b>
<DP NAME="REGION" TEXT="This DVD is Regionally Coded for Region " NOREGION="This DVD is not Regionally Coded">
</b></font><br><br></font></center><br></td><td WIDTH='10'>&nbsp;</td>
<br></td></tr><TR>
<TD colspan=4>
</TD>
</TR>
</table>

</body>
</html>

Thanks
    Invelos Forums->DVD Profiler: Layouts and Reports Page: 1 2 3  Previous   Next