Joomla Templates Club 406,261 posts

[osseo Friend osseoJoin date: February 2012Posts: 205Downloads:16Uploads:26 Thanks: 69]

#191890

Hi,

I notices there is a “thin divider lines” that appears in the mega menu “drop down” level.
Please see example on my testing site: http://jlamp.district279.org/
For example, if you mouse-over on “Students+Families” on the first level, I have 4 columns in the drop down and between each columns, there is a thin gray line, however, that line only extend as far as how many menu items in the column on the right instead of going all the way down.

Questions:

Is it possible for that “divider line” to go all the way down on the drop down menus no matter how many items in the column? If that’s not possible, how can I change the color of that divider line so it will be the same as the background color?

Is it possible to make the page open in a fix width window (or to set a “minimum width”) so the menus will stay in one horizontal line instead of going over to second row?

I want to create a special table on the homepage, but the default template.css is overwriting my local table styles.
How can I assign a different table css so this table style which will only apply to the homepage and overwriting the default template.css?

Thank you,
Emily

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#510829

Hello Emily,

That ‘divider line’ is just a gif image, you can open file: /templates/ja_nex/css/menu/mega.css at line 98:


.ja-megamenu .megacol {
background: url("../../images/line-bg.gif") repeat-y scroll left top rgba(0, 0, 0, 0);
}


You can change to your own image or remove it.

For the second concern, which way can I view to see the menu in 2nd row?

[osseo Friend osseoJoin date: February 2012Posts: 205Downloads:16Uploads:26 Thanks: 69]

#510895

Hi Saguaros,

1. Thank you for providing the image location for that divider line. I just want to make sure there is no way to extend that line beyond the total # of the menu items in the column in the code?

2. You can see the menu become two rows when you re-scale your browser to a smaller windows. Some people have smaller screen or low resolution screen so my website will display the main menu in two rows. That’s why I was wondering if there is a way to set a “minimum width” for the template so if they have a smaller window which can’t display all the menus in one row they will just have to scroll horizontally instead of display in two rows.

3. What about overwriting the table styles that’s defined in template.css? Is there a way to do custom or apply local styles on certain page to overwrite the table style in the default template.css? I know the local should overwrite global in CSS rules, but I couldn’t get it to work in my case, not sure why?

Please let me know if my questions are not clear to you, I can provide screenshots. Thanks!
Emily

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#511027

Hi Emily,

You can try with media jQuery to define specific css rule for specific screen resolution

Could you send me a screenshot that specify table you’re trying to style?

1 user says Thank You to Saguaros for this useful post

1. osseo

[osseo Friend osseoJoin date: February 2012Posts: 205Downloads:16Uploads:26 Thanks: 69]

#511156

Hi Saguaros,

1. So adding media jQuery css code to “template.css” can force site to display in certain resolution base on the device? But I also need to cover the different screen sizes for people using “computer and laptop” in general. Can I create special rules for that?

2. For the table style. I was just wondering how can I make a local (inline) css style overwrite my global style sheet (template.css). I know Ja-nex template comes it’s own styles for table, for example, no border for cells and no background colors. But for some tables, I need to have borders for cells for readability. Here is page with a big table:http://jlamp.district279.org/schools
I’ve tried add in the border lines for each rows and columns but it will only show cell lines in my JCE editor, but not on the front-end. So I’m assuming there global template.css is overwriting all the local styles?

Please help, thanks.
Emily

[osseo Friend osseoJoin date: February 2012Posts: 205Downloads:16Uploads:26 Thanks: 69]

#511278

I want to add to Question #2 – this is the “table format” I’m trying to recreate on my testing site.
Currently, the testing site table looks like this: http://jlamp.district279.org/schools
And I try to make it look like this by adding additional table styles: http://www.district279.org/schools/
But without changing the default table style overall. I’ve tried using div tags but it didn’t overwrite? Is there another better way to create a second table style in addition to the default style?

Thanks.

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#512479

Hi osseo,

You can add additional style to a specific page by taking advantage of page class suffixes in Joomla. See this documentation for a detailed example of using Page Class Suffixes:

http://docs.joomla.org/Using_Class_Suffixes#Page_Class_Suffix

[Author]

Posts