Jump to content

Also posted this at the .org but so far now answer


Guest

Recommended Posts

If i add a box in global/index.tpl with the following code how do i add an image background if image is 25 pixels high anbd 50 pixels wide?

<div class="boxTitleRight">Box Title</div>

<div class=”boxContentRight”>

<div class=txtDefault>

text<br>

I use<br>

here<br>

</div>

Thanks!

Link to comment
Share on other sites

If i add a box in global/index.tpl with the following code how do i add an image background if image is 25 pixels high anbd 50 pixels wide?

<div class="boxTitleRight">Box Title</div>

<div class=â€boxContentRightâ€>

<div class=txtDefault>

text<br>

I use<br>

here<br>

</div>

Thanks!

In the layout.css file, look for the "boxTitleRight" enrty, and you will see a setting like:

bgimage = "../images/blahblah/header.gif" (not the real link...)

Just replace the image file with the one you want. My suggestion is to make a new enrty like "boxTitleRightNew" and link the image to this one.

Link to comment
Share on other sites

If i add a box in global/index.tpl with the following code how do i add an image background if image is 25 pixels high anbd 50 pixels wide?

<div class="boxTitleRight">Box Title</div>

<div class=â€boxContentRightâ€>

<div class=txtDefault>

text<br>

I use<br>

here<br>

</div>

Thanks!

All depends to place where your backround image should shown ... box tile, box content area..

BTW: You are not able to set backround image dimension property in CSS, this is done by area dimension backround image belongs to :)

The magic thing backround repeats in dependance on foreground area and repeateable limitations presence.

Link to comment
Share on other sites

If i add a box in global/index.tpl with the following code how do i add an image background if image is 25 pixels high anbd 50 pixels wide?

<div class="boxTitleRight">Box Title</div>

<div class=â€boxContentRightâ€>

<div class=txtDefault>

text<br>

I use<br>

here<br>

</div>

Thanks!

All depends to place where your backround image should shown ... box tile, box content area..

BTW: You are not able to set backround image dimension property in CSS, this is done by area dimension backround image belongs to :)

The magic thing backround repeats in dependance on foreground area and repeateable limitations presence.

Ok i know how to set it in the css file that isnt what i want to accomplish i have made a few independant boxes that i want to display a different background image for each. So im sure itll go into the code for each box to set the background image right?

Link to comment
Share on other sites

Doesn't really matter where you code it.

~ External stylesheet (layout.css, style.css)

~ Internal stylesheet (in the HEAD section of global/index.tpl and/or global/cart.tpl)

~ Inline styles (directly where the divisions are added into the code in body of document)

Best prqactice is probably to do it in the stylesheets. That way, you can make any and all later style shanges in ONE place for GLOBAL effect. That is the whole reasoning behind using Cascading Style Sheets (CSS for short).

external stylesheet

In layout.css, find where styles are given for boxTitle and boxContent -Right or -Left classes. Copy these to create new classes, as many as you want. Example, you could have a:

.boxTitleCategories

.boxTitleSaleItems

.boxContentLinks

.boxContentLiveHelp

Whatever you want, sky is the limit. Then when code the divisions into your templates, use the appropriate class name for the effect you want.

inline styles

Using inline styles is not the best long-term way to publish your code. I use them all the time while writing html and developping, experimenting, but usually move most of the styles into ann external sheet to polish it off. At any rate, here's how to do it:

<div style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 70%; color: #09347C; background-image: url(../styleImages/backgrounds/boxTitleBg.gif); width: 155px; height: 15px; padding-left: 5px; padding-top: 1px;">Box Title Name</div>

Link to comment
Share on other sites

So for this i would have to create new box template files for my new boxes? That was one thing i was trying to figure out how i get them to show. I can make box templates for the boxes i want but they dont show? Did i miss where i put them for them to show. I mde the tpl then added it to index.tpl in global?

Doesn't really matter where you code it.

~ External stylesheet (layout.css, style.css)

~ Internal stylesheet (in the HEAD section of global/index.tpl and/or global/cart.tpl)

~ Inline styles (directly where the divisions are added into the code in body of document)

Best prqactice is probably to do it in the stylesheets. That way, you can make any and all later style shanges in ONE place for GLOBAL effect. That is the whole reasoning behind using Cascading Style Sheets (CSS for short).

external stylesheet

In layout.css, find where styles are given for boxTitle and boxContent -Right or -Left classes. Copy these to create new classes, as many as you want. Example, you could have a:

.boxTitleCategories

.boxTitleSaleItems

.boxContentLinks

.boxContentLiveHelp

Whatever you want, sky is the limit. Then when code the divisions into your templates, use the appropriate class name for the effect you want.

inline styles

Using inline styles is not the best long-term way to publish your code. I use them all the time while writing html and developping, experimenting, but usually move most of the styles into ann external sheet to polish it off. At any rate, here's how to do it:

<div style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 70%; color: #09347C; background-image: url(../styleImages/backgrounds/boxTitleBg.gif); width: 155px; height: 15px; padding-left: 5px; padding-top: 1px;">Box Title Name</div>

Link to comment
Share on other sites

I can only assume you do not know how to write html/css

No, you do not create box tempolates of the type you mention, unless you know how the xtemplate system works with php - tghose templates are driven by php files.

I have given you, in brevity, the three types of styles you can write to add property styles to html elements, with examples of external stylesheet method and inline styles method. You can use the inline styles when writing html code IN GLOBAL INDEX.TPL

You can also use the external stylesheet IN GLOBAL INDEX.TPL because it is already called there . . . so you can code a box in html there and use classes - and you can create and define classes in the stylesheets.

Sorry if this is not clear to you, it is the best I can do to explain without writing a book. Please look at my website if you can find it for free tutorials that may help, and please go to w3schools.org for tutorials in css and html.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...