Page 1 of 2 12 LastLast
Results 1 to 10 of 18
  1. #1
    Join Date
    Nov 2020
    Posts
    226
    Plugin Contributions
    1

    Default Ez page and awesome fonts loading issue's

    I am currently in the process of updating my site to a new template, currently working on my testing subdomain to create an ez page with a bit of flare with the help of chatgpt, it looked fine until i tried to implement a change from basic up and down icons to awesome font ones and they refuse too display for me, i just removed the url from above the head tag for loading the icons as it is being used in the template and thought that may work as the template already uses them and then i fixed an issue in the templates viewport meta tag of an invalid separator and duplicated user scalable property incase that was the issue and to take it off the to do list.

    i'm actually starting to grasp reading the flow of code as i go but this partcular issue is baffling me, hopefully someone is able to help, is there anything obvious that stands out in my code?


    Code:
    <style>
            /* Your existing styles */
            .clickable-section {
                margin-bottom: 20px;
                cursor: pointer;
                position: relative;
                text-align: center; /* Center text */
            }
    
            .section-header-image {
                width: 100%;
                height: auto;
                display: block;
                cursor: pointer;
                position: relative;
            }
    
            .section-header-image img {
                width: 100%;
                height: auto;
            }
    
            .down-arrow {
                position: absolute;
                top: 50%;
                right: 10px;
                transform: translateY(-50%);
                font-size: 20px;
            }
    
            .section-content {
                padding: 10px;
                display: none;
                text-align: left; /* Reset text alignment */
            }
    
            /* Style for the image link */
            .pc-builder-image {
                max-width: 100%;
                height: auto;
                display: block;
                margin: 20px auto; /* Centers horizontally */
            }
    
            /* Style for the image text */
            .clickable-section .overlay-text h3 {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                z-index: 10; /* Increase the z-index value */
                color: white; /* Set text colour to white */
                text-align: center;
            }
    
    @keyframes text-pulse {
        0% {
            text-shadow: 0 0 4px white;
        }
        50% {
            text-shadow: 0 0 8px white;
        }
        100% {
            text-shadow: 0 0 4px white;
        }
    }
    
    .clickable-section .overlay-text h3:hover {
        animation: text-pulse 1s infinite;
    }
    
            .ez-page-content {
                text-align: center; /* Center all text content */
            }
    
    .icon-toggle {
                position: absolute;
                top: 50%;
                right: 10px;
                transform: translateY(-50%);
                font-size: 20px;
                color: white;
                z-index: 15;
            }
    
    .icon-plus {
        position: absolute;
        top: 50%;
        right: 10px; /* Adjust as necessary */
        transform: translateY(-50%);
        font-size: 20px; /* Adjust size as needed */
        color: white; /* Change color if needed */
        z-index: 15; /* Make sure it's above other elements */
    }
    
    .icon-minus {
        position: absolute;
        top: 50%;
        right: 10px; /* Adjust as necessary */
        transform: translateY(-50%);
        font-size: 20px; /* Adjust size as needed */
        color: red; /* Change color if needed */
        z-index: 15; /* Make sure it's above other elements */
    }
    
        </style>
    
        <script>
           function toggleSection(sectionId) {
                var section = document.getElementById('section-' + sectionId);
                var iconPlus = section.previousElementSibling.querySelector('.fa-plus-square-o');
                var iconMinus = section.previousElementSibling.querySelector('.fa-minus-square-o');
    
                if (section.style.display === 'none') {
                    section.style.display = 'block';
                    iconPlus.style.display = 'none';
                    iconMinus.style.display = 'inline'; // or 'block'
                } else {
                    section.style.display = 'none';
                    iconPlus.style.display = 'inline'; // or 'block'
                    iconMinus.style.display = 'none';
                }
            }
        </script>
    <head>
    <body>
        <div class="ez-page-content">
            <h1>Get Your Dream PC Built!</h1>
    
            <!-- Customized clickable sections -->
            <div class="clickable-section">
                <div class="section-header-image" onclick="toggleSection(1)">
                    <img src="/images/500x100x.png" alt="Image 1 Placeholder">
                    <span class="fa fa-plus-square-o icon-toggle"></span>
                    <span class="fa fa-minus-square-o icon-toggle" style="display: none;"></span>
                    <div class="overlay-text">
                        <h3>Customize your PC with the perfect parts, your way</h3>
                    </div>
                </div>
                <div class="section-content" id="section-1" style="display: none;">
                    <p>With Crazygamer's PC Builder, you have the freedom to:</p>
                    <ul>
                        <li>Choose the components that match your preferences and needs</li>
                        <li>Explore a vast selection of top-quality parts</li>
                        <li>Easily navigate through compatible selections</li>
                    </ul>
                </div>
            </div>
    
            <!-- Placeholder for Section 2 -->
            <div class="clickable-section">
                <div class="section-header-image" onclick="toggleSection(2)">
                    <img src="/images/500x100x.png" alt="Image 2 Placeholder">
                    <i class="fa fa-plus-square-o icon-toggle"></i>
                    <i class="fa fa-minus-square-o icon-toggle" style="display: none;"></i>
                    <div class="overlay-text">
                        <h3>Select your desired software</h3>
                    </div>
                </div>
                <div class="section-content" id="section-2" style="display: none;">
                    <p>You can opt for:</p>
                    <ul>
                        <li>Operating systems tailored to your requirements</li>
                        <li>Antivirus software for enhanced security</li>
                        <!-- Add more software options here -->
                    </ul>
                </div>
            </div>
    
            <!-- Placeholder for Section 3 -->
            <div class="clickable-section">
                <div class="section-header-image" onclick="toggleSection(3)">
                    <img src="/images/500x100x.png" alt="Image 3 Placeholder">
                    <i class="fa fa-plus-square-o icon-toggle"></i>
                    <i class="fa fa-minus-square-o icon-toggle" style="display: none;"></i>
                    <div class="overlay-text">
                        <h3>Explore an amazing range of essential peripherals</h3>
                    </div>
                </div>
                <div class="section-content" id="section-3" style="display: none;">
                    <p>Enhance your setup with:</p>
                    <ul>
                        <li>Gaming gear for an immersive experience</li>
                        <li>Productivity tools to boost efficiency</li>
                        <!-- Add more peripheral options here -->
                    </ul>
                </div>
            </div>
    
            <p>To start creating your dream PC, <a href="https://www.instorepcbuilder.co.uk/crazygamer">access our PC Builder</a> below:</p>
            <!-- Image link to the PC builder -->
            <a href="https://www.instorepcbuilder.co.uk/crazygamer">
                <img class="pc-builder-image" src="/images/wtwbm_images/hm1-s1-b2.jpg" alt="Build Your PC" />
            </a>
            <p>Quotes are valid for 3 days, and if you need assistance, feel free to watch our tutorial or give us a call. We're here to help!</p>
        </div>
    </body>
    </html>

  2. #2
    Join Date
    Sep 2009
    Location
    Stuart, FL
    Posts
    12,500
    Plugin Contributions
    88

    Default Re: Ez page and awesome fonts loading issue's

    ... and what template are you updating to?

  3. #3
    Join Date
    Nov 2020
    Posts
    226
    Plugin Contributions
    1

    Default Re: Ez page and awesome fonts loading issue's

    wokiee its called, its on envato market https://themeforest.net/item/wokiee-...886.1701549224

    Code:
    testing.crazygamer.uk
    Last edited by flappingfish; 22 Dec 2023 at 03:50 AM.

  4. #4
    Join Date
    Sep 2009
    Location
    Stuart, FL
    Posts
    12,500
    Plugin Contributions
    88

    Default Re: Ez page and awesome fonts loading issue's

    Sorry, I'm unfamiliar with that template (or anything from themeforest).

  5. #5
    Join Date
    Apr 2009
    Posts
    418
    Plugin Contributions
    2

    Default Re: Ez page and awesome fonts loading issue's

    If your code is as typed you have a
    Code:
    <head>
    without a
    Code:
    </head>
    you have a lot of code before the
    Code:
    <head>
    Try putting
    Code:
    <head>
    at the top and changing the
    Code:
    <head>
    to
    Code:
    </head>
    You also do not have a
    Code:
    <doctype>
    or a
    Code:
    <html>
    tag.
    Mark Brittain
    http:\\innerlightcrystals.co.uk\sales\

  6. #6
    Join Date
    Nov 2020
    Posts
    226
    Plugin Contributions
    1

    Default Re: Ez page and awesome fonts loading issue's

    I corrected the code as suggested, sadly even with and without the url for font awesome included it isn't working. seems the website uses 4.7 and ive set the code to use that here but font awesome 4 is end of life, wondering if they did attempt to load but no file found so it just skipped the icons? Here's my new code on the off chance its me...

    Code:
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!-- Font Awesome CDN link -->
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    
    <html>
    <head>
    <style>
            /* Your existing styles */
            .clickable-section {
                margin-bottom: 20px;
                cursor: pointer;
                position: relative;
                text-align: center; /* Center text */
            }
    
            .section-header-image {
                width: 100%;
                height: auto;
                display: block;
                cursor: pointer;
                position: relative;
            }
    
            .section-header-image img {
                width: 100%;
                height: auto;
            }
    
            .down-arrow {
                position: absolute;
                top: 50%;
                right: 10px;
                transform: translateY(-50%);
                font-size: 20px;
            }
    
            .section-content {
                padding: 10px;
                display: none;
                text-align: left; /* Reset text alignment */
            }
    
            /* Style for the image link */
            .pc-builder-image {
                max-width: 100%;
                height: auto;
                display: block;
                margin: 20px auto; /* Centers horizontally */
            }
    
            /* Style for the image text */
            .clickable-section .overlay-text h3 {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                z-index: 10; /* Increase the z-index value */
                color: white; /* Set text colour to white */
                text-align: center;
            }
    
    @keyframes text-pulse {
        0% {
            text-shadow: 0 0 4px white;
        }
        50% {
            text-shadow: 0 0 8px white;
        }
        100% {
            text-shadow: 0 0 4px white;
        }
    }
    
    .clickable-section .overlay-text h3:hover {
        animation: text-pulse 1s infinite;
    }
    
            .ez-page-content {
                text-align: center; /* Center all text content */
            }
    
    .icon-toggle {
                position: absolute;
                top: 50%;
                right: 10px;
                transform: translateY(-50%);
                font-size: 20px;
                color: white;
                z-index: 15;
            }
    
    .icon-plus {
        position: absolute;
        top: 50%;
        right: 10px; /* Adjust as necessary */
        transform: translateY(-50%);
        font-size: 20px; /* Adjust size as needed */
        color: white; /* Change color if needed */
        z-index: 15; /* Make sure it's above other elements */
    }
    
    .icon-minus {
        position: absolute;
        top: 50%;
        right: 10px; /* Adjust as necessary */
        transform: translateY(-50%);
        font-size: 20px; /* Adjust size as needed */
        color: red; /* Change color if needed */
        z-index: 15; /* Make sure it's above other elements */
    }
    
        </style>
    
        <script>
           function toggleSection(sectionId) {
                var section = document.getElementById('section-' + sectionId);
                var iconPlus = section.previousElementSibling.querySelector('.fa-plus-square-o');
                var iconMinus = section.previousElementSibling.querySelector('.fa-minus-square-o');
    
                if (section.style.display === 'none') {
                    section.style.display = 'block';
                    iconPlus.style.display = 'none';
                    iconMinus.style.display = 'inline'; // or 'block'
                } else {
                    section.style.display = 'none';
                    iconPlus.style.display = 'inline'; // or 'block'
                    iconMinus.style.display = 'none';
                }
            }
        </script>
    </head>
    <body>
        <div class="ez-page-content">
            <h1>Get Your Dream PC Built!</h1>
    
            <!-- Customized clickable sections -->
            <div class="clickable-section">
                <div class="section-header-image" onclick="toggleSection(1)">
                    <img src="/images/500x100x.png" alt="Image 1 Placeholder">
                    <span class="fa fa-plus-square-o icon-toggle"></span>
                    <span class="fa fa-minus-square-o icon-toggle" style="display: none;"></span>
                    <div class="overlay-text">
                        <h3>Customize your PC with the perfect parts, your way</h3>
                    </div>
                </div>
                <div class="section-content" id="section-1" style="display: none;">
                    <p>With Crazygamer's PC Builder, you have the freedom to:</p>
                    <ul>
                        <li>Choose the components that match your preferences and needs</li>
                        <li>Explore a vast selection of top-quality parts</li>
                        <li>Easily navigate through compatible selections</li>
                    </ul>
                </div>
            </div>
    
            <!-- Placeholder for Section 2 -->
            <div class="clickable-section">
                <div class="section-header-image" onclick="toggleSection(2)">
                    <img src="/images/500x100x.png" alt="Image 2 Placeholder">
                    <i class="fa fa-plus-square-o icon-toggle"></i>
                    <i class="fa fa-minus-square-o icon-toggle" style="display: none;"></i>
                    <div class="overlay-text">
                        <h3>Select your desired software</h3>
                    </div>
                </div>
                <div class="section-content" id="section-2" style="display: none;">
                    <p>You can opt for:</p>
                    <ul>
                        <li>Operating systems tailored to your requirements</li>
                        <li>Antivirus software for enhanced security</li>
                        <!-- Add more software options here -->
                    </ul>
                </div>
            </div>
    
            <!-- Placeholder for Section 3 -->
            <div class="clickable-section">
                <div class="section-header-image" onclick="toggleSection(3)">
                    <img src="/images/500x100x.png" alt="Image 3 Placeholder">
                    <i class="fa fa-plus-square-o icon-toggle"></i>
                    <i class="fa fa-minus-square-o icon-toggle" style="display: none;"></i>
                    <div class="overlay-text">
                        <h3>Explore an amazing range of essential peripherals</h3>
                    </div>
                </div>
                <div class="section-content" id="section-3" style="display: none;">
                    <p>Enhance your setup with:</p>
                    <ul>
                        <li>Gaming gear for an immersive experience</li>
                        <li>Productivity tools to boost efficiency</li>
                        <!-- Add more peripheral options here -->
                    </ul>
                </div>
            </div>
    
            <p>To start creating your dream PC, <a href="https://www.instorepcbuilder.co.uk/crazygamer">access our PC Builder</a> below:</p>
            <!-- Image link to the PC builder -->
            <a href="https://www.instorepcbuilder.co.uk/crazygamer">
                <img class="pc-builder-image" src="/images/wtwbm_images/hm1-s1-b2.jpg" alt="Build Your PC" />
            </a>
            <p>Quotes are valid for 3 days, and if you need assistance, feel free to watch our tutorial or give us a call. We're here to help!</p>
        </div>
    </body>
    </html>
    Should font awesome be updated across my site whilst i have the live site running and time to perfect this?? The template was the only one showing as upto date with the latest zen so i assumed stuff would not be about to stop working potentially? It sounds like a headache to find and update all the classes across the template :/

  7. #7
    Join Date
    Apr 2009
    Posts
    418
    Plugin Contributions
    2

    Default Re: Ez page and awesome fonts loading issue's

    why are these lines outside the <head></head>?
    Code:
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!-- Font Awesome CDN link -->
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    Mark Brittain
    http:\\innerlightcrystals.co.uk\sales\

  8. #8
    Join Date
    Nov 2020
    Posts
    226
    Plugin Contributions
    1

    Default Re: Ez page and awesome fonts loading issue's

    This is why chatgpt isn't a completely reliable tool, it bases it's responses off what it's found online and people often share errors online and not success :s

    I just started with a description of what i wanted to achieve and then asked it to make changes to my liking, mainly copy and paste until i run into issues and i'm slowly learning as I go. I just edited it based on your feedback and i'm still not having any luck getting these icons to load up, assuming i haven't messed up the edit...

    Code:
    <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <html>
    </head>
    <style>
            /* Your existing styles */
            .clickable-section {
                margin-bottom: 20px;
                cursor: pointer;
                position: relative;
                text-align: center; /* Center text */
            }
    
            .section-header-image {
                width: 100%;
                height: auto;
                display: block;
                cursor: pointer;
                position: relative;
            }
    
            .section-header-image img {
                width: 100%;
                height: auto;
            }
    
            .down-arrow {
                position: absolute;
                top: 50%;
                right: 10px;
                transform: translateY(-50%);
                font-size: 20px;
            }
    
            .section-content {
                padding: 10px;
                display: none;
                text-align: left; /* Reset text alignment */
            }
    
            /* Style for the image link */
            .pc-builder-image {
                max-width: 100%;
                height: auto;
                display: block;
                margin: 20px auto; /* Centers horizontally */
            }
    
            /* Style for the image text */
            .clickable-section .overlay-text h3 {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                z-index: 10; /* Increase the z-index value */
                color: white; /* Set text colour to white */
                text-align: center;
            }
    
    @keyframes text-pulse {
        0% {
            text-shadow: 0 0 4px white;
        }
        50% {
            text-shadow: 0 0 8px white;
        }
        100% {
            text-shadow: 0 0 4px white;
        }
    }
    
    .clickable-section .overlay-text h3:hover {
        animation: text-pulse 1s infinite;
    }
    
            .ez-page-content {
                text-align: center; /* Center all text content */
            }
    
    .icon-toggle {
                position: absolute;
                top: 50%;
                right: 10px;
                transform: translateY(-50%);
                font-size: 20px;
                color: white;
                z-index: 15;
            }
    
    .icon-plus {
        position: absolute;
        top: 50%;
        right: 10px; /* Adjust as necessary */
        transform: translateY(-50%);
        font-size: 20px; /* Adjust size as needed */
        color: white; /* Change color if needed */
        z-index: 15; /* Make sure it's above other elements */
    }
    
    .icon-minus {
        position: absolute;
        top: 50%;
        right: 10px; /* Adjust as necessary */
        transform: translateY(-50%);
        font-size: 20px; /* Adjust size as needed */
        color: red; /* Change color if needed */
        z-index: 15; /* Make sure it's above other elements */
    }
    
        </style>
    
        <script>
           function toggleSection(sectionId) {
                var section = document.getElementById('section-' + sectionId);
                var iconPlus = section.previousElementSibling.querySelector('.fa-plus-square-o');
                var iconMinus = section.previousElementSibling.querySelector('.fa-minus-square-o');
    
                if (section.style.display === 'none') {
                    section.style.display = 'block';
                    iconPlus.style.display = 'none';
                    iconMinus.style.display = 'inline'; // or 'block'
                } else {
                    section.style.display = 'none';
                    iconPlus.style.display = 'inline'; // or 'block'
                    iconMinus.style.display = 'none';
                }
            }
        </script>
    </head>
    <body>
        <div class="ez-page-content">
            <h1>Get Your Dream PC Built!</h1>
    
            <!-- Customized clickable sections -->
            <div class="clickable-section">
                <div class="section-header-image" onclick="toggleSection(1)">
                    <img src="/images/500x100x.png" alt="Image 1 Placeholder">
                    <span class="fa fa-plus-square-o icon-toggle"></span>
                    <span class="fa fa-minus-square-o icon-toggle" style="display: none;"></span>
                    <div class="overlay-text">
                        <h3>Customize your PC with the perfect parts, your way</h3>
                    </div>
                </div>
                <div class="section-content" id="section-1" style="display: none;">
                    <p>With Crazygamer's PC Builder, you have the freedom to:</p>
                    <ul>
                        <li>Choose the components that match your preferences and needs</li>
                        <li>Explore a vast selection of top-quality parts</li>
                        <li>Easily navigate through compatible selections</li>
                    </ul>
                </div>
            </div>
    
            <!-- Placeholder for Section 2 -->
            <div class="clickable-section">
                <div class="section-header-image" onclick="toggleSection(2)">
                    <img src="/images/500x100x.png" alt="Image 2 Placeholder">
                    <i class="fa fa-plus-square-o icon-toggle"></i>
                    <i class="fa fa-minus-square-o icon-toggle" style="display: none;"></i>
                    <div class="overlay-text">
                        <h3>Select your desired software</h3>
                    </div>
                </div>
                <div class="section-content" id="section-2" style="display: none;">
                    <p>You can opt for:</p>
                    <ul>
                        <li>Operating systems tailored to your requirements</li>
                        <li>Antivirus software for enhanced security</li>
                        <!-- Add more software options here -->
                    </ul>
                </div>
            </div>
    
            <!-- Placeholder for Section 3 -->
            <div class="clickable-section">
                <div class="section-header-image" onclick="toggleSection(3)">
                    <img src="/images/500x100x.png" alt="Image 3 Placeholder">
                    <i class="fa fa-plus-square-o icon-toggle"></i>
                    <i class="fa fa-minus-square-o icon-toggle" style="display: none;"></i>
                    <div class="overlay-text">
                        <h3>Explore an amazing range of essential peripherals</h3>
                    </div>
                </div>
                <div class="section-content" id="section-3" style="display: none;">
                    <p>Enhance your setup with:</p>
                    <ul>
                        <li>Gaming gear for an immersive experience</li>
                        <li>Productivity tools to boost efficiency</li>
                        <!-- Add more peripheral options here -->
                    </ul>
                </div>
            </div>
    
            <p>To start creating your dream PC, <a href="https://www.instorepcbuilder.co.uk/crazygamer">access our PC Builder</a> below:</p>
            <!-- Image link to the PC builder -->
            <a href="https://www.instorepcbuilder.co.uk/crazygamer">
                <img class="pc-builder-image" src="/images/wtwbm_images/hm1-s1-b2.jpg" alt="Build Your PC" />
            </a>
            <p>Quotes are valid for 3 days, and if you need assistance, feel free to watch our tutorial or give us a call. We're here to help!</p>
        </div>
    </body>
    </html>

  9. #9
    Join Date
    Apr 2009
    Posts
    418
    Plugin Contributions
    2

    Default Re: Ez page and awesome fonts loading issue's

    So I would get some basic knowledge. Try starting Here https://www.w3schools.com/html/ You should be able to see what is still wrong with your code.
    Mark Brittain
    http:\\innerlightcrystals.co.uk\sales\

  10. #10
    Join Date
    Nov 2020
    Posts
    226
    Plugin Contributions
    1

    Default Re: Ez page and awesome fonts loading issue's

    i know what your thinking, why doesn't it start with
    Code:
    <!DOCTYPE html>
    sadly when i start it like that I see the following above my content
    Code:
    OCTYPE html>

 

 
Page 1 of 2 12 LastLast

Similar Threads

  1. v155 Awesome Fonts slowing down site pagespeed significantly
    By shags38 in forum Templates, Stylesheets, Page Layout
    Replies: 4
    Last Post: 10 Feb 2022, 12:33 AM
  2. Replies: 3
    Last Post: 29 Nov 2018, 02:44 PM
  3. SSL Issue with loading Checkout Page properly
    By southshorepizza in forum Basic Configuration
    Replies: 12
    Last Post: 13 Feb 2013, 11:17 AM
  4. Page Layout and Fonts going crazy?
    By bluesky5 in forum Templates, Stylesheets, Page Layout
    Replies: 12
    Last Post: 27 Jul 2009, 03:57 PM
  5. Fonts from HTML Editor, ALL Page Heading Fonts...
    By khopek in forum Templates, Stylesheets, Page Layout
    Replies: 1
    Last Post: 3 Feb 2008, 02:08 AM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
disjunctive-egg
Zen-Cart, Internet Selling Services, Klamath Falls, OR