Hi,

I recently installed Rasa2 - I'm struggling to change some of the elements

1. I would like to change the menu font case - from upper to lower case, main menu and acordion

2. I would like to reduce the height of the menu size of the Sidebar,

3. I would like to reduce the size of the Sidebar and color of the gutter to white

I woulf be grateful if you can tell me how to achieve the above,

Many thanks for your assistance

Michael.

Hi Michael,

Have a link for the site?

Cheers
Paul

www.integratedbusinessdevelopment.co/

1. Try adding this

#menu ul>li a, #menu ul>li .zen-menu-heading {text-transform: inherit;}

2. Will need to check on that

3. The width of the sidebar is controlled by reducing the width values in the template settings by dragging the width values

The gutter do you mean the background images?

.side-image .main-content-inner {
background: url(../images/leftDividerTop.png) no-repeat left 0;
}

.side-image #midCol {
background: url(../images/leftDivider.png) repeat-y left top;
}

Cheers
Paul

Hi Paul, thank you for getting back to me, can I apply the same scripts to accordion menu as the texts are also displayed in upper case

Regards
Mike

Hi Mike,

You added them to the custom css file?

The two background images are the existing styling - so it would depend on what you wanted to do e.g. change the image?, remove the image

Cheers
Paul

Hi Paul,

Yes, I did add the menu script to the custom.css. How do I sort out the accordion texts? they are displayed in upper cases as well.

Should I add the script for the gutter in the custom.css as well and then change the images in order to change the appearance?

Many thanks for your assistance.

Regards
Mike

Hi Mike,

The gutter depends on what you are looking to do with the image - do you just want it removed?

Regarding the accordion - this is for a sidebar accordion menu (its actually a zentool module)

.sidebar ul li a, .sidebar ul li .zen-menu-heading {
text-transform: inherit !important;
}

Add this line as is

Cheers
Paul

Thanks Paul, all sorted apart from the menu height.

Many thanks
Mike

Hi Paul, I've just noticed that the menu script (the one above) now appears on my website, how can I get rid of it.
www.integratedbusinessdevelopment.co/
Regards
Mike

Hi Mike,

Where have you added the line of css?

Cheers
Paul

custom.css

cheers
Mike

Are you sure you didn't add the first line somewhere else?

As the custom css is two lines and looks like

#menu ul>li a, #menu ul>li .zen-menu-heading {text-transform: inherit;}
.sidebar ul li a, .sidebar ul li .zen-menu-heading {
text-transform: inherit !important;
}

Cheers
Paul

Sorted..... I mistakenly added it in the custom script.

Any joy on how I can reduce the height of the top menu?

Many thanks fo your assistance
Mike

Hi mike

Is this the latest version of the template?

Cheers
Paul

Hi Paul,

Yes, I believe it is the latest.

Cheers
mike

Try adding these

#menu ul>li a, #menu ul>li .zen-menu-heading {padding: 7px 30px 6px 20px;}
#menu {min-height: inherit;}
#menu ul>li:last-child a:after, #menu ul>li:last-child .zen-menu-heading:after {height: 48px;}
#menu .off-canvas-trigger {padding: 6px 20px 5px 25px;}
#navwrap #search .zen-icon-search {margin-top: 5px;}

#navwrap #search input {line-height: 48px;}

Cheers
Paul

Rob has chipped in with some better code try

#menu ul>li a, #menu ul>li .zen-menu-heading, #menu .off-canvas-trigger, #navwrap #search input {
padding: 7px 30px 6px 20px;
}
#menu {
min-height: inherit;
}
#navwrap #search input {
line-height: 20px
}
#navwrap #search .zen-icon-search {
font-size: 1.2em;
}
#menu ul>li:last-child a:after, #menu ul>li:last-child .zen-menu-heading:after {height: 48px;}

Cheers
Paul