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

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

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 rafaoski
      I would like every new Site Profile like new REGULAR Profile to have modern support for quick creation like browser sync, minify css, js . Something on the style below:
      https://foundationpress.olefredrik.com/
      https://understrap.com/
      One profile that does not have any CSS frontend attached but has the features needed to quickly add eg pagination, comment form, or site menu something like:
      https://roots.io/sage/
      OR
      https://laravel.com/docs/5.5/mix
      I'm not very godd with js but webpack.js meybe is good for this solution ... I would like to know what advanced users in the front end think about this combination and what would be the best ...
       
    • By formmailer
      Hi,
      I am trying to style the comments form (and comments list) to match the rest of the site. I know that it's possible to edit the CSS file for the comments module, but I would rather add my existing classes to the fields, instead of making another css file containing the same CSS styling.
      I use the following to render the form: $page->comments->renderForm();
      Is there an easy way to add the CSS classed to the fields?
       
      //Jasper
    • By ridgedale
      I'm in the process of finalising a pw 3.0.62 and uikit3 based site which using the Reglar-Master profile and I've noticed pagination is missing despite the Allow Page Numbers? setting being enabled under the blog template URLs tab.
      The default blog.php template is as below:
      <div id='content'> <?php echo ukHeading1(page()->title, 'divider'); $posts = page()->children('limit=10'); echo ukBlogPosts($posts); ?> </div> Reducing the limit as follows does not result in any pagination being displayed despite there being 10 news posts.
      ... $posts = page()->children('limit=6'); ... If I have understood correctly, it should not be necessary to add the MarkupPagerNav module to this profile as the capability should already be already built-in.
      If that is the case, then I can only think that some additional code is required.
      Any help would be greatly appreciated.
    • By Peter Knight
      Playing around with the UIKit theme this morning and tweaking it.
      It's called UIKit Classic and it's a nod to the Classic theme. 
      For me the Classic theme always sticks in my mind as being most definitively Processwire-ey because
      It was my fist intro to PW I thought the colours were quite unique and like the mix of blue, pink and green. They're very distinctive and I'd hate for PW to look like just another WP install. In a crowded CMS marketplace I think it's good to differentiate visually. The two screengrabs are just the same screen. A before and an after. 
      I put this together using the Chrome the web inspect tool so there's no fancy mixins or LESS etc. Actually there's not even any CSS now that I've refreshed the page.
      I do think there needs to be a detailed comprehensive through tutorial for people wishing to make their own themes. Probably 85% here don't need it and understand the directory structure and how it's all compiled but equally I think there's another 15% here with the design skills but not the tech chops to get this done. If we want designers to design themes then we need the process with screengrabs, list of software (I have CodeKit, Dreamweaver, Sublime etc).
      Anywho - just my 2€ worth

       
      The before shot below...

    • By louisstephens
      Perhaps someone can help me on this. I recently started poking around at uikit (I have used bootstrap and foundation previously) as I liked the admin theme and a few of the components. However, their documentation is a bit confusing and I can never get the desired results. I am sure I am doing something wrong, but I did not want to digg into v2, if things will be changing (for better or worse).
       
      I have the following:
      <div class="uk-section"> <div class="uk-container uk-container-large"> <div class="uk-child-width-1-1@s uk-grid-small uk-grid-match" uk-grid> <div class="uk-width-1-2"> <img src="images/logo.png" alt="" width="1183" height="167" /> </div> </div> </div> </div> <div class="uk-section"> <div class="uk-container uk-container-large"> <h3>Section</h3> <div class="uk-child-width-1-4@m uk-grid-small uk-grid-match" uk-grid> <div class="item"> <div class="uk-card uk-card-default uk-card-body"> <h3 class="uk-card-title">Default</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> </div> </div> <div class="item"> <div class="uk-card uk-card-default uk-card-body"> <h3 class="uk-card-title">Primary</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> </div> </div> <div class="item"> <div class="uk-card uk-card-default uk-card-body"> <h3 class="uk-card-title">Secondary</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> </div> </div> <div class="item"> <div class="uk-card uk-card-default uk-card-body"> <h3 class="uk-card-title">Secondary</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> </div> </div> </div> </div> </div> The cards at the bottom stack on mobile which is the desired effect. However, the logo at the top is squished and on mobile does not seem to be resizing to take on the .uk-child-width-1-1@s. Is there a way to prevent the logo from squishing, and for it to resize with the browser? 
      I have noticed when I do 
      <div class="uk-section"> <div class="uk-container uk-container-large"> <div class="uk-child-width-1-1@s uk-grid-small uk-grid-match" uk-grid> <div class="uk-width-1-2"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> </div> <div class="uk-width-1-2"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> </div> </div> </div> </div> that the grid also does not collapse to full width either. I am positive I have just missed something in the documentation, or how uikit is supposed to work. However, for the life of me I can not find it.