Joomla Templates Club 406,261 posts

[jkriordan Friend jkriordanJoin date: June 2012Posts: 59Downloads:0Uploads:8 Thanks: 8 Thanked: 1 times in 1 posts]

#178805

How does Item Variations work? Is it possible to apply item variations to videos?

[Sherlock Friend SherlockJoin date: September 2014Posts: 11453Downloads:0Uploads:88 Thanks: 221 Thanked: 2478 times in 2162 posts]

#459980

<em>@jkriordan 328673 wrote:</em><blockquote>How does Item Variations work? Is it possible to apply item variations to videos?</blockquote>

Could you please explain a little bit more details ? I am not much sure what you are mentioning !

[jkriordan Friend jkriordanJoin date: June 2012Posts: 59Downloads:0Uploads:8 Thanks: 8 Thanked: 1 times in 1 posts]

#460042

In JA Wall, under the Pages menu, near the bottom, is a menu item called Item Variations. It take you to a page where various articles have different colored background, and some are marked as “sticky”. Can I create this effect on any page, such as the Social Feed page, where all articles appear white? And if so, how?

What are “sticky items” and how do they work?

[Sherlock Friend SherlockJoin date: September 2014Posts: 11453Downloads:0Uploads:88 Thanks: 221 Thanked: 2478 times in 2162 posts]

#460296

<em>@jkriordan 328871 wrote:</em><blockquote>In JA Wall, under the Pages menu, near the bottom, is a menu item called Item Variations. It take you to a page where various articles have different colored background, and some are marked as “sticky”. Can I create this effect on any page, such as the Social Feed page, where all articles appear white? And if so, how?

What are “sticky items” and how do they work?</blockquote>

if you go to the back-end of each item (go to edit an article in the back-end ), there under the Metadata Options panel you would see the field of Extended Classes , you can enter into that fields one of following values item-sticky, item-sticky2, item-sticky3, blue, dark, hilite, twitter, facebook, video

Among those fields those ones of item-sticky, item-sticky2, item-sticky3 will mark the item became sticky, those ones of blue, dark would add colors for item….

I hope you got it 🙂

2 users say Thank You to Sherlock for this useful post

1. Mike
2. jkriordan

[jkriordan Friend jkriordanJoin date: June 2012Posts: 59Downloads:0Uploads:8 Thanks: 8 Thanked: 1 times in 1 posts]

#461797

Very good! Thanks!:D

[jkriordan Friend jkriordanJoin date: June 2012Posts: 59Downloads:0Uploads:8 Thanks: 8 Thanked: 1 times in 1 posts]

#461800

OK, I understand. I believe this list is complete:

item-new
blue
dark
grid-triple
grid-double
hilite
item-sticky
item-free
item-hot
item-sticky2
item-sticky3
no-color

I’m not certain what “sticky” means though. I though it would pin an article to the top of a page. It’s not doing that. In my case, articles are set up to sort newest first, and my sticky articles are staying in their chronological order.

[fitito Friend fititoJoin date: June 2012Posts: 18Downloads:0Uploads:7 Thanks: 6]

#466525

Thank you very much.
Two more questions related with this.
Is it possible to change font style on “item-sticky” items?
Can we add new colors?

[Sherlock Friend SherlockJoin date: September 2014Posts: 11453Downloads:0Uploads:88 Thanks: 221 Thanked: 2478 times in 2162 posts]

#466545

Hi fitito,

To change the font style for sticky items you can open the file of templates/ja_wall/css/template.css look for this css rule
.item.item-sticky .item-inner {
background: url(“../images/pin-icon.png”) no-repeat scroll right top #FFE1AD
border-color: #FFE1AD
color: #4E4D52
font-family: fantasy;
}

I think you can change the font styles there.
<blockquote> Can we add new colors? </blockquote>

If you open the file templates/ja_wall/css/template.css you would see the defined css rules for the blue color are
/* Blue Style —*/
.item.blue .item-inner {
background: #09c
border-color: #09c
color: #FFF
}

.item.blue .header h2 a {
color: #FFF
}

.item.blue:hover h2 a {
color: #FFF
}

.item.blue .article-info,
.item.blue .article-hit,
.item.blue .jac-add-button {
color: #a9def0
}

.item.blue .article-info a,
.item.blue .article-hit a,
.item.blue .jac-add-button a {
color: #FFF
}

.item.blue .article-info a:hover,
.item.blue .article-hit a:hover,
.item.blue .jac-add-button a:hover {
text-decoration: underline;
}

.item.blue .footer {
background-color: #0087b4
color: #a9def0
text-shadow: 0 -1px 0 rgba(0,0,0,.4);
}

.item.blue .footer .article-info,
.item.blue .footer .article-hit,
.item.blue .footer .jac-add-button,
.item.blue .footer a {
color: #8ad2ea
}

.item.blue .readmore a {
border: 1px solid #26a9d5
color: #a9def0
}

.item.blue:hover .readmore a {
border-color: #09c
color: #FFF
}

you can add a similar rules to define styles for new colors if you want.

[Sherlock Friend SherlockJoin date: September 2014Posts: 11453Downloads:0Uploads:88 Thanks: 221 Thanked: 2478 times in 2162 posts]

#466546

Hi fitito,

To change the font style for sticky items you can open the file of templates/ja_wall/css/template.css look for this css rule
.item.item-sticky .item-inner {
background: url(“../images/pin-icon.png”) no-repeat scroll right top #FFE1AD
border-color: #FFE1AD
color: #4E4D52
font-family: fantasy;
}

I think you can change the font styles there.
<blockquote> Can we add new colors? </blockquote>

If you open the file templates/ja_wall/css/template.css you would see the defined css rules for the blue color are
/* Blue Style —*/
.item.blue .item-inner {
background: #09c
border-color: #09c
color: #FFF
}

.item.blue .header h2 a {
color: #FFF
}

.item.blue:hover h2 a {
color: #FFF
}

.item.blue .article-info,
.item.blue .article-hit,
.item.blue .jac-add-button {
color: #a9def0
}

.item.blue .article-info a,
.item.blue .article-hit a,
.item.blue .jac-add-button a {
color: #FFF
}

.item.blue .article-info a:hover,
.item.blue .article-hit a:hover,
.item.blue .jac-add-button a:hover {
text-decoration: underline;
}

.item.blue .footer {
background-color: #0087b4
color: #a9def0
text-shadow: 0 -1px 0 rgba(0,0,0,.4);
}

.item.blue .footer .article-info,
.item.blue .footer .article-hit,
.item.blue .footer .jac-add-button,
.item.blue .footer a {
color: #8ad2ea
}

.item.blue .readmore a {
border: 1px solid #26a9d5
color: #a9def0
}

.item.blue:hover .readmore a {
border-color: #09c
color: #FFF
}

you can add a similar rules to define styles for new colors if you want.

1 user says Thank You to Sherlock for this useful post

1. fitito

[ranirajput Friend ranirajputJoin date: September 2012Posts: 1Downloads:0Uploads:0]

#466631

@sherlock Holmes,Thanks dear ..Thanks a lot. I was also having same issue and I was searching the ans from so many days .But haven’t got ..Due to your help I got it. Thanks a lot 🙂 .

http://gmailsignin.net

[ghog Friend ghogJoin date: March 2012Posts: 46Downloads:0Uploads:2]

#466718

I can see how this works for Joomla content however the extended options are not available in K2. How do we add styles to K2 items

[Sherlock Friend SherlockJoin date: September 2014Posts: 11453Downloads:0Uploads:88 Thanks: 221 Thanked: 2478 times in 2162 posts]

#466784

<em>@ghog 337777 wrote:</em><blockquote>I can see how this works for Joomla content however the extended options are not available in K2. How do we add styles to K2 items</blockquote>

For a k2 item, when you were editing a k2 item, Under the Extra fields tab you would see a field name Extended Classes (if the category which contains this k2 item is Associated with the “Extended Classes” extra field group), you can add styles to that field.

Hope you got it !

[fitito Friend fititoJoin date: June 2012Posts: 18Downloads:0Uploads:7 Thanks: 6]

#468000

<em>@Sherlock Holmes 337565 wrote:</em><blockquote>Hi fitito,

To change the font style for sticky items you can open the file of templates/ja_wall/css/template.css look for this css rule
.item.item-sticky .item-inner {
background: url(“../images/pin-icon.png”) no-repeat scroll right top #FFE1AD
border-color: #FFE1AD
color: #4E4D52
font-family: fantasy;
}

I think you can change the font styles there.

If you open the file templates/ja_wall/css/template.css you would see the defined css rules for the blue color are
/* Blue Style —*/
.item.blue .item-inner {
background: #09c
border-color: #09c
color: #FFF
}

.item.blue .header h2 a {
color: #FFF
}

.item.blue:hover h2 a {
color: #FFF
}

.item.blue .article-info,
.item.blue .article-hit,
.item.blue .jac-add-button {
color: #a9def0
}

.item.blue .article-info a,
.item.blue .article-hit a,
.item.blue .jac-add-button a {
color: #FFF
}

.item.blue .article-info a:hover,
.item.blue .article-hit a:hover,
.item.blue .jac-add-button a:hover {
text-decoration: underline;
}

.item.blue .footer {
background-color: #0087b4
color: #a9def0
text-shadow: 0 -1px 0 rgba(0,0,0,.4);
}

.item.blue .footer .article-info,
.item.blue .footer .article-hit,
.item.blue .footer .jac-add-button,
.item.blue .footer a {
color: #8ad2ea
}

.item.blue .readmore a {
border: 1px solid #26a9d5
color: #a9def0
}

.item.blue:hover .readmore a {
border-color: #09c
color: #FFF
}

you can add a similar rules to define styles for new colors if you want.</blockquote>

Thank you ver much @sherlock Holmes.

If I am right, only with changing the #09c, in this case, or #color, in anyone, is it enough to change the color?
And I have not clear, which should we do in order to create a new item with different color, copying this code and changing the #color and changing /* Blue Style —*/ in order to distinguish?

[Sherlock Friend SherlockJoin date: September 2014Posts: 11453Downloads:0Uploads:88 Thanks: 221 Thanked: 2478 times in 2162 posts]

#468051

Yeah fitito, you can change the text of blue, the color and background-color attributes there, you would need a little knowledge in css to make sure that you know what you was doing 🙂

1 user says Thank You to Sherlock for this useful post

1. fitito

[fitito Friend fititoJoin date: June 2012Posts: 18Downloads:0Uploads:7 Thanks: 6]

#468190

<em>@Sherlock Holmes 339608 wrote:</em><blockquote>Yeah fitito, you can change the text of blue, the color and background-color attributes there, you would need a little knowledge in css to make sure that you know what you was doing :)</blockquote>

Thank you Sherlock Holmes. I will try it. But it is as “simply” as following this code, isn’t it?

[Author]

Posts