Styling Mega Menu 1.5
Permalink
Hello all.
I have some minor problems in styling Mega Menu 1.5 (last version).
The brilliant addon now has a custom css file that I can style in whatever way I want. The "Problem" is that this css file is stored in the database, This means I have to log in to the website, edit the page, change the css and then publish my edits to see the change I made.
It takes forever.
What I have decided to do, is to choose white.css as my menu style. Then I can open it from the server in cssedit on my mac, make the change , switch to the browser and reload to see the change. Way easier, I think. Then, when I am happy with the design, I copy all the css code and paste it into the custom css text area to make sure it stays that way if I upgrade the addon.
Question1: Is there really no way to do the same with the custom.css file directly?
Question 2: The m,enu I want is actually very simple, just get rid of the image backgrounds and make the main font (not the drop down font) larger, thinner and in a light gray color. I have tried changing font sizes and color in the white.css file, but the only change I can see is in the drop down menu, not the top level font.
Where do I change it? I tried to take a look at the custom.css file since it has comments showing you what code does what, but it does not look the same.
Anyone?
Thanks.
url:http://anakwaana.com/akatest
I have some minor problems in styling Mega Menu 1.5 (last version).
The brilliant addon now has a custom css file that I can style in whatever way I want. The "Problem" is that this css file is stored in the database, This means I have to log in to the website, edit the page, change the css and then publish my edits to see the change I made.
It takes forever.
What I have decided to do, is to choose white.css as my menu style. Then I can open it from the server in cssedit on my mac, make the change , switch to the browser and reload to see the change. Way easier, I think. Then, when I am happy with the design, I copy all the css code and paste it into the custom css text area to make sure it stays that way if I upgrade the addon.
Question1: Is there really no way to do the same with the custom.css file directly?
Question 2: The m,enu I want is actually very simple, just get rid of the image backgrounds and make the main font (not the drop down font) larger, thinner and in a light gray color. I have tried changing font sizes and color in the white.css file, but the only change I can see is in the drop down menu, not the top level font.
Where do I change it? I tried to take a look at the custom.css file since it has comments showing you what code does what, but it does not look the same.
Anyone?
Thanks.
url:http://anakwaana.com/akatest
Could it just be a sticky browser cache? Particularly in Chrome, but other browsers also, I find tweaking a css file takes ages to get through unless I forcibly tell the browser to refresh the css.
Question 2: Try in 'main.css'
#nav .mega-menuh li a { color: #666666 !important; font-size: 16px; font-weight: normal; padding: 12px 30px 12px 16px !important; } #nav .mega-menuh li li { width:160px; } #nav .mega-menuh li li a { background-image: none; font-size: 0.9em; padding-left: 8px; }
Great. Thanks. I tried "inspect element" in Crome and could see that some of the font elements was inherited from main.css. Is there a way to avoid this? Easier to have all the control in one place.Could I for intance remove all font info from the Mega Menu css and keep it in typography.css or main.css?
BTW.My css is called "default.css". It thjat the one you are referring to?
BTW.My css is called "default.css". It thjat the one you are referring to?
css has rules about which styles dominate when more than one could be applicable. If you google for:
css cascade specificity scoring
That will give plenty of references that explain it in a variety of ways.
What you need to do is make your styles score higher, so they dominate the aspects of other styles you don't want.
Generally you need to be as specific as possible and if the style you want to beat starts with an #id, then you need to start your style with an #id to beat it.
css cascade specificity scoring
That will give plenty of references that explain it in a variety of ways.
What you need to do is make your styles score higher, so they dominate the aspects of other styles you don't want.
Generally you need to be as specific as possible and if the style you want to beat starts with an #id, then you need to start your style with an #id to beat it.
All loaded css declarations matching selectors effect the site. Parent elements inherit their children, but higher score wins.
'typography.css' is only necessary in according of the concrete5 marketplace.
'main.css' will be called on every page.
The styles included in add-ons, got only called when used on a page.
MegaMenu is used global, you can put your styles in main.css.
'default.css' seems to be the base-style of the add-on.
I would create an own theme variation and upload it to 'blocks/' (not 'packages/').
Copy white theme, rename, make modifications, upload, select.
It is more difficult, but anyway main.css works fine...
'typography.css' is only necessary in according of the concrete5 marketplace.
'main.css' will be called on every page.
The styles included in add-ons, got only called when used on a page.
MegaMenu is used global, you can put your styles in main.css.
'default.css' seems to be the base-style of the add-on.
I would create an own theme variation and upload it to 'blocks/' (not 'packages/').
Copy white theme, rename, make modifications, upload, select.
It is more difficult, but anyway main.css works fine...
I am getting it slowly. I can see that many of the styles in the Mega Menu has the !Important tag. As far as I can tell, this should override any previous styles given to that element.
Another problem I have come across is that I want to change the color of the drop-down menu font (I want it darker). When I ask Chrome to inspect the element, the color is defined in a css file called standardcss in /tools/blocks/jb_megamenu/
But there is nothing in the tools folder.
???????
Another problem I have come across is that I want to change the color of the drop-down menu font (I want it darker). When I ask Chrome to inspect the element, the color is defined in a css file called standardcss in /tools/blocks/jb_megamenu/
But there is nothing in the tools folder.
???????
Bear in mind that they may be !important for a very good reason...
You can beat an !important with another !important that is later or more specific.
You can also beat it with a directly applied style attribute, or by applying a style using jQuery after the css with the !important has loaded.
The trouble with !important is that once one exists, the above tricks to beat it start a cascade of designers applying !important. The styling in Mega Menu may well be because it had to overcome something in a default theme or another popular addon.
You can beat an !important with another !important that is later or more specific.
You can also beat it with a directly applied style attribute, or by applying a style using jQuery after the css with the !important has loaded.
The trouble with !important is that once one exists, the above tricks to beat it start a cascade of designers applying !important. The styling in Mega Menu may well be because it had to overcome something in a default theme or another popular addon.
