How use CSS with my Content Page?


(The Noob Toyota) #1

Hello,

 

I have created my site with a "design", everything is OK but not the CSS.

I have read the manual but i can find how link the "CSS design files" with my "Design", on the HTML code.

 

The web page :

The "Asset Map" :

CaALtN.png

When i use the "Web Path", in my HTML, its work.

I have tried "Associated Files" in the "details" of my "Design", but it does not work.

I have read "Design Customisations", "CSS Customisation"  and this solution but it does not work.

 

 

Can you help me ?

 


(Nic Hubbard) #2

Have you added the following design area to your main Design parse file?

<MySource_AREA id_name="layout" design_area="linked_css" /> 

Once you have done that, create a design customization and then customize that css design area. Doing this will allow you to choose the CSS Design file that is to be used across your site.


(Anewport) #3

Yea it looks like your CSS isn't linked up. Alternatively to Nic's solution you could modify the <link> element in the Parse file to:

<link rel="stylesheet" type="text/css" href="<MySource_PRINT id_name="__global__" var="css_path" filename="style.all.css" />" />

From the manuals http://manuals.matrix.squizsuite.net/designs/chapters/global-variables#css-path. The filename attribute should reflect your CSS asset in the Asset Tree.

 

Pros:

  • you don't need a customisation

Cons:

  • if you want to update then you must modify the Parse file, where as Nic's option allows you to modify a Customisation which would be a little faster

(The Noob Toyota) #4

Have you added the following design area to your main Design parse file?

<MySource_AREA id_name="layout" design_area="linked_css" /> 

Once you have done that, create a design customization and then customize that css design area. Doing this will allow you to choose the CSS Design file that is to be used across your site.

Yep. it does not work with Child "CSS_Design_Files" for my design and with "Associated Files" on the "Design > Details".

I have see that here : http://manuals.matrix.squizsuite.net/designs/chapters/css-design-file#Linked-CSS-Design-Area

 

This code work always :

<link rel="stylesheet" type="text/css" href="http://matrixdemo.squiz.net/_designs/site.web/style.all.css" />

With "Associated Files" or Child "CSS_Design_Files".

 

How I can link the CSS with my Design ?!

 

 

 

 

 

 

 

 

 

 

Yea it looks like your CSS isn't linked up. Alternatively to Nic's solution you could modify the <link> element in the Parse file to:<link rel="stylesheet" type="text/css" href="<MySource_PRINT id_name="__global__" var="css_path" filename="style.all.css" />" />

From the manuals http://manuals.matrix.squizsuite.net/designs/chapters/global-variables#css-path. The filename attribute should reflect your CSS asset in the Asset Tree.

 

Pros:

  • you don't need a customisation

Cons:

  • if you want to update then you must modify the Parse file, where as Nic's option allows you to modify a Customisation which would be a little faster

 

 

It does not work, but I have a new error message !

SpCQMd.png

 


(Nic Hubbard) #5

Yep. it does not work with Child "CSS_Design_Files" for my design and with "Associated Files" on the "Design > Details".

I have see that here : http://manuals.matrix.squizsuite.net/designs/chapters/css-design-file#Linked-CSS-Design-Area

 

This code work always :

<link rel="stylesheet" type="text/css" href="http://matrixdemo.squiz.net/_designs/site.web/style.all.css" />

With "Associated Files" or Child "CSS_Design_Files".

 

How I can link the CSS with my Design ?!

 

 

 

 

 

 

 

 

 

 

It does not work, but I have a new error message !

SpCQMd.png

 

 

Did you then apply the design customization on the Settings screen of the site you want the CSS to show up on?


(The Noob Toyota) #6

 

Did you then apply the design customization on the Settings screen of the site you want the CSS to show up on?

Like this ?

yx0pPZl.png


(Nic Hubbard) #7

Like this ?

yx0pPZl.png

 

No, that is just still a design. Go to the Customizations Screen of that Design asset and create a new customization. Then customize the linked CSS design area and choose the CSS Design file. After all then, you will see a new customization asset as a child of your Design. THIS is what you set as on the Settings screen.