, or a
with a class name
containing something like "instagram" or "section-title".
Replace ".instagram-heading" below with whatever class/tag you
find. If you're not sure, just paste what you see in dev tools
back to me and I'll fix the selector for you.
------------------------------------------------------------
STEP 2: Add your image URL
------------------------------------------------------------
Fourthwall's custom CSS can't reference an uploaded file directly
— you need a URL. Easiest options:
- Right-click your Instagram profile picture → "Copy image
address" (works, but Instagram links can expire/rotate)
- Upload the picture to your Fourthwall media/image library
(if available) and use that URL instead — more reliable
- Upload it anywhere you control (e.g. imgur.com) and use
that link
Paste that URL into the background-image line below (inside the
::before block), replacing the placeholder text.
IMPORTANT: Deliberately NO quotes around the URL below (no " or
' marks). Fourthwall's editor sometimes auto-converts straight
quotes into curly "smart quotes" when you paste, which breaks
the CSS and causes the "Invalid CSS" compile error. CSS actually
allows url(...) without quotes as long as the link itself has no
spaces or parentheses in it — Instagram CDN links are safe this
way.
============================================================ */
/* Make the heading a flex row so the image and text sit side-by-side */
.instagram-heading{
display: flex;
align-items: center;
gap: 14px; /* space between picture and text — adjust to taste */
}
/* The actual profile picture, inserted before the heading text */
.instagram-heading::before{
content: "";
display: inline-block;
width: 40px; /* size of the profile picture */
height: 40px;
border-radius: 50%; /* circle, like Instagram's own avatar */
background-image: url(https://instagram.fjed6-2.fna.fbcdn.net/v/t51.82787-19/528646641_17845571004542553_2495451562705385998_n.jpg?stp=dst-jpg_s150x150_tt6&efg=eyJ2ZW5jb2RlX3RhZyI6InByb2ZpbGVfcGljLmRqYW5nby44MDAuYzIifQ&_nc_ht=instagram.fjed6-2.fna.fbcdn.net&_nc_cat=109&_nc_oc=Q6cZ2gEXLAVA_EBlDnV08TeJWTPNue0T-hrFUNDcI-uSSfkTwgmr0fZBJkw4mAuSn4kpm28&_nc_ohc=y1KP_PS_h28Q7kNvwFbuZM_&_nc_gid=fPHpIKIYDqBZmXpyCE-w1g&edm=AP4sbd4BAAAA&ccb=7-5&oh=00_AQCFlb6zNfho981QgWuudtMKPRMiYat5Ic_eLhl-kXAbcQ&oe=6A65C29C&_nc_sid=7a9f4b);
background-size: cover;
background-position: center;
flex-shrink: 0; /* keeps it from getting squished */
border: 2px solid #ffffff; /* optional thin white ring, remove if unwanted */
}
/* ------------------------------------------------------------
HEADS UP: Instagram CDN links like this one expire/rotate
after a while (they're tied to a temporary access token in the
query string). If the picture stops showing up after some time,
just grab a fresh "copy image address" link from your profile
picture again and swap it into background-image above — or for
a permanent fix, upload the picture to Fourthwall's own media
library / imgur and use that link instead, since those don't
expire.
------------------------------------------------------------ */
}
#fw-section-announcement-bar-c3ed794e-2519-414b-82aa-d5f1a4935a1a {
--color-primary: #9a2ddf;
--color-primary-rgb: 154, 45, 223;
--color-background: #000000;
--color-background-rgb: 0, 0, 0;
--color-on-background: #ffffff;
--color-on-background-rgb: 255, 255, 255;
--color-on-primary: #ffffff;
--color-on-primary-rgb: 255, 255, 255;
--color-product-image-background: #ffffff;
--color-background-brightness: 0;
background-color: var(--color-background);
color: var(--color-on-background);
--primary-btn-bg: #9a2ddf;
--primary-btn-text: #ffffff;
--primary-btn-border-color: #ffffff;
--secondary-btn-bg: transparent;
--secondary-btn-text: #ffffff;
--secondary-btn-border-color: #ffffff;
}
#fw-section-password {
--font-heading-scale: 1.0;
--font-body-scale: 1.0;
}