Joomla Templates Club 406,261 posts

[bollog Friend bollogJoin date: March 2011Posts: 43Downloads:0Uploads:14 Thanks: 5]

#162735

Hi there,

Well i have installed the JA Top Panel module in my quickstart JA Portfolio installation for Joomla 1.5 but when panel gets clicked to open then the dropdown content gets behind as background and my main menu bar in front. Also as may be seen in the print screen attached the width of the panel is different (smaller) than my relevant’s menu. How can i fix these?

Thanks

---

Attachments:

1. 

[himangi Friend himangiJoin date: April 2011Posts: 1406Downloads:1Uploads:86 Thanks: 21 Thanked: 345 times in 332 posts]

#386113

Hi,

Can you please provide site URL?

[bollog Friend bollogJoin date: March 2011Posts: 43Downloads:0Uploads:14 Thanks: 5]

#386153

Hi himangi,

I would have in advance but is on my localhost. Please try the latest quickstart for JA Portfolio Joomla 1.5 installation as dowloaded by the forum pages at your test server and then also install the latest version of JA Top Panel module to see this issue.

Regards

[himangi Friend himangiJoin date: April 2011Posts: 1406Downloads:1Uploads:86 Thanks: 21 Thanked: 345 times in 332 posts]

#386187

Hi,

Create a blank css file in templates/ja_portfolio/css. Name the file ‘mod_jatoppanel.css’ and put following code in it.
<blockquote>.ja-toppanel-mainwrap{

z-index: 9999;

}</blockquote>

It will bring your top panel on top of everything else.

[bollog Friend bollogJoin date: March 2011Posts: 43Downloads:0Uploads:14 Thanks: 5]

#386356

Hi himangi,

The blank css file perfectly worked. Thank you for your efficient support.

Another two qusetions please.

1) How could i remove the title of my (article or content) assigned to the top panel module. I tried by setting ‘do not show title’ at the article’s backend parameters but that didn’t work. Title is still there on the top block of the panel.

2) How can i change the background and blocks color to the desired #313435 black of the portfolio’s tempalte so make it look alike? I cannot find any color style at module’s style.css file. Is it because it uses image?

Regards

[himangi Friend himangiJoin date: April 2011Posts: 1406Downloads:1Uploads:86 Thanks: 21 Thanked: 345 times in 332 posts]

#386365

<em>@bollog 234192 wrote:</em><blockquote>
1) How could i remove the title of my (article or content) assigned to the top panel module. I tried by setting ‘do not show title’ at the article’s backend parameters but that didn’t work. Title is still there on the top block of the panel.
</blockquote>
You can hide the title using css. For the same place code below in the module css.
.ja-toppanel-content .ja-toppanel-article h3 {
display: none;
}

<em>@bollog 234192 wrote:</em><blockquote> How can i change the background and blocks color to the desired #313435 black of the portfolio’s tempalte so make it look alike? I cannot find any color style at module’s style.css file. Is it because it uses image?</blockquote>

To change the panel color you will need to create images with the color you want. Original image can be found at
modules/mod_jatoppanel/assets/images folder and the images you will need to change are :
button-mid.png, trans-topcpanel.png, button-left.png, button-right.png

You can place these images (with same names as original images) in your template image folder and place following code in the module css you have created in the css folder in your template.

.bg-transparent {
background: url(“images/trans-topcpanel.png”) repeat scroll 0 0 transparent;
}

.ja-toppanel-button-wraper .btn-left .ja-toppanel-button-l {
background: url(“images/button-left.png”) no-repeat scroll left center transparent;
height: 23px;
width: 35px;
}

.ja-toppanel-button-wraper .btn-left .ja-toppanel-button {
background: url(“images/button-mid.png”) repeat-x scroll 0 0 transparent;
color: #FFFFFF;
float: left;
font-size: 85%;
height: 23px;
line-height: 20px;
overflow: hidden;
text-align: center;
width: 72px;
}

.ja-toppanel-button-wraper .btn-left .ja-toppanel-button-r {
background: url(“images/button-right.png”) no-repeat scroll right center transparent;
height: 23px;
width: 35px;
}

[bollog Friend bollogJoin date: March 2011Posts: 43Downloads:0Uploads:14 Thanks: 5]

#386455

Nicely done! I finally get started understanding of editing css files. 🙂 Am kind of newbie to both Joomla and development but with your help via forums pages i get better day by day 🙂 Special thanks for your support and hints.

Just a final workaround before this thread gets closed.

1) How could i do achieve the same result (do not show ‘Title’) but for module’s title this time rather than only article’s?

2) I duplicated the top panel module so i can use different top panel modules (first ‘content type = article id’ and second ‘content type = modules’) at ‘top’ position for user’s navigation purposes. I actually need to make quite many (multiple) depending on categories of my content. Well i did manage to duplicate and it works fine when assigned for different link pages but ever since (i think) i put the code into my ‘mod_jatoppanel.css’ file i’ve noticed that panel’s ‘Title’ for both of my modules is always same and set to default ‘Top Panel’, rather than my top module names assigned (TP1 and TP2 for example) . Any ideas of why this is happening and how i could bring panel’s different title (for each relative module) as set to the module ‘Title’ parameters at the backend? Am i missing something here?

Regards

Kaza

[himangi Friend himangiJoin date: April 2011Posts: 1406Downloads:1Uploads:86 Thanks: 21 Thanked: 345 times in 332 posts]

#386498

Hi,

1. For any title using h3 tag, following code should work. you will need to add it in the overriding module css.
<blockquote>.ja-toppanel-content h3 {
display: none;
}</blockquote>

2. Currently the Top panel content comes from the default.php in module. To change that, copy the file from module/mod_jatoppanel/tmpl folder and paste it into templates/your_template/html/mod_jatoppanel folder. You will need to create this module folder in html folder to override the default.php from template.
Once you have copied the file in template, edit the file to find <blockquote><div class=”ja-toppanel-button”><?php echo JText::_(‘Top Panel’)?></div></blockquote> and replace it with <blockquote><div class=”ja-toppanel-button”><?php echo $module->title; ?></div></blockquote>

This will show your module titles instead of Top Panel text.

You will need to make styling changes if your module title is bigger than Top Panel text. But doing above change should work for you if you are using titles TP1, TP2 etc.. You can see what titles can fit in the existing area and change it accordingly if you need it in future..

1 user says Thank You to himangi for this useful post

1. bollog

[bollog Friend bollogJoin date: March 2011Posts: 43Downloads:0Uploads:14 Thanks: 5]

#386623

Magic! :laugh: Very precise and smooth transition towards desired result. This post gets closed.

Well done Himangi and thanks for code and patience. 🙂

Regards

[himangi Friend himangiJoin date: April 2011Posts: 1406Downloads:1Uploads:86 Thanks: 21 Thanked: 345 times in 332 posts]

#386645

Glad to know! 🙂

[Author]

Posts