[SOLVED] Need Help/Pointers in Modifying the Default Wind Theme

ztampfhung

Joined: 2006-02-27
Posts: 69
Posted: Fri, 2013-06-14 12:56

I wish the Matrix Theme from G2 is made available for G3 as well! I like the fluid and clean design which I have modified to suit my overall website design quite easily. Now I am trying to modify Wind by copying and renaming it accordingly. This is what I have gotten done so far:
http://ztampf.com/ztampfest_2/

However, I am stuck now to modify the Navigation Tabs at the top and to adjust the Width of the Main Panel and Side Bar... I have searched the codex and forum, but couldn't find any help there. Anyone can help or give me some pointers where the files to edit are located to make these changes?
(see attached image)

~fhung~

AttachmentSize
ztampfest-g3.jpg362.87 KB
 
floridave
floridave's picture

Joined: 2003-12-22
Posts: 27300
Posted: Fri, 2013-06-14 16:53

The wind theme is designed to be fixed width. Perhaps you need to familiarize yourself with yui grids:
http://developer.yahoo.com/yui/grids/

To move the sidebar:
add the red to your css:

#g-sidebar {
    padding: 0 20px 0 15px;
    right: -100px;
    width: 220px;
}

for the menu:

#g-site-menu {
    bottom: 0;
    left: 0;
    position: absolute;
}

I changed the left to 0.

Related to the YUI grids but you can try to make the content a bit wider:

#g-content {
    padding-left: 20px;
    position: relative;
    width: 696px;
}

Adjust the 696px; to your liking but remember this theme is fixed width by the YUI grids.

Dave

_____________________________________________
Blog & G2 || floridave - Gallery Team
 
ztampfhung

Joined: 2006-02-27
Posts: 69
Posted: Fri, 2013-06-14 17:06

Yay! Thanks so much! It works like a charm :) Any way to change the color/shape of the Navigation Tabs there?

Thanks again,

~fhung~
 
floridave
floridave's picture

Joined: 2003-12-22
Posts: 27300
Posted: Fri, 2013-06-14 18:04

Color of text and background and shape:

#g-site-menu li a {
color:green!important;
background-color: red!important;
-moz-border-radius-bottomright: 50px;
border-bottom-right-radius: 30px;
}

See: http://border-radius.com/ for help on border radius

Then the color of background on hover:

#g-site-menu li {
background-color: yellow!important;
}

I bet you would want it the same color as the rest of the page.

All this with Firebug and the FF web browser with the dev tool as well.

Dave
_____________________________________________
Blog & G2 || floridave - Gallery Team
 
ztampfhung

Joined: 2006-02-27
Posts: 69
Posted: Sat, 2013-06-15 05:00

Wow! Thank you! I have sooo much to learn :) Really appreciate your help and so quick too!!! :D

~fhung~
 
ztampfhung

Joined: 2006-02-27
Posts: 69
Posted: Sat, 2013-06-15 07:14

Ohkay, I would like to keep the Gallery Credits but would like it to be centered so I tried this:

Quote:
/* Footer content ~~~~~~~~~~~~~~~~~~~~~~~~ */

#g-footer #g-credits li {
padding-top: 3px;
font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;
color: #7b7a63;
text-align: center;

}

#g-footer #g-credits {
text-align: center;
}

But it doesn't change anything! The Credits line still appear Left-Aligned... What should I do to change this?

Thaaanks :)

~fhung~
 
ztampfhung

Joined: 2006-02-27
Posts: 69
Posted: Sat, 2013-06-15 11:18

Hi there... For the life of me I cannot find out which files to edit in order to change the background color for the Search, Tag Buttons, the Options Menu for Albums/Photos and the color scheme for Tags...

See attached screenshot to better see what I mean... My gallery is located at http://ztampf.com/ztampfest

Thanks so much in advance for any help :)

~fhung~
 
floridave
floridave's picture

Joined: 2003-12-22
Posts: 27300
Posted: Sat, 2013-06-15 17:13

@credits center; this seems to work although not 100% right.

#g-footer ul {
width: 20%;
margin-right: auto;
margin-left: auto;
}

you could put a custom footer in the theme with a <center> ...</center> for code. That might work a bit better.

Dave
_____________________________________________
Blog & G2 || floridave - Gallery Team
 
floridave
floridave's picture

Joined: 2003-12-22
Posts: 27300
Posted: Sat, 2013-06-15 17:25

Search button:

.ui-state-default, .ui-widget-content .ui-state-default {
color: yellow;
background: url("http://ztampf.com/images/blank.gif")#ff00ee;
}

Adjust the yellow and the pink as needed.

Tag link color:

#g-tag-cloud a {
color: #ff00f0!important;
}

Dave

_____________________________________________
Blog & G2 || floridave - Gallery Team
 
floridave
floridave's picture

Joined: 2003-12-22
Posts: 27300
Posted: Sat, 2013-06-15 17:40

And the menu:

.ui-state-default a {
background-color: red;
}

Dave
_____________________________________________
Blog & G2 || floridave - Gallery Team
 
ztampfhung

Joined: 2006-02-27
Posts: 69
Posted: Sat, 2013-06-15 20:15

Woohooo! Thanks so much for your help, Dave!
Very pleased with how my gallery looks now :)

Thanks again!

~fhung~