Search the Community

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?

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.

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

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

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

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!

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. 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.

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!

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

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.

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!

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/

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?

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>

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

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

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.

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!

smile of my week....i like to share: http://saijogeorge.com/css-puns/ have fun mr-fan

Hello, since this is my first post in the General Forum I want to take the chance to say thank you for Processwire. I really like what all of you have done so far and it makes backend development fun again . Now to the main topic. I attached a screenshot of how my paging is rendered, using the Pagination module. The issue is the spacing between my li tags. I want to achieve a 1px margin between them. Right now they are inline block with margin set to 0. Still I get the spacing. So the problem must be that the html which is rendered by the module is "pretty printed" So after each li there is a line break and some tabs. The space is actually is a "text space" if u will, an therefore now chance for me to get rid auf that space with css. Any tips on how to get around that? Cheers

I have created my static html front page for my website. a pretty basic one. How do I use it on PW? Do I delete files from site/templates directory? and replace it with the html/css files of my basic website? Tried to delete fields and pages in admin which comes with the default installation of PW. But I cant delete them, it says template/field cannot be deleted. Anyway, I really need to know the steps to use my own static html? Thanks for the help

https://kristopolous.github.io/BOOTSTRA.386/index.html look great an every screen.....

I am a complete newbie in PW with some HTML and CSS understanding and poor PHP skills. I am currently studying PW sample site that comes along with default installation of PW. I opened up every PHP files in there to check at the code, and I just found this to most of them.. <?php /** * Home template * */ include("./head.inc"); echo $page->body; include("./foot.inc"); how did they apply the styles from the css files when it has only these codes?

This is great and a total no-brainer, very comfortable. I know there are a couple of solutions out there including command line based ones (also within Grunt and Compass), but this has been the most usable for me yet. http://spritecssgenerator.formfcw.com/ You can name your symbols like css selectors, and of course use Sass with it too. I name my symbols like this (Sass placeholders): %sprite-next %sprite-next:hover %sprite-prev %sprite-prev:hover and so on, and then I extend my desired elements like this: .my-element { @extend %sprite-next; } It even summarizes symbols with same sizes into single selectors.

Hello everyone, I started learning LESS CSS finally today(yeah...I know too late, but I was confused whether I should learn SCSS or LESS), and have instantly fallen in love with it. Thinking of plain CSS coding seems like so last century now. After completing a small project, now comes the deployment part, that got me thinking how do I compile less on server??? My hosting is a shared hosting and doesn't have Node.js support nor Rhino. I wish to know if anyone has done this before? Is there a possibility that I can directly put compiled CSS on server? I've read about lessphp but I'm not sure how good that is for production level use. Would love to hear your experience. If possible please guide me through this. Have a great day & wish you all a very Happy Diwali