Jump to content

Search the Community

Showing results for tags 'css'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • Welcome to ProcessWire
    • News & Announcements
    • Showcase
    • Wishlist & Roadmap
  • Community Support
    • Getting Started
    • Tutorials
    • FAQs
    • General Support
    • API & Templates
    • Modules/Plugins
    • Themes and Profiles
    • Multi-Language Support
    • Security
    • Jobs
  • Off Topic
    • Pub
    • Dev Talk

Product Groups

  • Form Builder
  • ProFields
  • ProCache
  • ProMailer
  • ProDrafts
  • ListerPro
  • ProDevTools
  • Likes
  • Custom Development

Categories

There are no results to display.


Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


AIM


MSN


Website URL


ICQ


Yahoo


Jabber


Skype


Location


Interests

Found 55 results

  1. Tailwind CSS Framework, a utility-first CSS framework for rapidly building custom designs This thread is a place for ProcessWire developers who use (or would like to use) Tailwind CSS to share their experience, tips, frustrations , solutions, code snippets and generally discuss all things tailwind. From the creators of Tailwind CSS Moderator note: the first few posts in this topic were split from this thread. ########################## Thanks, @apeisa! Yes, Tailwind is awesome! Responsive classes are a clever idea indeed, much easier to work with. The authors did an excellent job and keep improving it. Some people may feel a little sceptical, but I fell in love with it the moment I built my first project. Although nowadays I work alone, I believe that Tailwind makes work between a frontend and backend developers much easier because it makes the HTML more declarative and you can grasp what the classes mean in a glimpse.
  2. My aim is to output a very basic xml document which should be styled with a few css-styles. <?xml version = "1.0"?> <contact-info> <name>Donal Duck</name> <company>Superducks</company> <phone>(011) 123-4567</phone> </contact-info> How do I implement it with processwire?
  3. This profile can be used as a business card or very simple blog. Requires the latest version processwire 3.0.101 !!! Milligram Site Profile For Processwire 3x with include functions like: MarkupRegions FunctionsAPI wireIncludeFile | wireRenderFile Essentially, this structure uses minimalist CSS framework Milligram and the Flexbox Grid System Gridlex Live Example CAN DOWNLOAD FROM THIS LINK ( Basic Version and simple Blog Version ) https://github.com/rafaoski/site-milligram https://github.com/rafaoski/site-milligram-blog Screenshot: If you want to use Laravel Mix you must first ensure that Node.js and NPM are installed on your machine. Basic example to Debian and Ubuntu based Linux distributions: Node.js curl -sL https://deb.nodesource.com/setup_8.x | sudo -E bash - sudo apt-get install -y nodejs See more installation options LINK npm is installed with Node.js just check in linux terminal like below: node -v npm -v Set BrowserSync inside folder /templates/webpack.mix.js and change your dev url proxy: 'http://localhost/mix/', to your installation processwire folder like: proxy: 'http://localhost/your-processwire-installation-folder/', Next install npm packages in your templates folder with command npm install Now, boot up the dev server npm run watch, and you're all set go! On completion, use the command npm run production to build styles and scripts in the dist folder Simple Usage ( Basic Command ) Run npm install Watch npm run watch Build npm run production All files to Webpack build steps is inside file ( webpack.mix.js ) Folder With all SCSS files is inside templates/src/scss All build styles and scripts is inside the ( dist ) folder References: Milligram Gridlex Laravel Mix Feather Icons Web Font Loader Verlok Lazy Load Cookie Consent Particles.js
  4. Not sure where I originally saw it while lurking around the forums, but someone, somewhere at some time was asking about styling Uikit checkboxes as toggle-style switches, much like the ones at the bottom of this post asking me if I want to be notified of replies. So here is my humble offering, rough and ready, which can be thrown in at the bottom of your Uikit css as a starting point. Everything is based on ems and rems, so you can increase size as you desire by altering the single instance of font-size. It only targets single instances of labels within a specific field to a) try to limit unintended consequences and b) because in those cases it often seems more user-friendly to have an on/off binary switch rather than a checkbox. It's still totally a checkbox, just styled differently. .uk-form-controls-text label:only-of-type input.uk-checkbox { font-size:.8rem; margin-top:0; position:relative; -webkit-appearance:none; outline:none; width:4em; height:2.4em; border:2px solid #D6D6D6; border-radius: 3em; box-shadow:inset 5em 0 0 0 #DDD; flex-shrink: 0; } .uk-form-controls-text label:only-of-type input.uk-checkbox:after { content:""; position:absolute; top:.25em; left:.25em; background:#FFF; width:1.6em; height:1.6em; border-radius:50%; transition:all 250ms ease 20ms; box-shadow:.05em .25em .5em rgba(0,0,0,0.2); } .uk-form-controls-text label:only-of-type input.uk-checkbox:checked { background-color: transparent; box-shadow:inset 5em 0 0 0 #4ed164; border-color:#67bba5; } .uk-form-controls-text label:only-of-type input.uk-checkbox:checked:after { left:1.85em; box-shadow:0 0 1em rgba(0,0,0,0.2); } label:only-of-type input.uk-checkbox:checked + span { color:#008a00; transition:all 250ms ease 20ms; } .InputfieldCheckbox .InputfieldContent label:only-of-type {display:flex;} label:only-of-type input.uk-checkbox + span { color:#c3c3c3; display:flex; align-items:center; line-height:1.1; } /* Below is only necessary if you want the optional "tick" after items when selected */ label:only-of-type input.uk-checkbox + span:after { flex-shrink:0; margin-left:.5em;width:2em; opacity:0; content:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 250 250'%3E%3Ccircle cx='125' cy='125' r='125' fill='%23231F20' opacity='.1'/%3E%3Cpath fill='%230B8B44' d='M95.823 139.432l-32.492-32.56-31.872 31.883-.008-.008 63.72 63.732L218.549 79.116 187.494 47.52z'/%3E%3C/svg%3E"); } label:only-of-type input.uk-checkbox:checked + span:after { opacity:1; transition: opacity 250ms ease 150ms; }
  5. Hello! I am trying to get some extra css-file into my admin templates. I managed to modify my admin.php to this: <?php namespace ProcessWire; require($config->paths->adminTemplates . 'controller.php'); echo "<link rel='stylesheet' type='text/css' href='" . $config->urls->templates . "css/admin.css'>"; By doing so, the css <link> is added to the very end of each parsed admin-html. (right AFTER the closing </body> tag.) That causes some trouble. e.g. the page tree is not displaying any more. Although, other pages are working - like the edit form of a page. My question: is there a correct way of adding my extra css to the admin area? Thanks for you help! Stephan
  6. Hey all, I am working on a website and I want to style the login page, but I'm a bit confused. I want either the existing login page styled in my own way using some CSS (I guess I prefer that) or I want to create a custom page with a form to login. (Which I could style too). I used the code from Ryan and Renobird posted here - which works great - but that doesn't replace the original login page. Is there a way to some sort of 'disable' the original login? I hope my question is clear and thanks in advance, matsn0w
  7. 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?
  8. 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:
  9. Antonio Iorio

    Help me!

    Hi guys, as I would need your support. I state to be a beginner and I met the application the day before yesterday for the first time. I'm creating a manga reading site using wiremanga and I need to know how I can incorporate altervista advertising. (this is my site if you could serve http://dgtread.altervista.org/) I have also modified some elements of both the .css and php files but despite saving they are not updated.
  10. 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 ...
  11. 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: OPTIONS PAGE: CONTACT PAGE: BLOG PAGE: ABOUT PAGE: PORTFOLIO PAGE: In addition, I added 2 great modules: Tracy Debugger: https://modules.processwire.com/modules/tracy-debugger/ Markup Sitemap: http://modules.processwire.com/modules/markup-sitemap/
  12. 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
  13. 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.
  14. 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...
  15. 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
  16. So I'm new to this. But i'm trying to set up a site, and I want to have a different background image for every page. My plan was to put an image field on on every page in the template and then pass that image url to the background-image style for that page. Maybe there is an easier way to do it, but it seemed like a good place to start. Anyone have any advice on how to do what I'm saying or to do something similar. Thanks
  17. I put a CSS file in the /templates/styles/ folder and try to link from a published file in the /templates/ folder: <link rel="stylesheet" type="text/css" href="./styles/NavUserHdr.css"> Doesn't see the file. What am I doing wrong?
  18. I wasn't quite sure where to post this, as this is a question regarding the module (sorry if it is in the wrong place). I was wondering if anyone has used the Email to Page module and figured out a way to "move" incoming css to another field, or how to render the css so the message just renders utilizing the css. Right now all of the message contents get dropped into a textarea field and display in a template as a jumbled mess. Perhaps I am missing a formatting option in the text area field to render the css and html.
  19. Hi all, I'm an absolute PW rookie, but starting to work my way through this alternative way of handling websites, thanks to your great documentation. Coming from the "regular" CMS world, where most systems provide something like editable layout templates and/or CSS editors in the backend, I'm trying to understand the concept of PW. Am I getting this right, that In the PW backend I "only" set up the fields, like e.g. headline and body, and then those field variables have to manually be added to a template file ($headline, $body) wrapped in the required hard-coded HTML markup and CSS ids and classes? Anke
  20. Hello I've just started my first processwire project and have set the back end to my liking. Upon starting the front end of my site I encountered a very strange problem: The CSS file is not updating. I started off and soon the problem occured. I then simply copied the contents of main.css to a new main2.css file, changed the code in the template file, and it worked again. Thinking it was a one time thing I continued, but it didn't take long for the problem to happen again. Locally the files are changed and the html code of my project is updating normally, but when I inspect the page, the changes in the CSS file are nowhere to be seen. I'm using MAMP to create the local server and Koala to compile my SASS Code. I'm new to processwire and am still pretty early in my web developer career, nontheless I'm very confused about what's happening, since the problem is only partially occuring in the CSS file and not in the HTML (or php) file. Does anyone have an idea as to what the problem could be? Thanks in advance
  21. FIRST: I am brand new and am trying to add a Navigation Tree to the beginner site. When I put renderNavTree($page, 4) into _head.php, I get a menu list like the graphic. This is great EXCEPT, I don't know how to make a horizontal menu out of it with CSS. Can someone help (please) or direct me to an example of the css? SECOND: That list is great for the Home page but when I click "program," the list only shows: How can I get the whole (visible) menu on every page? Thank you in advance! jim
  22. This question has probably been beaten to death - think I'm approaching this wrong. Anyway, I've got a textarea input field that uses ckeditor. Under the fields Input section I managed to add my custom style sheet in the 'Custom Editor CSS File (regular mode) section for instance: /site/templates/css/ckeditor.css This seems to work fine. What I'm trying to do now is add a custom style to the ckeditor styles menu, for instance, called .green_button (p.s. in the ckeditor styles.js I added this to the inline section : { name: 'Green Button', element: 'a', attributes: { 'class': 'button' } }, Ok, onto the problem... I notice that PW, by default, is using /wire/modules/inputfield/inputfieldCKEditor/ckeditor-4.5.10/styles.js So, I copied this into /site/templates/js/mystyles.js Next, I added the above to the 'Custom Editor JS Styles Set' field, however, it doesn't seem to load myckeditorstyles.js -- rather continues to load the one from the /wire/modules... folder. I cleared all history and caching in Safari (also tried Chrome, etc). I'm wondering if there is something else I need to do to have PW load my /site/templates/js/myckeditorstyles.js instead of the one in /wire/modules.../ckeditor-4.5.10/styles.js ? Thanks!
  23. I'm a little stuck with customising CKEditor. I want to build something similar to the following code using the custom styles function of the editor. <ul> <li><i class="icon-medium icon-link"></i><a href="#">Link 1</a></li> <li><i class="icon-medium icon-link"></i><a href="#">Link 1</a></li> </ul> I found this link in the CKEditor documentation which explains what's needed from the plugin side but I'm not quite sure how to implement this in Processwire. Any ideas?
  24. I can't tell what's wrong; my local development version appears just fine, but I copy over the site files and db online and the homepage content is not being contained. See mad-web.agency. This is what it should look like (same site in the same browser, running on my localhost): http://imgur.com/UFZFzrd What could be the problem here? Sorry to bring up something so irrelevant to PW here, I just know that you all are a valiant and helpful group, and no one on StackExchange seems to even know what I'm talking about. Thanks a lot.
  25. I have some hanna codes that I would like to trigger the inclusion of css and js files depending on the code that is used. Does PW have a way to do this similar to WordPress wp_enqueue_script or style core functions?
×
×
  • Create New...