Solved

Superfish menu background in Joomla

Posted on 2010-11-12
17
815 Views
Last Modified: 2012-05-10
Hi
I am creating a website: http://new.adpp-mozambique.org/
As you can see i am using superfish menu.
To the right of the menu i have a white field that i want red
The superfish is in a module location called "user3"

Below i have a banner in module location called "banner1"

I can see that they are both using the art-nostyle div

If i in css file create a div called art-nostyle and make background red, it works, but then the background in the banner when the picture change (when clicking a link) also get red

What I want to acheve is that the "user3" and "banner1" are not charing the "art-nostyle"
How do I acheve to fill the white space to the right of the superfish menu without changing the background to red also in the "banner1" place holder?

Kind Regards
Morten

0
Comment
Question by:morten444
  • 7
  • 7
  • 3
17 Comments
 
LVL 13

Expert Comment

by:darren-w-
ID: 34120210
#alsfh_19_686{
background-color:red;
}
0
 

Author Comment

by:morten444
ID: 34120796
Hi
Thanks for your reply
I am using firefox and i can when using firebug see that #alsfh_19_686 exist
I added the red background in firebug and it works

Now when I go to my website to find this line i cant find it in template.css or the index.php
In firefox it says its in new.adpp-mozambique.org lane 18, put its not refering to the tempalte.css
Where do I have to insert this settings

Kind Regards
Morten
0
 
LVL 13

Expert Comment

by:darren-w-
ID: 34121595
Add the line to your default stylesheet It may be created by the menu
0
 

Author Comment

by:morten444
ID: 34123336
Hm.
I have added to template.css the following code:

#alsfh_19_686
{
background-color:red;
}

it still does not work.
Is there not a way to hardcore it into the index.php file that the "user3" module holder should be red?
or
a way to make sure that the superfish menu fills 100% of the with of my site?

0
 
LVL 11

Expert Comment

by:Amanda Watson
ID: 34123838
Have you tried adding a module suffix to the module that contains the flash?
div class=art-nostyle flash>

then you should be able to create a new CSS to apply to that

I think the #alsfh_19_686  tag you are looking for is likely to be in the style sheet of the flash  module you are using...if you look in that module you might find a stylesheet in there and that tag could be there

0
 

Author Comment

by:morten444
ID: 34124478
Hi Snowball77
Thanks for reply
The problem I have is that "user3" and "banner1" appear to usethe same art-nostyle
eaven if i manager to edit the css for the flash, the flash should only change the "banner1" not the "user3" where i have the superfish menu.

If i with Firefox Firebug holding the mouse over "user3" the wite field around the translator module, you can see that it also marks the flash banner area "banner1"
So what ever change i apply to "user3" background, will also be applied to the background of the flash banner while loading new image. This is what i do not want.
I want the changes i make ONLY to apply to "user3" location

Thats why I need to find a way eighter in the template.css file or index.php file to set background colour only for the "user3"

Hope this is understandable

Kind Regards
Morten
0
 
LVL 11

Expert Comment

by:Amanda Watson
ID: 34125481
I do sort of understand..but I just need to clarify, that adding a module suffix to the module using user3 doesn't allow you to create a new css  #art-nostyle flash{ } (flash is the suffix as an example) to only that position?
0
 
LVL 11

Expert Comment

by:Amanda Watson
ID: 34125483
Also did you check out the module style sheet to find #alsfh_19_686 ?
0
IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 

Author Comment

by:morten444
ID: 34125598
Hi
Now i can not find it
in the banner "banner1" i use a flash called mod_novasfh, so based on name i guess this #alsfh must be related to this.
Even if i find it and change the background colour to red, then the site will have the same effect that you now see if you use IE. not firefox.
If you click on an link , when the header is changing picture, the whole background is red. Thats what i dont want.
I need to isolate "user3" in a way. There should be no flash in that location accept for superfish

If you look at the site using "IE"now you see the result of inserting a 30px with red picture into art-nostyle
0
 
LVL 11

Expert Comment

by:Amanda Watson
ID: 34132041
Ok, so do you know what I think might work...move the menu div inside the header div in index.php

move the div and php tags to reside inside the <div class="art header"> then you should be able to give a background color for the menu

this is getting hard to help you with without actually being able to play with the code and modules etc, but I hope throwing around these ideas might help to solve it
0
 
LVL 11

Accepted Solution

by:
Amanda Watson earned 500 total points
ID: 34132043
You might even be able to create a new div for the menu to reside it, then you can style that div with the background color etc that you need?
0
 

Author Comment

by:morten444
ID: 34132284
Hi Thanks for your advice
I have copy the content over to a test domain:
http://templates.eadvice.dk/

I have moved the "user3" inside "art-header"
I can now set the background. Well throught :)

I stil have some problem as its very  wide and also menu drops behind the banner.
I wil play alittle more with it and se if i can narrow down the menu field

If not 2nd option is to just get the red background that is working in IE to work in Firefox as well.
Very strange I have that problem. normally its the IE that gives me problems

hmm
0
 
LVL 11

Expert Comment

by:Amanda Watson
ID: 34132817
It looks like I opened up a new set of problems..in regards to the FF and IE issue, I would suggest opening a new question for this to get a fresh set of eyes on the problem that causes the difference in IE and FF

Back to the original problem of getting a red background perhaps put the menu back where it was, but put a new set of divs around it so you can apply a style to the menu section only

0
 
LVL 13

Expert Comment

by:darren-w-
ID: 34134316
Hi,

I'm not so sure if you have found this out yet, but the style #alsfh_19_686 is defined on the page not in a stylesheet.

Darren
0
 

Author Comment

by:morten444
ID: 34135402
Hi
Thanks. I might open a new thead regarding IE og Firefox showing issue

Regarding creating a new div... hm.. I have learned alot during this post but this is to complex for me I think. i tried on http://templates-eadvice.dk but cant seem to figure that out

Regarding the style #alsfh_19_686
I can see that this # also cover the banner area, so what ever I apply to this # will also be applied to the banner. It will look like it now does in IE. red background also behind the flash banner (when clicking any link)

I think i will go for a picture background. Red at the top that fit the menu, and white on the part that falls behind the "banner1", then resolve the issue I have with Firefox and IE in another question.

I keep this open a little bit more in case i get some other idears comming in :)

Thanks so far
0
 
LVL 11

Expert Comment

by:Amanda Watson
ID: 34158012
I think a solution was found to your original question by moving the menu section outside the div area.

There were other issues that presented themselves which I am sorry we cannot fix, but it would be nice to award points to a possible solution to award the experts that tried to help
0
 

Author Closing Comment

by:morten444
ID: 34158363
Hi. Thanks for all the help. I through only points where given when an issue was resolved, but I am happy to give you the point for trying to help.
Thanks again
0

Featured Post

What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…

708 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

14 Experts available now in Live!

Get 1:1 Help Now