✨ GPT Wall Style Guide

This wall is a small (and not claiming to be complete...) guide on how you can style your own wall using only the allowed HTML and CSS code — as the platform imposes certain limitations on what you can and can't do.

Entry Fields

The design of your Wall has two main entries apart from your avatar, background images, and color settings: the "Title" and the "Description" field.

The "Title" field only accepts text and displays a preformatted title for your wall. You can skip it if you don't want it, so you can make your own title, or you can use styles (see below) in the Description field to make it appear like you want.
The "Description" field is where the magic happens! It accepts a variety of HTML elements, including styles, which you can use to fully customize your wall. Even all the other presets like background images and color settings. Just your avatar still needs to be uploaded and approved the regular way. To use the full HTML and CSS style capabilities you cannot use the regular entry field but need to click the "<>" symbol to enter the source code editor.
The Key CSS Limitation

If you know a bit of HTML and styles already: The major limitation is that you cannot use any inline styles, like this:

<span style="color: red;">This text should be red but isn't.</span>

BUT: You can use the <style> element to create a CSS rule like this:

<style>
  .red {
    color: red;
  }
</style>

...and apply it to your <span> like this: <span class="red">This text is actually red</span>, which appears as: This text is actually red

This text and the general profile look above have been designed using the following <style> element:

<style>
/* Styles used for this description text with explanations */
  /* 1. General Text Container (Wrapper for all content) */
  .desc-guide {
    font-family: 'Segoe UI', Arial, sans-serif; /* Specifies the preferred font for the element */
    padding: 15px; /* Sets the space between the element's content and its border */
    background-color: #fcfcfc; /* Sets the background color of the element */
    border-radius: 12px; /* Rounds the corners of the element's border */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border: 3px solid transparent; /* Sets the width, style, and color of the element's border */
    border-image: linear-gradient(45deg, #007bff, #00ff88); /* Specifies an image or gradient to be used as the border */
    border-image-slice: 1;
  }

  /* 2. Section Headers for Visual Separation */
  .section-header {
    font-size: 1.2em; /* Sets the size of the font */
    font-weight: bold; /* Sets the thickness (boldness) of the characters */
    color: #007bff; /* Sets the foreground color of the text */
    margin-top: 20px; /* Sets the space outside the element's top border */
    margin-bottom: 10px;padding-bottom: 5px;border-bottom: 2px solid #e0e0e0;
  }

  /* 3. Custom Text Class for Red (The Limitation Example) */
  .red {color: #ff4500;font-weight: bold;}

  /* 4. Highlighted Strong Tags (like Title/Description) */
  .desc-guide strong {color: #007bff;}

  /* 5. Emphasized Text */
  .desc-guide em {
    font-style: normal; /* Specifies the font style for the text (e.g., normal, italic) */
    font-weight: 600;color: #333;background-color: #ffffc0;padding: 1px 4px;border-radius: 4px;
  }

  /* 6. Code Block Formatting */
  .code-block {background: #e9ecef;margin: 15px;border-left: 5px solid #00c774;font-family: monospace;margin-top: 10px;font-size: 0.9em;}

  /* 7. Inline Code Styling */
  .code-inline {font-family: monospace;background: #e9ecef;padding: 1px 4px;border-radius: 3px;color: #d63384;}

  /* 8. List Items (using arrows) */
  .list-arrow {margin-bottom: 10px;padding: 5px 0 5px 15px;font-size: 0.95em;}

  /* 9. Box for "Where the Magic Happens" */
  .magic-box {background-color: #e6fffa;border: 1px solid #00a884;padding: 10px;border-radius: 8px;margin: 10px 0;}

  /* 10. Paragraph "The following" */
  p.thefollowing {text-align: center; font-style: italic; color: #444;}
  
  /* 11. The horizontal line */
  .desc-guide hr {border: 0; height: 1px; background-image: linear-gradient(to right, rgba(0, 0, 0, 0), #007bff, rgba(0, 0, 0, 0)); margin: 20px 0;}

/* Styles used to change the look of the existing wall elements outside the "description" */
  /* Lift the width limit of the wall content from 66% to 100% */
  #content .col-8 {
    width: 100%; /* Sets the width of an element */
  }

  /* Give the background of the profile information round edges */
  div.profile-avatar-bg{border-radius: 20px;}

  /* Make the avatar round and let it spin */
  div.profile-avatar-bg img {
    animation: avatar-spin 5s linear infinite; /* Applies an animation to an element */
    border-radius: 50%;
    object-fit: cover; /* Specifies how an img or video should be resized to fit its container */
    width: 100px;
    height: 100px; /* Sets the height of an element */
  }
  @keyframes avatar-spin {
    0% {transform: rotate(0deg); /* Applies a 2D or 3D transformation to an element (e.g., rotate, scale) */}
    100% {transform: rotate(360deg);}
  }

  /* Anmitate the rating stars */
  .jStar {
    animation: star-sequence 1.0s steps(5) infinite alternate;
  background-origin: border-box; /* Specifies the background positioning area */}
  @keyframes star-sequence {
    0% {background-position-x: 0; /* Sets the starting position of the background image on the x-axis */}
    25% {background-position-x: -25px;}
    50% {background-position-x: -50px;}
    75% {background-position-x: -75px;}
    100% {background-position-x: -100px;}
  }

  /* change the profile name Title and animate it */
  h1.title {
    font-size: 4rem;color: #000;
    text-shadow: 2px 2px 0 #FF00EB, 5px 5px 0 #4DD8FB; /* Adds a shadow effect to the text */
    animation: shadow-dance 2s infinite;
  }
  @keyframes shadow-dance {
    0%, 100% {text-shadow: 2px 2px 0 #FF00EB, 5px 5px 0 #4DD8FB;}
    50% {text-shadow: -2px -2px 0 #4DD8FB, -5px -5px 0 #FF00EB;}
  }

  /* Animate the standard profile title */
  .profile-title-headline {
    display: inline-block; /* Specifies the display behavior of an element (e.g., block, inline-block) */
    transform-origin: center center; /* Sets the point around which a transformation is applied */
    backface-visibility: hidden; /* Defines if the back face of an element should be visible when facing the user */
    transform-style: preserve-3d; /* Specifies how nested elements are rendered in 3D space */
  animation: flipX 2s linear infinite;}
  @keyframes flipX {
    0% { transform: rotateX(0deg); }
    50% { transform: rotateX(180deg); }
    100% { transform: rotateX(360deg); }
  }
</style>

The following guide provides (some) examples of what you can do to design your wall:

Basic HTML elements you can use to style your wall

These are the basics:
Element
Code Example
Rendered Example
Description
<h1>
<h1>Main Heading</h1>

Main Heading

Top-level heading (unstyled)
<h2>
<h2>Subheading</h2>

Subheading

Secondary heading (unstyled)
<p>
<p>This is a paragraph.</p>

This is a paragraph.

Paragraph (unstyled)
A new paragraph is automatically made when you hit "Enter" in the editor.
<br>
<p>This is a paragraph.<br>With a new line.</p>

This is a paragraph.
With a new line.

line break (unstyled)
If you want just a line break hit shift-enter in the editor.
<strong>
<strong>Strong</strong>
Strong
Strong emphasis (semantic bold)
You can also achieve this by marking text and hitting ctrl+b.
<em>
<em>Emphasized</em>
Emphasized
Emphasis (semantic italic)
You can also achieve this by marking text and hitting ctrl+i.
<blockquote>
<blockquote>This is a blockquote.</blockquote>
This is a blockquote.
Block quotation
<img>
<img src="https://example.com/logo.svg">
logo.svg
Image (unstyled)
<a>
<a href="https://www.gayporntube.com/">Example link</a>
Example link
Link (unstyled, uses browser defaults)
<sup>
E=mc<sup>2</sup>
E=mc2
Superscript text
<sub>
H<sub>2</sub>O
H2O
Subscript text

You can generally give all of these elements a new look using the <style> element.

If you use this kind of styling it will give ALL elements of that kind a new look. Examples:
Element
Code Example
Rendered Example
Description
<h1> Style
<style>
 h1 {
  color:navy;
  text-align:center;
 }
</style>
<h1>Main Heading</h1>

Main Heading

Top-level heading with color and center alignment using <style>
<h2> Style
<style>
 h2 {
  color:darkgreen;
 }
</style>
<h2>Subheading</h2>

Subheading

Secondary heading with color using <style>
<p> Style
<style>
 p {
  font-size:16px;
  line-height:1.5;
  color:#333;
  text-align:right;
 }
</style>
<p>This is a paragraph.</p>

This is a paragraph.

Paragraph with font size, line height and color, aligned to the right using <style>

You can make the styling more specific by using the class-attribute on elements and only style elements that have this class

Some examples:
Element
Code Example
Rendered Example
Description
<span> Style
<style>
 .important {
  color:red;
  font-weight:bold;
 }
</style>
<p>Paragraph 
  <span class="important">Inline Text</span>
still the paragraph</p>

Paragraph Inline Text still the paragraph

An element with class="important" will get the red color and be bold using the <style> we made for class .imporant
In this example we have an inline text (<span>) using that class inside a paragraph (<p>). Inline text is used inside other elements to give its text content a different look
<img> Style
<style>
 img.style {
  border:1px solid red;
 }
</style>
<img class="style" src="https://example.com/logo.svg">
logo.svg
We only style images with class "style" with a red border using <style>
Styles can and should be combined into a single <style> element.
<style>
 .highlight {
  background: yellow;
  font-weight: bold;
 }
 .some_profile-title-headline {
  font-size: 40px;
  background: -webkit-linear-gradient(
   to right,
   #FF00EB 0%, #FF00EB 27%,
   #4DD8FB 27%, #4DD8FB 63%,
   #FF8500 63%, #FF8500 100%
  );
  background: linear-gradient(
   to right,
   #FF00EB 0%, #FF00EB 27%,
   #4DD8FB 27%, #4DD8FB 63%,
   #FF8500 63%, #FF8500 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
 }
 .bg-image {
  position: relative;
  width: 331px;
  height: 45px;
  color: black;
  text-align: center;
  line-height: 50px;
  font-weight: bold;
  overflow: hidden;
 }
 .bg-image::before {
  content: "";
  position: absolute;
  top:0; left:0; right:0; bottom:0;
  background-image: url('../static/images/logo.svg');
  background-size: cover;
  opacity: 0.5;
 }
 .bg-image span {
  position: relative;
 } 
</style>
<p class="highlight">Highlighted text</p>
<div class="some_profile-title-headline">GAYPORNTUBE</div>
<p class="bg-image"><span>Text on semi-transparent BG</span></p>

Highlighted text

GAYPORNTUBE

Text on semi-transparent BG

Combined style for different classes:
A highlighted paragraph with class "highlight"
A color formatted profile headline
A paragraph with a semi-transparent background image and inline text on top

Some Elements on the site have an ID, not a class. These can be styled the same way as elements with a class, just using a different notation. #id instead of .class

Example:
Element
Code Example
Rendered Example
Description
<style> for a unique ID
<style>
 #nav {
  background-color: red;
 }
</style>
See the navigation on top of the page,
it has a red background now.
ID selector example

<div>-Elements are the mighty containers of your wall. They can be used to style and structure basically everything. Their use is a bit advanced.


This whole "table" is made purely out of 100s of div containers all styled to make them display like this. Examples:
Element
Code Example
Rendered Example
Description
<div>
<div>A simple div</div>
A simple div
Block container (unstyled)
<div> Style (Simple)
<style>
 div {
  background:#eef;
  padding:10px;
  border:1px solid #ccc;
  width:200px;
 }
</style>
<div>
 A simple div styled
</div>
A simple div styled
Block container with background, padding, border, width using <style>
<div> Style (Nested)
<style>
 .parent-div { background:#dde; padding:5px; }
 .child-div { background:#ccd; padding:5px; }
</style>
 <div class="parent-div">
  Parent div
 <div class="child-div">
  Child div
 </div>
</div>
Parent div
Child div
Nested divs example using <style>
<div> Style (Text)
<style>
 .styled-text {
  color:white;
  background:black;
  font-size:20px;
  padding:5px;
 }
</style>
<div class="styled-text">
 Styled text
</div>
Styled text
Div with styled text using <style>
<div> Next to Each Other (Flex)
<style>
 .flex-container {
  display: flex;
  gap: 10px;
  padding: 5px;
  border: 1px solid #ccc;
 }
 .flex-item {
  width: 50%;
  background: #cceeff;
  padding: 10px;
  text-align: center;
 }
</style>
<div class="flex-container">
<div class="flex-item">Div 1</div>
<div class="flex-item">Div 2</div>
</div>
Div 1
Div 2
Uses display: flex; on a parent container to place block elements side-by-side. Excellent for horizontal alignment.
<div> Layered (Absolute Positioning)
<style>
 .layer-parent {
  position: relative;
  width: 200px;
  height: 80px;
  border: 1px dashed #999;
 }
 .layer-div-a {
   position: absolute;
   top: 10px; left: 10px;
   width: 150px; height: 50px;
   background: rgba(255, 0, 0, 0.7);
   color: white;
   padding: 5px;
 }
 .layer-div-b {
   position: absolute;
   top: 20px; left: 20px;
   width: 150px; height: 50px;
   background: rgba(0, 0, 255, 0.7);
   color: white;
   padding: 5px;
 }
</style>
<div class="layer-parent">
 <div class="layer-div-b">Layer B (Bottom)</div>
 <div class="layer-div-a">Layer A (Top)</div>
</div>
Layer B (Bottom)
Layer A (Top)
Uses position: relative; on the parent and position: absolute; on the children.
<div> Mondrian Style Art
using a grid layout
(like this style guide)
<style>
 .mondrian-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: 100px 50px 120px;
  width: 250px;
  height: 270px;
  border: 1px solid black;
 }
 .mondrian-grid > div {
  border: 1px solid black;
 }
 .red {
  background: red; grid-area: 1 / 1 / 2 / 2; 
 }
 .white-tall {
  background: white; grid-area: 1 / 2 / 3 / 3;
 }
 .blue-wide {
  background: blue; grid-area: 2 / 1 / 3 / 2;
 }
 .yellow {
  background: yellow; grid-area: 3 / 1 / 4 / 3;
 }
 .white-small {
  background: white; grid-area: 1 / 3 / 4 / 4;
 }
</style>
 <div class="mondrian-grid">
 <div class="red"></div>
 <div class="white-tall"></div>
 <div class="blue-wide"></div>
 <div class="white-small"></div>
 <div class="yellow"></div>
</div>
 
 
 
 
 
A fun use of display: grid; to create complex layouts. grid-area is used to make divs span multiple rows and columns, like in abstract art.

gayporntube.com

Access Advisory – Adults-Only Website

You are about to enter gayporntube, a website that contains explicit material (pornography). Access to this site is strictly restricted to individuals who meet the following requirements:

  • You must be at least 18 years old, or the legal age of majority in your jurisdiction, whichever is greater.
  • By entering, you represent and warrant that you will not allow any minor access to this website or its services.
  • You acknowledge and accept full responsibility for your actions while using this website.

Parental Advisory

If you are a parent or guardian, it is your responsibility to ensure that age-restricted content is not accessible to minors under your care. We strongly encourage the use of parental control tools and other protective measures to block access to this site. gayporntube utilizes the "Restricted To Adults" (RTA) website label, making it compatible with filtering software and parental controls.

Legal Disclaimer

By entering gayporntube, you confirm that you meet the legal requirements for accessing this site. gayporntube disclaims any liability for:

  • Misrepresentation of age by users.
  • Failure to implement parental controls or other protective measures by parents or guardians.

The platform is not responsible for any unauthorised or improper use of its content. Parents and guardians bear full responsibility for ensuring minors do not access this site.