• Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • 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.
       
    • By EyeDentify
      Simple example for loading template specific CSS file.
      This example asumes that you have your CSS file in a directory relative to template root.
      Like:
      templates/css/my_template_specific.css
      Also i use in the template a simple text field to hold the name of the CSS file i want to load.
      I call this field 'css_file'
      Use what you feel comfortable with.
      So in your header section of the DOM notice the "page specific CSS" part?
      Thats were the magic happens. What happens is that we check to see if the file exists in the CSS dir relative to template root.
      And if it does we load it. Simple and effective.
      I load all other CSS that is used all over the site in global_styles.css first.
      And make sure you load template specific last, because then you can easily override CSS in global.
       
      DOM header example:
      <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title><?PHP echo($page->title); ?></title> <!-- main CSS --> <link rel="stylesheet" href="<?PHP echo($config->urls->templates); ?>css/global_styles.css"> <!-- page specific CSS --> <?PHP /* Use relative path in file_exists() */ if(file_exists('css/' . $page->css_file)) { echo("<link rel=\"stylesheet\" href=\"{$config->urls->templates}css/{$page->css_file}\">"); } ?> </head> <body> Thats my way of doing it. I am sure there is plenty of more ways to do it. This is for the newbies or anyone that wants more options.
      Good luck with your CSS out there in Cyberspace.
      Cheers from EyeDentify
    • By devatgwl
      Hello,
      I'm wondering how to add the value of a field to a URL when submitting a form, while also processing the form with FormBuilder and storing the entry in the CMS. Is this even possible with the versions below?
      FB 0.2.5 | PW 2.7.2
      Is there still a dedicated Form Builder forum here anymore?
    • By helmut2509
      Hello,
      I am just working on a multi-language pw app. Default language is german, then comes english.
      the language segment for english in the url is 'en-home' , eg. '../en-home/products', I think this was taken as a default option.
      (this happened several months ago, so I do not remember exactly...).
      Now I want to change this segment simply to 'en'. However, in 'Pages...Settings', only the part AFTER 'en-home' is editable, so I do not see any possibility
      to change this segment. Neither do the Languages Settings offer such a possibility ;-((
      Or do I miss something?