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

Found 47 results

  1. 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 ...
  2. 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/
  3. 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
  4. 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...
  5. 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.
  6. 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
  7. 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?
  8. 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.
  9. 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
  10. 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
  11. 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
  12. 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!
  13. 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.
  14. 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?
  15. Hi, I see this tutorial (but not listen it because I'm italian and don't understand english speaking). I choose this CSS Framework for my homepage, but in my homepage don't appear any image. It's as it not exist, and it is as don't exist any css or js. But in my pc on my browser all work very well. As I see in the video tutorial of Philip Reiner, I create a new Template File, new page, new folders by ftp with css, jss, images... Then, in my Template File I copy the index file of CSS Framework Package and replace the old url with this: ... <script src="<?=$config->urls->templates;?>js/skel.min.js"></script> <script src="<?=$config->urls->templates;?>js/init.js"></script> <noscript> <link rel="stylesheet" href="<?=$config->urls->templates;?>css/skel.css" /> <link rel="stylesheet" href="<?=$config->urls->templates;?>css/style.css" /> <link rel="stylesheet" href="<?=$config->urls->templates;?>css/style-wide.css" /> <link rel="stylesheet" href="<?=$config->urls->templates;?>css/style-noscript.css" /> </noscript> ... My page is http://www.casbook.org The words there are, but there aren't any css-js! To Philip happen this too, but then in an istant he risolution all and appear menù and colours and css. When he change href! I changed href but all is remain as before: white and black, less images. Anyone can help me?? I can pay too for this problem, but only a little quantity of money!
  16. Hello, I went in this tutorial where Joss Sanglier says to put the new folders of CSS-JS directly inside the folder templates of PW. With ftp. I did it. The guide also says to add: <link rel="stylesheet" type="text/css" href="<?php echo $config->urls->templates; ?>css/bootstrap.min.css" /> for the css. and for the js: <script type="text/javascript" src="<?php echo $config->urls->templates; ?>js/bootstrap.min.js"></script> but I did not understand exactly WHERE I must add it. Perhaps in the Processwire's index.php file? Perhaps within the file of the template that I am using? Perhaps inside the new folders CSS-JS? If so, WHAT I must substitute? I would like to understand if the replacement of CSS/JS standard processwire by a plane CSS-JS that I choose by internet, is an operation that I can do well, or I must pay a professionist. Thanks Francesco
  17. Hello There PW fans and users. I Thought i share something that i came up with a while ago when i decided to adopt the teachings in this guide: MaintainableCSS This guide has made my development much easier cause i allways was stressed about having all code in one giant file and jumping around trying to keep everything organized and clear. So i decided to go with modules, as i call them, having all the CSS belonging to a specific module in one file, and also the responsive media querys that belongs to the module in the same file. Now... so far so good. Turns out that there is a 31 file limit in browsers to how many files you can load with css. And also i wanted to make less HTTP requests, so i started thinking, and came up with a simple PHP script that i run on my PW site in a hidden template and when that PHP script runs, it combines/compiles or merges the CSS module files together to one giant file that i link to in my website header. This way, there is one HTTP request for all the CSS that runs the site, minus some third party stuff. Lets look at the PHP script <?PHP /* EyeDentifys CSS File combiner. v1.0 Array of essential files - update as needed. We do this to ensure the order of how the files are combined. You can have as many CSS module files here as you want. Remember that the combined file is compiled in the order they are placed in the array. Remember to check all the paths so they reflect your setup before use. And also, the combined file is overwritten without notice when you re-combine. */ $cssModules[] = 'module_global.css'; $cssModules[] = 'module_table.css'; $cssModules[] = 'module_forms.css'; $cssModules[] = 'module_layout.css'; /* init vars */ $str = ''; $moduleCount = 0; $errorCount = 0; $listFiles = ''; /* add a string with the latest update time and date to the top of the combined file */ $dateStr = date('Y-m-d H:i:s'); $str .= '/* Combined file last updated at ' . $dateStr . ' */' . PHP_EOL; /* go through modules and concatenate them in a string var */ foreach($cssModules AS $key => $module){ /* check if the file exist */ if(file_exists('css/modules/' . $module)){ /* read file data */ $str .= file_get_contents('css/modules/' . $module); /* add module count - used for output in template */ $moduleCount++; /* add the file to list */ $listFiles[] = '[' . $module . ']'; } else { /* if the file do not exist add it to the "do not exist" list */ $listFiles[] = 'Error - file [' . $module . '] do not exist!'; /* increment error count */ $errorCount++; } } /* render the combined css */ echo('<h2>Combined CSS</h2><pre class="code-view-pre">' . $str . '</pre>'); /* list combined files */ echo('<h2>Combined files</h2>'); echo('<ul class="unstyled-list">'); foreach($listFiles AS $key => $file) { echo('<li>' . $file . '</li>'); } echo('</ul>'); echo('<p>Number of file errors <strong>' . $errorCount . '</strong> st.</p>'); /* the file name defaults */ $combinedFileName = 'css/combined_styles.css'; $backupFileName = 'css/backups/backup_styles_' . date("Y-m-d_H-i-s") . '.css'; /* backup the old combined file before updating it */ copy($combinedFileName, $backupFileName); echo('<p>Backup created to file: <strong>' . $backupFileName . '</strong></p>'); /* create update the combined css file */ file_put_contents($combinedFileName, $str); echo('<p>Combined css file: <strong>' . $combinedFileName . '</strong> updated!</p>'); echo('<p><strong>' . $moduleCount . '</strong> files combined.</p>'); ?> Like i said above, i have this in a hidden Template file that i run when logged in as ADMIN. I just refresh the page everytime i made a change and uploaded to the server so the new changes is combined into the big file and can be seen on the website. My script assumes the following directory structure: 1. This is where the script looks for the module files: templates -> css -> modules 2. This is where the script saves the combined big CSS file: templates -> css 3. This is where the script saves a backup of the current big CSS file before creating and writing over the new big file: templates -> css -> backups You need to go through the script and change the hardcoded paths to suit your needs before use. Also please try this out at some test site first so you get the hang of it. Be safe. This way of dealing with alot of CSS code has realy made my life much easier. Cause if i want to change some modules CSS i just open that file, make the changes, upload the module, and run the script and its compiled in with the other CSS in the big file. I am sure you creative fellows on the forums can make refinements to this code, but it has served me well. Hope it helps someone.
  18. Hi, I red this: http://processwire.com/docs/tutorials/installing-a-css-framework/page2 and Perahps I don't understand anything. Excuse me! But, I gone here: http://www.free-css.com/free-css-templates/page198/istria-1 and I downloaded the package. In this package there is 4 directory: "css", "js", "img", "images" and out it some html files. Then, I gone bye ftp filezille in to my site, and I charge those 4 directory on .../site/templates. But my site is as before. The aspect is the same. How I wrong? Question two. I seen the new forum with personal homepage for all members, that seem as facebook! There'is a modules "forum" for do same wonderfull thing in any site PW, or I must write all code by my hand? Thank you for any replace!
  19. Found Spectre.css framework during I searched the web... could be interesting, so I post it here. Spectre.css is a lightweight, responsive and modern CSS framework for faster and extensible development. lightweight and clean starting point for your project and prototype flexbox, responsive and mobile-friendly layout carefully designed elements built in useful components and utilities patterns and html templates soon email templates soon URL: http://picturepan2.github.io/spectre/
  20. Hi, recently I launched a site, where some templates have an enabled cache. Now I made some changes in the css file and noticed, that only if the cache is disabled, the css changes are visible in the frontend. I'm using the AIOM+ module. Is this a normal behavior?
  21. pushing a div (featured) with negative top, the sibling div (footer) will not push up accordingly. As a result, a large empty space appear between two divs. sample code is here http://codepen.io/adrianmak/pen/qZRqwy any solution of the footer div to stick with the featured div, no matter it's top positioning value <div class="wrapper"> <div class="header"> </div> <div class="featured"> </div> <div class="footer"> </div> </div> css .header { background: green; height:620px; } .footer { background: blue; height:200px; } .featured { background: yellow; width:500px; height:420px; margin:0 auto; position: relative; top: -200px; } </style>
  22. I thought I had this, but I guess my understanding of get/find for pages is a bit lacking (or perhaps nonexistent). I am trying to switch the stylesheet based on the URL using a simple if/else statement, but what I wrote doesn't seem to be doing the job. I currently just have two pages (that each need two different background images), but they share the same head.inc file. I wrote: <?php // Switch stylsheets based on site $styleSwitcher = $pages->get('/url-one/'); if($styleSwitcher){ echo "<link rel='stylesheet' href='{$config->urls->templates}css/one.css' />"; } else{ echo "<link rel='stylesheet' href='{$config->urls->templates}css/two.css' />"; } ?> I assume I messed up my "get" as both pages are still loading one.css
  23. Hello again. Thought i share my way of creating sliders in my ProcessWire websites, by using the images field type and some HTML, JavaScript, CSS and a pinch of love. Step One: Go to http://flickity.metafizzy.co/ and download Flickity slider. They also have a CDN option for thoose who prefere that. Also have the page handy cause it has alot of usefull info for configuring the slider and such. Note: In my example i use jQuery to initialize Flickity but you can use it without, see the website for more info. So you need to load jQuery before flickity in the header section for my example to work. Step Two: Here is an example of how you could write some code and HTML for your template file where the slider should render. This code assumes your images field is named images. <div class="slider-container"> <?PHP /* check if there is any images to display */ if(count($page->images) > 0) { /* render out the images and resize to 700 pixel width */ foreach($page->images AS $key => $image) { echo('<img src="' . $image->width(700)->url . '" class="slider-container-item" alt="' . $image->description . '">'); } } else { echo('<p>Houston we have a problem...there are no images to see here...</p>'); } ?> </div> Also lets put together some simple CSS for our container and items. Alter it to your own needs and preference. For the Flickitys sliders default CSS and configuring see the website. .slider-container { position: relative; display: block; overflow: hidden; width: 100%; max-width: 700px; padding: 0; margin-bottom: 15px; clear: both; } .slider-container-item { position: relative; display: block; width: 100%; height: auto; max-width: 700px; } Step Three: Put the default CSS and also Flickitys JS files and load jQuery before Flickity in the header of your site so that flickity works as intended. Or use the CDN option mentioned on the flickity website. <link rel="stylesheet" href="/path/to/flickity.css" media="screen"> <script src="/path/to/jquery.js"></script> <script src="/path/to/flickity.pkgd.min.js"></script> Don´t forget to put the Flickity JavaScript initalization code at the bottom of the template file. For all the Options and configuration see the website: http://flickity.metafizzy.co/ In the example code below i use just a few of the many options. <script type="text/javascript"> /* initiate Flickity Slider JS */ $(document).ready(function(e){ $('.slider-container').flickity({ // options cellSelector: '.slider-container-item', cellAlign: 'center', imagesLoaded: true, percentPosition: true, contain: true }); }); </script> Note: This is my prefered way of doing it. But there are alternative ways to initialize Flickity if you read the info on the website. This should be enough to get you started. And with a little imagination i think you could see the potential. Good luck with all your Slider making dreams
  24. Hi all, I need to loop over several images with an ordinary foreach - nothing fancy. However, each image needs to have a unique css class name attached. Here is a simplified example: <ul> <li><img class='mac' src='#'</li> <li><img class='ipad' src='#'</li> <li><img class='ipod' src='#'</li> </ul> and so on. My array of images will be a collection from several pages. So the information about the required class needs to be "attached" to the image somehow. Sure I could use the description field for that, but that's kind of a hack I would like to avoid for the sake of unexperienced editors. My PW skills got a bit rusty the last time. Maybe an easy way to achieve that as been already introduced into the core and I missed it. Apologies in advance if this is a silly question than ... Ideas welcome! Thanks.
  25. So I have recently integrated Soma's super awesome JQueryDataTables plugin and have used it in a process module I made to handle sending newsletters. However, I'm not sure how to go about moving the table on the module admin page. No matter where I call the table markup in the ___execute() method it shows up at the top of the page. What would be a good away to go about moving this to the bottom of the page instead? Is there a way to do this as I build the form and add the fields? Or do I just need to make some custom css file and include it in the module? Thanks in advance for reading **InputFieldMarkup is the winner. Never seen it before, it's so cool! These guys have thought of everything!