Jump to content

Search the Community

Showing results for tags 'css'.

  • 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
  • Login Register Pro
  • ProDrafts
  • ListerPro
  • ProDevTools
  • Likes
  • Custom Development

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

  1. 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
  2. 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
  3. 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?
  4. 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.
  5. 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
  6. 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
  7. 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
  8. 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!
  9. 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?
  10. 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.
  11. 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!
  12. 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
  13. 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/
  14. 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!
  15. One of the things I've put off learning has been LESS/SASS, seeing as I've always managed ok with CSS and there's never time enough to learn every new technology is there?! Was just interested to see who used it occasionally, the whole time, never at all, waste of time, lifesaver etc... I've certainly never struggled with just CSS but that's the way with so many new things, you don't know what you're missing until you try it
  16. 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?
  17. 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>
  18. 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
  19. 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
  20. 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.
  21. Hey all, I'm brand new to processwire and have already fallen in love with it. Currently I'm building my first website with it and I need a way to style the form builder generated forms with CSS. I know it's possible to style them with the jQuery UI themeroller, but I need more direct control. I've looked through all the CSS files I thought could be related with the form, but I can't find how to add my custom styles via CSS. (I can't access the markup directly to do a hackathon because the forms are embedded via iframe.) Thanks in advance, Nick
  22. 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!
  23. Inspired by Soma's Colorpicker module I'm trying to implement some custom styles for links, backgrounds etc. Martijn said it was possible to add a php file with css in it and echo out the variables in that. I've tried but can't seem to get it going. I've added a custom_styles.php file outside of templates because I believe you cannot have PHP scripts running in there and I've added <?php header("Content-type: text/css"); ?> to the top of the file as advised by Martijn but none of the variables are getting parsed. Has anyone got anything similar working. Currently I'm using Diogo's suggestion of inline styles in the head tags but it just feels a bit wrong (but it is working)
  24. smile of my week....i like to share: http://saijogeorge.com/css-puns/ have fun mr-fan
  25. 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
×
×
  • Create New...