PDA

Archiv verlassen und diese Seite im Standarddesign anzeigen : Using YAML Framework with EE



imported_imported_Dave
04.04.2008, 10:47
Hi - I am quite new to both EE and YAML! so pls forgive any apparent stupidity :).
I need some help in adopting the recommended Project Structure for use with EE (version 1.6.3). EE as you probably know makes use of Templates which link to stylesheets via the following tags:

<link rel='stylesheet' type='text/css' media='all' href='{stylesheet={my_template_group}/site_css}' />
<style type='text/css' media='screen'>@import "{stylesheet={my_template_group}/site_css}";</style>

The YAML folder has several hierarchies e.g. /yaml/core and /yaml/screen etc. The problem as I am facing is that EE only allows for 1 sublevel below the YAML level in its template system. It seems I must 'break' the YAML hierarchy and readjust all the CSS linkages. Is that correct? Can you please suggest the best way to bring YAML into EE?

Many thanks

djesse
05.04.2008, 23:31
Hi,


The problem as I am facing is that EE only allows for 1 sublevel below the YAML level in its template system. It seems I must 'break' the YAML hierarchy and readjust all the CSS linkages. Is that correct?

No, you don't. Check out the example layouts that are included in the download package and take a look into the documentation. YAML uses a central stylesheet (http://www.yaml.de/en/documentation/css-components/the-central-stylesheet.html) were all other components are included. There should be no problem with EE.

Best regards
Dirk

panabruce
08.04.2008, 01:27
I've learned a method from Sven Kausche, he used to have a YAML implemention for EE called YAMLEE. So, one way some people use YAML in EE is as follows:


Create a yaml_css template folder in EE.
Recreate the standard YAML CSS files in EE (perhaps named "yaml_css"), and place them in this folder. (Or, if you don't want to edit the files from within EE, then just link to the files.
Create a CSS stylesheet for your layout (which assembles your css files). For example, in EE, create a "my_layout" template (choosing EE's CSS template format option) and place this in it:



/*
-----------------------------------------------------------------
YAML Central Style Sheet for Expression Engine Site
-----------------------------------------------------------------
YAML: (c) Dirk Jesse (http://www.yaml.de)
-----------------------------------------------------------------
*/

@import url(/css/core/base.css);
@import url({stylesheet=yaml_css/mod_base}); /* this file is for modifying the base.css layout */
@import url({stylesheet=yaml_css/nav_main}); /* this file is for site navigation */
@import url({stylesheet=yaml_css/base_content}); /*this file contains basic site formatting */
@import url({stylesheet=yaml_css/EE_post_formatting}); /* this file is for formatting Expression Engine content */
@import url(/css/print/print_003_draft.css); /* this file is for your printing layout */


Note: In the above example, you are linking to the base.css from your site file structure; and you're linking to nav_main from within EE. Depending upon whether you want to edit internally or externally to EE, make your links appropriately. One reason you'd want to keep "base.css" external to EE, is so that you can easily upload newer versions of base.css to your server, and so that no one is tempted to edit it from within EE. The way you link externally to EE is to have a forward slash before the relative link. Your EE relative links do not start with a forward slash.



In your EE templates, link to your CSS files as follows:



<link href="{path=yaml_css/my_layout}" rel="stylesheet" type="text/css"/>
<!--[if lte IE 7]>
<link href="/css/explorer/iehacks_2col_left_vlines.css" rel="stylesheet" type="text/css" />
<![endif]-->

I run my sites in EE with YAML, and find this works fine for me.

Bruce