Welcome to Geeklog, Anonymous Saturday, August 31 2024 @ 11:58 pm EDT
Geeklog Forums
Camouflage theme
ironmax
Michael
frawo
When I see the style sheet, I think its:
.boption {
font-size: 10px;
padding-left: 10px;
padding-top: 5px;
padding-bottom: 5px;
border-top-color: #D8EBBE;
border-top-style: solid;
border-top-width: 1px;
border-bottom-color: #7E9264;
border-bottom-style: solid;
border-bottom-width: 1px;
background-color: #000000
}
.boption:hover {
background-color: #CCCCFF;
border-top-color: #4B573C;
border-top-style: solid;
border-top-width: 1px;
border-bottom-color: #76895E;
border-bottom-style: solid;
border-bottom-width: 1px;
color: #FFFFFF;
}
.boption:hover a {
color: #FFFFFF;
}
.boption a {
color: #4B573C;
font-weight: normal;
}
.boption-off {
font-size: 10px;
font-weight: bold;
padding-left: 10px;
padding-top: 5px;
padding-bottom: 5px;
margin-left: 0px;
background-color: #6666FF;
border-top-color: #FFCC00;
border-top-style: solid;
border-top-width: 1px;
border-bottom-color: #FFCC00;
border-bottom-style: solid;
border-bottom-width: 1px;
vertical-align: middle;
}
.boption-plain {
/* font-size: 10px; */
line-height: 14px;
padding-top: 2px;
padding-bottom: 2px;
padding-left: 10px;
}
.boption-plain select {
width:120px;
}
But I cannot get it to work because I'm to "stupid" to understand advanced css.
Someone who can point out the way to a solution?
Frawo
...what, me?
ironmax
How can I transfer the menu from Camouflage to Professional.
When I see the style sheet, I think its:
.boption {
font-size: 10px;
padding-left: 10px;
padding-top: 5px;
padding-bottom: 5px;
border-top-color: #D8EBBE;
border-top-style: solid;
border-top-width: 1px;
border-bottom-color: #7E9264;
border-bottom-style: solid;
border-bottom-width: 1px;
background-color: #000000
}
.boption:hover {
background-color: #CCCCFF;
border-top-color: #4B573C;
border-top-style: solid;
border-top-width: 1px;
border-bottom-color: #76895E;
border-bottom-style: solid;
border-bottom-width: 1px;
color: #FFFFFF;
}
.boption:hover a {
color: #FFFFFF;
}
.boption a {
color: #4B573C;
font-weight: normal;
}
.boption-off {
font-size: 10px;
font-weight: bold;
padding-left: 10px;
padding-top: 5px;
padding-bottom: 5px;
margin-left: 0px;
background-color: #6666FF;
border-top-color: #FFCC00;
border-top-style: solid;
border-top-width: 1px;
border-bottom-color: #FFCC00;
border-bottom-style: solid;
border-bottom-width: 1px;
vertical-align: middle;
}
.boption-plain {
/* font-size: 10px; */
line-height: 14px;
padding-top: 2px;
padding-bottom: 2px;
padding-left: 10px;
}
.boption-plain select {
width:120px;
}
But I cannot get it to work because I'm to "stupid" to understand advanced css.
Someone who can point out the way to a solution?
Frawo
Your looking in the wrong area of the style sheet. What you are looking for, is the following:
Camouflage style sheet
.header-links {
color: #000000;
font-size: 11px;
font-family: "Lucida Grande", Helvetica, Arial, sans-serif;
text-align: left;
white-space: nowrap;
}
.header-links a {
color: #FFFFFF;
padding-left: 20px;
background-image: url(images/arrow-right-white.gif);
background-repeat: no-repeat;
background-position: 2px -3px;
}
.header-links a:hover {
color: #FFCC00;
background-image: url(images/arrow-right-yellow.gif);
background-repeat: no-repeat;
background-position: 2px -3px;
}
In comparison of this style sheet with the professional one, what you are looking for should be this area:
Professional style sheet
/* Header *********************************************************************/
.header-logo {
float:left;
padding-left:15px;
padding-top:13px;
}
.header-slogan {
float:right;
line-height:78px;
padding-right:15px;
color: #ffffff;
}
.header-logobg-container-inner {
background:url(images/header-bg.png) #1A3955;
border-bottom:1px solid #CCCCCC;
height:78px;
margin-bottom:1px;
}
.header-navigation-container {
border-bottom:1px solid #FFFFFF;
background:#E7E7E7;
}
.header-navigation-container ul {
list-style: none;
padding:0px;
margin:0px;
border-bottom:1px solid #CCCCCC;
color:#FFFFFF;
float:right;
height:24px;
}
.header-navigation-container li {
float:left;
padding-right:9px;
padding-left:9px;
margin-top:4px;
background:transparent;
font-size:.9em;
border-left: 1px dotted #FFFFFF;
}
.header-navigation-container a:link {
color:#0000FF;
}
.header-navigation-container a:visited {
color:#800080;
}
.header-navigation-container a:hover {
color:#008000;
}
.header-navigation-container a:active {
color:#FF0000;
}
.header-welcomeanddate-text {
padding-top:12px;
padding-left:4px;
margin: 0px;
height:40px;
border-bottom:1px solid #CCCCCC;
}
If your looking to move the menu up to the top like the professional, then move the lines in the header.thtml file around, like so:
<table id="header" align="center" cellspacing="0" border="0">
<tr>
<td class="header-right">
<div class="header-links">{allowed_menu_elements}{plg_menu_elements}<!-- <a href="{site_url}/usersettings.php?mode=preferences">Your Preferences</a>--></div>
</td>
<td class="header-left">
<a href="{site_url}"><img src="{layout_url}/images/logo.png" border="0" width="162" height="80" alt="Axonz Logo"><!-- {site_name} --></a>
</td>
</tr>
</table>
Otherwise you'll have to experiment around until you get your layout the way you want it.
Michael
frawo
Will try this for the top menu.
But I was thinking of the left box menu.
Where can I put:
<style type="text/css">
.wireframemenu{
border: 1px solid #C0C0C0;
background-color: white;
border-bottom-width: 0;
width: 170px;
}
* html .wireframemenu{ /*IE only rule. Original menu width minus all left/right paddings */
width: 164px;
}
.wireframemenu ul{
padding: 0;
margin: 0;
list-style-type: none;
}
.wireframemenu a{
font: bold 13px Verdana;
padding: 4px 3px;
display: block;
width: 100%; /*Define width for IE6's sake*/
color: #595959;
text-decoration: none;
border-bottom: 1px solid #C0C0C0;
}
.wireframemenu a:visited{
color: #595959;
}
html>body .wireframemenu a{ /*Non IE rule*/
width: auto;
}
.wireframemenu a:hover{
background-color: #F8FBBD;
color: black;
}
</style>
From: www.dynamicdrive.com/style/csslibrary/item/wire-frame-menu/
I don't need flyout boxes and such. And do I have to change anything in a .thtml file?
frawo
ironmax
Thank you Ironmax.
Will try this for the top menu.
But I was thinking of the left box menu.
Where can I put:
<style type="text/css">
.wireframemenu{
border: 1px solid #C0C0C0;
background-color: white;
border-bottom-width: 0;
width: 170px;
}
* html .wireframemenu{ /*IE only rule. Original menu width minus all left/right paddings */
width: 164px;
}
.wireframemenu ul{
padding: 0;
margin: 0;
list-style-type: none;
}
.wireframemenu a{
font: bold 13px Verdana;
padding: 4px 3px;
display: block;
width: 100%; /*Define width for IE6's sake*/
color: #595959;
text-decoration: none;
border-bottom: 1px solid #C0C0C0;
}
.wireframemenu a:visited{
color: #595959;
}
html>body .wireframemenu a{ /*Non IE rule*/
width: auto;
}
.wireframemenu a:hover{
background-color: #F8FBBD;
color: black;
}
</style>
From: www.dynamicdrive.com/style/csslibrary/item/wire-frame-menu/
I don't need flyout boxes and such. And do I have to change anything in a .thtml file?
frawo
Let me see if I get this correct. You want to replace the block side menu with plain links? Or were you wanting it to look like what I have on my site?
If its is the second choice, then you will need to install Navman plugin.
If its the first choice, I think you were looking in the right place the first time around.
Do the following:
Copy this from the Camouflage theme style.ini to the bottom of the block section in the professional style.ini file.
.boption {
font-size: 10px;
padding-left: 10px;
padding-top: 5px;
padding-bottom: 5px;
border-top-color: #D8EBBE;
border-top-style: solid;
border-top-width: 1px;
border-bottom-color: #7E9264;
border-bottom-style: solid;
border-bottom-width: 1px;
}
.boption:hover {
background-color: #4B573C;
border-top-color: #4B573C;
border-top-style: solid;
border-top-width: 1px;
border-bottom-color: #76895E;
border-bottom-style: solid;
border-bottom-width: 1px;
color: #FFFFFF;
}
.boption:hover a {
color: #FFFFFF;
}
.boption a {
color: #4B573C;
font-weight: normal;
}
.boption-off {
font-size: 10px;
font-weight: bold;
padding-left: 10px;
padding-top: 5px;
padding-bottom: 5px;
margin-left: 0px;
background-color: #FFDD57;
border-top-color: #FFCC00;
border-top-style: solid;
border-top-width: 1px;
border-bottom-color: #FFCC00;
border-bottom-style: solid;
border-bottom-width: 1px;
vertical-align: middle;
}
.boption-plain {
/* font-size: 10px; */
line-height: 14px;
padding-top: 2px;
padding-bottom: 2px;
padding-left: 10px;
}
.boption-plain select {
width:120px;
}
Then rename the following four files to *.thtml.org in the professional theme directory.
useroption_off.thtml
topicoption_off.thtml
useroption.thtml
topicoption.thtml
Now copy over these same files from the Camouflage theme directory to the professional theme directory and you should be fairly close to having the same menu looks as the Camouflage theme. Going this route will save you time and a headache in figuring this out. Minor tweaks in the style sheet will most likely be needed.
Michael
frawo
I don't want to replace the block side menu with plain links. I want the block side menu behave like yours menu without the plugin. I thought that was possible with using css styles.
Maybe I'm not quite clear how I want it to be;
..it's not nested
..plain hoover effect in a box, only color change
..link working in box, not only text
..and whenever i make a new link in the left box it's automatical made in a box with hoovering
frawo
ironmax
Hi
I don't want to replace the block side menu with plain links. I want the block side menu behave like yours menu without the plugin. I thought that was possible with using css styles.
Maybe I'm not quite clear how I want it to be;
..it's not nested
..plain hoover effect in a box, only color change
..link working in box, not only text
..and whenever i make a new link in the left box it's automatical made in a box with hoovering
frawo
Then you will need to download and install the NavMan plugin that works with geeklog 1.7.1 or higher. your other choice is to download and install glMenu from www.portalparts.com and that plugin will need some work. See the discussion on the forum of that site.
As for it to look like my menus, you would have to change your CMS to glFusion. However, that is not needed to achieve the same effects by using the NavMan plugin.
Creating a nested CSS style menu is possible in geeklog, although you would have to create allot of independent links for any and all menu items. So that is why I recommend the plugin route to go...less headaches.
Forum discussion here
Download NavMan here
Michael
frawo
Navman installed.
All ok, I think
thanks
frawo
ironmax
Hi
Navman installed.
All ok, I think
thanks
frawo
Your Welcome
- Normal Topic
- Sticky Topic
- Locked Topic
- New Post
- Sticky Topic W/ New Post
- Locked Topic W/ New Post
- View Anonymous Posts
- Able to post
- Filtered HTML Allowed
- Censored Content