× DecoNetwork version 8 beta.

CSS for Product subheads

8 months 2 weeks ago #20229 by DigiTees
CSS for Product subheads was created by DigiTees
Hi team, I have some CSS that works in by 7.5 site for adding the grey descriptive subheads for each product. See pic attached.

This same CSS doesn't work in DN8 which is not a surprise as I'm sure it's all a bit different code wise.

Are you able to please give me an example of how to reformat it so that it will show in DN8?

This is what it is like currently:

a.product_title {
    display: inline-table;
    width: 100%;
    text-align: center;
    text-decoration: none;
}

a.product_title::after {
    white-space: pre-wrap;
    font-size: 12px;
    text-align: center;
    color: #999;
}

a.product_title[href*="n=401123"]::after {
    content: "\A Crew Neck - Heavy Weight";
}
a.product_title[href*="n=374873"]::after {
    content: "\A Crew Neck - Mid Weight";
}
etc
Attachments:
The following user(s) said Thank You: sajego

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

8 months 2 weeks ago #20236 by gregp
Replied by gregp on topic CSS for Product subheads
My question here is what are you trying to achieve...?
It would work much better and be more manageable into the future if we were to add a new field to that listing which you could style through the ui instead, instead of using custom css.

Looks like some sort of product description..? style..? if it was some data against the product we could expose it through the ui..

Cheers,
Greg

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

8 months 2 weeks ago #20238 by DigiTees
Replied by DigiTees on topic CSS for Product subheads
Hi Greg, I just want it to display like the screenshot I attached in the original post.
It's basically a description eg Crew Neck - Heavy Weight that allows customers to see the differences between the styles at glance instead of having to click into the product info.
Adding it in via a field would be much easier than trying to hunt out each Products href*="n=374873" and adding it via CSS :)

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

8 months 2 weeks ago #20241 by gregp
Replied by gregp on topic CSS for Product subheads
I can imagine when we get time we could add a short description or style description to the product screens.

However in reality this cant happen in the short term, so the only short term solution would be css.

Cheers,
Greg

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

8 months 2 weeks ago #20243 by DigiTees
Replied by DigiTees on topic CSS for Product subheads
Yep that's ok - but are you able to please tell me how to reformat it so that it shows up?

Cris supplied the code below to me previously for me and then I could edit it and add in each product and description.

a.product_title {
display: inline-table;
width: 100%;
text-align: center;
text-decoration: none;
}

a.product_title::after {
white-space: pre-wrap;
font-size: 12px;
text-align: center;
color: #999;
}

a.product_title[href*="n=401123"]::after {
content: "\A Crew Neck - Heavy Weight";
}
a.product_title[href*="n=374873"]::after {
content: "\A Crew Neck - Mid Weight";
}

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

8 months 2 weeks ago #20250 by gregp
Replied by gregp on topic CSS for Product subheads
Chris will work this one out for you an email you!

Cheers,
Greg
The following user(s) said Thank You: DigiTees

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

8 months 1 week ago #20253 by ccruz
Replied by ccruz on topic CSS for Product subheads
Hey Niki, a couple adjustments get this working on your new DN8 site.
.dn-product-name a::after {
    line-height: 1.25em;
    color: #999;
    display: block;
}

.dn-product-name a[href*="n=401123"]::after {
    content: "\A Crew Neck - Heavy Weight";
}

.dn-product-name a[href*="n=374873"]::after {
    content: "\A Crew Neck - Mid Weight";
}

-Cris

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

8 months 1 week ago #20255 by DigiTees
Replied by DigiTees on topic CSS for Product subheads
Thanks so much Cris.

I've copied it in but only the first three are working. Is there a secret hidden character I am missing?

.dn-product-name a::after {
line-height: 1.1em;
color: #999;
display: block;
}

.dn-product-name a[href*="n=401123"]::after {
content: "\A Crew Neck - Heavy Weight";
}
.dn-product-name a[href*="n=374873"]::after {
content: "\A Crew Neck - Mid Weight";
}
.dn-product-name a[href*="n=35708807"]::after {
content: "\A Crew Neck - Light Weight";
}
.dn-product-name a[href*="n=55346112"]::after {
    content: "\A V-Neck - Light Weight";
}
.dn-product-name a[href*="n=27549337"]::after {
    content: "\A Scoop-Neck - Light Weight";
}
.dn-product-name a[href*="n=55362827"]::after {
    content: "\A Premium Heavy Weight";
}
.dn-product-name a[href*="n=37450447"]::after {
    content: "\A Crew-Neck - Mid Weight";
}
.dn-product-name a[href*="n=374878"]::after {
    content: "\A Light Weight";
}
.dn-product-name a[href*="n=50231027"]::after {
    content: "\A Light Weight";
}
.dn-product-name a[href*="n=31944178"]::after {
    content: "\A Mid Weight";
}
.dn-product-name a[href*="n=55537652"]::after {
    content: "\A Crew Neck - Mid Weight";
}
.dn-product-name a[href*="n=18212717"]::after {
    content: "\A Scoop Neck - Light Weight";
}
.dn-product-name a[href*="n=2709622"]::after {
    content: "\A Crew Neck - Light Weight";
}
.dn-product-name a[href*="n=27216437"]::after {
    content: "\A V-Neck - Light Weight";
}
.dn-product-name a[href*="n=28477542"]::after {
    content: "\A Scoop Neck - Light-Mid Weight";
}
.dn-product-name a[href*="n=61244603"]::after {
    content: "\A Mid Weight";
}
.dn-product-name a[href*="n=2544467"]::after {
    content: "\A Heavy Weight";
}
.dn-product-name a[href*="n=34536848"]::after {
    content: "\A Light Weight";
}
.dn-product-name a[href*="n=47714082"]::after {
    content: "\A Crew Neck - Light Weight";
}
.dn-product-name a[href*="n=8869652"]::after {
    content: "\A 3/4 Sleeves - Light Weight";
}
.dn-product-name a[href*="n=20071687"]::after {
    content: "\A Heavy Weight";
}
.dn-product-name a[href*="n=2705822"]::after {
    content: "\A Light Weight";
}
.dn-product-name a[href*="n=61333148"]::after {
    content: "\A Heavy Weight";
}
.dn-product-name a[href*="n=53688247"]::after {
    content: "\A Mid Weight";
}
.dn-product-name a[href*="n=61244773"]::after {
    content: "\A Heavy Weight";
}
.dn-product-name a[href*="n=63406523"]::after {
    content: "\A Heavy Weight";
}
.dn-product-name a[href*="n=63431183"]::after {
    content: "\A Mid Weight";
}
.dn-product-name a[href*="n=374868"]::after {
    content: "\A Light Weight";
}
.dn-product-name a[href*="n=46258442"]::after {
    content: "\A Mid Weight";
}
.dn-product-name a[href*="n=74340758"]::after {
    content: "\A Curved Hem - Light Weight";
}
.dn-product-name a[href*="n=72731163"]::after {
    content: "\A Curved Hem - Light Weight";
}
.dn-product-name a[href*="n=74340343"]::after {
    content: "\A Curved Hem - Light Weight";
}
.dn-product-name a[href*="n=74340143"]::after {
    content: "\A Raw Armholes - Light Weight";
}
.dn-product-name a[href*="n=74192283"]::after {
    content: "\A Crew Neck - Light Weight";
}
.dn-product-name a[href*="n=63431203"]::after {
    content: "\A Mid Weight";
}
.dn-product-name a[href*="n=74340818"]::after {
    content: "\A Curved Hem - Mid Weight";

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

8 months 1 week ago #20256 by ccruz
Replied by ccruz on topic CSS for Product subheads
Hey Niki,

Seems like an encoding issue not sure how you ran into this perhaps has to do with where you copied the old code from or how it was edited. Checking the generated CSS there are some invalid characters before the CSS rule where the white space should be (see attached screenshot).

Try removing all the white space before each CSS rule that should fix the invalid CSS. Worst case you can copy paste the working snippets and paste in each products ID and description back in.

-Cris
Attachments:

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

8 months 1 week ago #20257 by DigiTees
Replied by DigiTees on topic CSS for Product subheads
That worked, thanks for your help Cris.
The following user(s) said Thank You: gregp

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

4 months 3 weeks ago #21328 by DigiTees
Replied by DigiTees on topic CSS for Product subheads
Hi Cris, this CSS has stopped working - has something changed? Can you please let me know how to get it to show up again please?

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

4 months 3 weeks ago #21344 by DigiTees
Replied by DigiTees on topic CSS for Product subheads
Can someone help please? I haven't changed the CSS, I think it must have changed when I was upgraded to 8.04?

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

4 months 2 weeks ago #21359 by gregp
Replied by gregp on topic CSS for Product subheads
Hi,

is it all working as expetced now..?

Cheers,
Greg

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

4 months 2 weeks ago #21362 by DigiTees
Replied by DigiTees on topic CSS for Product subheads
No sorry, they are not showing up. I've cleared cache and republished the site and nothing...

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

4 months 2 weeks ago - 4 months 2 weeks ago #21364 by ccruz
Replied by ccruz on topic CSS for Product subheads
Hey Niki, sorry for the delay I was enjoying some time off this past week. I had a quick look and noticed you changed your products to link directly to the designer instead of the product details page. This is what's causing the text to no longer show. You will need to adjust the CSS rule so that it looks for the designer URL instead of the product page URL.

Here's a snippet comparison:

OLD (When links set to go to product details page)
.dn-product-name a[href*="n=401123"]::after {
content: "\A Crew Neck - Heavy Weight";
}

NEW (When links set to go to designer page)
.dn-product-name a[href*="/designer/customize/401123"]::after {
content: "\A Crew Neck - Heavy Weight";
}

In case you might change your product page again in the future it might make sense to have to rule apply for both cases like this:

COMBINED (When links set to go to designer page OR product details page)
.dn-product-name a[href*="n=401123"]::after, .dn-product-name a[href*="/designer/customize/401123"]::after {
content: "\A Crew Neck - Heavy Weight";
}

You'll need to apply this change to all the individual rules for each product.

-Cris

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

Time to create page: 0.133 seconds
Powered by Kunena Forum