HTML Logo by World Wide Web Consortium (www.w3.org). Click to learn more about our commitment to accessibility and standards.

Moving forward with Composr

ocPortal has been relaunched as Composr CMS, which is now in beta. ocPortal 9 will be superseded by Composr 10.

Head over to compo.sr for our new site, and to our migration roadmap. Existing ocPortal member accounts have been mirrored.


New 4.2 dropdown menu - little arrows

Login / Search

 [ Join | More ]
 Add topic 
Posted
Rating:
#53588 (In Topic #11663)
Avatar

Well-settled

Hi,

I've installed 4.2 RC1, and it's got a new dropdown menu. I have 3 problems I can't solve:

1. How do I change the toplevel font and font size without it feeding down to the actual dropdown text as well? At the moment if I make the top level bigger, the dropdown text gets bigger too.

2. How do I kill off those funny little down arrows?

3. Is it possible to replace the top level text with images?

Thanks!
Back to the top
 
Posted
Rating:
#53817
Avatar

Well-settled

Guys, I've sorted number 2, but I'm really struggling with number 1, and really could do with someone's help.

On 4.1 I edited the global.css and got seperate font sizes for the top bit of the menu (which you hover over for the dropdown) and the text in the dropdown itself.

In the new 4.2 global.css, I can change the top bit, but it's always the same in the bottom bit too.  I can't change it independently.  I want the top to be Century Gothic 1.7em, with the dropdown Verdana 1.3em.

Please help!
Back to the top
 
Posted
Rating:
#53848
Avatar

Honoured member

just give it a different ID name and add the styling for that div name in the css.

Back to the top
 
Posted
Rating:
#53851
Avatar

Well-settled

ocPortal_Noob said

just give it a different ID name


Do you mean in the template?  How do I identify which bit defines the dropdown, and which bit the top?

Thanks for the reply.
Back to the top
 
Posted
Rating:
#53852
Avatar

Community saint

The div classes … which would be in both the .tpl and .css files.

.tpl:

Code

<div class="id">
.css

Code

.id {
different styles
}
See your .css files for samples.

Eric DeMars . com
My electronic portfolio and personal site. Uses ocPortal!
Back to the top
 
Posted
Rating:
#53855
Avatar

Well-settled

Eric said


.tpl:

Code

<div class="id">

Cool - how do I know where to add a div in the .tpl so it only affects the dropdowns, and not the top?
Back to the top
 
Posted
Rating:
#53856
Avatar

Community saint

I don't have the templates opened, but if you want to browse, look for the dropdown area already there. The <div> setting should already be labeled. All you would have to do is add whatever style you want to your css file and then add that id tag to your div class for the drop down menu.

Eric DeMars . com
My electronic portfolio and personal site. Uses ocPortal!
Back to the top
 
Posted
Rating:
#53892
Avatar

Well-settled

Thanks everyone for the help.

In the end I have got exactly what I wanted. I put comcode for images into the menu builder, so I have images at the top of the menu, and text in the body - it looks great!

(I'm now going to try and see if I can get the menu to appear underneath, then run left to right, rather than down, as that would look amazing! I'm guessing I'm going to have to fiddle with the Javascript?)

Thanks again, everyone - if 4.2 RC2 fixes some catalogue issues I've got, then my site might well be ready for an unveiling soon!
Back to the top
 
Posted
Rating:
#53903
Avatar

Community saint

Looking forward to seeing it.  :thumbs:

Eric DeMars . com
My electronic portfolio and personal site. Uses ocPortal!
Back to the top
 
1 guests and 0 members have just viewed this: None
Control functions:

Quick reply   Contract

Your name:
Your message: