Home Forums Tutorials and Hints from Users Using Scripts for advanced styling or design changes.

This topic contains 1 reply, has 1 voice, and was last updated by  scrambler 1 year ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #19594

    scrambler
    Moderator
    NEWER VERSION in the Guide Site Here

    Preliminary remarks

    When trying to create your design with a Weaver theme, you should always follow the logic below
    a- Search if there is an existing options to do what you want, ask on the forum if you don’t find it.
    b- If there is no option to apply the style you need, but there is an existing (different) option for the object you are targeting, you can put CSS rules inside the object option CSS+ box
    c- If there is no option for the object you are targeting, you can create a complete CSS rule using a selector that will target your object, and place it in Main options > Fonts & Custom > Custom CSS Rule box
    Use your Brower developer tool to figure out the selector. Read below if not familiar with the developer tools
    http://forum-archive.weavertheme.com/discussion/1207/basic-tips-on-using-the-developer-tools-like-firebug-to-resolve-styling-issues
    If you need different rules for different devices sizes (Desktop / Small Tablet / Phone / OSes…) you can add the theme mobile classes at the beginning of your selector (Check “Weaver Xtreme Helper Classes” in the help)

    Beyond that there are two types of advanced changes that can be made.

    PHP changes:
    If you need to alter the very structure of the theme, you may need to make changes to the PHP behind it.
    Some PHP changes can be done using the Advanced options > Head Section > Action and Filter box. I have some example below
    http://forum-archive.weavertheme.com/discussion/8405/actions-filters-tips-and-examples-part1
    http://forum-archive.weavertheme.com/discussion/8406/actions-filters-tips-and-examples-part2
    But for most, you would need to create a Child Theme, and make PHP changes in the child theme so they are not lost in the next update.
    Using Scripts

    CSS can do a LOT of things, and if you are not sure something can be done with CSS, ask here. But if you need advanced programmable effect, you sometimes may need to use a script (JavaScript / jQuery).
    Obviously this is an advanced type of solution, and you should not rush into it before you have exhausted what CSS can do.
    A script can also change the HTML generated by the theme without having to modify the PHP behind it, which in some cases can save you from creating a child theme.
    You need to proceed with caution, as a script can mess up your site if you don’t know what you are doing, but don’t be afraid, when you remove the script, whatever harm it did will be gone.
    If you are going to use JavaScript / jQuery scripts, I strongly advise that you learn a minimum about the scripting language.
    jQuery reference site: https://api.jquery.com/

    Some general remarks about scripts.
    • When using jQuery inside Xtreme, you need to change the syntax  $(xxxx)   to jQuery(xxxx)
    • Use a lot of comments in your script (using //comments…) to explain what each piece is for. A few month from now it may be hard to remember why you did what you did 
    • Where you place a script can matter.
      Most scripts will be placed in Advanced options > Head section > Head Section box.
      But if the scripts is using or modifying specific page elements, it may need to be run after all these page elements have been created.
      The way to do that is to place the script in Advanced options > HTML Insertion > Post Footer Code box.
      If the script should only be run on a specific page, you can use the Page custom fields of these areas (page_head_code, postfooter on Xtreme).
      For more on page custom field, read
      http://forum-archive.weavertheme.com/discussion/1281/custom-fields-on-pages-and-posts-what-to-use-them-for-and-how-to-use-them?new=1
      Script can also be placed with content, if you do that on pages or posts, make sure to check the option “Allow Raw HTML and script” and use the TEXT mode of the content editor.
    DISCLAIMER:
    I am not a JavaScript / jQuery expert, I know enough to do some things, but given my limited knowledge in this area, there may be better cleaner ways to do some of the things mentioned here.
    Use these examples at your own risk, and If you know better, feel free to speak up.
    Do not expect us to debug your scripts! You are better off using developer forums like Stackoverflow.com for that
    The following post contains a first few examples of simple scripts to do some of the things mentioned above.

    As usual, If I messed up, speak up 
    #30881

    scrambler
    Moderator
    1) Removing the links to a specific author while retaining the author’s name.
    This is an example of a script (from @weaver) altering the HTML output of the theme PHP and allowing to avoid creating a Child theme.
    Add the following to the Advanced Options -> HTML Insertion -> Post-Footer box:
    <script type=”text/javascript”>
    jQuery(‘.archive a[title=”weaver”]’).contents().unwrap();  // remove link around author “weaver” on the “Author Archives : weaver line
    jQuery(‘.archive a[title=”View all posts by weaver”]’).contents().unwrap(); // remove link around “weaver” on the Posted by meta line on the archive page
    </script>

    Note: this is designed just for an archive page (including the Author Archive page). You will have to have that pair of jQuery statements for each author you want to remove the link from. You replace the name “weaver” with the name displayed for the author in question.

    If you wanted to remove the author link on all pages, remove the .archive in the code. The title=”View all posts by” value is likely to be different for different edit translations. You can get the exact wording by looking at the HTML output of the page, either with a developer tool or reading the HTML page source directly.

    2) Change styling elements on scrolling.
    Below are two generic ways of using a script for dynamic styling.
    By either, (A) using the script to add a styling class to some elements, and then use CSS to create styling rules based on that class, or (B) have the script write inline CSS on elements.
    A- Use a script to apply a set of styling rules under specific condition (here scrolling), by adding a class to an element.
    This is best if there is a lot of styling involved. All the script has to do is add or remove the class under certain conditions.
    You can then change the styling applied at will without having to touch the script. The less scripting you need the less room for errors.
     
    In the example below, when scrolling down the page, as the primary menu bar reaches the top, we want it to become fixed, with a semitransparent background.

    The CSS below defines the styling connected to two made up class named  wvrx_top-fixed 
    The class is used to define a styling rule that will fix and style the menu bar.

    #nav-primary .wvrx-menu-container.wvrx_top-fixed {background-color: rgba(255,255,255,.9) !important;position:fixed;top:0;width:100%;max-width:1100px;z-index:999;}

    The script below gathers the top position of the menu, then uses that value as the amount to scroll before adding the styling class to the menu element so that it becomes fixed and styled as we want.
    Because the script needs to know the position of the menu bar before you start scrolling, it needs to be executed after the page is generated.
    So that Script needs to go in Advanced options > HTML Insertion > Post Footer Code box

    Note: The script has been modified to also adjust the body top margin, using the direct CSS write method described in B ) below it

    <script type=”text/javascript”>
    //Need to define styling rule for fixed element (below)
    //#nav-primary .wvrx-menu-container.wvrx_top-fixed {background-color: rgba(255,255,255,.9) !important;position:fixed;top:0;width:100%;max-width:1100px;z-index:999;}

    var my_selector = “#nav-primary .wvrx-menu-container”;       //Defines the selector target as the primary menu bar element
    var ElementHeight =  jQuery(my_selector).outerHeight();     //Gathers the height of the selected element
    var ElementPosition =  jQuery(my_selector).offset().top;     //Gathers the top position of the selected element
    jQuery(window).scroll(function() {
    var windowScroll = jQuery(window).scrollTop();  //Collects the amount of scroll
        if (windowScroll > ElementPosition ) {      //Use the selected element top position as the trigger position
            jQuery(my_selector).addClass(“wvrx_top-fixed”);    //Add the class to the targeted element to apply the class styling
            jQuery(‘body’).css(‘margin-top’, ElementHeight);   //Add top margin to body to prevent content shift
        } else {
            jQuery(my_selector).removeClass(“wvrx_top-fixed”);
            jQuery(‘body’).css(‘margin-top’,””);
        }
    });
    </script>
    B- Use a script that makes direct changes to the inline CSS of any object with a specific CSS selector.
    This method is suitable if you just have a few CSS properties to change. The script will directly write the CSS on the element HTML in a style attribute.
    You need know the selector of the object to target, or have the ability to add a class to the object (like if you are creating the HTML, or targeting the theme object with the “Plus” Add Class option).

    The example below will scale down the size of any object that uses the class  my_ScaleHeight while scrolling (down to a predefined size).

    Idea comes from the following thread of someone wanting to reduce the size of a Header logo image when people scroll, to maximize space for content.
    http://stackoverflow.com/questions/20706647/jquery-image-height-change-on-scroll

    For example, if we want the script to affect the size of an image placed in the fixedtop area, you would put the below HTML image tag in that box, giving it a specific class my_ScaleHeight  (you can use any name you want).
    We will then use that class in the script to change the height of the image when scrolling.

    <img style=”height:250px;width:auto;” src=”imageUrl” class=”my_ScaleHeight” />

    Note: Instead of using a made up class, we could also use a unique selector that targets that image if we know it.
    For example if there is only one image in the fixedtop area, we could use ‘#inject_fixedtop img’ instead of ‘.my_ScaleHeight’

    That script does not need to know anything about the page elements, so it can go in Advanced options > HTML Insertion > Head section.

    <script type=”text/javascript”>
    var imageHeight = parseInt(jQuery(‘.my_ScaleHeight’).css(‘height’));    //Gathers the image height
    var stopHeight = imageHeight * 0.5;                   //Sets the minimum size for scaling. Replace 0.5 scaling factor by what you want
    jQuery(window).scroll(function() {
    var windowScroll = jQuery(window).scrollTop();  //Collects the amount of scroll
    var  newHeight = imageHeight – windowScroll;     //Calculate the new height by reducing the height of the image by the scroll value
        if(newHeight >= stopHeight){                                 //Apply it only is above the set limit
            jQuery(‘.my_ScaleHeight’).css(“height”, newHeight);    //Write the inline height CSS on the element
        }
        else{
            jQuery(‘.my_ScaleHeight’).css(“height”, stopHeight);   //Beyond the limit, set the height as the limit
        }
    });
    </script>

    Enjoy a new world of possibilities 
Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.