Welcome to Geeklog Saturday, November 16 2019 @ 11:49 pm EST

Geeklog Forums

Camouflage theme


ironmax

Anonymous
Camouflage has been updated by Spacequad on the Demo Site. Please give it a test drive and let me know of any problems.

Michael

Status: offline

frawo

Forum User
Junior
Registered: 09/10/02
Posts: 29
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
...what, me?

ironmax

Anonymous
Quote by: frawo

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:

PHP Formatted Code

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:

PHP Formatted Code

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:

PHP Formatted Code

<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"> &nbsp;
                <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

Anonymous
Thank you Ironmax.
Will try this for the top menu.

But I was thinking of the left box menu.

Where can I put:
PHP Formatted Code

<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

Anonymous
Quote by: Anonymous

Thank you Ironmax.
Will try this for the top menu.

But I was thinking of the left box menu.

Where can I put:

PHP Formatted Code

<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.

PHP Formatted Code

.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

Anonymous
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

ironmax

Anonymous
Quote by: Anonymous

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

Anonymous
Hi

Navman installed.
All ok, I think

thanks

frawo

ironmax

Anonymous
Quote by: Anonymous

Hi

Navman installed.
All ok, I think

thanks

frawo



Your Welcome

All times are EST. The time is now 11:49 pm.

  • 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