CSS external image files

[ninomcd]

Where should the external CSS image jpg files be saved in order to use them in an A5W file that includes CSS?

How does one access these jpg files when in the source section of an A5W file?

Thanks in advance for the assistance.

[Steve Wood]

Re: CSS external image files

If you go through the normal process of creating a new css file in Alpha, it will place the file where it should go. When you publish, it will also copy your css changes to the proper place. Its under css/stylename for reference.

What jpg files? You add an image by clicking Insert > Image.

[ninomcd]

Re: CSS external image files

In CSS, you can place your CSS and jpg files in a folder outside of your HTML file. Many of your HTML files can access these external files and use them accordingly. This is so that you do not have to go into each HTML file when if you decide to make changes.

[Steve Wood]

Re: CSS external image files

Then my answer below still applies to css. But here is some more detail.

When in development mode and you select any Stylesheet for any component, Alpha will automatically publish that associated stylesheet folder to a CSS folder just under your project folder. What it publishes will be applicable to any component that uses that stylesheet. If you use two stylesheets, Alpha will publish both, etc. IF you use the default stylesheets, then the source for those remain under Program Files\AlphaFive\.... But if you make a copy (in order to edit them), Alpha creates a CSS\stylesheet subfolder under your project.

Independant of that, you can click New > CSS Stylesheet and make your own stylesheet. On your development machine, that creates a CSS subfolder under your project. You can link these Stylesheets to your A5W page from Format>Link Stylesheet.

Regardless of how the stylesheet was created or selected, when you publish Alpha will put all of them under a CSS subfolder under your project. In addition, your A5W pages will have relative links pointing to the stylesheet location.

That's probably more than you wanted to know. The bottom line is you have NO control over if, how or where the stylesheets go that are applied to a given component. But you do have control over where any A5W linked stylesheet goes. The answer is, it can go anywhere under your project folder on the server you published to.
Typically, this is c:\a5webroot\myprojectname\css\mystylesheetname\style.css.

BUT if you simply ignore everything I said about where files can or cannot go, Alpha will properly link and publish the CSS files to the right location.

Image files can also go anywhere under the document root. Most people create a subfolder named Images to hold them. Images could also go anywhere on the www provided your web application can access that location and you use the full URL (http:\\...) to point to the image.

I overkilled the answer, sorry.

[Pat Bremkamp]

Re: CSS external image files

In addition to Steve's detailed explanation, you may also have occasion to put graphics in the style sheet folders for backgrounds or buttons. For instance, in one of my sites, I use a background graphic to create a colored sidebar, another for a button background, and a third for the "powered by AlphaFive" graphic.

If you are using CSS extensively, you will probaly want to create a local copy of one of the Alpha stylesheets and tweek it. After you do, look at the project folder and you will see a folder with that style sheet name. It will contain the buttons for the Record Navigator and the style sheet itself, style.css. Put your graphics in that folder.

[ninomcd]

Re: CSS external image files

I placed the image files (jpg and gif) in the project folder. Then I attempted to link the CSS file to my A5W file through format, link style sheet and received the error message below.

Script: UI_DLG_BOx:@=HTMLEditorDlgTitle line:2148
else if htmlbinder.HTML text
Internal Error:Unexpected data type 'B' - 'Long Text' in rpresult_to_conditional result.

Do you know what this means and how can I figure out these error messages in the future?

[Steve Wood]

Re: CSS external image files

Never seen that. What is actually in this css file that you are linking. It should look like this:

BODY, TABLE, TH, TR, TD, UL, OL, LI, P, A, BLOCKQUOTE, LABEL{
font-family:                                tahoma, verdana, arial, helvetica;
font-size:                                10pt;
}
...etc...

[ninomcd]

Re: CSS external image files

I believe the problem is that I was in the source and trying to link to the CSS file versus being in WYSIWYG. I am not sure and I do not know how to verify.

I have copying my image files into the project folder where the CSS file is located. I can know see this file under Webprojects sections. The question is how do I link this image folder that is on my local hard drive. Do you have sample linking code that I could view to determine how to reach this file successfully? Below is what I used and I am obviously not on track since it does not work.

<link rel="stylesheet" type="text/css" href="M:\My Documents\nj-high-school3.WebProjects\Default.WebProject\Imagess" />

[Steve Wood]

Re: CSS external image files

That's the problem. The best thing is to just use the WYSIWYG and you can't fail. It won't let you link a css at the location you manually entered, because it is not a valid location. Your custom css MUST be under your web projects folder, otherwise Alpha cannot put it in the correct location when you publish.

See the attached image. My custom css is in the default.webproject folder. The CSS subfolder was automatically added by Alpha when I chose to use Alpha's Sunset stylesheet for one of my components.*

My suggestion, create a subfolder under your default.webprojects folder named CSS and put your custom css file there. Make another subfolder under your defaults.webprojects folder named Images and put you images there. Everything under the web projects folder will be properly published to the server.

* Actually, the Sunset subfolder is only there because I chose to make a copy of the Sunset template and make my own edits. If you use Alpha's stylesheet templates exactly as provided, it will not add this CSS and subfolders here, it will reference the stylesheet directly from where the Alpha Five program is installed.

[Pat Bremkamp]

Re: CSS external image files

This is right out of one of my appications:

In addition to the CSS that Alpha links for me automatically in the component (which I believe is in the statement

 
?x_Admin_Nav.Output.Head.CSS_Link

I use an additional CSS which I link in, in the header section, with

 
<link href="css/wheels/mycss2.css" rel="stylesheet" type="text/css" /><!-- 2 column layout -->

Then, in mycss2.css, I use a graphic called lsidebar.jpg that creates a left sidebar background for the menu, and I reference that as follows:

 
#main{
background-color:     #fafafa;
background-image:     url(lsidebar.jpg);
background-repeat:      repeat-y;
background-position:     top left;
}

The result is shown in the attached picture

[ninomcd]

Re: CSS external image files

I am not following how you created this file called mycss2.css and then placed a Isidebar.jpg file inside the mycss2.css file. Is this really possible or am I simply not understanding you? I understand creating a folder but a .css file and then saving a .jpg file inside this .css file is not straight forward to me.

It appears as though linking to the image folder with the .gif and .jpg files is the real challenge. Below is the path to the .css file.

M:\My Documents\nj-high-school3.WebProjects\Default.WebProject\css

Please use this information to explain where my image file should be located and how to link to this file when at the WYSIWYG A5W page.

I created the two subfolders - one for images and one for the css file - as Steve Wood suggested and the images were not properly published as he stated. The css files are linked correctly but the image files are not.