A white skin



  • To use the skin, copy the folder to the same directory as common.css, then paste this line at the top of common.css @import 'white/style.css'; or @import 'white3d/style.css'; Windows: C:\Documents and Settings\Administrator\Local Settings\Application Data\Vivaldi\Application\1.0.83.38\resources\vivaldi\style\common.css Mac: Contents/versions/1.0.83.38/Vivaldi Framework/resources/vivaldi/style/common.css Linux: opt/vivaldi/resources/vivaldi/style/common.css [attachment=516]1.png[/attachment] [attachment=517]2.png[/attachment] Attachments: [img]https://forum.vivaldi.net/uploads/attachments/697/1.png[/img],[img]https://forum.vivaldi.net/uploads/attachments/697/2.png[/img]




  • Vivaldi Team

    Haha, that's crazy. Nice work!

    Is there anything you wish we'd add to the browser to help with customization?

    Henrik Granaas-Helmers
    Designer, Vivaldi Technologies



  • I would like to see these options from the old Opera:
    – ability to load an unpacked skin;
    – Debug Skin option – display a tooltip with a name when hovering UI elements, but here, instead of the name it would have to display a full DOM Tree path of the element (same as the one displayed in developer tools);
    – Reload Skin shortcut key.



  • If skinning stays based on css, it would be great to be able to use multiple skins (css files) at once later on (with a priority order).
    This way skins could focus only on partial aspects and a user could pick a collection of skins that fit best.

    For example:
    1. Skin that makes all UI elements white
    2. Skin that replaces the icons
    3. Skin that gives tabs a 3D look

    Alternative combination:
    1. Skin that makes all UI elements blue
    2. Skin that removes all animations
    3. Skin that makes tabs smaller

    Of course there will be unresolvable conflicts which might cause problems, but for people who want it simple there still can be big complete skins that cover more than single aspects.

    As for the better customization/skinning it would be great to make the original Sass/LESS file from which the common.css was generated available (would simplify a lot of things).
    And as Saskatchewan already pointed out, some debugging options would be nice. It would be great/perfect if the Chromium Developer Tools already available could be used directly on the Vivaldi UI.


  • Vivaldi Team

    We have some very interesting things in the pipeline. It is good to hear what you are thinking. Poking around without access the to the original files is an easy way to destroy the UI—or create something great. There is a fine line between genius and insanity. :)


    Henrik Granaas-Helmers
    Designer, Vivaldi Technologies



  • @helmers:

    Haha, that's crazy. Nice work!

    Is there anything you wish we'd add to the browser to help with customization?

    Henrik Granaas-Helmers
    Designer, Vivaldi Technologies

    A skin debugger would be perfect :)



  • Already loving all the customization the community is doing, UI & Translations for people :)



  • Thanks B)



  • I would like that information popup at the bottom that tells you if you are uploading or downloading and what speeds.

    I would like to be able to change the skin from this horrible bright white and also add and remove buttons we want in the browser. Plus to make speedial the home page.

    Still asking for the ability to change the download folder destination too.. Not one bit happy with stuff going into the C: drive



  • Nice theme! The 3D was cool but had poor performance on my laptop. I especially appreciate the reduced contrast compared to the default theme.



  • Hi guys! I'll just leave it here…

    @IchigoWalker:

    Use –remote-debugging-port=2015 in cmd params
    Then open http://localhost:2015 and find Browser.html. Debug all the interface for fun)

    https://vivaldi.net/forum/vivaldi-browser-for-linux/1969-is-there-some-way-inspect-element-with-the-browser-itself



  • Absolutely ingenious! Thank you for this! My LCD is quite bright, and now i can finally and actually see my tabs clearly! B)



  • Great work indeed!


  • Vivaldi Translator

    @helmers:


    Is there anything you wish we'd add to the browser to help with customization?
    ...

    Since you ask :blush: :
    (some ideas are mine=new and some are repeated and/or improved)

    • order is not sorted by how important it is to me! -
    1. skin gallery (could be done as a section in Vivaldi apps/Vivaldi extensions)
    2. install skin from the gallery or/and let us load it from stored files (in PC)
    3. for basic .css items (like taskbar colour, address bar, some frames etc… you know, all these visible and monotone skinable things :) ) - do some menu where we can set: colour (by HEX, RGB and CMYK), opacity/transparency and since you are a designer you know some more and easy ways which could be there too than I can imagine right now :)
      some screens for ad3:
      3.1) I would prefer full spelling instead of HSB (Hue, saturation, brightness)) + opacity/transparency!

    The setting menu (some quick painting edit :blush: )

    well, with this simple skinning "at home" and ability to EASY download/set a custom skin done by someone else (not digging it on forums as it's now) it's almost all speaking about CSS abilities
    (of course, skinning is more than CSS -> moving/deleting icons, editing icons, adding new icons speaking of uploading own icons and assign them to shortcuts and be able to place them where you want etc…)
    Attachments:
    ,



  • Am I right in thinking that the Page Actions popup at bottom right is doing the same as applying a new skin, or is there more to it?

    That list needs also tidying up to remove the junk (Transform 3D and Images skewed for example). If skins could be applied from there it would be great.



  • Seems to me that would be different. Page Actions interacts with the page and not the UI, whereas skins would interact with the UI, but not the page.



  • In Opera 12.17 I just click the separator icon on the toolbar to show a skin menu. It would be nice if Vivaldi could do something similar.

    [attachment=999]Skins.png[/attachment]

    Download Skins for Opera 12.x
    Attachments:



  • @helmers:

    Haha, that's crazy. Nice work!

    Is there anything you wish we'd add to the browser to help with customization?

    Henrik Granaas-Helmers
    Designer, Vivaldi Technologies

    ~
    Yes, please add a drag-and-drop Customize screen mode, like older (Pre-Australis UI) Mozilla browsers used to have (and as PaleMoon and SeaMonkey still have), so that we can position the UI elements (such as individual buttons and whole toolbars) to suit our best use and preference.

    Thanks. :)



  • @davesnothere:

    @helmers:

    Haha, that's crazy. Nice work!

    Is there anything you wish we'd add to the browser to help with customization?

    Henrik Granaas-Helmers
    Designer, Vivaldi Technologies

    ~
    Yes, please add a drag-and-drop Customize screen mode, like older (Pre-Australis UI) Mozilla browsers used to have (and as PaleMoon and SeaMonkey still have), so that we can position the UI elements (such as individual buttons and whole toolbars) to suit our best use and preference.

    Thanks. :)

    Opera 12 et prior had a much better system than this, whereby every single element of the browser could be customized, including what buttons appeared where, which toolbars were active and where they appeared, and what some of them even DID, etc., etc. The granularity of Opera customization was unsurpassed - so much so, that the first time I saw firefox's old D&D system, all I could say is, "WTF? THIS is all they let you do?"


Log in to reply
 

Looks like your connection to Vivaldi Forum was lost, please wait while we try to reconnect.