/    Sign up×
Community /Pin to ProfileBookmark

Modifying menu

Copy linkTweet thisAlerts:
Apr 16.2008

I need help modify CSS file a little:
[URL=”http://sirius.byethost2.com”]http://sirius.byethost2.com[/URL]
Css:
[URL=”http://sirius.byethost2.com/templates/rhuk_solarflare_ii/css/template_css.css”]http://sirius.byethost2.com/templates/rhuk_solarflare_ii/css/template_css.css[/URL]

I want change the left vertical menu look (User Menu and Other Menu – “mainlevel” in CSS): just make it same style as Top Menu – color swap without background image. I tried just remove [B]menu_bg.png[/B] image, but there is some other glitches, which need be solved.
I want also set 1px border around menu buttons same as Top Menu, this can be done with border parameter: 1px solid #cccccc;, but this modification display horizontal border 2px between menu buttons, that looks not very good. I need thin 1px border.
Help much appreciated.

to post a comment
CSS

10 Comments(s) ↴

Copy linkTweet thisAlerts:
@smyhreApr 16.2008 — Did you want the background to change on hover or when it is active or when? If you want to have it change in either of these you could have something like a:hover {background-color: #789123} or a:active {background-color: #789123} and that would change the background color if the link was hovered over or if it were active.

As for the border you are getting that because the 1px border from one is right next to a 1px border of the other so what you may want to do is restrict the border on the top of most of those buttons except the very top one like:
[code=html]
#examplediv {border: 1px solid black}
#examplediv {border-top: none}

#examplediv.topbutton {boder-top: 1px solid black;}
[/code]
Copy linkTweet thisAlerts:
@TaurusauthorApr 16.2008 — I have modified part of CSS menu ('mainlevel'), but not clear how to

set the border on the top of these two very top menu buttons. Currently it have no top border.

Also, what is the purpose of this line (in a.mainlevel:hover): [B]background-position: 0px -25px;[/B]

Is this related to menu_bg.png so need be also removed?

Does it make sense add [B]background-image: none;[/B] right after 'a.mainlevel:link, a.mainlevel:visited', by analogy with 'ul#mainlevel-nav li' ?

original CSS:
[CODE]
a.mainlevel:link, a.mainlevel:visited {
display: block;
background: url(../images/menu_bg.png) no-repeat;
vertical-align: middle;
font-size: 11px;
font-weight: bold;
color: #ccc;
text-align: left;
padding-top: 5px;
padding-left: 18px;
height: 20px !important;
height: 25px;
width: 100%;
text-decoration: none;
}

a.mainlevel:hover {
background-position: 0px -25px;
text-decoration: none;
color: #fff;
}

a.mainlevel#active_menu {
color:#fff;
font-weight: bold;
}

a.mainlevel#active_menu:hover {
color: #fff;
}
[/CODE]

my changes:
[CODE]
a.mainlevel:link, a.mainlevel:visited {
display: block;
vertical-align: middle;
font-size: 11px;
font-weight: bold;
color: #333333;
text-align: left;
padding-top: 5px;
padding-left: 18px;
height: 20px !important;
height: 25px;
width: auto;
text-decoration: none;
border: 1px solid #cccccc;
border-top: none;
}

a.mainlevel:hover {
background-position: 0px -25px;
text-decoration: none;
color: #fff;
background: #c64934;
}

a.mainlevel#active_menu {
color:#666;
font-weight: bold;
}

a.mainlevel#active_menu:hover {
color: #fff;
}
[/CODE]
Copy linkTweet thisAlerts:
@smyhreApr 17.2008 — Yes the background-position: 0px -25px; is refering to the image is there is no image to modify with this then it is a useless bit of code and can be removed.

You could add the class of top-button to the top buttons like in bold below and define that class to have a top border:
<tr align="left"><td><a href="http://sirius.byethost2.com/index.php?option=com_frontpage&amp;Itemid=1" class="[B]top-button[/B] mainlevel" id="active_menu">Home</a></td></tr>[/QUOTE]

CSS: a.top-button {border-top: 1px solid #ccc;}[/QUOTE]

Note: #ccc is the condensed version of #cccccc
Copy linkTweet thisAlerts:
@TaurusauthorApr 17.2008 — where this need be inserted?

<tr align="left"><td><a href="http://sirius.byethost2.com/index.php?option=com_frontpage&amp;Itemid=1" class="[B]top-button mainlevel[/B]" id="active_menu">Home</a></td></tr>[/QUOTE]
Also, does it make sense add [B]background-image: none;[/B] attribute right after 'a.mainlevel:link, a.mainlevel:visited', by analogy with 'ul#mainlevel-nav li' ?
Copy linkTweet thisAlerts:
@smyhreApr 17.2008 — There is no reason to have [B]background-image: none;[/B] if you have no background image attributed to that element in the first place. Though if you have one and you would like to have it removed at that point then you can have that.

<tr align="left"><td><a href="http://sirius.byethost2.com/index.php?option=com_frontpage&amp;Itemid=1" class="[B]top-button mainlevel[/B]" id="active_menu">Home</a></td></tr> [/QUOTE]

The line above is directly from the html source code of the link you provided in your first post. But there is one other place you would want to modify the html for if you want that top border on the "Other Menu" top button as well:
<tr align="left"><td><a href="http://www.joomla.org" class="[B]top-button mainlevel[/B]">Joomla! Home</a></td></tr>[/QUOTE]

This is assuming that the page you provided is the page you are working on so you will have to search the html code to find these places. If the link you provided above is not the page you are working on then provide a link to that and I can help you further.
Copy linkTweet thisAlerts:
@TaurusauthorApr 17.2008 — this html pages are dynamically generated, but I find no <div class="moduletable"> in index.php file for this template.
Copy linkTweet thisAlerts:
@smyhreApr 18.2008 — Ok this "fix" that I am proposing doesn't require html modification but it does modify more than just the right side menus though it won't be that noticeable for most people.

Add this code to your css:
div.moduletable table {

position: relative; top: -2px;

}[/QUOTE]

Hope you find this a suitable fix ? Only thing I can think of without modifying the html and with the fewest drawbacks for the time being.
Copy linkTweet thisAlerts:
@TaurusauthorApr 18.2008 — this is interesting fix, it works. But I still would like to find the php file which control this menu buttons.
Copy linkTweet thisAlerts:
@smyhreApr 18.2008 — Yeah finding that php file would probably be best since this isn't my first choice of doing things but at least you can make it look semi good without the php for now.
Copy linkTweet thisAlerts:
@TaurusauthorApr 18.2008 — Thanks for tips. I can also, just set
border-bottom: 1px solid #cccccc;[/QUOTE]
this way menu buttons will look nice enough, since visible is just bottom borders.
×

Success!

Help @Taurus spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...