<![CDATA[StoryForge Authors Network: Current Works Widget}]]> https://writers.storyforgeauthors.org/pages/view/74/current-works-widget https://writers.storyforgeauthors.org/pages/view/74/current-works-widget Mon, 15 Dec 2025 21:19:58 -0600 https://writers.storyforgeauthors.org/pages/view/74/current-works-widget <![CDATA[Current Works Widget]]> 📚 How to Build Your "Current Works" Profile Widget

 

Step 1: Create the Detailed Book Page (Crucial Prerequisite)

Before you create the widget, you need a page that links to it!

  1. Look to the left menu of your screen and click on the "Pages" link.

  2. Create a New Page for your book (e.g., "The Dragon's Eye").

  3. Fill this page with your full book description, purchase links, and any other details.

  4. Save the Page and copy the URL (web address) from your browser's address bar. This is the link you will use in the widget.

Step 2: Add the Widget

  1. Go to your Profile Page.

  2. Add a Custom HTML Widget: Drag a new "Custom HTML" widget to the top of the main content column on your profile page.

  3. The widget configuration box will open.

Step 3: Copy and Paste the Code

Crucial: Copy ALL of the code below and paste it into the large content box of the Custom HTML Widget.


<div style="border: 1px solid #0056b3; padding: 15px; margin: 15px 0; background-color: #f0f8ff; border-radius: 5px;">
   <h3 style="margin-top: 0; color: #0056b3; border-bottom: 2px solid #0056b3; padding-bottom: 5px;">
       CURRENT WORK: [BOOK TITLE HERE]
   </h3>
   
   <div style="display: flex; gap: 15px; align-items: flex-start;">
       
       [IMAGE] 
       <div style="flex-grow: 1;">
           <p style="margin-top: 0; line-height: 1.5; text-align: justify;">
               **[Change this]** This is where you place your book's description. The Dragon's Eye is a gripping epic fantasy about a young sorceress who discovers she is the only one who can unlock a powerful relic.
           </p>
           <p>
               <a href="[PASTE THE URL OF YOUR BOOK'S PAGE HERE]" style="color: #1e7e34; text-decoration: none; font-weight: bold;">
                   View Book Page &rarr;
               </a>
           </p>
       </div>
   </div>
</div>

 

Step 4: Insert Your Cover Image

  1. Delete the placeholder: Inside the editor, delete the entire line that says [IMAGE].

  2. Upload Your Image: Use the text editor's image upload tool (drag-and-drop or button) to place your book cover image exactly where the [IMAGE] line was.

  3. Adjust Image Size: Click on the inserted image and resize it to a width of 150 pixels for a clean, professional look.

Step 5: Customize the Placeholders

You must change the information in the three areas below:

AreaPlaceholder TextWhat to Change It To
Widget Title[BOOK TITLE HERE]Your book's actual title (e.g., The Dragon's Eye).
Book Link[PASTE THE URL OF YOUR BOOK'S PAGE HERE]The full URL you copied in Step 1.
Description**[Change this]** This is where you place...Replace the bracketed text and sample description with your book's actual summary.

Step 6: Save and Repeat

  1. Click the "Save" button on the widget configuration.

  2. If you have more works, add a new Custom HTML Widget for each one and repeat Steps 2 through 5.

]]> Christopher Schlosser - Administrator