Borders and sidebars and rollovers

Use this forum to ask questions about how to do things in GuMax skin.
Post Reply
User avatar
deviant++
Rank 3
Rank 3
Posts: 16
Joined: February 21st, 2009, 7:42 am

Borders and sidebars and rollovers

Post by deviant++ »

Hi paul, first off I wanted to say your skin is awesome. I myself am a graphic designer with minimal knowledge of css but have experience coding vbulletin and other forum softwares and your skin has allowed me to completely customize wiki to my requirement.

I am using a heavily modified version of your 3.2.1 but the sidebar is somewhat limited in its way of showing content and since you have experience with drop downs already..

is there anyway you can help me make drop downs for the side bar instead of the vertical bar.

I have attached a picture with the queries I have....I know it is a lot but if you could help me out, it'd be awesome because the content looks kinda bad right now.

I'm also interested in giving my skin to you incase you want a variation of the 3.2.1 to upload maybe?
Attachments
123.jpg
123.jpg (216.38 KiB) Viewed 4474 times
User avatar
Paul
Development Team Leader
Development Team Leader
Posts: 1132
Joined: October 20th, 2007, 2:23 pm

Re: Borders and sidebars and rollovers

Post by Paul »

The menu title style is in file gumax_template.css. looking for

Code: Select all

    .gumax-portlet h5 { /* Menu title style */
        background: #ddd;
        border:  1px solid #ccc;
        border-bottom: none;
        color: #555;
        padding: .1em 0 .2em .5em;
        text-transform: capitalize;
        font-size: 100%;
        font-weight: bold;
        font-family:  Verdana, 'Trebuchet MS';
    }
I have very detail comments on these, this shouldn't hard to find it.

The content border is located in

Code: Select all

    #content {
        border: 1px solid #aaa;
        background: #fff;
        /* border-right: none; */
        /* border:  1px solid #ccc;  /* for testing */
        margin: 0;
        padding: 0px 15px 10px 15px;  /* margin of the main content */
        /* position: relative !important;  */
        position: static; /* need for IE positioning problem */
        z-index: 2;
        clear: both;
        color: black;
        line-height: 1.4em; /* value other than 'normal' needed for WinIE */
        overflow-x: visible;    /* need for Firefox, extreme long string :( */
    }
Sorry I cannot help you with the drop down menu, since this is not simple coding or styling work (IMO, it will take a few days to figure it out), you might need to hire a professional to do this.
User avatar
deviant++
Rank 3
Rank 3
Posts: 16
Joined: February 21st, 2009, 7:42 am

Re: Borders and sidebars and rollovers

Post by deviant++ »

Paul wrote:The menu title style is in file gumax_template.css. looking for

Code: Select all

    .gumax-portlet h5 { /* Menu title style */
        background: #ddd;
        border:  1px solid #ccc;
        border-bottom: none;
        color: #555;
        padding: .1em 0 .2em .5em;
        text-transform: capitalize;
        font-size: 100%;
        font-weight: bold;
        font-family:  Verdana, 'Trebuchet MS';
    }
I have very detail comments on these, this shouldn't hard to find it.

The content border is located in

Code: Select all

    #content {
        border: 1px solid #aaa;
        background: #fff;
        /* border-right: none; */
        /* border:  1px solid #ccc;  /* for testing */
        margin: 0;
        padding: 0px 15px 10px 15px;  /* margin of the main content */
        /* position: relative !important;  */
        position: static; /* need for IE positioning problem */
        z-index: 2;
        clear: both;
        color: black;
        line-height: 1.4em; /* value other than 'normal' needed for WinIE */
        overflow-x: visible;    /* need for Firefox, extreme long string :( */
    }
Sorry I cannot help you with the drop down menu, since this is not simple coding or styling work (IMO, it will take a few days to figure it out), you might need to hire a professional to do this.

Thanks for the info, im gonna try those out in a bit. I was wonderring if I could tackle the drop downs myself. Maybe if I could combine your drop down system to the sidebar and knock my head around it a few days and see if it'd work out. would you happen to have any tips where to look for in your drop down beta skin for the drop down code, like which file maybe.

ps I noticed a small bit of styling i missed out but cant find it again, attaching an image of it.

I wanna get rid of the white padding outside the grey border. it comes on all my thumbnails
Attachments
321.jpg
321.jpg (72.18 KiB) Viewed 4448 times
User avatar
Paul
Development Team Leader
Development Team Leader
Posts: 1132
Joined: October 20th, 2007, 2:23 pm

Re: Borders and sidebars and rollovers

Post by Paul »

I'm not sure which tag, but give a try in both gumax_template.css and main.css, the tag name can be found by viewing the source code of the page...

The tips for Drop down, well, download the GuMaxDD and review the code, plus Google it...
User avatar
deviant++
Rank 3
Rank 3
Posts: 16
Joined: February 21st, 2009, 7:42 am

Re: Borders and sidebars and rollovers

Post by deviant++ »

Paul wrote:I'm not sure which tag, but give a try in both gumax_template.css and main.css, the tag name can be found by viewing the source code of the page...

The tips for Drop down, well, download the GuMaxDD and review the code, plus Google it...
OK this is what ive done so far.

a. copied the script folder from gumax dd into my custom gumax skin folder.

Copied the <script> section from gumax dd.php to cusom one and put it above the <body> starting section.. the one with the js

then in main I added droppy..

copied droppy css file to my custom folder


can you tell me what all else I need to port your drop down menu from gumax DD into the other gumax... I think I'm 80% there but to make the final port of gumax dd drop down system into my custom one to use in the sidebar I'm not sure what to do, can you help please :P

because if I manage to port the drop downs from gumaxdd skin.. I an just use margin/padding in css tonudge the drop down to the right of the sidebar.
User avatar
Paul
Development Team Leader
Development Team Leader
Posts: 1132
Joined: October 20th, 2007, 2:23 pm

Re: Borders and sidebars and rollovers

Post by Paul »

Add the scripts is just the start, the most complicated part is you need to customize the item in specific way ... refer to GuMaxDD, I cannot remember the details, but Google the jQuery for details.

After that, you need to customize CSS for your way ... gonna be a lot of work
User avatar
deviant++
Rank 3
Rank 3
Posts: 16
Joined: February 21st, 2009, 7:42 am

Re: Borders and sidebars and rollovers

Post by deviant++ »

Paul wrote:Add the scripts is just the start, the most complicated part is you need to customize the item in specific way ... refer to GuMaxDD, I cannot remember the details, but Google the jQuery for details.

After that, you need to customize CSS for your way ... gonna be a lot of work
im fine with the customizing css bit, just the js im not good with, like

something like this

Code: Select all

sfHover = function() {     var sfEls = document.getElementById("nav").getElementsByTagName("LI");     for (var i=0; i<sfEls.length; i++) {         sfEls[i].onmouseover=function() {             this.className+=" sfhover";         }         sfEls[i].onmouseout=function() {             this.className=this.className.replace(new RegExp(" sfhover\\b"), "");         }     } } 
I dont understand the understand the variables in this lol, gah.

Personally I think your drop downs are th ebest cuz they can be modified from sidebar where as other ones ive seen have to be done through a new article. so thats why i wanna see if I can port the drops from gumax dd skin :D
User avatar
deviant++
Rank 3
Rank 3
Posts: 16
Joined: February 21st, 2009, 7:42 am

Re: Borders and sidebars and rollovers

Post by deviant++ »

yeah its not happening lol, i fail :P

oh well thanks for your help anyway
User avatar
Paul
Development Team Leader
Development Team Leader
Posts: 1132
Joined: October 20th, 2007, 2:23 pm

Re: Borders and sidebars and rollovers

Post by Paul »

Well, there are a lot of work needed to be done in order to make it work... I cannot express it in one or two paragraphs, these are just about the knowledge and experience.

Baseline, you should know what you are doing, except you are so lucky and it just worked...usually this is not the case...
Post Reply