Jump to content

Chris Bennett

Members
  • Content Count

    19
  • Joined

  • Last visited

Everything posted by Chris Bennett

  1. Sorry, I realized after sending that your pen had already done exactly that. My apologies and nice work!
  2. 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; }
  3. 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.
  4. @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.
  5. 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
  6. No worries Psy, give me a minute to look-see what I have and try to track down where I got it
  7. Are you using the dev branch RuntimeMarkup version? That one worked like a charm for me once I thought to try it instead.
  8. 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.
  9. 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.
  10. 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.
  11. 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.
  12. 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.
  13. 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.
  14. 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) }
  15. Sorry if this seems naive, but wouldn't the easiest way to re-skin parts of the admin be to simply leave the compiled default files alone and use the Cascading part of CSS? $config->styles->add() in admin.php has been like magic for me and has made my experimentation with custom styling much easier. If desired, you could generate the css based on your desired backend variables, similar to CSS variables.
  16. Sorry flydev, not at the moment. I am an old-school, banging-rocks-together, CSS kinda dude, so am not experienced with compilers in general, yet. I get why they are very useful, I just haven't *needed* to use them in the past. It is something I plan to work towards with processwire after many years of static sites.. Using variables are starting to make great sense. It's still very much a work in progress and is not very fancy or tricky, so it should be able to slot in somewhere without much hassle.
  17. Didn't realise I wouldn't be able to edit the original post with inevitable tweaks and changes. Whoops, sorry about that. Below is an extended version dealing with a few more common admin backend use cases. .uk-form-controls-text label:only-of-type input.uk-checkbox, .Inputfield input[type=checkbox].uk-checkbox { font-size:.8rem; margin-top:0; position:relative; -webkit-appearance:none; outline:none; width:4em; height:2.4em; border:2px solid #D6D6D6; border-radius:3em; box-shadow:inset 5em 0 0 0 #DDD; flex-shrink:0; } p.template-checkboxes input[type=checkbox].uk-checkbox { font-size:.6rem; } .uk-form-controls-text label:only-of-type input.uk-checkbox:after, .Inputfield input[type=checkbox].uk-checkbox:after { content:""; position:absolute; top:.25em; left:.25em; background:#FFF; width:1.6em; height:1.6em; border-radius:50%; transition:all 250ms ease 20ms; box-shadow:.05em .25em .5em rgba(0,0,0,0.2); } .uk-form-controls-text label:only-of-type input.uk-checkbox:checked, .Inputfield input[type=checkbox].uk-checkbox:checked { background-color: transparent; box-shadow:inset 5em 0 0 0 #4ed164; border-color:#67bba5; } .uk-form-controls-text label:only-of-type input.uk-checkbox:checked:after, .Inputfield input[type=checkbox].uk-checkbox:checked:after { left:1.85em; box-shadow:0 0 1em rgba(0,0,0,0.2); } label:only-of-type input.uk-checkbox:checked + span, .Inputfield input[type=checkbox].uk-checkbox:checked + span { color:#008a00; transition:all 250ms ease 20ms; } .InputfieldCheckbox .InputfieldContent label:only-of-type, .InputfieldCheckboxes table label, .uk-form-controls .InputfieldCheckboxes ul li label { display: flex; } label:only-of-type input.uk-checkbox + span, .Inputfield input[type=checkbox].uk-checkbox + span { color: #c3c3c3; display: flex; width: 100%; max-width: 22em; align-items: center; justify-content: space-between; line-height: 1.1; } label:only-of-type input.uk-checkbox + span:after { flex-shrink:0; margin-left:.5em;width:2em; opacity:0; content:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 250 250'%3E%3Ccircle cx='125' cy='125' r='125' fill='%23231F20' opacity='.1'/%3E%3Cpath fill='%230B8B44' d='M95.823 139.432l-32.492-32.56-31.872 31.883-.008-.008 63.72 63.732L218.549 79.116 187.494 47.52z'/%3E%3C/svg%3E"); } label:only-of-type input.uk-checkbox:checked + span:after { opacity:1; transition: opacity 250ms ease 150ms; }
  18. Not sure where I originally saw it while lurking around the forums, but someone, somewhere at some time was asking about styling Uikit checkboxes as toggle-style switches, much like the ones at the bottom of this post asking me if I want to be notified of replies. So here is my humble offering, rough and ready, which can be thrown in at the bottom of your Uikit css as a starting point. Everything is based on ems and rems, so you can increase size as you desire by altering the single instance of font-size. It only targets single instances of labels within a specific field to a) try to limit unintended consequences and b) because in those cases it often seems more user-friendly to have an on/off binary switch rather than a checkbox. It's still totally a checkbox, just styled differently. .uk-form-controls-text label:only-of-type input.uk-checkbox { font-size:.8rem; margin-top:0; position:relative; -webkit-appearance:none; outline:none; width:4em; height:2.4em; border:2px solid #D6D6D6; border-radius: 3em; box-shadow:inset 5em 0 0 0 #DDD; flex-shrink: 0; } .uk-form-controls-text label:only-of-type input.uk-checkbox:after { content:""; position:absolute; top:.25em; left:.25em; background:#FFF; width:1.6em; height:1.6em; border-radius:50%; transition:all 250ms ease 20ms; box-shadow:.05em .25em .5em rgba(0,0,0,0.2); } .uk-form-controls-text label:only-of-type input.uk-checkbox:checked { background-color: transparent; box-shadow:inset 5em 0 0 0 #4ed164; border-color:#67bba5; } .uk-form-controls-text label:only-of-type input.uk-checkbox:checked:after { left:1.85em; box-shadow:0 0 1em rgba(0,0,0,0.2); } label:only-of-type input.uk-checkbox:checked + span { color:#008a00; transition:all 250ms ease 20ms; } .InputfieldCheckbox .InputfieldContent label:only-of-type {display:flex;} label:only-of-type input.uk-checkbox + span { color:#c3c3c3; display:flex; align-items:center; line-height:1.1; } /* Below is only necessary if you want the optional "tick" after items when selected */ label:only-of-type input.uk-checkbox + span:after { flex-shrink:0; margin-left:.5em;width:2em; opacity:0; content:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 250 250'%3E%3Ccircle cx='125' cy='125' r='125' fill='%23231F20' opacity='.1'/%3E%3Cpath fill='%230B8B44' d='M95.823 139.432l-32.492-32.56-31.872 31.883-.008-.008 63.72 63.732L218.549 79.116 187.494 47.52z'/%3E%3C/svg%3E"); } label:only-of-type input.uk-checkbox:checked + span:after { opacity:1; transition: opacity 250ms ease 150ms; }
  19. Hi all, first post here but in case anyone else is experiencing this issue, I'd suggest checking if you are trying to use plain old http: instead of shiny yummy https: While taking my first test site out for its first spin in the wild I noticed this message, then immediately after visiting this post realized I hadn't yet enforced https on the site. As soon as I used https instead, the popups disappeared, and as soon as I switched back to http there they were again. Naturally can't say for sure what anyone else is experiencing, but it surely worked for me.
×
×
  • Create New...