Help for a CSS newbie?...duplicating a Wordpress design

  • ppcwhizzette
  • Born
  • Born
  • ppcwhizzette
  • Posts: 3

Post 3+ Months Ago

My boss wants me to make this page: http://www.adzapps.com/?page_id=9

Look like this homepage: http://www.wpremix.com

Could someone try and explain the steps involved, especially of creating the effect of stretching the site across the browser as in http://www.wpremix.com ?

The AdZapps site is using the WpRemix theme for Wordpress, so I think they should be designed using similar methods?

I can change the width and I tried putting a percentage in instead of a fixed width, but then the text gets all messed up. So, I cant figure out how the WpRemix site does it's design.


So I need to know:
-the steps to match the background colors to the template (or make the template "fluid"?)
-how to get a solid block of red just under the header
-and how to create the 3 content columns of alternating color
-and any other things that need to be done to create the desired effect

Thanks very much
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • AnarchY SI
  • Web Master
  • Web Master
  • User avatar
  • Posts: 2521
  • Loc: /usr/src/MI

Post 3+ Months Ago

mm not sure what exactly you mean with your first question.. ? you would match background colors by setting them? someone else would be of more assistance here :-X sorry
the way wpremix has their layout is using divs. you are similarly using divs, just in a different manner. did you examine the source code of the wpremix website? the css/layout is laying there waiting for you to study it =]
as for the 3 column layout, theres tons on the web for that. check out this site for a sample or see what google has to say

as for "stretching the site across the browser", you do need to add percentages. if your fonts got messed up, then i would assume you attempted to stretch the wrong area..? just a guess tho :-X
  • ppcwhizzette
  • Born
  • Born
  • ppcwhizzette
  • Posts: 3

Post 3+ Months Ago

My initial post was confusing......Hopefully this is worded better?:

I want to make this page: http://www.adzapps.com/?page_id=9

Look like this homepage: http://www.wpremix.com

Especially making the black header and the tall red bar/graphic at the top.

Then getting the "header" (black and red at the top) stretch full width of the screen (fluid?)

The AdZapps site is using the WpRemix theme for Wordpress, so I think they should be designed using similar methods?

I've been told I can match the background colors to the main template to fill the browser window, but I can't figure out how to do that in the css.

Thanks very much
  • SpooF
  • ٩๏̯͡๏۶
  • Bronze Member
  • User avatar
  • Posts: 3422
  • Loc: Richland, WA

Post 3+ Months Ago

In the wordpress directory you will need to find a directory called wp-content. Inside of there should be a theme folder. This holds all the themes for your webpage. I dont know what the theme name is but there should be a directroy for it. Inside you need to find the index.php file.

In that file you should see something that see something along the lines of this.

Code: [ Select ]
<?get_header();?>


What you need to do is make it so when someone views that particular page, aka page 9. You want to include a different header file.

Code: [ Select ]
if($_GET['page_id'] == 9) {
     include(TEMPLATEPATH . '/my_other_header.php');
} else {
     get_header();
}
  1. if($_GET['page_id'] == 9) {
  2.      include(TEMPLATEPATH . '/my_other_header.php');
  3. } else {
  4.      get_header();
  5. }


This will make it so when that page comes up it will include the header file to give the page the look of what you want.

How much HTML and CSS do you know?
  • ppcwhizzette
  • Born
  • Born
  • ppcwhizzette
  • Posts: 3

Post 3+ Months Ago

thanks,

To answer your question, I know HTML pretty well, but have done nothing with css, so that is where I'm having issues.

Do you know where in the wordpress css files the background image would be stored? Because I think if I can put in a background image that matches the header and content area colors I should be able to get the effect of the page's colors filling the browser window?

Do you think that would work?

Thanks very much

Post Information

  • Total Posts in this topic: 5 posts
  • Users browsing this forum: No registered users and 50 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
cron
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.