Feature(s) Request plus Tutorial

  • Hi, Guys!
    I’ll start by saying that I’m one of those irritating and completely detestable fellas that can’t acquire anything without modifying it. I trust you all resemble that remark, LOL! Read on for detail of my latest WP adventuring…

    Goal:

    Modify the absolutely fan-freakin’-TASTIC WP theme, Customizr, to create a site-wide template that provides 1) a page-width header and footer 2) bracketing a boxed/limited-width main content container so that 3) a fancy background image can be included and shown off, all in pursuit of the original goal to, 4), add a parallax scrolling effect to the remainder of the page elements displayed in front of that background image.

    I want to state up front that I’ve been able to accomplish two of the first three of the Goal’s objectives with native Customizr (Czr) theme customizer settings in combination with some CSS overrides in the ‘Advanced Options/Additional CSS’ section of the theme customizer; the remaining of those objectives I accomplished by re-introducing some native WP functionality into the Czr template via modifying Czr’s functions.php file. The final objective (parallax-ization) I haven’t quite licked yet to my perfect satisfaction, but am farting around with skroller.js (Google it =) ) and some added <div>‘s to some degree of success.
    As For what I have been able to accomplish, it is, as will be shown shortly, a bit of a process! The features I am introducing are attractive, however, and it occurs to me that these options might actually be popular if offered out-of-the-box with Czr.
    So, if you’ll be so kind as to tolerate it, Imma give y’all the breakdown of what I’ve been frankensteining with Czr, in the hopes that like-minded folks can duplicate the same features on their own WP/Customizr site using these steps, and especially that native Czr functionality can at some point in future be included to accommodate at least some of these features =).

    Measures taken:

    1. Introduce the background image:
    • Modify the Czr functions.php file to re-establish native WP support for a custom background image, thus –
    • added – 
      $defaults = array(
    'default-image'            => '',
    'default-preset'           => 'fill', // 'default', 'fill', 'fit', 'repeat', 'custom'
    'default-position-x'       => 'left',    // 'left', 'center', 'right'
    'default-position-y'       => 'top',     // 'top', 'center', 'bottom'
    'default-size'             => 'cover',    // 'auto', 'contain', 'cover'
    'default-repeat'           => 'no-repeat',  // 'repeat-x', 'repeat-y', 'repeat', 'no-repeat'
    'default-attachment'       => 'scroll',  // 'scroll', 'fixed'
    'default-color'            => 'ffffff',
    'wp-head-callback'         => '_custom_background_cb',
    'admin-head-callback'      => '',
    'admin-preview-callback'   => '',
);
add_theme_support( 'custom-background', $defaults );
    • after –
      require_once( get_template_directory() . '/core/init-base.php' );

    – in order to automagically inject a class declaration into the Czr <body> tag, as well as certain related CSS properties into the preloaded Czr stylesheet…

    • … and then added – 
      body.custom-background {
    background-position: center 115px !important;
}

      in ‘Advanced Options/Additional CSS’ in order to override the CSS background-position property declaration established by the custom-background function, with the intent that the new body background image isn’t decapitated by the Czr header. (Doubtless this last item can be dealt with by the Czr authors in future releases by adding to/modifying the available property tweaks available thru the ‘Background Image’ tab in customizer;)

    • This will not apply in every instance, but since I wanted my background image to be seen in all its width, my selected theme customizer ‘Background Image’ settings (‘Preset’ adjusted to ‘Custom’, Image Position glued to top center, ‘Image Size’ adjusted to ‘Fit to Screen’, ‘repeat Background Image’ unchecked, ‘Scroll with Page’ checked), naturally introduced a gap to deal with above the footer when page lengths exceeded the height of the image.
      In order to accommodate this visually, I first did some image editor artwork, altering the bottom five or ten per-cent of my background image using a opaque-to-transparent gradient tool to create the effect of fading it out at the bottom edge of the image; then, back in the WP theme customizer ‘Colors’ tab, I selected an appropriate background color, matching the opaque color setting of my image editor’s gradient tool.
      Designers can avoid this extra work by simply adjusting the ‘Preset’ or ‘Image Size’ settings in the theme customizer ‘Background Image’ tab to ‘Fill Screen’, or even select the ‘Repeat Background Image” checkbox in that same tab panel.
  • Create the full-width header and footer, size the main content container:

    • In ‘Global settings/Site Layout’, adjust ‘Site layout’ to ‘Wide’, adjust ‘Header topbar layout’ to ‘Wide’, adjust ‘Main Header section layout’ to ‘boxed’ (try to mirror main content wrapper width, addressed more particularly below with CSS), adjust ‘Footer Credits section layout’ to ‘Wide’ – all in order to establish header and footer widths natively with the theme customizer;
    • Add the following declarations to ‘Advanced options/Additional CSS’ – 
      div#main-wrapper {
    background-color: rgba(255, 255, 255, 0.8);
    margin: auto;
    width: 85%;
}
.tc-header .container {
    max-width: 85%;
    min-width: 85%;
}
header.tc-header {
    margin-bottom: 2em;
}
footer#footer {
    margin-top: 2em;
}

      – in order to squeeze the main container element down a notch to prevent its covering the <body> background image entirely (I’d like to see a chance to change the main container width in the ‘Global Settings/Site layout’ panel of Czr’s customizer, as this would accomplish at least the width restriction natively). ( ***Note: I added the top and bottom gaps because I liked the look — it was necessary to style the <header> and <footer> elements rather than the main content container element because I couldn’t get the desired effect by direct manipulation of the main content container using it’s height or margins settings). I also needed to style the main content container to make it generally visible against the <body> background image; I left it a bit transparent because I liked the way the <body> background image showed through.

    • Finally, I had to deal with something only an OCD idiot like myself is going to pick up on, namely that my boxed header bar wasn’t keeping width conversant with my newly-styled main content container element. To keep myself from tearing off chunks of skin with the hair I was pulling, I added – 
      .tc-header .container {
    max-width: 85%;
    min-width: 85%;
}

      – to ‘Additional CSS’ in the ‘Advanced Options’ panel of the theme customizer

    • As stated, I haven’t yet been able to satisfactorily introduce the highly pleasant, very-greatly-to-be-desired, much-vaunted parallax scrolling effect to the entire page, which was actually the seed goal that led to doing the above work. Having started with Nimble Builder (also from Press Customizr), and run into entirely too many hiccups, snags, and contortions, I moved on to several CSS and js routines already established by others for other applications, as well as going so far as trying out a few WP plugins, all to no avail. I was getting either no effect at all, unintended effects over which I could exercise no control, or herky-jerky image transitions that caused my eyes to bleed. At this point I’m experimenting with a venerated js toolkit called skrollr, which at this point is showing some promise. Unfortunately, the software in question isn’t part of the WP project, so I’m having to add <div>‘s in the header and footer theme files to get manipulable elements. I’ll be revisiting this request-cum-tutorial when I come up with the prefect solve on this =)

      • Thanks, Folks, for plunging this far into my nightmare with me! I’ll gladly take any feedback, even if it consists entirely in well-deserved spankings (yes, Press Customizr, I am deploying child themes, LOL!); mostly I look forward to seeing some of these features in future releases of that freakin’ awesome WP theme, Customizr!

    • This topic was modified 5 years, 1 month ago by wnsgadmin.
    • This topic was modified 5 years, 1 month ago by wnsgadmin.
    • This topic was modified 5 years, 1 month ago by wnsgadmin.
    • This topic was modified 5 years, 1 month ago by wnsgadmin.
Viewing 1 replies (of 1 total)
Viewing 1 replies (of 1 total)
  • The topic ‘Feature(s) Request plus Tutorial’ is closed to new replies.