How to setup the skin #3 Look

• Hybrid

  said

  Hey im trying to setup the skin #3 similar to your demo with just an image at the top with a description next to it but I cant figure out how you did it and there is no info in the help document about setting this up only really for setting up slide shows and what not.

  The actual layout of the homepage I dont have a problem with only the top area.

• Hybrid

  said

  Also in the header how can i change the full width colour its only changing the middle section of it but the left and right bars are staing the colours if that makes sense.

  http://www.chiropractor.local5.com.au

• Hybrid

  said

  Can I get some help?

• andy

  said

  Sometimes it takes a day or more to get back to everyone so I appreciate your patience.

  First you need to finish the theme setup. You see the two bright red messages in your menu area:

  Set Main Menu - Left in "Appearance > Menus > Theme Locations"
Set Main Menu - Right in "Appearance > Menus > Theme Locations"

  Those are in bright red not because it’s stylish but because they’re really important. If you don’t finish those steps you’ll have errors on your site that can cause other problems.

  Regarding the background color extending the width of the browser, you should use the skins that were included as examples of how this can be done. I provide them so you will have reference materials. For example, when you open the CSS file for Skin 3 you will notice it has a style element not found in the others:

  #SubHeader.fullWidth { background: #99271F; }

  That’s what you’re missing. You need to add that to your skin CSS file (or in the Custom CSS field of the default design settings in the admin) but with your background color:

  #SubHeader.fullWidth { background: #3DB1FF; }

• Hybrid

  said

  Thanks heaps for your response and sorry for being impatient.

  Great theme by the way you have done a superb job just trying to get my head around how it works.

• utahholdings

  said

  Hybrid asked my exact question and there is no answer here for this part:

  Hey im trying to setup the skin #3 similar to your demo with just an image at the top with a description next to it but I cant figure out how you did it and there is no info in the help document about setting this up only really for setting up slide shows and what not.

  Please answer how we go about setting the homepage up like Skin 3, thank you.

• jeffw

  said

  @utahholdings

  This topic should help you: http://para.llel.us/support/groups/mingle-wordpress/forum/topic/need-sample-code-for-skin-3-top-graphic/

• CrystalSC

  said

  For some reason, no changes I make to the style 3 CSS file are taking hold (such as mentioned above: #SubHeader.fullWidth { background: #99271F; })

• jeffw

  said

  @crystalsc

  It is not a good idea to modify the stylesheets, it can give you big headaches when you need to update the theme. It is always best to add minor additions and changes to styles in your Custom CSS box in Appearance > Design Settings > Edit All Default Design Settings, using the !important property so that your style takes precedence. If you are making major changes to styles then you should consider creating a custom stylesheet, and if you are also wanting to make changes to PHP templates and files then you should consider making a child theme.

  OK, lecture over. Now to your problem.

  In order for .fullWidth styles to take effect you need to enable Full width for the Page style option in the page header, which in this case will be the Home Page Header.

• CrystalSC

  said

  Ah! the !important was what was needed. Thank you!

• wpsminar

  said

  Hi

  I look at the set up guide and I have pretty much done the menu. But still the grey banner. I don’t need to change the background color ( #SubHeader.fullWidth { background: #99271F; } ) I need to git rid of the grey banner on the slider

  Please let me know

  Thanks

  Adri

• jeffw

  said

  Hi, Adri.

  The “grey banner” as you call it is actually the background colour of the slideshow area. You can change this using some inline CSS with your HTML in the slideshow content area, or you can add a style like this to your Custom CSS box in Appearance > Design Settings > Edit All Default Design Settings:

  #SubHeader .slideShow { background: white !important; }