Jump to content

Chris Bennett

  • Content Count

  • Joined

  • Last visited

  • Days Won


Chris Bennett last won the day on February 22

Chris Bennett had the most liked content!

Community Reputation

40 Excellent

About Chris Bennett

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

  1. Plenty of posts on the forum relating to Content Security Policy (CSP) and how to integrate it with Processwire. It's not too hard to implement a decent htaccess CSP that will get you a solid B+ at Mozilla Observatory. If you're after A+ it's a little harder because of all the back-end stuff... until you realize it's surprisingly easy. After a lot of testing, the easiest way I found was to specify only what is needed in the htaccess and then add your required CSP as a meta in your page template. Plenty of people have suggested similar. Works very easily for back-end vs front-end, but gets complicated if you want front page editing. Luckily, a little php will preserve back-end and front page editing capabilities while allowing you to lock down the site for anyone not logged in. None of this is rocket science, but CSPs are a bit of a pain the rear, so the easier the better, I reckon ๐Ÿ˜‰ The only CSP I'd suggest you include in your site htaccess is: Header set Content-Security-Policy "frame-ancestors 'self'" The reason for this is you can't set "frame-ancestors" via meta tags. In addition, you can only make your CSP more restrictive using meta tags, not less, so leaving the back-end free is a solid plan to avoid frustration. Then in your public front-facing page template/s, add your desired Content Security Policy as a meta tag. Please note: your CSP should be the first meta tag after your <head>. For example: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Security-Policy" content="Your CSP goes here"> <!-- followed by whatever your normal meta tags are --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="format-detection" content="telephone=no"> If you haven't got Front Page Editing enabled, this works fine by itself. Just one extra step is needed to make sure you don't have to worry either way. The easiest way I found to allow both CSP and front page editing capabilities is the addition of a little php, according to whatever your needs are. Basically, if the user is a guest, throw in your CSP, if they're not do nothing. It's so simple I could have kicked myself when it finally dawned on me. I wish it had clicked for me earlier in my testing, but it didn't so I'm here to try to save some other person a little time. Example: <!DOCTYPE html> <html> <head> <?php if ($user->isGuest()): ?> <meta http-equiv="Content-Security-Policy" content="Your CSP goes here"> <?php endif; ?> <!-- followed by whatever your normal meta tags are --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="format-detection" content="telephone=no"> If you want it a bit more involved then you can add additional tests and be as specific as you like about what pages should get which CSP. For example, the following is what I use to expand the scope of the CSP only for my "map" page: <?php $loadMap = $page->name === "map"; ?> <!DOCTYPE html> <html> <head> <?php if ($user->isGuest()): ?> <meta http-equiv="Content-Security-Policy" content="default-src 'none'; base-uri 'self'; manifest-src 'self'; form-action 'self'; font-src 'self' data: https://fonts.gstatic.com; frame-src 'self' https://www.youtube.com; img-src 'self' data:<?php echo ($loadMap) ? " https://maps.googleapis.com https://maps.gstatic.com" : ""; ?> https://www.google-analytics.com; script-src 'self' <?php echo ($loadMap) ? "https://maps.googleapis.com " : ""; ?>https://www.google-analytics.com https://www.googletagmanager.com; style-src 'self' <?php echo ($loadMap) ? "'unsafe-inline' https://fonts.googleapis.com" : ""; ?>"> <?php endif; ?> Hope this saves someone a little time testing. https://observatory.mozilla.org/analyze/bene.net.au
  2. Sorry, I realized after sending that your pen had already done exactly that. My apologies and nice work!
  3. No worries mate. Yep, the label I added was just an addition for resizing the label and to ensure alignment, as I wasn't sure what other CSS was acting on it. You are spot on with needing to over-ride the .uk-checkbox:checked but it should be nice and easy with specificity because the attribute selector [type="checkbox"] should trump the class selector. Just add background-image:none and it should clear up the problem; input[type="checkbox"]:checked { border-color: #3eb998; background-color: #3eb998; background-image:none; }
  4. Sorry about delay, the curse of living in the Southern Hemisphere ๐Ÿ™‚ I'm not seeing anything too weird when setting label and checkbox to 0.85em on @LostKobrakai's example but it may be influenced by other CSS. If it's the alignment of the span in relation to the you toggle, you could add a little CSS for the label. Depending on your needs you might want to add a class to the label to limit it to your toggle. Either way, something along the lines of: label {display:flex;align-items:center;font-size:0.85rem;} and input[type="checkbox"] {font-size:0.85em; ...should make it smaller and align the text in the middle.
  5. @flydev's solution should do the trick for you, nice and clean, unlike the uikit one that had to negotiate the specificity issues inherent with uikit. If not I am happy to take a look for you.
  6. 0.0.4 is the one that worked for me, before that not so much. I believe it is from here rather than the master branch featured in the modules directory: https://github.com/kongondo/FieldtypeRuntimeMarkup/tree/dev
  7. No worries Psy, give me a minute to look-see what I have and try to track down where I got it
  8. Are you using the dev branch RuntimeMarkup version? That one worked like a charm for me once I thought to try it instead.
  9. Absolutely Craig, it's not the actual typeface I dislike, just the occasional (maybe baseline related?) vertical alignment issues that make it act that little bit differently from all the rest. Generally makes no difference to display, but every now and then will bite you out of the blue when you try to do something that should be easy.
  10. I quite like sites that use the system font stack, with the exception of Segoe UI which doesn't really behave like the rest. For example, every Twitter button which defaults to Segoe for me looks off, with text dropped well below the vertical centre. Just the nature of Segoe and not a huge deal, but I usually leave it out or replace it with something that plays nicer with the rest and is reasonably likely to be in cache, like Roboto. Speaking personally, I would even prefer a boring Arial than a weirdly aligned Segoe every day of the week.
  11. Weird one relating to the Docs dropdown not behaving. Win7 here, can reproduce the aligning left at certain zoom levels, not at others. The weird part is if I change fonts to /?font=roboto, the issue disappears. Not sure why or what that means. Raleway, for example, exhibits the same problem with unwanted left align.
  12. Little thing, but #content2 seems to be (at least partially) responsible for the unwanted horizontal scrollbar at widths below 1600px. Specifically, if margin-right: -40px; is commented out in .blog-posts, the unwanted scrollbar disappears, consistent with it being overwritten to 0 at the 1600px breakpoint.
  13. This is true, but would surely also be true of every uikit theme and alternative theme, everywhere, including the processwire default admin theme. If they radically changed all the hooks then wouldn't everything need to be altered accordingly anyway? Personal opinion only, of course, but in this respect I quite like just unobtrusively overriding what is there, because even if every hook suddenly and dramatically changed overnight, the default would still work as expected.
  14. Oh, absolutely Bernhard. We're largely doing a similar thing in different ways, I'm just going old-school, no-compiler CSS override driven by php variables outputting as CSS. I have no intention of touching anything beyond the variables at the top unless I need to down the track to add something else ๐Ÿ™‚ $font_family = ''; // Sets font-family. Defaults to "-apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;" if none provided, because segoe sucks :) $html_bckgndcolor = '#1b2836'; // Background color, also used by masthead and footer if no over-rides are provided for them. Defaults to #e5e5e5 if none provided. $html_color = ''; // Text color for document. Defaults to "#354b60" if none provided. $body_bckgndcolor = '#C1C1C1'; // Background color of body, the area not covered by masthead, footer and possible extra space at bottom of footer. Defaults to "#eee" if none provided. $link_color = ''; // Link color. Defaults to "#009cd6" if none provided. $linkhover_color = ''; // Link hover color. Defaults to "#15BFFF" if none provided. $masthead_bckgndcolor = ''; // Overrides $html_bckgndcolor for masthead background, if required $masthead_minheight = '30'; // Minimum pixel height of masthead. Defaults to "55" if none provided. Anything much under 20 is tiny and over 73 will trigger mobile view. $footer_bckgndcolor = ''; // Overrides $html_bckgndcolor for footer background, if required $spacesave_heading = '1'; // Page Heading tucks beside breadcrumbs and margins altered $currentpage_color = '#FFF'; // Sets color of current page text, Defaults to uikit default if not set. $button_bckgndcolor = '#228B22'; $button_bckgndcolor_hover = '#176117'; $button_bckgndcolor_active = '#64ad64'; $button_radius = '.5'; // Sets border-radius (in rem based off root font-size) of buttons. Defaults to uikit if not set. $input_radius = '.33'; // Sets border-radius (in em based off parent font-size) of inputs. Defaults to uikit if not set. $input_bordercolor = '#e5e5e5'; // Sets border color of inputs. Defaults to uikit if not set. $input_bckgndcolor = ''; // Sets bckgnd color of inputs. Defaults to uikit if not set. $input_bckgndcolor_focus = ''; // Sets bckgnd color of inputs that are focused. Defaults to uikit if not set. $input_bordercolor_focus = '#cbd7e3'; // Sets border color of inputs that are focused. Defaults to uikit if not set.
  15. Absolutely mate, but having done a pretty deep dive into the uikit theme over the last few weeks it is - surprisingly - not as difficult as it would first seem when I started wading through 14000 or so lines of unminimized CSS to get an idea of what was going on ๐Ÿ™‚ Basically you can just bunch a heap of CSS overwrites together and use the single variable like your example video, which is very cool. To be honest, there's stuff in uikit that could be bunched together more anyway, but generally speaking there's not too much difficulty targeting what you need because most of the styling is tied together pretty logically so it ends up working much like your example. I should have said earlier, I love your idea and it is something I have kind of been working towards with my experiments. I can't help but want to play with stuff, it's just the way my brain works. Took it a step further today prompted by this - and because any time I open my mouth I instantly want to make sure I can actually deliver on my suggestions - and can pretty comprehensively change the skin with around 25 php variables (so far) for less than 30kb in a completely uncompressed php file. As you would imagine, it is still very much a work in progress but had a pleasant amount of forward momentum. Naturally it wasn't from a standing start, as I have been playing around with my custom admin css for quite a few weeks now so had already "collected" a lot of the CSS I needed to target over that time. The beautiful thing for me - now I have finally taken the plunge - is I can more easily change stuff myself with what is essentially a config section at the top of my php/css file, which could definitely draw from the backend. Random example below plucked from the file, setting radius, backgrounds and borders (if desired) on all input items, defaulting to uikit if nothing specified. Once I have setup all the variables similar to this, I don't intend to look past the top section again ๐Ÿ˜‰ .Inputfields input:not([type=submit]):not([type=file]):not([type=checkbox]):not([type=radio]):not(.uk-form-blank), .Inputfields textarea:not(.uk-form-blank), .Inputfields select.uk-select:not(.uk-form-blank), .cke_chrome {<?php echo $input_radius ? 'border-radius:' . $input_radius . 'em;' :''; ?>} .cke_chrome {overflow:hidden;} li#Inputfield_navigation_order .Inputfields.uk-grid {border-radius: .5em;} .Inputfields input:not([type=submit]):not([type=file]):not([type=checkbox]):not([type=radio]):not(.uk-form-blank), .Inputfields textarea:not(.uk-form-blank) { <?php echo $input_bckgndcolor ? 'background-color:' . $input_bckgndcolor . ';' :''; ?> } .Inputfields input:not([type=submit]):not([type=file]):not([type=checkbox]):not([type=radio]):not(.uk-form-blank):focus, .Inputfields textarea:not(.uk-form-blank):focus { <?php echo $input_bckgndcolor_focus ? 'background-color:' . $input_bckgndcolor_focus . ';' :''; ?> <?php echo $input_bordercolor_focus ? 'border-color:' . $input_bordercolor_focus . ';' :''; ?> box-shadow: 0 0 .5em rgba(0,0,0,0.2) }
  • Create New...