Shape 5

Wordpress Club Themes => Sports Nation - Club => : dquayle July 04, 2013, 09:11:21 PM



: PSD Light CSS
: dquayle July 04, 2013, 09:11:21 PM
I have installed the theme and have a couple of issues:

1. I need to make changes to the PSD but I am using the light theme, is it in the PSD because I can only see the dark theme.

2. I can't find where to add the subtext to the main menu - I read in another post that you need to enable Description in Screen Options when editing the page but I don't have it as an option. Is there anything else I need to enable besides the 'Small Menu Height? Select Yes If You Have No Subtext On The Menu.' ?

Cheers.


: Re: PSD Light CSS
: Tristan Rineer July 05, 2013, 09:04:35 AM
I have installed the theme and have a couple of issues:

1. I need to make changes to the PSD but I am using the light theme, is it in the PSD because I can only see the dark theme.

   I don't know anything about the PSD, but I would think that it's probably a in a layer that has visibility turned off.  I'll point this thread out to Jonah, he should be able to help.

2. I can't find where to add the subtext to the main menu - I read in another post that you need to enable Description in Screen Options when editing the page but I don't have it as an option. Is there anything else I need to enable besides the 'Small Menu Height? Select Yes If You Have No Subtext On The Menu.' ?

   You need to endable "Description" on the menu editor, not the page editor.  That will turn on the "Flex Menu Options" section for each menu item; at that point just edit as needed.


: Re: PSD Light CSS
: dquayle July 09, 2013, 07:08:11 PM
Did Jonah shed any light on the PSD issue? I need the PSD for the light theme.


: Re: PSD Light CSS
: Tristan Rineer July 09, 2013, 10:19:57 PM
Jonah had me ask Mike about it because Mike is the one who did the original design; according to him, there is no "light" PSD because all the changes to the "light" design are CSS changes. 

There is no light psd, because it's all css. The elements that make up the light and dark features aren't images, so there's no psd to apply.

If you're having trouble figuring out anything in the CSS, I'd suggest using Firebug (http://getfirebug.com/) in Firefox, and "inspecting" the item with Firebug to see where the code is that makes it work the way it does.  I'm not a CSS specialist, so I use Firebug for almost every design related question.


: Re: PSD Light CSS
: dquayle July 16, 2013, 07:55:49 PM
There is a light images folder, so it's not just CSS changes. (s5_sports_nation\images\light)

I only bought this theme because of the light version, so I really need the PSD to make design changes.

Sorry Tristan I know this isn't your area, is there somewhere else I should be posting about this?


: Re: PSD Light CSS
: mikek July 17, 2013, 07:24:50 AM
Hello,

As Tristan stated there isn't a light psd, there never was one. We do not create a psd for every variation of a template, only the core. The psd is only used to design the look of the template and does not serve any function in actually creating the theme itself; that is all hard coded css. The images in the "light" folder are mostly the social icons and a few shadow images, the majority of the design is strictly css, not images.

For example, this css created the colors and gradients of the register area:

#s5_register {
background: #F1F1F1; /* Old browsers */
background: -moz-linear-gradient(top, #FFFFFF 0%, #E9E9E9 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFFFFF), color-stop(100%,#E9E9E9)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #FFFFFF 0%,#E9E9E9 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #FFFFFF 0%,#E9E9E9 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #FFFFFF 0%,#E9E9E9 100%); /* IE10+ */
background: linear-gradient(top, #FFFFFF 0%,#E9E9E9 100%); /* W3C */
-pie-background: linear-gradient(top, #FFFFFF 0%,#E9E9E9 100%); /* IE */
border:solid 1px #C8C7C7;
color:#333333;
}

And this area the footer:

#s5_footer_wrap {
background: #E9E9E9; /* Old browsers */
background: -moz-linear-gradient(top, #FFFFFF 0%, #E9E9E9 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFFFFF), color-stop(100%,#E9E9E9)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #FFFFFF 0%,#E9E9E9 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #FFFFFF 0%,#E9E9E9 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #FFFFFF 0%,#E9E9E9 100%); /* IE10+ */
background: linear-gradient(top, #FFFFFF 0%,#E9E9E9 100%); /* W3C */
-pie-background: linear-gradient(top, #FFFFFF 0%,#E9E9E9 100%); /* IE */
border:solid 1px #E9E9E9;
}

As you can see there are no images involved, and therefore no psd is needed. If you need to modify the look of the light version then you will need to modify the css using a tool such as firebug as Tristan suggested above.