How to add images and css files to pages?

Topics: General, MVC, Visual editor
Sep 11, 2011 at 3:18 PM

Hi,

I have made some mvc pages on composite c1

However, how do I add my own css files and pictures? Whatever I do, when I add pictures (either via VS2010 or Composite C1), and likewise with CSS, they do not appear in the page. Images only show the alt tag and css files do not take effect.

 

Thanks

Sep 12, 2011 at 7:47 AM

Hello,

Make sure that you have correct URLs to your CSS files or pictures.

Also check this article - http://docs.composite.net/C1/HTML/Guide-to-Templates-in-C1.aspx/Editing-Templates

Sep 14, 2011 at 11:12 PM

Hi

Thanks for the link. I've got CSS to work as I specify the stylesheet in _viewstart (A template for all the pages).

I have the following style:

body
{
    font-familyArial;
    color#000;
    font-size12px;
    background-imageurl('../Views/metal_texture_7_by_wojtar_stock.jpg');
}
 


However, the background-image attribute does not work (no background is displayed). THe path is correct (I selected the file through 'build style' in VS2010. The image is also in the media archive.

What should the path be?

Thank you very much!
Sep 15, 2011 at 8:44 AM
Edited Sep 15, 2011 at 8:49 AM

Hello,

background-imageurl('../Views/metal_texture_7_by_wojtar_stock.jpg'); 

This URL is relative to your style sheet source (CSS file), please provide with Full path to the CSS file and full path to the image.

Instead of using relative url to the CSS file, you can use url relative to your site URL:

background-imageurl('/full_path_to_the_image/metal_texture_7_by_wojtar_stock.jpg'); 
Sep 15, 2011 at 11:07 AM

Hi

So that would be something like http:// .... (http based path as opposed to file path)?

Thanks

Sep 15, 2011 at 11:24 AM
Edited Sep 15, 2011 at 11:25 AM

no, it would be /full_path like absolute opposed to relative file path

http://webdesign.about.com/od/beginningtutorials/a/aa040502a.htm

Sep 16, 2011 at 12:12 AM

Hi

I may be naive, but had no luck:

The path to the image is: E:\SourceControlledProjects\GIT\Composite C1 Website\Website\Views\metal_texture_7_by_wojtar_stock.jpg

The css is in E:\SourceControlledProjects\GIT\Composite C1 Website\Website\Frontend\Main.css

The pages are all in Views. E.g: E:\SourceControlledProjects\GIT\Composite C1 Website\Website\Views\

The homepage, for example, is in: E:\SourceControlledProjects\GIT\Composite C1 Website\Website\Views\Home\Index.cshtml

 

Given that information, what should the background-image attribute look like?

 

Thanks

Sep 16, 2011 at 7:25 AM

I think these two variants should work:

1) relative to the CSS file:

background-imageurl(../Views/metal_texture_7_by_wojtar_stock.jpg); 

2) relative to the site URL:

background-imageurl(/Views/metal_texture_7_by_wojtar_stock.jpg); 

Are you sure that background image is not loaded, probably you don't see it, try to add backround-repeat:

background-repeat: repeat-x;
Sep 16, 2011 at 8:46 AM

If I may make a suggestion... (as a side point)

You may want to keep your CSS organized in a folder and then have an images folder under that so:

/Frontend/css (Style sheets)

/FrontEnd/css/images (images used in your style sheets)

Although I'm sure there will be images that are content as opposed to styling, this folder structure will allow you to consistently refer to all your images in your main.css like so:

body {
   background-image: url('images/metal_texture_7_by_wojtar_stock.jpg'); /* RELATIVE PATH */ 
background-image: url('/frontend/css/images/metal_texture_7_by_wojtar_stock.jpg'); /* ABSOLUTE PATH */
}

Just my opinion, but you will cause yourself much less grief in the long-run... and these are simple tips that I wish had been shown to me long ago.

Sep 16, 2011 at 9:07 AM
Edited Sep 16, 2011 at 9:08 AM

If you're suggesting the C1 folder structure it should be

  • /Frontend/Styles (for css), 
  • /Frontend/Images (for images) and 
  • /Frontend/Scripts (for javascript). 

If you're breaking that convention, the most used formats on the net in general are

  • /css or /Stylesheets (for css), 
  • /js or /Scripts (for javascript) and 
  • /gfx or /Images (for images)
Sep 19, 2011 at 4:57 PM

Hi,

I got the img added successfully via css in the mvc view. However, I get the image coming up twice on the pages? This looks like a bug.

Thanks

Sep 21, 2011 at 7:17 PM
Edited Sep 21, 2011 at 7:19 PM
burningice wrote:

If you're suggesting the C1 folder structure it should be

  • /Frontend/Styles (for css), 
  • /Frontend/Images (for images) and 
  • /Frontend/Scripts (for javascript). 

If you're breaking that convention, the most used formats on the net in general are

  • /css or /Stylesheets (for css), 
  • /js or /Scripts (for javascript) and 
  • /gfx or /Images (for images)

Ah yes... that's right and Composite's convention is a good one to use. I'm so used to that convention in my own projects.