Make the File Block a bulleted list

  • Hi All,
    We have a Work, Health and Safety page with several guides and tools to download. Each file has a brief description, then the “File Block” for downloading. I have made a “fake” bullet point using a glyph in the title of files, however, I would like to make the “File Block” a [bullet point] list item. Is this possible with custom CSS? Cheers Andrea

    • This topic was modified 2 years, 1 month ago by Jan Dembowski. Reason: Moved to Fixing WordPress, this is not an Everything else WordPress topic

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)
  • Moderator bcworkz

    (@bcworkz)

    Use the :before CSS pseudo-element.
    https://www.w3docs.com/learn-css/before.html

    Use other CSS selectors that pick out the elements that you want to appear bulleted, appending :before to them. Use the content: declaration to specify what glyph you want as a bullet point.

    Many nav menus use the related :after to display a little down triangle that indicates there is a sub-menu below that element. You could examine the CSS for such a menu for guidance on how to implement what you want.

    Thread Starter Andrea

    (@ahgarvey)

    Hi @bcworkz!

    Thank you for your response, most appreciated! Have a few dopey questions, would I add the “before” to “wp-block-file”? Where do I put this code? In the site’s primary CSS? Can it be page specific?

    .wp-block-file:before {
    content:”? “;
    }

    Cheers A

    Moderator bcworkz

    (@bcworkz)

    Yes, append to .wp-block-file. You can make it page specific by including a unique body class value in the selectors. Like this:

    .page-id-17371 .wp-block-file:before {
    content: '● ';
}

    If your theme is not subject to periodic updates, this can go in its style.css file. It’ll get wiped out if the theme updates though. In the case of theme updates, it’s best to add custom CSS to the Additional CSS section of the customizer.

    Thread Starter Andrea

    (@ahgarvey)

    Hi @bcworkz!

    I used the “page specific” code today and it worked like a treat! I have now created custom CSS so that it is used throughout the site.

    MANY thanks for your prompt and helpful assistance, MOST appreciated!

    Kind regards,
    Andrea

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Make the File Block a bulleted list’ is closed to new replies.