13 replies to this topic

[Trinzia]

Hi,
I would like to change my CSS file to display, in the background, the image the user chose for his logo.

Not working:

#container {
background: transparent url(#LOGOIMG#) no-repeat;
}

What would I use to replace #LOGOIMG# ?

Oh and, would it work just as well, while developing template, if I just FTP over my existing file, instead of zip and upload through the Soho interface?

Thanks.

[lwyau]

To have user-substitutable images, use "user images" as described here: http://wiki.soholaun...tes#User_Images.

To FTP template files directly, upload them to the folder described here: http://wiki.soholaun...ath_full_url.23.

You will find most info in this document. I highly recommend reading the entire document for anyone interested in soho template building/modification/manipulation.

[Trinzia]

Thanks, I have read the document several times. Perhaps I need to learn to express
questions better, in order to avoid the "read the manual" response. I'll try again.

Note: Image must be called in your template html file. Will not work with image 
calls in separate custom.css file. So if you have css rules that you want to use the 
_userimg- thing with, put them directly in your template html using <style> tags.

Code Examples - Any image can be a user image
The following are just a few examples of how you could utilize the _userimg- functionality. 
You could let them change the header background image defined in your css rules...

#header {
   background-image: url('_userimg-header_bg.gif');
}

Took me a while to see that this wasn't directly contradicting itself. Should be clearer in
2nd part that you have to define it in the page. Which is rather messy, but ok. Having your
styles hanging out in plain sight is rather like having your fly down.

I still need to know how to reference the folder which contains the images available as
Logos. If the user goes into Template Manager :: Settings :: Company Logo Image, how
do I reference that folder in the css? I tried looking through all the files for those default
images and couldn't find them yet. I installed via my webhost - perhaps I need to download
all the gazillion files to my computer and search them. But then I'd still be left playing
"Guess the URL" in my css, which is one of my least favorite games.

In fact, how is this line of code relevant to anything else at all, since as far as I can tell, the
~only~ place a user can choose an image for the design is in this logo dropdown box. Is
there any other spot to customize the overall layout?

Also the image needs to be placed in the background, not as an <img> tag.
Thanks.

[Trinzia]

I also cannot find "vmenu_mainz" inside pgm-auto_menu.php, in order to change the lines of html:
<TABLE width="100%" BORDER="0" CELLPADDING="0" CELLSPACING="0" ALIGN="CENTER" CLASS="vmenu_mainz">

Is there a way I can remove all style information from being hard-coded in locations which are outside of the css?

[lwyau]

Keep in mind that the document is a wiki document, meaning that you are welcome to make it better, clearer, more informational.

...Having your
styles hanging out in plain sight is rather like having your fly down.

Maybe not in plain sight, but content of .css files are very much viewable by anyone.

...how do I reference that folder in the css?

You don't reference any folder in the css ("Note: Image must be called in your template html file. Will not work with image calls in separate custom.css file...") All images in the css should be right in the same template folder as the css file iteslf.

In fact, how is this line of code relevant to anything else at all, since as far as I can tell, the ~only~ place a user can choose an image for the design is in this logo dropdown box...

Note true... If you use user images, you will see "template images" link in sohoadmin > template manager's right pane.

Also the image needs to be placed in the background, not as an <img> tag.

You can use user images in background images, just do it in the .html file, not in .css.

I also cannot find "vmenu_mainz" inside pgm-auto_menu.php, in order to change the lines of html:
<TABLE width="100%" BORDER="0" CELLPADDING="0" CELLSPACING="0" ALIGN="CENTER" CLASS="vmenu_mainz">

It is right there around line #355

Is there a way I can remove all style information from being hard-coded in locations which are outside of the css?

The short answer is "no" -- there are simply too many hard coded styles in the software.

[Trinzia]

Hi, thanks, but the image still does not appear.
For example, place in custom.css:

#container {
width:99%; height:600px;
background: transparent url(_userimg-floral1.gif) no-repeat;
}

This way the image is visible, but the "Templates Images" link in control panel is not.

When I move it into html page, the "Templates Images" link becomes visible, but the image is invisible. Using <style> tag or style="" tag, image stops showing.

Also, even when the Template Images link is showing, it lists the images in the Home directory instead of the _userimg that are in the template folder.

[lwyau]

I thought we went through this and were clear on the point that you cannot have user images in the css file. They HAVE to be in the html file(s)...

[Trinzia]

When it's in the html, it becomes invisible... nothing shows in web page... no graphic.

Additional problem - the list of _userimg files does not appear in the control panel, because I am supposed to keep it in a different folder than the one it shows in there. If this cannot be fixed, then the entire _userimg issue is irrelevant anyway.

[lwyau]

I can assure you _userimg process works just fine...

A review of the concept here:

You can have images and background images whose filenames are prefixed by _userimg. They are no different from any other images you may have in your templates: They all are in the template folder (sohoadmin/program/modules/site_template/pages/templatename/) and the ONLY unique thing about them is that their filename has the _userimg prefix.

Soho template manager takes the cue of the presence of ANY template images with filenam prefix of _userimg, and offer the "template images" link to allow for substitutes. The substitute images will have to be uploaded already via sohoadmin > file manager and they are already in the "images" folder.

[NST Inc Designer]

Your template html files get referenced from the root of your domain. So when calling images from the html file that are in your template folder you will have to add the complete path. Luckily Soho has you covered there. Instead of:

#container {
width:99%; height:600px;
background: transparent url(_userimg-floral1.gif) no-repeat;
}

Try:

#container {
width:99%; height:600px;
background: transparent url(#template_path_full_url#/_userimg-floral1.gif) no-repeat;
}

This does not apply to images directly in html like <img src="imagename.jpg"> as Soho will automatically add the full path when it sees "quotes". Actually, you may be able to just ad quotes to your background selector like: url("userimg-floral1.gif") no-repeat; I'm not sure but it's worth a try.

[Ruben]

True Tim, but also not :-)

The easiest users can do to have replacable image that are part of the template is to use INLINE CSS style for the images.

that would indeed mean that there will be NO references for images inside the css but inside the html in css format. only for images that the developer wants to be replacable offcourse, all other images can be inside the css.

So the last thing you said about trying to include the images directly in html is indeed the one and only solution. you are right about that.

[Trinzia]

This works to show the image:

<div id="ex1" style="background-image:url(sohoadmin/program/modules/site_templates/pages/BEAUTY-Reds-Minimal_Pink/_userimg-img1.gif);">

However, it is not useful, since the customer, when inside his control panel, will see:
1. Broken link to the template image.
2. Available replacement images come from the root images folder. It does not list the _userimg files in the drop-down. Therefore you cannot offer template-specific replacement images.

This makes the entire concept rather useless, since replacement images have to be aliased for specific background colors most of the time, unless you design in squares (ick).


Giving up on this for now. By the way, adding quotes doesn't work.

[lwyau]

2. Available replacement images come from the root images folder. It does not list the _userimg files in the drop-down. Therefore you cannot offer template-specific replacement images.

The concept of _userimg is to allow the USER to replace default image(s) on the template with his/her OWN images, not to give user multiple choices from a group of images you have in your template folder.

[NST Inc Designer]

Ahh yes, I should have specified that all of which I was talking about applied to INLINE and INTERNAL style sheets only.

True Tim, but also not :-)

The easiest users can do to have replacable image that are part of the template is to use INLINE CSS style for the images.

that would indeed mean that there will be NO references for images inside the css but inside the html in css format. only for images that the developer wants to be replacable offcourse, all other images can be inside the css.

So the last thing you said about trying to include the images directly in html is indeed the one and only solution. you are right about that.