Support/Comments for CssSwitcher

1,717 Posts

coroico Reply #31, 18 years, 7 months ago

As I am currently being to set up a demo site for the ajaxSearch snippet, I have developped some "stuff switcher" (not sure that my english is correct) utilities classes and then as a first implementation, rebuilt the cssSwitcher snippet.
So find enclosed, based on the previous work of Guillaume, what could become the next 0.5 release of cssSwitcher.

This snippet is built under three re-usable classes :
- switcher class, to switch any string between two pages
- select class, to build a select drop down menu (with or without submit button)
- htmllist class, to build a html list (with or without background image)

This version add more flexible templating usages based on the chunckie class and a correction to the redeclare getchunck error of 0.4 version.

Read the cssSwitcher_readme.text file to understand the snippet installation and the different available parameters. Do not forget in the includes/snippet.cssSwitcher.inc.php file to initialise the CS_CSSPATH constant to your own css folder. And to describe the rigth css styles for the html tags.

In a second time, based on these 3 classes, I look to develop :
- a new version of l10n snippet, to change the language parameter as parameter of some others snippets
- a snippetSwitcher to change from the front-end the version of a snippet (could be useful for demo site)
- a docSwitcher to change the subset of documents as parameter of some others snippets like ditto or ajaxSearch

Thanks for your comments about this new cssSwitcher release and these "stuff switcher" classes

1,717 Posts

coroico Reply #32, 18 years, 7 months ago

Find enclosed the 0.5 version of cssSwitcher. See the previous post and the cssSwitcher_readme.txt file for more informations. Thanks for your feedbacks.

The version 0.5 is now available in the repository

82 Posts

goldeagle Reply #33, 18 years, 7 months ago

Hi coroico,

This is good news for me as I am looking at making use of this. However you mention reading the readme file to understand the installation.

I may have missed something but it doesnt mention anything about how to install it, in regards to where things go. It merely outlines the parameters etc.

Perhaps you could make a post instructing people what goes where?

Regards,

Tom.

82 Posts

goldeagle Reply #34, 18 years, 7 months ago

My apologies. Ive just clicked on. Thats tiredness for you lol....

82 Posts

goldeagle Reply #35, 18 years, 7 months ago

Right, sorry dude.

But although I got it uploaded to the right place (I think huh

?) I simply cannot get it to work. I get the drop menu and it lists the style sheets correctly

But thats it. I can select which ever one I want and submit it and it simply will not work.
However if I then remove the &display=`1` from the snippet call the page will reload with the last CSS style I attempted to submit.

1,717 Posts

coroico Reply #36, 18 years, 7 months ago

Find enclosed an example of my template (ajaxSearch demo site in preparation):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<!--
Created By : Coroico ([email protected])
-->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=[(modx_charset)]" />
<title>[(site_name)] | [*pagetitle*]</title>
<meta name="keywords" content="" />
<link rel="stylesheet" type="text/css" href="assets/templates/ajaxSearchW/css/main.css" media="screen" />
[!CssSwitcher? &defaultcss=`relative`!]
<base href="[(site_url)]"/>
</head>
<body id="type-b">
  <div id="header">
    <div id="logo">
      <h1><a href="#">AjaxSearch</a></h1>
    </div>
    [!Wayfinder? &startId=`50` &level=`2` &outerTpl=`wfOuter`  &innerTpl=`wfInner` &rowTpl=`wfRow` &hereClass=`active` &firstClass=`first` &lastClass=`last` &titleOfLinks=`description`!]
  </div>
  <div id="content">
    <div id="colOne" class='boxed'>
        [!Wayfinder? &startId=`55` &level=`2` &hideSubMenus=`1` &outerTpl=`wfOuter2`  &innerTpl=`wfInner` &rowTpl=`wfRow` &parentRowTpl=`wfRow` &hereClass=`active` &firstClass=`first` &lastClass=`last` &titleOfLinks=`description`!]
        [!CssSwitcher? &parsefolder=`1` &language=`english-utf8` &display=`select` &defaultcss=`relative`!]
        [!DocSwitcher? &language=`english-utf8` &display=`select`!]
    </div>
    <div id="colTwo">
        [!Breadcrumbs? &crumbSeparator=`/` &pathThruUnPub=`1` &showHomeCrumb=`0` &showCrumbsAtHome=`1`!]
        [*content*]
    </div>
  </div>
<div id="footer">
  {{photochbFooter}}
</div>
</body>
</html>

You need a call

[!CssSwitcher? &defaultcss=`relative`!]

in the page header to load the default css file. And then in a document or somewhere in your template a call like:

 [!CssSwitcher? &parsefolder=`1` &language=`english-utf8` &display=`select` &defaultcss=`relative`!]

In this example I use the select form (selection without button).
Be sure that the CS_CSSPATH constant in the includes/snippet.cssSwitcher.inc.php is defined for your needs.
In my exampe:

define('CS_CSSPATH','assets/templates/ajaxSearchW/css/search/');

The folder should contains your css files. for me it contains: relative.css and absolute.css, so I get a select form with two options.

Here docSwitcher is an another snippet used to define the document subset used by ajaxSearch. docSwitcher is based also on the three classes switcher, htmllist and select And I use it in a document as follow:

[!AjaxSearch? &parents=`[[DocSwitcher]]` &language=`english-utf8`!]

Let me know if you have still some difficulties. I will write the wiki documentation once I know if a few number of people use this snippet.

82 Posts

goldeagle Reply #37, 18 years, 7 months ago

Yep, this has done the trick. Got it working. Now all I need to do is to find a way to style the text above the drop down menu.

1,717 Posts

coroico Reply #38, 18 years, 7 months ago

To style the text above the drop down menu, define the sytle csSpanClass

To understand edit the templates like templates/select.tpl.html. If you use display as "select" (drop down menu without button) then the template is:

<form id="[+cs.formId+]" action="[+cs.formAction+]" method="post">
  <label for="[+cs.labelFor+]">
    <span class="[+cs.spanClass+]">[+cs.spanText+]</span>
  </label>
  <select class="[+cs.selectClass+]" name="[+cs.selectName+]" onChange="[+cs.gotourl+]">
    [+cs.selectOptions+]
  </select>
</form>

By default [+cs.spanText+] is initialized with the value "csSpanClass".
If you want re-use an existing span style, adds in your snippet call &spanclass=`my_existing_style`

For the moment, without wiki documentation, to know, the default parameter values, edit the includes/snippet.cssSwitcher.inc.php file

82 Posts

goldeagle Reply #39, 18 years, 7 months ago

Hmm, I cannot say I actually understood any of that sad

I have looked all over for where to edit spanclass and I found that I cannot find the place in which you edit it???

All I actually want is for the text to appear as the same size as the paragraph text so i would simply need to assign id="p" to it, somehow...

1,717 Posts

coroico Reply #40, 18 years, 7 months ago

All I actually want is for the text to appear as the same size as the paragraph text

For that in your css file simply adds the csSpanClass style:

p, csSpanClass {  ... your p style definition ...}

or adds

csSpanClass {  ... your csSpanClass style definition ...}