whats wrong with this html doc?

Aragon Burner

Aragon Burner

Addicted
Joined
Nov 27, 2008
Messages
841
Reaction score
80
FP$
3,967
Code: 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Join Our Discord Community</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }
        .container {
            max-width: 600px;
            margin: 0 auto;
        }
        h1, p {
            text-align: center;
        }
        .button-container {
            text-align: center;
            margin: 20px 0;
        }
        .discord-button {
            display: inline-block;
            padding: 10px 20px;
            font-size: 16px;
            text-decoration: none;
            background-color: #7289DA;
            color: #fff;
            border-radius: 5px;
            cursor: pointer;
        }
        .discord-button:hover {
            background-color: #5b6e91;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Join Our Discord Community!</h1>
        <p>We're excited to connect with you on Discord and build a vibrant community together. Join our Discord channel to stay updated, chat with fellow members, and participate in exciting discussions and events!</p>
        <div class="button-container">
            <a href="https://discord.gg/burnerproject" class="discord-button" target="_blank">Join Discord Channel</a>
        </div>
        <p>We look forward to seeing you there!</p>
    </div>
</body>
</html>

It;s causing one of the widgets on my page to be squezed out of its original dimensions.
 
Works fine as a standalone page:

1706595198054.webp

Can you demonstrate how you're trying to use it?
 
Mitchy71 said:
im trying to add it in an html widget so it shows below my nodes
Click to expand...
Ah, gotcha, well you typically don't want a full HTML doc for that, you just want to treat it as if it's essentially inside of a container, because it is. So ideally you'd just take the following and add it into the HTML section of the widget:

HTML: 
    <div class="container">
        <h1>Join Our Discord Community!</h1>
        <p>We're excited to connect with you on Discord and build a vibrant community together. Join our Discord channel to stay updated, chat with fellow members, and participate in exciting discussions and events!</p>
        <div class="button-container">
            <a href="https://discord.gg/burnerproject" class="discord-button" target="_blank">Join Discord Channel</a>
        </div>
        <p>We look forward to seeing you there!</p>
    </div>

If you want to keep the CSS definitions, then I suggest adding in the classes to Extra.less, but you might want more unique class names so that it doesn't interfere with other parts of XF

For instance, change container to discordContainer, button-container should be sufficient as it is.
 
Mitchy71 said:
i have no idea how to do that Gen lol
Click to expand...
I'm assuming you're using XF, if that's wrong, please correct me 🙂

In admin goto Appearance > Templates and locate extra.less. Paste the following into it:

HTML: 
.container {
            max-width: 600px;
            margin: 0 auto;
        }
.discord-button {
            display: inline-block;
            padding: 10px 20px;
            font-size: 16px;
            text-decoration: none;
            background-color: #7289DA;
            color: #fff;
            border-radius: 5px;
            cursor: pointer;
        }
.discord-button:hover {
            background-color: #5b6e91;
        }

I would suggest changing container to discordContainer (in which case you'd want to change div class="container" to div class="discordContainer" in the html widget code. It just limits the possibility of any potential conflicts.
 
Ok i did that and here we go 🙂

It added the new widget code and it looks right... But look at what it does to my widget above...

36ac98b93564ac1978abeae3b95c282d.webp
 
I'm not seeing the widget in that screenshot, did you alter it?
 
It looks ok, could do with a center alignment, perhaps, but it looks to be fine otherwise.
 
No i gave up lol It kept breaking the style and squeezing the modules... But thank you so much for all the help Gen i truly appreciate it
 
If you still have it setup -- can you show me a screenshot of it in context to the rest of the modules, so I can see how it's breaking them? We should be able to get it fixed 🙂
 
it;'s ok Gen i dont wanna mess around with it. It's annoying me so much haha. I'll try figuring it out another time 😉
 
Mitchy71 said:
it;'s ok Gen i dont wanna mess around with it. It's annoying me so much haha. I'll try figuring it out another time 😉
Click to expand...
lol, alright, no worries! If you ever need a hand with it, or anything else, don't hesitate to ask!
 
You must log in or register to reply here.

About Us

Since 2007, Forum Promotion has specialized in providing advertising solutions to webmasters looking to promote their communities. We pride ourselves in being the bridge that connects forum administrators, bloggers, and more.

Sponsors

Affiliates

    Universal Gaming The Coffee House

Stay Connected

Back
Top Bottom