Joomla Templates Club 406,261 posts

[waelali Friend waelaliJoin date: February 2012Posts: 336Downloads:11Uploads:87 Thanks: 88 Thanked: 10 times in 1 posts]

#175338

Hello,

Link: http://www.tkareer.com/

LOGIN Item. I am trying to add an image instead of LOGIN Text , however It looks ugly and not complete.

Whenever I remove the text using Parameters (JA Extended), the image disappears.

How can we remove the text and still see the image??
How to arrange the image in a way that we can see the whole image and not part of it.?
Should we add the image to Parameters (Basic) – Menu Image – as I did here, or we need to add it using css??

I have add in Parameters (JA Extended) – Additional class (nav-login-button), and add the following css code in template-rtl.css, however not working well

<blockquote>

/* Login Button */

#ja-topmega li.nav-login-button { background: url(../images/stripe-bg-2.png); }

#ja-topmega li.nav-login-button a.nav-login-button {

background: url(../images/icons/nav-blog.png) no-repeat center #000 !important;

}

#ja-topmega li:hover a.nav-login-button,

#ja-topmega li.over a.nav-login-buttong,

#ja-topmega li.active a.nav-login-button {

background: url(../images/icons/nav-blog.png) no-repeat center #3b7513 !important;

}

#ja-topmega li.nav-login-button .ja-moduletable ul li {

padding-left: 10px;

}

#ja-topmega li.nav-login-button .childcontent-inner {

background-image: none !important;

}

#ja-topmega li.nav-login-button .ja-moduletable .k2LatestCommentsBlock ul li {

background: none;

padding-left: 0;

padding-right: 0;

}
</blockquote>

Please see attached image.

---

Attachments:

1. 

[swissa Friend swissaJoin date: November 2011Posts: 1955Downloads:7Uploads:277 Thanks: 175 Thanked: 717 times in 572 posts]

#445399

I did this playing around ages ago (yeah – like two months or so learning) on a very hacked Purity II . it may not work for you. as always take of copy of the file first…

I just set font-size to 0px. Not the best solution probably but did it for me! in template/css/menu/menu.css

This was for first level i.e the drop down on hover of the main menü item. I’m sure you can adapt it as software engineer. 🙂 Just change to ul.level0

.ja-megamenu ul.level1 li.mega .has-image {

• padding-left: 25px;
• display: block;
• background-repeat: no-repeat;
• background-position: left top;
• font-size: 0px;
• height: 45px;

}

1 user says Thank You to swissa for this useful post

1. waelali

[waelali Friend waelaliJoin date: February 2012Posts: 336Downloads:11Uploads:87 Thanks: 88 Thanked: 10 times in 1 posts]

#445405

<em>@swissa 309748 wrote:</em><blockquote>I did this playing around ages ago (yeah – like two months or so learning) on a very hacked Purity II . it may not work for you. as always take of copy of the file first…

I just set font-size to 0px. Not the best solution probably but did it for me! in template/css/menu/menu.css

This was for first level i.e the drop down on hover of the main menü item. I’m sure you can adapt it as software engineer. 🙂 Just change to ul.level0

.ja-megamenu ul.level1 li.mega .has-image {

• padding-left: 25px;
• display: block;
• background-repeat: no-repeat;
• background-position: left top;
• font-size: 0px;
• height: 45px;

}
</blockquote>

No. Not working… mmmm
Can you go to my site as posted in previous post , check by inspecting what is the problem??!!
I hate this template 🙁 many nested css issues

[swissa Friend swissaJoin date: November 2011Posts: 1955Downloads:7Uploads:277 Thanks: 175 Thanked: 717 times in 572 posts]

#445411

Yes. Of course it is! :p

First, You need to change the size of your image – it has to fit in menü space this big –

• width: 95px;
• height: 18px;

This is code you need

.ja-megamenu ul.level0 li.mega .has-image {

• display: block;
• background-repeat: no-repeat;
• cursor: pointer;
• width: 95px;
• height: 18px;
• font-size: 0px;

}

In your site I changed this in base-themes on jat3 but You can just put this code at the end of your template.css @ line 2520 and it will work. Try it – it works for me! 🙂

1 user says Thank You to swissa for this useful post

1. waelali

[waelali Friend waelaliJoin date: February 2012Posts: 336Downloads:11Uploads:87 Thanks: 88 Thanked: 10 times in 1 posts]

#445412

<em>@swissa 309760 wrote:</em><blockquote>Yes. Of course it is! :p

First, You need to change the size of your image – it has to fit in menü space this big –

• width: 95px;
• height: 18px;

This is code you need

.ja-megamenu ul.level0 li.mega .has-image {

• display: block;
• background-repeat: no-repeat;
• cursor: pointer;
• width: 95px;
• height: 18px;
• font-size: 0px;

}

In your site I changed this in base-themes on jat3 but You can just put this code at the end of your template.css and it will work. Try it – it works for me! :)</blockquote>

.ja-megamenu ?? Is not it .ja-tomenu??

and what about the image itself?? to upload in the menu option?

[swissa Friend swissaJoin date: November 2011Posts: 1955Downloads:7Uploads:277 Thanks: 175 Thanked: 717 times in 572 posts]

#445415

See?

1 user says Thank You to swissa for this useful post

1. waelali

[waelali Friend waelaliJoin date: February 2012Posts: 336Downloads:11Uploads:87 Thanks: 88 Thanked: 10 times in 1 posts]

#445416

<em>@swissa 309764 wrote:</em><blockquote>See?

</blockquote>

Invalid Attachment specified. If you followed a valid link, please notify the administrator

🙂

What about the previous code I posted …?? I do not need it at all?

[swissa Friend swissaJoin date: November 2011Posts: 1955Downloads:7Uploads:277 Thanks: 175 Thanked: 717 times in 572 posts]

#445418

<em>@waelali 309761 wrote:</em><blockquote>.ja-megamenu ?? Is not it .ja-tomenu??

and what about the image itself?? to upload in the menu option?</blockquote>

You loaded the image in the menu itself in edit menu item no? So it is there…….

All I am doing is help you loose the text and set the size of the image and yes it is megamenu. You can see here it works.

You can leave the other code – there is already ‘has-image’ built in for megamenu. “It is ain’t broke don’t fix it” so they all tell me!! :laugh:

---

Attachments:

1. 

1 user says Thank You to swissa for this useful post

1. waelali

[waelali Friend waelaliJoin date: February 2012Posts: 336Downloads:11Uploads:87 Thanks: 88 Thanked: 10 times in 1 posts]

#445419

<em>@swissa 309767 wrote:</em><blockquote>You loaded the image in the menu itself in edit menu item no? So it is there…….

All I am doing is help you loose the text and set the size of the image and yes it is megamenu. You can see here it works.

You can leave the other code – there is already ‘has-image’ built in for megamenu. “It is ain’t broke don’t fix it” so they all tell me!! :laugh:</blockquote>

I know you are trying to help me 🙂 Thank you – Appreciate that
and tryingt to follow you also

So hold on to give you feedback soon 🙂

[waelali Friend waelaliJoin date: February 2012Posts: 336Downloads:11Uploads:87 Thanks: 88 Thanked: 10 times in 1 posts]

#445422

mmm I did all what you suggested , but seems not working

[swissa Friend swissaJoin date: November 2011Posts: 1955Downloads:7Uploads:277 Thanks: 175 Thanked: 717 times in 572 posts]

#445423

<em>@waelali 309772 wrote:</em><blockquote>mmm I did all what you suggested , but seems not working</blockquote>

You have made this code @ 2524

/* Login Button */#ja-megamenu ul.level1 li.mega .has-image {


padding-left: 2px;
display: block;
background-repeat: no-repeat;
background-position: left top;
text-indent: -3000px;
height: 45px;
}

delete it and replace with

.ja-megamenu ul.level0 li.mega .has-image {

display: block;
background-repeat: no-repeat;
cursor: pointer;
width: 95px;
height: 18px;
font-size: 0px;
}

Then we can play with numbers to get perfect. 🙂

1 user says Thank You to swissa for this useful post

1. waelali

[waelali Friend waelaliJoin date: February 2012Posts: 336Downloads:11Uploads:87 Thanks: 88 Thanked: 10 times in 1 posts]

#445425

<em>@swissa 309773 wrote:</em><blockquote>You have made this code @ 2524

/* Login Button */#ja-megamenu ul.level1 li.mega .has-image {


padding-left: 2px;
display: block;
background-repeat: no-repeat;
background-position: left top;
text-indent: -3000px;
height: 45px;
}

delete it and replace with

.ja-megamenu ul.level0 li.mega .has-image {

display: block;
background-repeat: no-repeat;
cursor: pointer;
width: 95px;
height: 18px;
font-size: 0px;
}

Then we can play with numbers to get perfect. :)</blockquote>

ok 🙂 Thank you for your patience 🙂 Yo are good one
Lets play with numbers

[swissa Friend swissaJoin date: November 2011Posts: 1955Downloads:7Uploads:277 Thanks: 175 Thanked: 717 times in 572 posts]

#445427

<em>@waelali 309775 wrote:</em><blockquote>ok 🙂 Thank you for your patience 🙂 Yo are good one
</blockquote>

LOL. I was married once to a Sicilian. :-[

Ok. You can change the width to 70px if you want. If you want more to see the text you will need to play with the image but if you go above height: 18px; you will ruin the menü so keep below that.

But Mein Herr, it looks good! I hope that helped.

If you add any image at this menü level you will automatically see no text . Insha’Allah.

Wish you luck

Bestens

1 user says Thank You to swissa for this useful post

1. waelali

[waelali Friend waelaliJoin date: February 2012Posts: 336Downloads:11Uploads:87 Thanks: 88 Thanked: 10 times in 1 posts]

#445428

<em>@swissa 309777 wrote:</em><blockquote>LOL. I was married once to a Sicilian. :-[

Ok. You can change the width to 70px if you want. If you want more to see the text you will need to play with the image but if you go above height: 18px; you will ruin the menü so keep below that.

But Mein Herr, it looks good! I hope that helped.

If you add any image at this menü level you will automatically see no text . Insha’Allah.

Wish you luck

Bestens</blockquote>

hhhhh
🙂 thank you …

I will try to fix and make it bigger

appreciate your help.

[waelali Friend waelaliJoin date: February 2012Posts: 336Downloads:11Uploads:87 Thanks: 88 Thanked: 10 times in 1 posts]

#445470

Ok – lets try to solve this problem in different way.
I think that the submitted solution is good and thank you Swissa for yor support always – Appreciate that , but it is not the best solution since there is problem with the size of the image , which is not easy in that solution to define.

Here is what we have now… Images are attached to give more details.

---

Attachments:

1. 
2. 
3. 
4. 

[Author]

Posts