Joomla Templates Club 406,261 posts

[edd Friend eddJoin date: May 2006Posts: 350Downloads:11Uploads:73 Thanks: 76 Thanked: 8 times in 2 posts]

#191433

Hi there 🙂

well, my question is on the thread title: “how to add a “hilite” style to a title menu?
I was trying adding “suffix css” in the perameters, but it is not working…
Is there a way adding some code in the css style sheet?
Take a look to this screen, it show what I want
Thanks a lot for help

---

Attachments:

1. 

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#509197

I think I may know a “sloppy” way to achieve that kind of result . . . . but I’m going to create a Help Ticket for you as well to put it out there to my JA Support Team colleagues for their thoughts/suggestions.

In the meantime, if you would like for me to see if I can make my makeshift solution work for you, I’ll need the url of the site you’re working on, as well as have you temporarily set “Optimize CSS” to “No” within your Template Manager–General settings.

[phong nam Friend phong namJoin date: May 2015Posts: 3779Downloads:1Uploads:587 Thanks: 499 Thanked: 974 times in 888 posts]

#509280

Hi edd,

You can add the module title with the suffix class format below into the end of templates/ja_bistro/css/template.css file:

.column div.moduletable.hilite h3 span {
/*Module title style of Hilite class suffix*/
}

Then enter “hilite” into the Module Class suffix of module’s Advanced Options. Clear JAT3 cache after saving changes.

[edd Friend eddJoin date: May 2006Posts: 350Downloads:11Uploads:73 Thanks: 76 Thanked: 8 times in 2 posts]

#509320

Hi Leo Burnetts,
thanks for your reply, bur I dont understand what I need to do exactly…

I did like you said:
I opened: templates/ja_bistro/css/template.css file

and then I added this line like you told:

.column div.moduletable.hilite h3 span {
/*Module title style of Hilite class suffix*/
}

Then I enter “hilite” into the Module Class suffix of module’s Advanced Options and clear JAT3 cache.
But nothing happens…
Do I need to add more to this css line? or do I need just tu paste this line into another line in the css?

Thanks a ot for your help

[phong nam Friend phong namJoin date: May 2015Posts: 3779Downloads:1Uploads:587 Thanks: 499 Thanked: 974 times in 888 posts]

#509328

Hi edd,

Did you leave a space before the text “hilite” in Module Class suffix option ? If possible, can you send me PM with your website’s url ? I can check out the overridden css styles you inputed on template.css file or other related settings.

[edd Friend eddJoin date: May 2006Posts: 350Downloads:11Uploads:73 Thanks: 76 Thanked: 8 times in 2 posts]

#510713

Hi There,

I was trying your methode, and I added this:

.column div.moduletable.hilite h3 span {
margin-left: 0;
margin-right: -10px;
padding: 15px 20px 25px;
background: url(../images/block-hilite1-bg.png) no-repeat right bottom;
color: #fff
/*Module title style of Hilite class suffix*/

}

Please take a look to the screen I’m sending you to see the result I had.
Anybody has any idea on how to fix that?

Thanks

ED

---

Attachments:

1. 

[phong nam Friend phong namJoin date: May 2015Posts: 3779Downloads:1Uploads:587 Thanks: 499 Thanked: 974 times in 888 posts]

#510734

Hi edd,

It seems that you spent much time on this module class suffix without good result. In this case, you can try to put below css styles of module class suffix (_hilite3) into the end of templates/ja_bistro/css/template.css file:

.column div.moduletable_hilite3 {
margin-left: 0;
margin-right: -10px;
padding: 15px 20px 25px;
background: url('../images/block-hilite2-bg.png') no-repeat right top;
color: #fff;
background-size: 100% 20%;
}

Then you can go the backend of Main Menu module, and put _hilite3 to Module class suffix of Advanced Options tab. Clear JAT3 cache after saving changes.

---

Attachments:

1. 

1 user says Thank You to phong nam for this useful post

1. edd

[edd Friend eddJoin date: May 2006Posts: 350Downloads:11Uploads:73 Thanks: 76 Thanked: 8 times in 2 posts]

#510750

Hi Leo Burnetts,

Sorry but nothing happens, it still like nothing happens…

I just copy-paste the code you give me into the template.css style sheet, at the last line, and I did like you said: go to the backend, etc… :((

Any idea?

Thanks a lot for your kind help 🙂

ED

[edd Friend eddJoin date: May 2006Posts: 350Downloads:11Uploads:73 Thanks: 76 Thanked: 8 times in 2 posts]

#510755

<em>@edd 395956 wrote:</em><blockquote>Hi Leo Burnetts,

Sorry but nothing happens, it still like nothing happens…

I just copy-paste the code you give me into the template.css style sheet, at the last line, and I did like you said: go to the backend, etc… :((

Any idea?

Thanks a lot for your kind help 🙂

ED</blockquote>

I wrote that message some minutes ago… please forget it… It was my mistake, I was putting the _hilite3 into “Menu class suffix”… :-[
Now I putted into the Module class suffix

Now it is working perfect…

And I just added this line:

.column div.moduletable_hilite3 h3 { color: #efd7b4 }

to get the “brown” color in the font.

I have just one little thing to ask:
I’m missing the little “corner” down in the line, how can I fix this?
Take a look to the screen

Thanks a lot for your great help 😀

---

Attachments:

1. 

[phong nam Friend phong namJoin date: May 2015Posts: 3779Downloads:1Uploads:587 Thanks: 499 Thanked: 974 times in 888 posts]

#510767

Hi ed,

The reason that the background image of _hitlite3 is being resized with 20% height of module so that the corner at right bottom is quite small to be visible. The idea in this case is that you can try to change the block-hilite2-bg.png image to a smaller image (300×75) with clear cornet at bottom. By that way, the corner can still be seen when the background image is resized.

1 user says Thank You to phong nam for this useful post

1. edd

[edd Friend eddJoin date: May 2006Posts: 350Downloads:11Uploads:73 Thanks: 76 Thanked: 8 times in 2 posts]

#510875

Hi Leo Burnetts, thanks for your great help.

I have created a new png image for try to avoid this error, and it is working.
I saw that I had some errors using this hilite for the module title. For example if I create an html module where I putted an image or text, the module title width changed, like you see in this screen:

So I change some little things in the code you gave me, and it is working fine, I just have tested on FF, Safari and Chrome, I’m working on mac and I dont know how to test on IE.
Like I said it is working fine. Even I created a “new” hilite for brown titles.

So the code I’m using now is this:


.column div.moduletable_hilite3 {
margin-left: 0;
margin-right: -10px;
color: #000;
background-size: 100% auto;
padding-top: 15px;
padding-right: 20px;
padding-bottom: 0px;
padding-left: 20px;
margin-top: 0px;
background-image: url(../images/block-hilite22-bg.png);
background-repeat: no-repeat;
background-position: right top;
}

.column div.moduletable_hilite3 h3 { color: #efd7b4; }


Like you see, in the line that I was using first

background-size: 100% 20%;

I changed the 20% for “auto”, and in this way it seems to avoid the problem that I explained in the first screen shoot.

Also I added this line to change title color.:

.column div.moduletable_hilite3 h3 { color: #efd7b4; }

So the result I’m having is this:

If there are some mistakes in this code, please let me know.

I hope this could help somebody.

Thanks a lot for your great and kind help, Leo Burnetts.

ED

---

Attachments:

1. 
2. 

1 user says Thank You to edd for this useful post

1. phong nam

[Author]

Posts