rafaoski

Twilight site profile for ProcessWire 3x

Recommended Posts

Hello All ... I just added a new Site Profile ...

It is important that you use the latest version that supports the new Fields => Fieldset in Tab , Fieldset ( Page ) for this time it is version 3.0.83 DEV

A simple profile for quick start new Page ... There are several pages like About Us, Blog, Portfolio, Contact Page ...
The profile is not based on any framework, I just used some css, flexbox, grid, font awesome, and added a simple FlexBox Grid called GRIDLEX ...

CAN DOWNLOAD FROM THIS LINK:

http://modules.processwire.com/modules/site-twilight/

https://github.com/rafaoski/site-twilight

Some Screenshots:

twilight.thumb.jpg.01887ca5446a1603e6f38c2dd300584e.jpg

OPTIONS PAGE:

options-page-compressor.thumb.png.3690003b150b4d0e681a410c00318592.png

CONTACT PAGE:

contact-full-compressor.thumb.png.ab2a6ae0ba105e07b2ac753f1168a1f1.png

BLOG PAGE:

blog-compressor.thumb.png.8859650f7063ab681f6c165e5a081da4.png

ABOUT PAGE:

about-compressor.thumb.png.3decb2954a046918d111355d518f9553.png

PORTFOLIO PAGE:

portfolio-compressor.thumb.png.6c2e812f04c562e3ad1409bd8d229ebd.png

 

In addition, I added 2 great modules:

Tracy Debugger:

https://modules.processwire.com/modules/tracy-debugger/

Final-Version-compressor.thumb.jpg.55f886f70326a9ed31c6191e3c02628d.jpg

Markup Sitemap:

http://modules.processwire.com/modules/markup-sitemap/

sitemap-xml.thumb.png.08eae948e65e967157c3a4e302faf2c8.png

 

  • Like 5

Share this post


Link to post
Share on other sites

HI @rafaoski - nice looking site profile - thanks for sharing and for including Tracy! I am curious about the layout of Tracy's debug bar though - is that an intentional change you have made, or is it a side-effect of some site CSS? If the latter, I'd love to know what it causing it so I can properly override it so others don't also experience it.

  • Like 1

Share this post


Link to post
Share on other sites

Thanks @adrian for your help and for your wonderful Tracy Debugger Module.  I have disabled the Privacy Policy and I have not noticed this error. But it should already be fine and display Tracy over everything :) . I changed the z-index for cookies.

Share this post


Link to post
Share on other sites

@adrian I checked how to add to Tracy css so that in the future there were no problems and probably enough to give a high index of this element:

.tracy-panel {
    z-index: 2999 !important;
}

 

Share this post


Link to post
Share on other sites

Hi @rafaoski - I think maybe I didn't explain myself properly. I was wondering why it looks like:

5a09b83f2b659_ScreenShot2017-11-13at7_20_08AM.png.bb0ec63795a927bbc7bd261da0ce7d9f.png

and not:

5a09b8ffbc7fd_ScreenShot2017-11-13at7_23_22AM.png.02047f2bc18646a23a105762ca131c35.png

 

10 hours ago, rafaoski said:

I have disabled the Privacy Policy and I have not noticed this error

Sorry, what privacy policy and what error are you referring to?

 

5 hours ago, rafaoski said:

I checked how to add to Tracy css so that in the future there were no problems and probably enough to give a high index of this element:

If you are having z-index issues, please take a look at the "Staring Z-Index for Panels" setting in the Tracy config settings. That is the best way of taking care of those issues if you are having any. By default the Tracy core sets panels to 20000, but I found this put panels over the top of PW submenus in the admin which was annoying, so I changed the default setting to 100 but made it configurable if you are having issues on the frontend of your site.

Share this post


Link to post
Share on other sites

Hi @adrian ... I noticed a problem with the information of Cookies that overshadowed some of the Tracy Debugger components and changed them, i thought that was exactly what it was.This screenshot I made using Easy Screenshot which changes the resolution while the screenshot it finished. I'll change this Screenshot  to better which will show the bottom of the Tracy Debugger. Usually everything is fine.

Screenshot taken with a lightshot:

5a09c6a11beea_Tracy-good.thumb.jpg.ba474bfe5e1a3d2a3d5d6f06542211ba.jpg

 

  • Like 1

Share this post


Link to post
Share on other sites

Thanks for the follow up and explanation about Easy Screenshot messing with the debug bar layout.

One final question for you - it looks like there is a layout issue on the panel selector - the time for the Captain hook panel has moved down one row and all the others have followed. Does this always happen? I have never seen that before - it would be good to fix if I could figure out why it's happening for you.

Share this post


Link to post
Share on other sites

@adrian On the browser Firefox something does not play and on Chrome shows correctly:
Dump with Chrome:

Tracy-Chrome-compressor.thumb.png.73bc10584f6446019da12f484b64f09b.png

In the Mozilla most likely the error causes the rule below which I checked in the inspector in the blue frame  I turned off or changed to normal and is ok

tracy-naprawa-compressor.thumb.jpg.813137271aae6dbc3342ca60d1c217c6.jpg

It works for me in Mozilla:

#tracy-debug-panel-PanelSelectorPanel fieldset div label {
    white-space: normal;
}
/* OR UNCOMMENT */
#tracy-debug-panel-PanelSelectorPanel fieldset div label {
   /* white-space: normal; */
}

I just commented this line code on the module in style.css on line number 293 and it works correctly ( You just have to refresh the module ):

#tracy-debug-panel-PanelSelectorPanel fieldset div label {
    width: 300px !important;
    /* white-space: nowrap; */
    border-bottom: 1px solid #e4e4e4;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    break-inside: avoid-column;
}

 

  • Like 1

Share this post


Link to post
Share on other sites

Thanks for checking into that so thoroughly. I don't remember why I had "nowrap" in there, but it certainly doesn't seem to be needed. Maybe it was needed in one of the older layouts I had. Anyway, I have removed it and it will appear in the next version.

Thanks again!

PS - there are some very long times for some of those panels - is that your local dev setup, or a shared server?

Sorry, we are getting so OT here.

  • Like 1

Share this post


Link to post
Share on other sites

No problem, I thank you for the help, because so many times I have read your helpful answers in the forum.

As for the server, this is the local Environment Laragon (I used to have a problem with xamp and bernhard recommended it )

I got from here:

https://laragon.org/

I probably need to set it up better, but for me It works much better than xampp or wamp

  • Like 1

Share this post


Link to post
Share on other sites

Hey @bernhard - when using Laragon do you see the slow panel load times that are shown in the screenshots above? In particular 9 secs for an uncached Captain Hook seems crazy slow. For me it's about 1 to 1.5 seconds. And then once cached, it's 15ms.

Share this post


Link to post
Share on other sites

Hi @adrian @bernhard   The screenshot above is after first loading the virtual host in the laragon, the dump below is after the next stage of loading all the services and it looks a bit better:

good-tracy-load-compressor.thumb.png.123bd5a5ac578766aef19f1de52d029c.png

  • Like 1

Share this post


Link to post
Share on other sites

hey @adrian its slower on laragon than on my live linux server but not that slow. its no factor for me since i can disable everything when i don't need it.

  • Like 2

Share this post


Link to post
Share on other sites

@rafaoski - that second load looks good, although of course the Captain Hook results are now cached, but the others have sped up also. I won't worry about anything for now.

  • Like 1

Share this post


Link to post
Share on other sites

Thank you @adrian for the interest in my test machine, maybe someday I will go back to Linux distribution, but now thanks to @bernhard and his tips on simple to use test environment laragon everything works great ...

  • Like 1

Share this post


Link to post
Share on other sites

Hey, @rafaoski I just stumbled across your kindly shared profile and decided to give it a try to check what other approaches I could borrow from the PRO's to make my life easier and the code beautiful. So I grabbed a fresh copy of PW 3.0.85 and put your profile in the default server folder. Created a local DB for the test and then browsed the installer. I can see every profile but yours on the list. I know I could upload the SQL and manually place the folders, however, would you know of any reason why the profile would not show during the install? I really like the Markup Regions approach and would be nice to play a bit with it to get used to that. I am also looking into the delayed output to mess around but one step at a time :)

Share this post


Link to post
Share on other sites

Hi and thanks @MilenKo ...  I've just tested on version 3.0.85 and installed the profile without any problems ...
I do not know if you have unpacked catalog correctly in the installer folder ...
A while back I added a simple tutorial on how to install profiles and maybe this simple tutorial will help you:

 

I also recommend you this profile:

Which I recently added and is based on Spectre.css ... I think you should also like it ... It is very simple and clean ...

You may have trouble with CHMOD access rights if you use Linux or Mac locally, but I'm not sure because I installed the profiles on the Laragon test environment as well as ordinary shared hosting ...
Maybe these links will help in something:

https://processwire.com/docs/security/file-permissions/

A simple example for files and folders:

https://help.directadmin.com/item.php?id=589

Share this post


Link to post
Share on other sites

Hello @rafaoski . For my test environment, I use OpenServer under windows, so it has no issues with the permissions (windows is not that tight as the Unix environment is). So far I've installed several profiles and it was working, however only with this one, I am not able to see it. What I did was to place the latest copy of ProcessWire and then copy your profile folder and files in it to the root of my domain. Then I fire up the installer and am seeing any other profile, but yours. Will try again and see what would happen.

Thank you for the suggestions and links. Will try the other profile as I will be soon on paternity leave for a while so should have some spare time for my learning curve ;)

Edit: All works fine now, by redownloading the profile and extracting it to the root folder. Now I will start the exploration and learn something new. If someone has a similar issue, feel free to try to re-download the profile, maybe extract it with a different extractor if you use anything out of the built-in windows.

 

Share this post


Link to post
Share on other sites

@rafaoski, I tried to install another profile of yours - site-bs4-master and it appears promptly in my PW 3.0.85 installation. So something else is happening and I do not blame the profile in no way, there is something else. It happened to me as well once I was exporting an old profile, I could not find it listed on the list during install. I even tried to move my files to the Default profile that was visible promptly, however, the install failed.  

Will test with your server out of curiosity to see how would that show the profile.

  • Like 1

Share this post


Link to post
Share on other sites

Thanks @Milenko for investigating  what's happening ... Honestly, I do not know what can cause installer errors ...

I also had a problem with the test machine (xampp, wampp) ...


But after switching to the laragon everything works much better ...

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now


  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By adrian_gp
      Hello everyone,
      I'm new in this forum and my english is not perfect so sorry for the mistakes.
      I have an Blog Project and i will use categories. 
      Here is the structure:
      Blog -> displays all the Blogposts (template=BlogPage) Post-Name -> display the specific Post (template=BlogPost) Categories -> not visible in the menu (template=CategoriesPage) Categorie-Name -> not visible in the menu (template=CategoriePage) For your information:
      (BlogPost) every blogpost has its own page (BlogPost) in Admin i can select the categorie per Field -> SelectMultiple Pages (Checkbox) (fieldname=categories) (Blog) displays all the BlogPosts and all the categories under the ParentTemplate CategoriesPage, which also have their own side Now the Problem:
      On Blog -> I would like to click on a category and only see the post that has this category checked in the BlogPost.
      CategoriePage -> what do I have to insert there to show only the specific posts which use the checked categorie?

      Let me know if you need more information

      Thanks for your support
       
    • By neophron
      Hi,
      I have an issue with a css file. In my templates folder is an »assets« folder with different subfolders like css, js and img.
      I uploaded the latest uikit3 css and js stuff to: assets --> uikit  --> css and js. In my template I'm calling them like this:
      <link rel="stylesheet" type="text/css" href="<?php echo $config->urls->templates?>assets/uikit/css/uikit.min.css" />
      This gives me an 403 error:
      GET http://mysite.com/site/templates/assets/uikit/css/uikit.min.css 403 (Forbidden)
      If I change the path to: <link rel="stylesheet" type="text/css" href="<?php echo $config->urls->templates?>assets/css/uikit.min.css" />
      everything is fine.
      Is this a logic behavior from Processwire?
    • By rareyush
      I am using this function to get blogpost but I don't see what's wrong in it and why it is now showing anything in frontend.
       
      function ukBlogPost(Page $page, $options = array()) { $defaults = array( 'summarize' => null, // Display blog post summary rather than full post? (null=auto-detect) 'metaIcon' => 'info', 'moreIcon' => 'arrow-right', 'moreText' => __('Read more'), 'categoryIcon' => 'hashtag', 'bylineText' => __('Posted by %1$s on %2$s'), ); $options = _ukMergeOptions($defaults, $options); $title = $page->title; $img = $page->images->first(); $date = $page->date ? $page->date : $page->createdStr; $name = $page->createdUser->name; $body = summarizeText($page->get('body'), 100); $metaIcon = ukIcon($options['metaIcon']); $moreIcon = ukIcon($options['moreIcon']); $categoryIcon = ukIcon($options['categoryIcon']); $n = $page->comments->count(); $numComments = $n ? "<a href='$page->url#comments'>" . ukIcon('comments') . " $n</a>" : ""; $itn = $page->get('itineraries'); $ito = $itn->each( "<h4> {itineraries_title}</h4> <p>{itineraries_details} </p> "); if($options['summarize'] === null) { // auto-detect: summarize if current page is not the same as the blog post $options['summarize'] = page()->id != $page->id; } /* $categories = $page->categories->each($categoryIcon . "<a class='uk-button uk-button-text' href='{url}'>{title}</a> " );*/ if($options['summarize']) { // link to post in title, and use just the first paragraph in teaser mode $title = "<a href='$page->url'>$title</a>"; $body = explode('</p>', $body); $body = reset($body) . ' '; $body .= "<a href='$page->url'>$options[moreText] $moreIcon</a></p>"; $class = 'blog-post-summary'; } else { $class = 'blog-post-full'; } if($options['summarize']) { $heading = "<h4 class='uk-margin-remove tour-heading'>$title</h4>"; } else { $heading = "<h3 class='uk-article-title uk-margin-remove tour-heading'>$title</h3>"; } $byline = sprintf($options['bylineText'], $name, $date); if($img) { $img = $img->size(375,380); } // return the blog post article markup return " <div> <div class='uk-card'> <div class='uk-inline-clip uk-transition-toggle'> <img src='$img->url' alt='$img->description' class='uk-border-rounded uk-transition-scale-up uk-transition-opaque' > <div class='uk-overlay uk-light uk-position-bottom'> <p class='uk-text-light'>$heading</p> </div> </div> $ito </div> </div> "; }  
       
      I tried running $title, $img etc. - or are they all blank? simultaneously but nothing returns anything.
       
      I do not know why it is not working 
    • By rafaoski
      This profile can be used as a simple business card or blog.
      The profile does not use any framework css structure, only styles based on CSS GRID and FLEX.
      To minimize page loading, I added lazy load for images ( Tupola Lazy Load ).
      With include functions like:
      MarkupRegions
      FunctionsAPI
      CAN DOWNLOAD FROM THIS LINK:
      https://github.com/rafaoski/site-grayscale-pw
      https://github.com/rafaoski/site-min-grayscale-pw
      Live Example
      Screenshot: