Search the Community
Showing results for tags 'CSS'.
-
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
-
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?
-
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 -
I have a repeater which will contain an image and text, I want to apply a custom colour to an element in each repeater using the color picker. I'm not sure the best way to specify an individual css name for each repeater, can it be automated in some way? In my code below i'm using the colour picker and some inline css, but in this example each repeater item would have the same colour. I want to make each one different. <?php foreach($page->repeater as $p) { echo "<style>.repeatColor {background-color: #{$p->colour_picker};}</style>"; echo "<div class='repeatColor'></div>"; } ?>
-
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.
-
If I upload an image to a multiple images field, then add the image to the body field of the same page and select No alignment, the following class is assigned to the image ("No Alignment"): <p><img class="No Alignment" src="/site/assets/files/1001/image.png" alt="Example" /></p> This seems like a bug since it registers as two separate classes ("No" and "Alignment"). Can this be changed to a single (lowercase) class that doesn't include a space (or not included altogether, since it assumes the image is inline)? -
Hey all, I thought this might be useful for anyone who uses preprocessing tools (like the excellent CodeKit: http://incident57.com/codekit). I came across Prepros the other day: http://alphapixels.com/prepros/ I always used CodeKit up until recently. However, it's only available for mac and recently I have had to dip my toes into the waters of the dark side again with a PC laptop I needed something that would work cross-platform (Prepros works across PC, Mac and Linux). From what I have seen so far Prepros is growing quickly, free, supports nearly every type compiled CSS, has real time refreshes and works across platforms.
-
- 5
-
-
- css
- javascript
- (and 1 more)
-
A newly released CSS library from the folks at Yahoo!: http://purecss.io/ There already are a gazillion out there but this does seem like a pretty neat CSS baseline for some projects.
-
Hi all.. I was wondering, Is there a nice css/template framework out there? I have been playing around with Twitters Bootstrap, but It has its limitations.. Let me hear your 2 cents..
-
I'm building my first brand new Processwire site! It's easy and looks really extensible so I'm excited. However, I have a codeigniter app that is going to eventually sit in a directory beneath Processwire and I want to store assets like css, js, and images in a top-level directory that both CI and PW will access. Right now, I've accomplish this by using tags like `<img src="<?php echo $config->urls->templates ?>../../assets/images/russellbits-logo-small.png" alt="Russellbits"/>` Works fine, but it's messy. Is there another way I could do this in PW without making an http call?
-
Hi guys, bit off topic here but struggling with a CSS problem. I've been trying to add an overlay on hover to the images around my site which lead to a fancybox. I'm using a responsive framework so it's not all that easy but I've just about managed it in my templates by making the overlay png sizes fit the different breakpoints in the template and it works nicely. My problem is I'm now trying to fit the overlay to images added by the client in TinyMCE. I'm successfully adding the span.overlay using Jquery but I've no idea how to limit the size of it to the size of the image as I have no overall control as to the dimensions. I've attached a screenshot to show my problem. Has anyone else managed to display an overlay in images coming out of their TinyMCE fields? Here's my HTML code: <a class="fancy" rel="<?php echo $page->title; ?>" href="<?php echo $image->url; ?>" title="<?php echo $image->description; ?>"> <div class="overlay_link <?php echo $class; ?>"> <img src="<?php echo $image->size(370, 247)->url; ?>" alt="<?php echo $image->description; ?>" /> <span class="overlay"></span> </div> </a> And the CSS: .overlay_link { position: relative; } .overlay_link img { } .overlay { /*black(ish) overlay*/ /* background: #111; background: rgb(34, 34, 34); background: rgba(34, 34, 34, 0.8); */ /*orange overlay*/ background: #d87b37; background: rgb(216, 123, 55); background: rgba(216, 123, 55, 0.8); background: url(images/patterns/overlay.png) center center; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -moz-opacity: 0; -khtml-opacity: 0; opacity: 0; position: absolute; top: 0; left: 0; width: 370px; height: 247px; max-width: 100%; max-height: 247px; -moz-transition: all 0.2s; -webkit-transition: all 0.2s; -ms-transition: all 0.2s; -o-transition: all 0.2s; transition: all 0.2s; } .overlay_link:hover .overlay { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); -moz-opacity: 1; -khtml-opacity: 1; opacity: 1; } And the JS $(document).ready(function() { $(".body_copy a:has(img)").addClass('fancy').attr({ rel: pageName, title: function() { return $(this).find("img").attr("alt"); } }); }); $(document).ready(function() { $('a.fancy').each(function() { $(this).find('img').wrapAll('<div class="overlay_link" />'); }); $(".body_copy img").after('<span class="overlay" />'); });
-
Hi, This a total newbie question, but how can I modify the code below so that a specific css class (.last) is added to the last <li>? <?php $homepage = $pages->get("/"); $children = $homepage->children; $children->prepend($homepage); foreach($children as $child) { $class = $child === $page->rootParent ? "class='active'" : ''; echo "<li $class ><a href='{$child->url}'>{$child->title}</a></li>"; } ?>
-
Hello, Just beggining with PW. I've managed to create the url of the html document correctly with this code: <?php echo $config->urls->templates?> . Ok, easy. I have assigned to different divs a background image with CSS. This is an example of one of them: #music{ background: url(../_img/bg_pages/HBP-Music.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } My file structure is as the picture I uploaded shows for any hints. With this actual file structure it works perfectly when its not in PW. Do I need to paste a code to redirect it? I have several images loaded by CSS and none of them work. I also have checked the template example and I see nothing special within the url. Could you help me out?
