Opera Skin Editor beta

Opera Skin Editor beta

Hi all tweakers!

I've created an online skin editor for Opera where you can tweak and modify existing skins.
I hope this will be usable for both novice users who don't like messing with ini-files, and those advanced users who like to play with obscure key/value combos to check out the effect.


Feedback and suggestions are very much appreciated, and please report any bugs you find in this thread.

Hope you like it!! (and yes, I'll probably create some alternate stylesheets for those who don't like brown)

http://bachius.com/opera/skineditor/

impressive!

Originally posted by scipio
impressive!

Thanks! I'm going to add some more skins to it soon, but apart from that I feel it's quite useful...

Even without any help file, it is intuitive to use. Though I have never edited a skin, in five minutes I figured out that one can copy images from one skin to another and make a hybrid skin, or modify other parameters such as the maximum width of the page bar. A very good concept to help people get to grips with skin editing. It probably needs to be downloadable to the host PC.

I wonder if Internet Explorer has something like this?

Originally posted by Pesala
Even without any help file, it is intuitive to use. Though I have never edited a skin, in five minutes I figured out that one can copy images from one skin to another and make a hybrid skin, or modify other parameters such as the maximum width of the page bar. A very good concept to help people get to grips with skin editing. It probably needs to be downloadable to the host PC.

I wonder if Internet Explorer has something like this?

What should be downloadable? The skin you've created is downloadable.

I've now modified the server http cache headers, so that images are cached (a must for the Images-section ).
Should make things faster. I'm on broadband, but perhaps I'll have to trim the html-size for modem users? But that'll probably mean bye-bye tooltips... :-(

Great to hear that you like it, and that it's easy to understand!

i think pesala means that he wants an offline version, i.e. an exe that can do the same without the need to be online.

Originally posted by scipio
i think Pesala means that he wants an offline version, i.e. an exe that can do the same without the need to be online.

Right. Though not necesarily an EXE, if this is done with HTML. It is not something I would use much if at all, but I was thinking that if this works as well as it looks like it will, your server would be rather busy. If the code could be downloaded, people could load their own skins and edit the resources with Irfan View or whatever.

Ok...but then he'll need to run a local webserver with a PHP parser as well.

Yeah, Pesala...Server capacity is my main concern for the future. Fingers crossed!!

And who knows, maybe I'll get bored some day and create an application...Like the search file editor.

Ok, I've done some changes now:

- I've added more skins (please let me know if there are som really good ones missing)
- New look. "Brownie" is now alternate stylesheet. Opera-devs: Pleeeeease make alternate stylesheets "sticky" before 7.5 goes final!!
- "Select resource skin"-button removed
- Small layout improvements
- Some other small bugs killed

Originally posted by bachius
- New look. "Brownie" is now alternate stylesheet. Opera-devs: Pleeeeease make alternate stylesheets "sticky" before 7.5 goes final!!

You could do it using cookies and Javascript

Yes, I know. But that would mean giving up my hope for seeing this in 7.5 final.

hi
very nice idea, and very well done, it's as user friendly as effective.

i've 2 little questions:

- where can i find the background properties?

- could you add the nontroppo's Breeze Simplified skin in the list ? (the most clear and space efficient opera skin)
(when writing this message, the my.opera webserver was lagging too much, and there was no way to browse the site to find the exact link for you. I'm sorry to make you search for it )

Originally posted by decimal
hi
very nice idea, and very well done, it's as user friendly as effective.

i've 2 little questions:

- where can i find the background properties?

I think that's in the "Browser Window Skin" section.

- could you add the nontroppo's Breeze Simplified skin in the list ? (the most clear and space efficient opera skin)

Nontroppo's excellent Breeze was one of the first skins I tried to add, but since he's added "# comments" right after the section-definitions it caused the ini-file parser I'm using to choke. If I find the time I'll strip away these comments, but I can't promise a timeline.

oops, I never expected my comments (added to help skin novices...) would impede such an excellent project...

If you want me to use ; for comments instead I can do that, or is the problem related to commets on same line as header? Is the problem similar to the one mentioned here:

http://mindprod.com/projinifiletidier.html

Maybe a mod of your parser with a regexp will do the trick?

bachius, you've done a brilliant job! You've put some really solid thought into it, as evidenced for e.g. by the resource skin idea which is intuitive and well executed.

After some more testing, it seems like it's the #============== separators that are causing the trouble. When I replace them with #--------------- Breeze works just fine.

Seems like we've found a bug in a PHP-method then... http://no2.php.net/manual/en/function.parse-ini-file.php

I'll probably regexp&replace them tomorrow. No need for you to update your skin now because of this bug.

Good night for now!

Could you add the Operatic Orbit 4.01 skin? It is number eight in the list of most popular skins with 333255 dowdloads (presumably that includes all previous versions).

Hey, I must say that the Operatic Orbit skin has improved rather well since it's Opera 6.X days!! I'll try to add it tomorrow (these days are SO short!! ).

Thanks. It is one of my favourites, along with Mac OS Jaguar. I'm currently using Netscape Modern, which is more compact.


Edit: Did a tiny tweak on the skin just to test. It worked perfectly.

It's scary. Makes me want to play video games and forget about making skins. So many options! T_T

Would be nice to have some PICTURES of what you're doing! ~_~

Can you put Opera-Wonderland in?

Can you put Opera-Wonderland in? I don't know the first thing about skinning and would love to change this skin to match my color scheme.

I do like what you've got here, though. But I am a bit of a Bluecurve freak. (Which is ironic since I won't go near Red Hat Linux.)

@iopq:
I'm hopefully going to upload a new version tonight where you have the possibility to choose a simplified GUI from a new help-page. You'll also get more help when hovering some items in the next version.
Could you be more specific on the scary parts? Anyway, skin editing can never beat a good video game!!

@DebianDude:
Will do, hopefully tonight.

A bit late maybe, but thumbs up, massive amount of work!

If you publish the php source some people (like me if I bother to look at the code) could offer suggestions for improvements on speed or something

Anyway, I wouldn't be a mirror, but if I could have it on my own server I might actually create a skin...

Ok, people, I've uploaded an updated version now. Hope you like it!!

Here's what's new:
- New help page (push the [?] button at the top right). This page is in dire need of some more content at the moment, but it contains some links, and a new "Customize Skin Editor GUI"-section. Here you can select a simplified version of the skin editor, select style and/or disable the move-buttons.

- Hovering headers etc. will give hints (when the cursor changes to the question mark)

- You can now copy any resource image to the "clipboard" by clicking on them. This means that images can now be moved between keys and sections!! Try some clicking around...

- Added "Move all images"-button (warning: might take some time in the images-section)

- Added Opera-Wonderland

- Other minor improvements...

What's scary about this?

After choosing a skin you go to the info page about the skin.
Why show the skin details? That just confused me. Maybe for "advanced users" it would be helpful.

Now what do I do? There is no button that says Next or something. There's a plus, but I don't know what it does.

Let me click it.

Enter name of section to add? That's not what I meant.
I want to get to making a skin!

What should be the first step?

OK, I figure, I'll make the skin work like Metal Blue. Oh wait, my internet goes out. GG.

Waiting for internet to come back...
Waiting...
Waiting...

Why is this online? A skin is an offline thing. My wireless LAN sucks and the internet goes out every now and then. DOWNLOADABLE VERSION THANKS.

OK, I get my internet back. Now I click on the dropdown for sections. There are all these things I don't understand.
What's a vertical drop insert? That statement makes as much sense to me as "Double implication is associative" does for a third-grader.

I click on images. That's good and all, but what I wanted is an image of the skin.

Now I want to search for toolbars because most skins skin the toolbars and I want the default toolbar because of toolbar colors specified by the site.

I click scrollbar vertical skin. I see a little dot by the standard opera skin and a little line when I switch into metal skin. No, that's not it. Where is the colored toolbars option?

Do skins change that option? I think they do, since the toolbars don't change their colors on sites with color toolbars.
What's a clone? What's a child0?

I want a simple interface T_T

As in,

"What do you want to do today?"
"Do you want to edit the buttons, the toolbars or the scrollbars?"
"Do you wish to view how the skin would look like?"

I'm a skin n00b, yo. Give me something easy.

How is the simplified interface easier, again?

I expected "tripod" or opera drag-and-drop interface.

I think if I knew anything about skins I would consider this genius. Since I don't -_-;; T_T

I want drag and drop buttons on a little mini-opera! I want to click on parts of the mini-opera to select what I want to edit!

Going to watch Korean pro-gamer videos.

iopq, I think what you need is a real application with wizards for everything, and also an animated little paper clip (or a red O perhaps?) down in the right corner. This little helper would ask you all kind of annoying questions, and would be disabled by most users within an hour.

But creating a good application takes much time and some skills. I don't know, but hopefully Jenne has already found some volunteers??

You also seem to have a slow internet connection? The idea is to just click the download-button to see how the skin looks like, but if that takes forever I can imagine it's no fun (takes 6 seconds for me).

I guess your expectations were a little higher than what's possible to do in a web-application.

But I did get at least one good idea for improvements as a result from your posts, so I hope you enjoy your videos!!

Also, the "Simplified" interface had a bug, but it should've been fixed a while ago.

I've also just now fixed a bug that caused the cacheing of images to not work at all. Things should work much faster now...

Hi all!!
I've once again managed to find some time for updating this project. This time around, the focus has been on making things less complicated.

- Sections with modifiers (large, hover, selected, etc) are no longer listed in the dropdown. This should make it more easy to spot the section you want to edit, since the size of the list has shrunk to less than half!! When a section that contains modifiers is selected now, the modifiers are shown as checkboxes...See for example 'Pagebar Button Skin' to see how it looks...

- Sections/skins are now listed alphabetically.

- A link to the current skin.ini is provided. This makes for easy searching and a view of the "big picture".

- When creating a new skin, the resource skin is not automatically set to standard_skin. In other words, you don't need to download the resource images if you don't want to.

- It's now possible to rename sections (the [R] button)

- All boolean keys are now shown as a dropdown list (True|False)

- Some annoying bugs when copying images around has been fixed...Should work much better now.


Ok, no more updates before I get a 7.5 preview2 to play with!!!

Bachius, you have made a wonderful contribution. I used the Opera Search Editor and it is a good app. Skins is my interest now. I use Atlantek Opera skin. Can you add that to the dropdown?
Haven't read all the posts here, maybe I am missing something just wanted to get on with using your tool...this is really exciting!

@Tweaker:
Atlantek is now added!
I'll be adding some other skins now as well (real soon): Qute Native, Phoenity Native, Odyssey, Neanderthal7, Fresh, Cocoa Native and Duki...

@Everybody:
Speak up if I've missed you favourite skin!

Gee...thanks for adding Atlantek Bachius I'll try it tonight. If I do it now, I'll be playing for hours, I know, and be accused of "computer addiction".

Let me know if you run into some kind of trouble, or find areas that could be improved...

bachius, I don't know how to use the editor. After selecting my skin (Atlantek) then I click "create new skin" - then what? Because if I click on ANYthing at this point it takes me back to (the page)where I started with Opera standard skin selected.

You need some short instructions on that page IMHO...

Originally posted by Tweaker
bachius, I don't know how to use the editor. After selecting my skin (Atlantek) then I click "create new skin" - then what? Because if I click on ANYthing at this point it takes me back to (the page)where I started with Opera standard skin selected.

This is surely not what happens when I click "Create new skin". I get the info section of the atlantek skin, and can then select the section I want to modify.

Originally posted by Tweaker
You need some short instructions on that page IMHO...

I know...The help page (?-button in upper right corner) is kind of under construction. I just don't have the time to make it good in the near future...

I'm also probably going to make the Images-section default instead of info (this is where most of the images is found), and add a configurable "max number of keys shown per page" (since there are just too many images in that section).

Have you disabled cookies? You have to enable cookies for it to work...Guess I'll have to figure out a way to detect if cookies are disabled, and then show a message.

Cookies are enabled...perhaps I don't know how to use it yet. Please define, "base skin" and "resource skin" for me!
So I enter base skin, then click "create new skin" , then enter resourse skin? Then what?
You can see I'm confused. Generally I can figure these things out, but not this time.

These weeks have been wonderfully busy!! My first child (a little boy) got born, so sorry that it took a while for me to answer!
Anyway, I've made some changes. This thing should be somewhat more helpful now...

Ok, the new boss is calling!

bachius: congratulations!!!

bachius

If this could be made really userfriendly it would definitely be very very useful! A huge project, but really good.

However, from some of the comments I'm not gonna dl just yet.

I wanna be able to make my very own complete matching skin with pics I have taken with my own camera - is that (easily) possible with this skin-editor?

i don`t think you need to d/l the program you access it online

and i think the only editing are from the skins available from the dropdown menu

i may be wrong because i really haven`t tried to edit a skin yet but have stared at the program somewhat

Congradulations bachius on the birth of your son.... it's a beautiful thing as you know.
The improvements on the skin editor allowed me to go further with it this time. However on clicking on "skin ini" to view it I get the error message:
Warning: array_keys(): The first argument should be an array in /home/web/wno14525/opera/skineditor/skin_ini.php on line 7
# This is a view of the skin.ini file that will be generated by Opera Skin Editor. # When you're using the skin editor, it will change this file for you in the background. # # For more info about this file visit http://my.opera.com/community/customize/skins/specs
Warning: Invalid argument supplied for foreach() in /home/web/wno14525/opera/skineditor/skin_ini.php on line 14

Also I don't see any images as it seems to say I should:confused:

Thanks for all the congrats!

Tweaker:
I don't get this error message. I've tried with different browsers, and I just can't reproduce it...Does anyone else have this problem??
Also, the skin.ini file is text only. If you want to see most of the images in a skin, go to the 'Images'-section.

deram:
I'll update the help someday with some more explanations, and clarifications on what this editor can and can't do.
But to answer your question: No, currently you can only edit skins that already exists. So it's perfect if you just want to make some small personal touches to a skin, test out some effects or download a skin if my.opera.com is down...

bachius, I realize the skin ini is text, but am I supposed to see it or the images from the skin as I use the editor on line?

Only text. Would it be useful for you to be able to see absolutely all images in a skin listed like that?

Well at this point i can't answer that because I still am not able to navigate to the point where i can do anything. I'm not trying to be critical of the utility, I just want to know how. I'll have another look at it and respond accordingly

Here are some new changes. Some of them have been around for a while, and some of them are brand new...

- "Images" section is made default (you get to see some images right away)

- Long sections (like "Images") is divided in several pages (just like on this forum)

- Small images are enlarged when hovering (c'mon, stydy those pixels!!)

- Key name of images are clickable, and opens a new page containing that image from all
skins
- Cleaner interface (moved resource dropdown, skin name moved to header, ++)

- View of color values change "real-time"

- Lot of small bug fixes

I've still not updated the help page documentation, but some day...some day...

bachius, how is the little one doing?