I am confused as to the reason why this code is not functioning properly within the HTML Box Gadget on Google

I've been experimenting with Google Sites and trying to incorporate HTML and CSS without using inline styling. I followed some online guides that claimed it could be done by adding an HTML gadget and inserting the code. However, when I tried it, nothing seemed to work as expected.

I checked out a couple of links for guidance:

  1. Link 1
  2. Link 2

Oddly enough, when I tested the code from the second link, it worked perfectly. But as soon as I removed the scripting part, the styling failed just like my own code. Here's a simple example I attempted:

Global Version

<style>

#tester {
 padding: 100px;
 height: 500px;
 width: 500px;
 border: 1px solid #0F0;
 background-color: #ff0000;
}

</style>


<div id="tester">please work 0_0</div>

Inline Version

<div id="tester" style="padding: 100px; height: 500px; width: 500px; border: 1px solid #0F0; background-color: #ff0000;">please work 0_0</div>

Despite following the correct syntax, the formatting is not applied to the div. Switching to inline styling solves the issue, but that defeats the purpose of using the HTML gadget in the first place.

Any insights on what I might be missing?

Additionally, I want to note that the code itself is error-free. My main goal is to figure out how to make the non-inline version work in Google Sites' HTML box.

Edit: Here's a JSFiddle with the test code and desired outcome:

JSFiddle

Answer №1

Unfortunately, the HTML & CSS you add to the "HTML Box" will be isolated, so you won't be able to style elements outside of it on the page.

To make it work on my website, I used the following code:

<style type="text/css">
#tester {
padding: 100px;
height: 500px;
width: 500px;
border: 1px solid #0F0;
background-color: #ff0000;
}
</style>

<div id="tester">please work 0_0</div>

By default, custom CSS added in the HTML box doesn't apply while in editor mode. To view it correctly, click on MORE > Preview Page as Viewer in the top right corner of the page.

Check out the HTML BOX View

Preview as Viewer here

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Looking to implement a CSS banner image for seamless customization across multiple pages

Is it possible to change the banner image easily in the CSS without having to update every HTML page? I don't want the image source to be directly on the HTML pages. How can this be achieved? Additionally, there are already two references in the CSS: ...

Load a page and sprinkle some contents with a slide effect

I am brand new to jQuery and just starting out, so please excuse me if this question seems basic or silly. I would like the header and footer of my page to stay in place while the center content slides in from the right side when the page loads. This websi ...

What is the best way to ensure that text highlighting appears consistent on all browsers?

I am facing an issue with the appearance of text highlighting between Chrome and Firefox browsers. Is there a way to ensure consistency in the appearance across all browsers? a { text-decoration: none; font-weight: 900; font-size: 4vw !impo ...

Select various icons within a div that already has a click event attached to it

Having an issue with a clickable div element. Working on an Ionic 2 audio application where I have a series of divs each containing different icons. Specifically, each div has two icons - one for downloading the audio and the other for playing it. I wan ...

How to create a calendar selection input using PHP?

Before I start writing the code myself, I am searching to see if there is already a solution available or if someone has previously outsourced the code. Below is an example of my date selection: https://i.sstatic.net/KqIDH.png I want to create a feature ...

applying conditional rendering in vue.js

I'm currently working on developing a chat application using the guidelines outlined in this tutorial: https://socket.io/get-started/private-messaging-part-1/ One of my goals is to customize the appearance of the messages, so that when a message is s ...

Enlarging and cutting video footage

I have developed an app that features a code enabling users to capture photos using their computer-connected camera. How it Works: A webcam is utilized to display a video element with the camera as its source: function onSuccess (stream) { this.video.s ...

Set the page to be rigid instead of flexible

I'm struggling to lock this webpage in place, so it doesn't resize when the browser window changes. The text keeps collapsing whenever I adjust the size of the browser, and I can't figure out what's going wrong. Can someone please help ...

Creating a color-changing checkbox toggle in Bootstrap 5

Is it possible to customize the color of a Bootstrap 5 switch without changing it site-wide? I want some checkbox switches to have a unique color. Most tutorials online only cover how to change colors globally or use images, but I'm hoping to achieve ...

Discover the secret to extracting a unique style from inspect mode and incorporating it into your CSS design

I'm currently working on my angular project and I've imported the ngx-editor. My goal is to reduce the height of the editor, but I'm facing some challenges. After inspecting the element, I was able to adjust the height successfully within th ...

Struggling to close modal popup after submitting form

click here for imageCurrently, I am working with the bootstrap modal plugin to create an inquiry form. The issue I am facing is that even though I am using the "ng-submit" directive to save the form details, when I click submit, the form submits successful ...

Dynamic rows in an Angular 2 Material data table

I'm currently working on dynamically adding rows to an Angular 2 Data Table ( https://material.angular.io/components/table/overview) by utilizing a service called "ListService". This service provides me with the columns ("meta.attributes") to be displ ...

How can I arrange a table in Angular by the value of a specific cell?

Here's the current layout of my table: Status Draft Pending Complete I'm looking for a way to sort these rows based on their values. The code snippet I've been using only allows sorting by clicking on the status header: onCh ...

Datatables jQuery provides the ability to dynamically assign array index values to the 'sClass' property

Consider this code snippet: let dataSet = [ ['1', 'Safari','Mac OS X','13.1','A','N/A'], ['2', 'Chrome','Windows 10','90','B','N/A&a ...

Is there a way to apply CSS styles to a specific word within a div that corresponds to the word entered in the search box?

Using a searchbox, you can enter words to find pages with the searched-for word in the page description. If the word is found in the description, a link to the page along with the highlighted word will be displayed. However, I am encountering an issue wher ...

Perform a Selenium action to click on each individual HTML 'a' tag on

I am attempting to automate clicking on all the "a" tags within a website using Selenium in Python. However, I found that all the "a" tags I want to click have the same structure as shown in the code snippet below. I tried clicking them by their class si ...

Restricting the Zoom Functionality in a Web-Based Project on a Touch-Enabled Display

I am currently working on a project that is web-based and runs on localhost. I need to prevent users from zooming in on the user interface. Is there a way to accomplish this using JavaScript? And can I achieve this restriction specifically on Google Chrome ...

the hidden input's value is null

I am encountering an issue with a hidden input in this form. When I submit the form to my API, the value of the input is empty. Isbn and packId are both properties of a book model. However, for some reason, the value of packId is coming out as empty. & ...

Fixed position of the rotated button placed at a 90-degree angle on the right side of the screen

Recently, I had a project where I had to include a div that was rotated 90 degrees and fixed to the right side of the screen. The challenge was making sure that as you scrolled down, the button moved along with the screen while maintaining responsiveness. ...

The header menu is not appearing on the gray bar in Internet Explorer

Having some issues with IE8, specifically on the website . The website header is not displaying correctly in IE8, but it works fine in Chrome and Firefox. Another issue is that the white area of the site is not 960px width as intended... ...