Home Forums Weaver Xtreme Theme Custom Pages

Topic Resolution: Resolved

This topic contains 7 replies, has 3 voices, and was last updated by  scrambler 1 week, 1 day ago.

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #61955

    Xtivity
    Participant

    I just downloaded Weaver Extreme.

    Not new to Weaver. I used Weaver II long time ago and did a lot of stuff.

    Here is my question:

    • I have 5 pages. On the home page, alone,  I want to add 3 Column Div Boxes. Only on the Home, not on other pages
    • Option 1 – add custom HTML on a per page basis, using “Misc Options”. If I do that, I get the Div boxes above the header and some sort of error message “weaverx-page-page weaverx-sb-one-column” itemtype=”https://schema.org/WebPage” itemscope>.
    • Option 2 – Add the Custom HTML into the Widgets area: “Widgets –> Pages Top Widget Area”, Problem is that it adds the HTML into all pages.
    • How do I add custom HTML for a specific page (in the content area) ?

    Thanks for your time…

     

     

    #61957

    scrambler
    Moderator

    May be I am missing something, but if you want HTML in the content area of a single page, then you should just put the HTML in the page content area.

    Now how to do that depends on what editor you are using since WordPress switched to the new Block Editor

    If you have installed the Classic Editor plugin, then you just switch your Editor to text, check the Option “allow Raw HTML and Script” in the page option and you are all set.

    If you are using the New Block Editor, the easiest way to create 3 columns would be to use the column block that will let you do that without bothering with any HTML.

    If for some reason you insist on using HTML, use a Custom HTML block in the editor.

    If you are trying to create columns somewhere else in the page, give us a link to the page with specifics wbout where you are trying to insert them.

     

    #61959

    Weaver
    Keymaster

    Mostly these are editor issues.

    I’d really recommend switching to the new Gutenberg Block Editor, and either figure out how to use its columns block. There also is a very nice HTML block that supports direct HTML, but there are usually better options with other blocks.

    There is a bit of a learning curve with the block editor, but in the end it allows more creativity and easier layouts than the old classic editor.

    #61961

    Xtivity
    Participant

    Thank you Scrambler.  It works…Appreciate the quick response.

    #61968

    Xtivity
    Participant

    Question on: Javascript on Pages

    I am having a simple image show in Javascript.

    When I put this in “widgets” or in “HTML insertion areas” it works fine. But when I put this  in Page, it does not work. I did read-up some forums and it seems that this is a complex change in functions.php. Can I have a solution thru the Weaver theme to allow Javascript or Jquery.

    How do I enable Javascript or JQuery tags on Pages.

    Thanks for your time..

    #61969

    scrambler
    Moderator

    JavaScript or jQuery works fine in pages.

    It does need to be in a HTML setting, which means if you use the classic editor, you need to switch it to TEXT mode and check the page option “Allow Raw HTML and Script”

    If using the Block Editor, use the HTML block.

    Read the article below for more tips

    https://guide.weavertheme.com/scripts-using-them-for-advanced-styling-or-design-changes/

    For example, $  must be replaced by jQuery and where you place the script is important as the page loads in a specific order. For example if you place a script in the content area that relates  to elements loaded after the content area, it may not work.

    #61973

    Xtivity
    Participant

    Thanks. It works.

    Here is the problem and how your suggestion helped…

    1. My code – simple JQuery image show

    <html>
    <head>
    <style>
    .fadein {
    position:relative; width:320px; height:200px; margin:0 auto; box-shadow: 0 10px 10px rgba(10, 30, 40, 0.8);
    background-color:red;
    padding: 10px;
    }
    .fadein img { position:absolute; left:10px; top:10px;}
    </style>
    <script src=”http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js”></script>
    <script>
    $(function(){
    $(‘.fadein img:gt(0)’).hide();
    setInterval(function(){$(‘.fadein :first-child’).fadeOut().next(‘img’).fadeIn().end().appendTo(‘.fadein’);}, 800);
    });
    </script>
    </head>
    <body>








    </body>
    </html>

    1. As per your suggestion – changed “$” to “jQuery”

    <html>
    <head>
    <style>
    .fadein {
    position:relative; width:320px; height:200px; margin:0 auto; box-shadow: 0 10px 10px rgba(10, 30, 40, 0.8);
    background-color:red;
    padding: 10px;
    }
    .fadein img { position:absolute; left:10px; top:10px;}
    </style>
    <script src=”http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js”></script>
    <script>
    jQuery(function(){
    jQuery(‘.fadein img:gt(0)’).hide();
    setInterval(function(){jQuery(‘.fadein :first-child’).fadeOut().next(‘img’).fadeIn().end().appendTo(‘.fadein’);}, 800);
    });
    </script>
    </head>
    <body>








    </body>
    </html>

    3. As per your suggestion – took the “head” part of the code and put it into “HEAD” section of Weaver Xtreme theme (Appearance –> Weaver Xtreme Admin –> Advanced Options –> HEAD Section)

    <style>
    .fadein {
    position:relative; width:320px; height:200px; margin:0 auto; box-shadow: 0 10px 10px rgba(10, 30, 40, 0.8);
    background-color:red;
    padding: 10px;
    }
    .fadein img { position:absolute; left:10px; top:10px;}
    </style>
    <script src=”http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js”></script>
    <script>
    jQuery(function(){
    jQuery(‘.fadein img:gt(0)’).hide();
    setInterval(function(){jQuery(‘.fadein :first-child’).fadeOut().next(‘img’).fadeIn().end().appendTo(‘.fadein’);}, 800);
    });
    </script>
    </head>

    4. Put the body section into a Page as raw HTML







    And it works…

    Thanks for the help…

    #61974

    scrambler
    Moderator

    All your custom CSS would be better placed in the Theme Global Custom CSS Rule box.

    For page specific CSS add the page class as the first selector or use the per page CSS box if you have the Plus Plugin

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.