Indexhibit
Index + Exhibit

Login:

Created by
Daniel Eatock
Jeffery Vaska
And You

Indexhibit was updated to version 2.1.4 on April 10, 2017.

Styling single section in menu

 

Indexhibit version: Legacy
Thread is not resolved.

martinm
AUSTRALIA
9 year(s) ago
Permalink Post

Hi,

I am trying to style one of the four sections on our website menu, so that the listed links in this section are in a different colour to the three others (the menu in question would be the NEWS section).

Thanks in advance for any advice.

Vaska A
UNITED STATES
9 year(s) ago
Permalink Post

Not the best way, but it's fast...for now...put this into a js file...

  1. function style_list(group, name)
  2. {
  3.     // group is the section - start from 0 when counting
  4.     // name is the class name you will attach to the ul
  5.     $("#menu ul:eq(" + group + ")").addClass(name);
  6. }

Then add this to the onready rules...

  1. $(document).ready(function(){ style_list(3, 'red') });

This adds the class of 'red' to your news list...the ul tag. So, you can style from there however you want...such as...

  1. #menu ul.red { color: red; }
  2. #menu ul.red li a { color: red; }

I wrote this in such a way that it could be used by others in the future...

;)

Vaska A
UNITED STATES
9 year(s) ago
Permalink Post

I tested this...works without a hitch...

martinm
AUSTRALIA
9 year(s) ago
Permalink Post

Great work - thanks Vaska!

pisosse
DENMARK
8 year(s) ago
Permalink Post

Hmmm let me see if I have understood this correctly

I've made a .js file with your code and saved it to the site/js folder with the name "style_list.js"

Then I added..

  1. <script type='text/javascript' src='<%baseurl%><%basename%>/site/js/style_list.js'></script>
  1. ...To the site/sample/index.php file and further down the same document I added the onready functions like this....
  2. $(document).ready(function()
  3. {
  4. ¬†¬†¬†¬†setTimeout('move_up()', 1);
  5. ¬†¬†¬†¬†style_list(3, 'red')
  6. });

lastly I added the style to my site/sample/style.css like this...

  1. #menu ul {
  2.     line-height:1.5;
  3.     text-align:right;
  4.     font-style:normal;
  5. ¬†¬†¬†¬†font-family:Georgia,"Times New Roman",Times,serif;
  6. ¬†¬†¬†¬†list-style: none;
  7. ¬†¬†¬†¬†margin: 0 0 12px 0;
  8. }

#menu ul.red { color: red; }

#menu ul li.section-title {
font-style:italic;
text-align:right;
font-size: 14px;
font-family: Helvetica,Arial,sans-serif;
font-weight:bold;
margin:1px 0;
border-top:1px solid #CCCCCC;
border-bottom:1px solid #CCCCCC;

}

but alas nothing....?

have i misunderstood the whole concept?

pisosse
DENMARK
8 year(s) ago
Permalink Post

hmmm wierd formatting on that post....

pisosse
DENMARK
8 year(s) ago
Permalink Post

sorry I was getting it right... just some cache issues in my browser..

thanks all

Doctor_Osimo
GERMANY
8 year(s) ago
Permalink Post

nice work around!
is it possible to write the id of each section to the ul?
(eg. the class of the body-tag)

nvdg
NETHERLANDS
8 year(s) ago
Permalink Post
  1. i got something weird going on. I styled my section 2 to be redstyle_list(2, 'about'); but it's actually affecting my section 10 links... 
  2. How is that possible? 
  3. Thanks
nvdg
NETHERLANDS
8 year(s) ago
Permalink Post

sorry for the weird formatting on that post...

nvdg
NETHERLANDS
8 year(s) ago
Permalink Post

in addition to my last post, i realized that the order of section i see in my source code does not correspond with the order I give it in the CMS. For instance, my About page is section 2, but when I look at the published page it says body class section-6. how does this work? sorry if this a stupid question, I'm still learning :)

nznz
ARGENTINA
8 year(s) ago
Permalink Post

Hi, how can i change the css style of the title of each section ?

i don't want to change the entire block of each section, only the title.

It's can be posible ?

in the other hand, where i can modify the html ?

Thanks For All, this is a great system !

richardn
UNITED KINGDOM
8 year(s) ago
Permalink Post

#menu ul li.section-title

nznz
ARGENTINA
8 year(s) ago
Permalink Post

#menu ul li.section-title:
this is not for the all title sections in the web ?

I want to change each title independently the others titles.
Example, i want the first of my 3 titles, in color blue, the second in red and the third yellow, how can i change the css style for each of this title ?

sempervirent
UNITED STATES
8 year(s) ago
Permalink Post

For what it's worth, I've posted an outline of how to solve this without resorting to Javascript:

http://indexhibit.org/forum/thread/7869/

carolinavallejo
UNITED KINGDOM
7 year(s) ago
Permalink Post

Hi there,

\n\n

I\'m trying to do more or less the same thing but want the main menu (the section titles) to be in the aligned to the bottom of the menu div and the first childs (the exhibits) to appear on the top of the menu div. I\'m trying Vaska\'s code now but I don\'t seem to get it working and I\'m wondering if its maybe because of the weird formatting... Can anyone that has used this code paste an image of how it looks like, please?

\n\n

The website is http://jh-architecture.com/web/project/office-spaces/

\n\n

Thanks!

\n\n

C

Showing 1 - 16 of 16 posts in Forum » Customize » Styling single section in menu
 

This thread has been closed, thank you.