Can I add CSS when creating a page directly in payload?

its_just_rich_32241last year

7

• 

  epickaulast year

  Do you mean the admin ui should look like a tailwind card or the frontend?

  
  https://payloadcms.com/docs/admin/customizing-css

  (admin)

  
  

  can you show the frontend code?

• 

  its_just_rich_32241last year

  My requirement is to add CSS that gets displayed on the front end, so you can say the user is entering the actual CSS code (not really "user", it's going to be me) in the editor (the front end - actually adding content that will be displayed on the web pages). I'm so sorry I don't know the correct vernacular yet!

  
  
  

  I don't care about what the Admin UI looks like, I need to be able to add/edit CSS to the input that the user entered when they built the page(s).

• 

  epickaulast year

  ah okay, if you dont want to add it directly to the frontend block, you could add a extra code block at backend and output this

  
  
  https://payloadcms.com/docs/fields/code
• 

  its_just_rich_32241last year

  A simple use case: I'm building a page in the editor in Payload, and in the Content block there are several columns, of each individual column, I need to display within a CSS tailwind Card.

  
  
  

  I don't think that's it either

  @216906474109140992

  I'm so sorry I'm struggling to explain this, it's actually a simple problem.... I'm building/editing a page in the actual admin editor (

  https://mydomain.payloadcms.app/admin/collections/pages/6577804adfc9283a92aa22d4

  ) and on that admin page is a Hero and a Content tab. In the Content tab there's one big Layout, inside of that is a Content Block. Inside of the Content Block are Columns (Column 01 through Column 07). What I need to do is get the content of each Column to appear within a CSS Card when it's published for the public to see.

  
  
  

  Is there a way to do that?

• 

  epickaulast year

  yeah so either you add a extra field at the column field ( extra group) or add the code directly at frontend.

• 

  its_just_rich_32241last year

  @216906474109140992

  I tried a few different things none of which worked. I've been in the front end but haven't had any success since my edits to the templates affect all of the rest of the pages, which I don't want. Was hoping there was an easier way to make this happen, possibly in the admin pages where I actually compose the page(s). What search strings would you suggest I look for to solve this? Again, my apologies for not knowing more about Payload yet.

  
  
  

  hi, I'm trying to connect to my Youtube account via the @googleapis/youtube package to display video data on my page. I keep getting "error denied" but can't seem to troubleshoot why. Error is "Requests from referrer are blocked" even though I followed detailed instructions....

  
  
  
  

  import React, { Fragment } from 'react'

  
  

  import Link from 'next/link'

  
  
  

  import youtubeService from '../../../../youtube'

  
  

  import { Gutter } from '../../_components/Gutter'

  
  
  

  export async function PlaylistPage() {

  
  

  const playlistId = 'UUnIyytMWGt41WZAc6QocKcQ' // Replace with your actual YouTube playlist ID

  
  

  const response = await youtubeService.playlistItems.list({

  
  

  part: 'snippet',

  
  

  maxResults: 50, // Set the number of videos you want to retrieve

  
  

  playlistId,

  
  

  })

  
  
  

  const playlistItems = response.data.items

  
  
  

  return (

  
  

  <div>

  
  

  <h1>YouTube Playlist</h1>

  
  

  <ul>

  
  

  {playlistItems.map(item => (

  
  

  <li key={item.id}>

  
  

  <a

  
  

  href={

  https://www.youtube.com/watch?v=${item.snippet.resourceId.videoId}}
  

  target="_blank"

  
  

  rel="noopener noreferrer"

  
  

  >

  
  

  {item.snippet.title}

  
  

  </a>

  
  

  </li>

  
  

  ))}

  
  

  </ul>

  
  

  </div>

  
  

  )

  
  

  }

  
  
  

  export default PlaylistPage

  
  
  

  I suppose I'd like to rule out any issues with making a 3rd party API call from a Payload page - the above file is how I'm trying it.... Does Payload need me to do it a different way?

• 

  seanzubrickas

  last year

  Hey again Rich, you're likely going to have better luck opening this as a new thread since it's a separate topic