× Got a CSS, HTML or webdesign question? Ask it here!

Add Content to ul li With CSS

1 year 4 months ago - 1 year 4 months ago #16303 by hotrodsue@windstream.net
Hello, new to forum. Editing this post to make shorter, in hopes of getting help. Please advise if this is not the correct place to get help/support for this issue.

This is my DecoNetwork home page: Home Page

Directly under the heading "Select a Product to Customize", there are 6 products that represent 6 categories. I want to add content (category title heading) above each image. For example T-Shirts, Outerwear, etc.

I've watched the video: Inserting content on your DecoNetwork website with CSS

Using firebug to edit CSS, to view area to add content. When I Add Rule in CSS as follows, I’m close, but not quite there.
ul#create_list.row li :nth-child(-n+6)

Below is image of html of home page ul, and an image with the result I get using the nth-child code above and set background to yellow.






I think I need to use the ::before to add a line of text before each li child.

Can anyone direct me to how to get the content added on top of each of the 6 products? Many thanks in advance for helping.
Attachments:
The following user(s) said Thank You: sticky

Please Log in or Create an account to join the conversation.

1 year 3 months ago #16319 by brenden
Hi,

You would use the following CSS:
#create_list .display:nth-child(1)::before {
    content: "Heading here...";
}

Take note of nth-child(1): Keep changing this number for the 2nd, 3rd, 4th, etc. i.e.:
#create_list .display:nth-child(1)::before {
    content: "First heading...";
}

#create_list .display:nth-child(1)::before {
    content: "Second heading...";
}

#create_list .display:nth-child(1)::before {
    content: "Third heading...";
}

#create_list .display:nth-child(1)::before {
    content: "Fourth heading...";
}

Cheers,

Senior Product Manager
Wilcom - Sydney, Australia



Please Log in or Create an account to join the conversation.

1 year 3 months ago #16348 by hotrodsue@windstream.net
That did it! Thank you so much for your help! I'm making great progress on this journey. All thanks to your help, as well as videos, DecoNetwork support team, and blogs. Much appreciated. Have a wonderful day.

Please Log in or Create an account to join the conversation.

1 year 3 months ago #16357 by brenden
Awesome! I'll pass on your comments to our team. Many thanks!

Cheers,

Senior Product Manager
Wilcom - Sydney, Australia



Please Log in or Create an account to join the conversation.

Time to create page: 0.271 seconds
Powered by Kunena Forum

Latest from our blog

DecoNetwork 8 - Update 3: GDPR Compliance (+56 tasks completed)

DecoNetwork 8 - Update 3: GDPR Compliance (+56 tasks completed) In this release, DecoNetwork updated its Privacy Policy and Terms of Use, effective May 23, 2018. These changes were made primarily in preparation...Read More

This Week in Catalog - May 18, 2018

This Week in Catalog - May 18, 2018 I have two big announcements to make in regards to the DecoNetwork catalogs. We read and listen to your complaints and suggestions. Recently, I...Read More

DecoNetwork 8 - Available Now!

DecoNetwork 8 - Available Now! After an incredible amount of work in design, development, and testing, DecoNetwork 8 is here! With version 8, we recommitted ourselves...Read More

This Week in Catalog: May 11, 2018

This Week in Catalog: May 11, 2018 Lately, we've been getting a lot of new products in each week. More than is typical. All those new products (mostly in the S&S Activewear...Read More

DecoNetwork 8 - Update 2 now available: SEO Improvements and more (+75 tasks implemented)

DecoNetwork 8 - Update 2 now available: SEO Improvements and more (+75  tasks implemented) DecoNetwork 8 was released just ten days ago, but we have already a second update (8.002) available for you with many improvements and fixes...Read More