Html pages with Uikit v3

  • Hello everyone! I'm very new with Pagekit, but I know is very friendly with framework Uikit and that's what i like the most. My worry is that i have some pages in .html with Uikit v3 framework, but now i want to include some blog page (the cause i started to try this framework).

    Here is the deal: I created the pages with the CMS and put the html code in the html editor, the issue is that the nav ofcanvas not working and the top of the page is not getting full width and continued with the navbar. But the rest of the code is well.


    For examples i put the two sites in free hostings to see comparative:

    https://consultorargpalf.000webhostapp.com/ (Pagekit)

    http://picazzzdesign.000webhostapp.com/ (html w/ uikit v3)


    May I should create a child theme? i'm trying to avoid this and for sure this have been asked before.

  • Hey, welcome to the forum,


    well i tried to understrand what you mean but both sites looked well for me. As well the navbar was full width at both sides.


    On small devices on the page under following link: https://consultorargpalf.000webhostapp.com/


    is indeed no burger menu visible. Which template did you used for that one?


    there is a jquery error, but i'm not a developer unfortinately so can't tell you if this error is causing your problems.:


  • Hi! thanks for reply. I'm using the default template (one theme). Right, the burger is not working and the slideshow is not full width like in html page. Sorry for my bad english and thanks again!

    • Helpful

    Hi! thanks for reply. I'm using the default template (one theme). Right, the burger is not working and the slideshow is not full width like in html page. Sorry for my bad english and thanks again!

    No worries mate my English is far away from being perfect too I guess 😉


    Well so you used the default theme and uikit 2 or v3 on that page?


    The Syntax is slightly different from both versions.


    Probably you should check out the marketplace for uikitify theme. I used there as basic theme from pastheme as it was based on uikit v3 and makes way more fun to use somehow.


    Well there is deffo a possibility to reach what you want to, you could check out the demo page for that theme and look at the page code for sample Syntax as it has deffo a full width and height slider that's for sure.


    The Jquery error should be fixed too just in case that it is probably the root of your problems there. I never managed with uikit v2 to get same result as with v3 whe it comes to full width and height slideshow but it should be possible.

  • Sorry for late reply. I changed the theme to pastheme... the navbar is workly like a charm but i can't get the slider workly in full width, anyway i like the way the page look. Only have to insert deeply in this CMS that seems very good and very clean.


    Thanks for you help!

  • Sorry for late reply. I changed the theme to pastheme... the navbar is workly like a charm but i can't get the slider workly in full width, anyway i like the way the page look. Only have to insert deeply in this CMS that seems very good and very clean.


    Thanks for you help!

    that was tricky, but look at the uikitify demo page! This code for the slider can 1:1 as this template is based on pastheme. Well i had to change the structure of one view php file slightly then it was working like charm.

  • Hello again! I figure out to resolve the responsive menu changin the theme to uikitify or pastheme like you said but the problem i have now is the forms, they look prety default with no style. How can i resolve it?

  • Hello again! I figure out to resolve the responsive menu changin the theme to uikitify or pastheme like you said but the problem i have now is the forms, they look prety default with no style. How can i resolve it?

    How do you create them? With this forms extension from bixie? Or do you write them the oldschool way. But it should not even matter which way you prefer, well did you ever tried the spqr extension called assets? You could create css inline styles with this plugin to override the visuals of the forms and the good thing it is safe even on upgrade of the system. At least as long the div id and classes are not changed in naming at least.


    I see you used the extension, well that is where we need an update for this damn extension, as the developer isn't doing a thing anymore for pagekit. The problem is that the syntax changed slightly so you need to change the extensions code to get it to uikit v3 visual styling. I wanted to do the in near feature as I'm actually restyling my personal page as well based on ui3kitify and patheme work of course.


    You see for example on your page look for the extension generated code:


    Code
    1. <input type="text" class="uk-form-width-large" placeholder="" name="formmakerfield_1" id="formmakerfield_1">

    Well this need to be changed too:


    Code
    1. <input type="text" class="uk-input" placeholder="" name="formmakerfield_1" id="formmakerfield_1">
    2. or
    3. <input type="text" class="uk-input uk-form-width-medium uk-form-large" placeholder="" name="formmakerfield_1" id="formmakerfield_1">
    4. etc etc.

    And remember this extension will work only properly if you set smtp account with authentification in pagekit backend. Php sendmail don't work at all nowadays as it is rejected on most cases by the most email providers and guys who host their mail servers as it unsecure.