preview of new theme, opinions needed please

carl_galloway · Post by **carl_galloway** » Fri May 26, 2006 6:39 am

Hi everyone,

I'm working on a new theme that uses the theme configurator for version 1.1 to change the colors used in specific parts of the page rather than just selecting a different template like my previous 1.1 themes (such as andreas08 or smallbiz01) Check out the two preview entries to see the screenshots, first post, second post

Even though I can only show screenshots at this stage, I really need comments from people who might want to use this template about the sorts of things they might like to see. Please read all the existing comments as well and feel free to agree or disagree with anything. Mostly what I want is honest opinions. Thanks, Carl

TKS · Post by **TKS** » Fri Jun 02, 2006 8:19 pm

Carl,

Something that would be nice with this sort of theme would be the ability to custom pick colors on each menu item. I know this would be a ton of work (probably) but it would really be interesting to do it because one could edit individual menu bars to draw attention to each one using color.

Something that would be really cool is to incorporate menu color for the themes using the javascript drag and drop page...you know, dropping down a menu and choosing color based on RGB or colorwheel. Of course, this also would probably be a ton of coding and not just theming.

I know that something I like to control is the code tag appearance. I hate how some templates use a crappy code flag that renders the text silly. I like the standard old black or gray with light colored fonts. Being able to choose this would be an added bonus.

Being able to toggle the nav bar from one side to the other would be really cool or even adding the option to have the nav bar be continous across the entire page. Of course, this is relatively easy for the few of us that know CSS and smarty but not for most people.

There's my two cents worth...hope it helps!

carl_galloway · Post by **carl_galloway** » Fri Jun 02, 2006 9:21 pm

great ideas, and since this template is being designed ground up for version 1.1 those would be great additions to showcase the capabilities. I need to be careful how many options I include because otherwise the configurator screen will look very messy and confusing but I really like your idea about the way code is displayed, and that might be the first change I make.

Custom colors are something I plan to work on for the next theme after this one, but the configurator doesn't have the ability to let me includea color wheel. I won't bother Garvin about this right now but it might come up in conversation again after version 1.0 is released.

Post by **garvinhicking** » Sat Jun 03, 2006 11:55 pm

Hi Carl!

Actually the theme configurator DOES have an ability to include a color wheel.

In your themes config.inc.php you could use something like this:

Code: Select all

$colorwheel_code = 'Please choose your colorwheel stuff here. This is raw HTML following:
<script type="text/javascript" src="templates/softenedcells/colorwheel.js"></script>
<script type="text/javascript">
EmitColorWheel();
ColorWheelCurrentValue(document.getElementById(\'config_template_colorwheel\').value);
</script>';

$template_config = array(
    array(
        'var'           => 'colorwheel',
        'title'         => 'Color Wheel',
        'description'   => 'Choose your warrior!',
        'type'          => 'custom',
        'custom'      => $colorwheel_code
        'default'       => '#ffffff',
    ),
);

Note that it was already previously possible to emit any custom JS/HTML using the "default" index key of the array and setting 'type' to 'content'. But then you'd loose the possibility to specifiy a "default" option. So I added the "custom" parameter into SVN today.

When using this "custom" parameter, a hidden input field will store the current value, which is referenced to javascript viah the "config_template_XXX" DOM ID.

HTH,
Garvin

carl_galloway · Post by **carl_galloway** » Sun Jun 04, 2006 5:12 am

ooh, that looks interesting...

carl_galloway · Post by **carl_galloway** » Sun Sep 17, 2006 10:50 pm

Garvin, its been a while since I last looked at this project, but now I want to start it again. I'm working with the custom option to include a color selector, and I decided not to use a color wheel, instead I'm using this color selector

I can get the color selector to display correctly, but now I want to be able to use it. What I want to do is make it a popup box next to a regular string option, but I'm totally stuck. My config.inc.php is this;

Code: Select all

$colorwheel_code = 'Please choose your colorwheel stuff here. This is raw HTML following:
<script type="text/javascript" src="templates/carl03/script.js"></script>
<input type="text" class="color" value="#FFFF00">';

$template_config = array(
    array(
        'var'           => 'colorwheel',
        'title'         => 'Color Wheel',
        'description'   => 'Choose your warrior!',
        'type'          => 'custom',
        'custom'        => $colorwheel_code,
        'default'       => '#ffffff',
    ),

The javascript uses 'color' as the id for the input box, and this is easy to change, but your custom code emits a hidden input box with id 'config_template_colorwheel'. Not sure how I can use that, or even change it. But as I said what I really want to do is have the regular string option with an icon for the popup window that includes the color selector.

Got any ideas on how to go forward?

judebert · Post by **judebert** » Mon Sep 18, 2006 2:41 am

Whoo-ee, Carl. You waited for Garvin to take off on vacation for this?

I believe the plan is for your JS to use document.getElementById('config_template_colorwheel') to find the hidden field, then set its 'value' attribute to whatever's in the text box. I think, to use the dual input methods, you'll need to write something to copy the visible text box to the hidden field whenever the text box changes.

Harald Weingaertner · Mon Sep 18, 2006 11:46 am

WOW! Really nice template and nice ideas!

If you need someone to check this on a live site... You know where to find me

Looks really interesting and maybe to have some of those things in mind.

azel · Post by **azel** » Mon Sep 18, 2006 2:43 pm

Another excellent-looking theme, Carl.

carl_galloway · Post by **carl_galloway** » Mon Sep 18, 2006 9:17 pm

I've been playing around with the color selector I mentioned a couple of posts above, judebert, couldn't get your suggestion to work yet, but I'm making progress I think. Only problem is that the form generated for the entire page doesn't include a name so many of the javascript copy and paste scripts won't work. Garvin needs to think a bit more about this.

In the meantime, my updated code is this, which allows the color selector to work, it is only shown once (at the top of the page) and users need to copy and paste the color value into the input box for the element they want to change. This is effective, but probably needs proper explanation.

The code is this,

Code: Select all

$colorwheel_code = 'Please choose your colorwheel stuff here. This is raw HTML following:
<script type="text/javascript" src="templates/carl03/script.js"></script>
<input type="text" class="color" name="text_area" value="#FFFF00" onClick="select_all();"><input type="button" value="Highlight Color" onClick="javascript:this.form.text_area.focus();
this.form.text_area.select();">';

$template_config = array(
    array(
        'var'           => 'colorwheel',
        'title'         => 'Color Wheel',
        'description'   => 'Choose your warrior!',
        'type'          => 'custom',
        'custom'        => $colorwheel_code,
        'default'       => '#ffffff',
    ),

So as we stand right now, I can provide a series of input boxes that allow user to change individual colors within a template, and this means that all of the older css only styled designs, such as andreas08, mt, mt3 etc can now be converted to full v1.1 and include a color selector without the limitation of only having the provided colorsets. As an aside, my 1024px template is now working with this code, allowing complete customisation of every color used on screen except for the white background which uses an image. I haven't uploaded this yet because it needs testing.

Post by **garvinhicking** » Mon Sep 18, 2006 9:36 pm

Hi Carl!

The HTML outputted inside the template configuration mask should include both <input name=XXX> and <input id=YYY> attributes? Did you have a look at the output? A name must definitely be there, else a variable could not be saved.

You just need to change the color-code javascript to use the IDs from the "real" s9y input fields, which can be done with the s9y way of handling it. If you don't get it worked out, I'll of course try to show it to you after my holidays. Should be doable within a few minutes - if I had a s9y installation for testing here, I would've done it right now.

I also sadly didn't yet have time to check your hemingway-test theme, I'm sorry. But I'm really, really curious about it and love the way you are progressing with it

Best regards,
Garvin

carl_galloway · Post by **carl_galloway** » Mon Sep 18, 2006 9:49 pm

Hiya, Garvin, the way that supercomputer brain of yours works I'm surprised you can't emulate a serendipity install in your head without having to use a test server.

I'll remind you when you get back from your holiday about this, I'd like to update all the older themes to work in v1.1 so that you can finally delete the old versions.

As for Hemingway, a couple of people are helping me test it and it should be released in the next few days.

judebert · Post by **judebert** » Tue Sep 19, 2006 3:18 pm

So, are we saying the input box for color doesn't have a name or an ID?

carl_galloway · Post by **carl_galloway** » Tue Sep 19, 2006 7:46 pm

Jude, I think Garvin and I might have different solutions to the same problem. I couldn't understand how Garvin intended to use his colorwheel, and I couldn't find a javascript colorwheel that I liked, so I found an alternative. Of course this meant I had to change Garvin's code.

The ability to copy and paste the rgb color from the colorselector into the input box for the template option is what I want, but every single javascript snippet I've found requires the form to have an id, and also the input. Our template admin page has a single form that includes all template optrions plus the templates to be selected and this form does not have an id, so I can't use the copy/paste snippets I've found.

Garvin is correct in saying that his hidden input and the template options input boxes have id's, but I'm not an expert in javascript, I need step by step instructions. Would it help if I sent you the template I'm working on so you can see how the logic works from start to finish? Might be an interesting diversion for you.

Harald Weingaertner · Post by **Harald Weingaertner** » Fri Sep 29, 2006 8:40 pm

Carl, do we have the chance to see the release shortly?

I really like this one...