Note: Upon execution, column1.php gets inserted into main.php replacing the placeholder variable $content. Step 4: Examine the source and figure out where to separate the HTML that should be the rest of main.php and what would go into a single column display (i.e. For example, theme->baseUrl ?>/css/script.js"> Replace any references to files on the filesystem with paths that take into account the location of the theme. This will become your main.php file in the layout subdirectory. Step 3: Copy the header into a new text file. Step 2: Find the “demo” page that shows the various CSS styles and formatting. Step 1: Find a theme/template you like and download it. There is dummy info included in the column2.php layout to further demonstrate use of Artisteer CSS classes.Ī more general approach to converting HTML templates to Yii themes can be summed up in the following steps: If you need the column2.php layout (or others of your own design), you'll need to setup a test to use it. You might even be missing a set of tags if a header is included in one theme, but not in another. In particular, note which DIV tags are nested within others and which blocks of tags follow each other. If the menu, for example, is in the wrong location, viewing the HTML source for both web pages and noting the differences will help you alter the various layout files. http: //localhost/myapp/) with an open window/tab of page.html. When present in your theme, this file takes precedence over your webapp's site/index.php.Ĭompare the browser display (i.e. This page is generated from yourtheme/views/site/index.php (it will say so on the screen). You should see a one column display very similar to what you get if you view page.html. Step 5: Set 'theme'=>'yournewtheme' in the main.php config file and tweak! Basically, go to the home page of your webapp (something like http: //localhost/myapp/). Artisteer does not provide forms CSS in their generated template. Note: form.css is from the standard Yii install. Step 4: Copy the Artisteer files from the generated HTML template into the css directory. Step 3: Remove the css/images subdirectory from the new theme Step 2: Make a copy of the working theme from Step 1 and give it a new name. When you 're sure the theme works, move on to the next step. Install the theme according to the instructions. For example, if your menu position is below the header, you'll do less editing if the theme you download as a starting point already matches. Step 1: Download a copy of one of the Artisteer – based themes from If possible, find one that is structured close to the one that you want to convert. Or you've downloaded one of the freebies online. So, you've generated an Artisteer theme that you like and exported it as an HTML template. (see the Yii Definitive Guide for more info) Approach #1: Fast and Furious ¶ Layouts are those special views that define the header, the footer, and column layouts. The views, then, are the walls and the doors, the windows and the floors that complete the theme. In many ways, CSS is like a structural foundation. The Yii theme files are a little more involved. I will revisit this file in more detail when I cover the second approach. You'll also see Artisteer specific classes demonstrated. For example, you'll see the H1 tag, how links are styled, and the default format for HTML tables. Page.html demonstrates the use of the various styles supported by the template. It is the HTML template that can be converted to an Artisteer theme. Artisteer vs Yii ¶Īrtisteer can be used to generate themes for Drupal, Joomla, and other CMSes. I'll be covering the first approach in detail, while the second will be more of a general discussion. The second approach is more general and will apply to some extent to other HTML templates that you may want to convert. Sometimes getting the job done is the top priority. This is undoubtedly the fastest route, but won't teach you as much as doing it from scratch. The first is to simply copy an existing Artisteer – based Yii theme, overlay the CSS and images, then make any necessary tweaks to the layout files. There are two approaches to converting an Artisteer theme.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |