Jump to content

SamC

Members
 View Profile  See their activity

  • Posts

    733

  • Joined

  • Last visited

  • Days Won

    9

 Content Type 

Posts posted by SamC

    Uikit admin theme discussion

    in Themes and Profiles

    Posted

    29 minutes ago, bernhard said:

    thanks @SamC that brings some light into the dark of customizing the admin, at least for me :)

    can you please elaborate how you created this theme's less file? did you just copy&paste&modify it from the original theme?

    I changed it to this now:

    Quote

    4) Create a new less file which will be used for your custom theme. For the sake of ease, here's my theme which should offer a starting point. I made this by copying the contents of 'pw-theme-reno.less' into this new file and modified it to add page background colour control, consistent login screen colours, ability to use smaller margins throughout, different logo effect, some text changes, more subtle warnings/errors and so on. This means you'll most likely only need to change a few variables at the top and re-compile (instructions to follow).

    Sorted out the 'h2 {word-wrap: break-word;}' for those long paths too on the tutorial, broke the layout on mobile. You can see in the video when I demonstrate saving a page (missing required fields) at 1:06, I much prefer more subtle errors/warnings like this but that was a pain to change with the label colour being the same as the background of the error message.

    I find the default one very old fashioned, is like this:

    default-error-page.JPG

    so I changed it to this:

    modified-error-page.JPG

    29 minutes ago, bernhard said:

    I haven't had a look into the theme's less yet, but regarding the template designer module i have some nice news: I'm just working on the PW Kickstart module and creating a processmodule which makes it very easy to modify the code of the recipes and run it. That's a perfect fit for modifying LESS files of your theme, compile them on save and instantly show the new theme. I'll try to put something together in the next few days with the help of your tutorial :)

    Sounds tasty! Look forward to seeing this! :) 

    • Like 2

    Website Template Site Recommendation

    in Dev Talk

    Posted

    3 hours ago, szabesz said:

    I do not know what sort of wizardry you are practicing

    It's the slow kind :P

    I use gulp to pull everything in usually which is relatively simple. I've found the included build tools with uikit super slow. I like with gulp that I can use autoprefixer etc. but I don't think uikit requires this actually, bs4 does.

    Still not sure how to use only parts of the uikit JS rather than a large fie with the kitchen sink included. The webpack instructions I found to be lacking somewhat.

    @szabesz how do you compile your less in your workflow?

    • Like 2

    Website Template Site Recommendation

    in Dev Talk

    Posted

    @pwired think I'll buy it to give it a test, it's cheap enough for a punt, maybe I could actually use it on my own portfolio site to see what can be achieved.

    At the moment, I spent so much time customising stuff that I'm starting to think this is a waste of time (spending hours upon hours working out how to build/compile with uikit 3 and actually building nothing) when I could churn out sites way quicker and cheaper. Cheaper is the key words here because round here, no-one wants to spend on (low functionality) websites, they go straight to wix and 'You want a website? Why not do it yourself?' *sigh*

    There seems to be zero 'romance' in the custom design, bespoke, [insert nice sounding keywords here] websites, it's purely about price. This is a bitter pill for me personally as I always considered high quality workmanship more important than price.

    Some crappy things have happened over Christmas though so maybe I'm just on a downer! Here's to a more positive 2018 :) 

    • Like 2

    Website Template Site Recommendation

    in Dev Talk

    Posted

    Canvas looks interesting. What's the license deal with it? Do you need to buy a license for each client project?

    One thing that always concerns me about pre-made is that you might be jumping through a lot of hoops if you want to change something especially if no source files (sass/less) are included.

    If I'm totally honest, sometimes I think why did I bother spending so much time learning stuff when I could just buy a template and be done with it. I wouldn't need to know hardly anything, only how to install PW, set up the fields etc. A portfolio full of bought themes isn't too impressive though when trying to convince the world you're a 'designer'.

    Always puts me on the fence this subject, pre-made vs custom. There's a lot of pros/cons in my mind to both methods. Kinda like singers using autotune, are they really singers? :P

    Which to learn and use JQuery or Vuejs?

    in Dev Talk

    Posted

    On 25/12/2017 at 8:26 AM, Zeka said:

    If you are new to JS world, IMHO, I would suggest this learning curve:

    JS -> ES6 -> jQuery -> Vue / Angular / React

    This is what I'm doing, been on plain JS for months. Still trying to get my head round that damn prototypal inheritance. My JS progress is so slow it's unreal, I just don't seem to get it. If there was another option for web programming, I'd be skipping JS entirely.

    • Like 3
    • Haha 1

    Uikit admin theme discussion

    in Themes and Profiles

    Posted

    1 hour ago, Peter Knight said:

    As a result, when I'm developing and making edits to .less files, I change the constant AdminThemeUikit::dev = true. This is at the top of the AdminThemeUikit.module file. That makes it use uikit/custom/pw.css instead of the dist file. I consider that pw.css to be the development "working file". My editor (phpstorm) is set to automatically compile that from the pw.less file every time I hit "save" on any .less file in there.

    This bit didn't work for me as I don't use phpstorm. And there's some missing pieces to this puzzle. You can't compile without the necessary node modules (and you need nodejs and npm installed).

    I did the following:

    1) Git cloned AdminThemeUikIt into '/site/modules/'
    2) 'npm install' (gets the modules) in '/site/modules/AdminThemeUikit/uikit/'
    3) Created a new less file '/site/modules/AdminThemeUikit/uikit/custom/pw/gray-theme.less'
    4) Commented out reno and imported mine instead in '/site/modules/AdminThemeUikit/uikit/custom/pw/_import.less': 

    // Theme
@import "gray-theme.less";
// @import "pw-theme-reno.less";

    5) Then, 'npm run compile'.
    6) Generates 'pw.uikit.min.css'.
    7) Use AdminThemeUikit from /sites/ instead of /wire/. The option to choose which is in the config page for the module when you have the same module in sites and wire.

    My custom less file is attached if anyone wants to try it out. It has modifications so the login form themes correctly, can set global margins (a few other users were not keen on the large padding) and other small tweaks.

    gray-theme.less

    • Like 1

    [SOLVED] Image front editing in a gallery

    in Getting Started

    Posted

    I tried this with an (unlimited) images field just to see how it would work. 

    <?php namespace ProcessWire; ?>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title><?php echo $page->title; ?></title>
    <link rel="stylesheet" type="text/css" href="<?php echo $config->urls->templates?>styles/main.css" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
  </head>
  <body>

  <div class="row">

    <?php
      foreach($page->images as $image): 
    ?>

    <div class="col-4">
      <edit images>
        <img src="<?= $image->url; ?>" />
      </edit>
    </div>
  
    <?php endforeach; ?>

    </div>
  </body>
</html>

    (used Option C)

    I made a very rough video of it:

    You could just do what @flydev suggested with an overlay icon. They click on that, then can change images. It's not as user friendly as being able to just change one image at a time though, clicking on any of them brings up the entire field (as expected). Still pretty cool though!

    (this isn't a live site, nor do I use '/login/' on any live ones)

    • Like 3

    Uikit admin theme discussion

    in Themes and Profiles

    Posted

    11 minutes ago, bernhard said:

    @SamC great. Maybe you want to use less.js (http://lesscss.org/#using-less-third-party-tools) to show a very simple way of playing around with the admin themes LESS files? We could even build a theme generator using less.js and/or AIOM's php based less parser... Changing colors of the theme should be a lot easier than downloading source files, compiling everything, uploading...

    I had second thoughts about my disqus module because of privacy concerns. However, this sounds like a golden opportunity to make a different kind of module, one for changing the default theme colours. Could have a colour wheel, pick the colours for various elements, saving compiles it and spits out the new css to be included within admin (replacing uikit.pw.min.css). Something like that. Would be happy to work with you on this.

    I like @theoretics idea of being able to choose precompiled css, but much prefer the ability to customise via a third party module.

    • Like 2

    Uikit admin theme discussion

    in Themes and Profiles

    Posted

    @bernhard I’m working on a tutorial for this i.e. compiling from source with node/npm and editing the less files. I’ll include my starter (less) file which allowed me to easily change the colour schemes as shown in my vid: https://www.youtube.com/watch?v=cKlzg_kIi-w

    It’s pretty simple but the only problem I can see is that copying the module to ‘/site/modules/‘ means you have to keep the admin theme updated yourself. There appears to be no way to simply use a css file (in the module config) because the icons then don’t point to the correct locations and modifying the paths in the original less files for this module was a huge pita so I ditched that idea.

    The way @theoretic did it above means the icons point to the correct locations but (a big but) this means modifying a core module.

     

    • Like 1

    Contact Form tutorial

    in Tutorials

    Posted

    Do you get the actual message though? 

    $message = $input->post->message;
$message = "There is a message from {$name} with the email {$email}
The message is: '{$message}'";

    It looks like you're taking the message from the field, then overwriting it, so it'll always be the same, just with a different name and email. What about the actual message they wrote? Just tested this and $message does actually get included in the new variable. I thought it would be overwritten. Ignore that last bit :-p

    There is also a difference in how single and double quotes work in PHP, that may explain why you're seeing the html tags.

    https://stackoverflow.com/a/3446286

    • Like 1

    Contact Form tutorial

    in Tutorials

    Posted

    On 17/12/2017 at 3:59 PM, Batyr said:

    how to get the beautiful message to the email, because as I can see the html code cannot be rendered and the messages come all mixed up and unwieldy

    Not sure I'm following you here. Have you got a screenshot or something of what your message looks like when you receive it? I can only guess what mixed up and unwieldy means (to you). I presume you mean this: 

    //This is the HTML message
$message = '
    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <title>Contact Form | ' . $input->post->name . '</title>
        </head>
        <body>
            <p>' . $input->post->message . '</p>
        </body>
    </html>';

    Mine looks like this: 

    $message = "
    <html>
        <body>
            <p><b>Customer name:</b> {$name}</p>
            <p><b>Customer email:</b> {$email}</p>
            <p><b>Customer message:</b></p>
            <p>{$message}</p>
        </body>
    </html>
    ";

    ...which results in:

    --------------------------------------------

    Customer name: Test

    Customer email: test@test.com

    Customer message:

    Test message here in a new paragraph

    --------------------------------------------

    Not the prettiest, but to be honest, I only care about the message content! Maybe just fiddle around with your $message variable here.

×
×
  • Create New...