Welcome to Geeklog, Anonymous Thursday, November 21 2024 @ 11:03 am EST

Geeklog Forums

Camouflage theme

09/16/11 05:58am (Read 2,727 times)

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

10 7 Quote

09/25/11 10:28am

Status: offline

frawo

Forum User

Junior

Registered: 10/09/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?

9 10 Quote

09/25/11 07:00pm

ironmax

Anonymous

Quote by: frawo

How can I transfer the menu from Camouflage to Professional.
When I see the style sheet, I think its:

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:

Text 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:

Text 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:

Text 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

11 5 Quote

09/26/11 03:24am

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:

Text 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

10 6 Quote

09/26/11 08:02am

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:

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

Text 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

10 10 Quote

09/26/11 09:35am

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

7 7 Quote

09/26/11 01:18pm

ironmax

Anonymous

Quote by: Anonymous

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

9 8 Quote

09/26/11 04:40pm

frawo

Anonymous

Hi

Navman installed.
All ok, I think

thanks

frawo

7 6 Quote

09/26/11 05:10pm

ironmax

Anonymous

Quote by: Anonymous

Hi

Navman installed.
All ok, I think

thanks

frawo

Your Welcome

7 6 Quote

New Topic Post Reply

All times are EST. The time is now 11:03 am.

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

Geeklog Forums

Camouflage theme

ironmax

frawo

ironmax

frawo

ironmax

frawo

ironmax

frawo

ironmax

Search

Resources

About

Getting started

Support

Development

Topics

User Functions

What's New

Articles last 4 weeks

Comments last 4 weeks

Pages last 4 weeks

Links last 4 weeks

Downloads last 4 weeks