
reference user-defined img in css
#1
Posted 11 March 2008 - 07:44 PM
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.
#2
Posted 11 March 2008 - 08:17 PM
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.
#3
Posted 12 March 2008 - 11:15 AM
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.
#4
Posted 12 March 2008 - 01:33 PM
<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?
#5
Posted 12 March 2008 - 01:54 PM
Maybe not in plain sight, but content of .css files are very much viewable by anyone....Having your
styles hanging out in plain sight is rather like having your fly down.
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....how do I reference that folder in the css?
Note true... If you use user images, you will see "template images" link in sohoadmin > template manager's right pane.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...
You can use user images in background images, just do it in the .html file, not in .css.Also the image needs to be placed in the background, not as an <img> tag.
It is right there around line #355I 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">
The short answer is "no" -- there are simply too many hard coded styles in the software.Is there a way I can remove all style information from being hard-coded in locations which are outside of the css?
#6
Posted 12 March 2008 - 03:48 PM
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.

#7
Posted 12 March 2008 - 04:04 PM

#8
Posted 12 March 2008 - 06:12 PM
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.
#9
Posted 12 March 2008 - 07:27 PM
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.
#10
Posted 12 March 2008 - 09:25 PM
Try:#container {
width:99%; height:600px;
background: transparent url(_userimg-floral1.gif) no-repeat;
}
#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.
#11
Posted 14 March 2008 - 01:16 AM
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.
Visit www.sohotemplates.com for your Soholaunch templates
High Quality StockPhoto's ! www.microstockphoto.com
Looking for High Quality Flash files? check Flashden!
#12
Posted 17 March 2008 - 12:52 PM
<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.
#13
Posted 17 March 2008 - 01:28 PM
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.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.
#14
Posted 18 March 2008 - 06:41 PM
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.
0 user(s) are reading this topic
0 members, 0 guests, 0 anonymous users