Wordpress Themes - WP Forum at BFA
There will be no more development for Atahualpa (or any other theme), and no support. Also no new registrations. I turned off the donation system. I may turn the forum to read only if it gets abused for spam. Unfortunately I have no time for the forum or the themes. Thanks a lot to the people who helped in all these years, especially Larry and of course: Paul. Take care and stay healthy -- Flynn, Atahualpa developer, Sep 2021

Wordpress Themes - WP Forum at BFA » WordPress Themes » Atahualpa 3 Wordpress theme »

[SOLVED] Styling my custom page template


  #1  
Old Nov 6, 2012, 02:41 PM
gr870sfunk's Avatar
gr870sfunk
 
110 posts · Mar 2011
Montgomery, AL
WP: 3.4.2
ATA: 3.7.9

I have created a custom template by copying and renaming the index.php to sample.php.

I know that to change the footer and/or header I would do the same thing with their respective php files as well.

I did the following to change styling aspects of the main page:
HTML Code:
body.page-template-sample-php {
background-color:#171719;
background-image:none;

body.page-template-sample-php h1{
color:#8616ab;
}

body.page-template-sample-php p{
font-family:Verdana, Geneva, sans-serif;
font-size:20px;
color:red;
}
My questions are:
1. what selector(s) would I use to change the center column background?
2. how am I supposed to alter (let's say) header2.php so that it contains only an image (no menu or anything else)? I do not really know any php so altering the actual code in the file is something i'm not too keen on trying.

Any help is greatly appreciated. Thanks!
  #2  
Old Nov 7, 2012, 07:17 AM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
Quote:
I know that to change the footer and/or header I would do the same thing with their respective php files as well.
If you make copies of them be prepared to do some extra editing. You might want to readup on the get_header function - do a google search 'wordpress get_header'
Quote:
1. what selector(s) would I use to change the center column background?
The best way to figure this out is to use the FireBug extension in FireFox to examine the areas on the page. This will show you what CSS is being applied to the HTML elements and what ID's and classes are associated with the HTML elements so you can construct the CSS selectors nad rules you will need.
Quote:
2. how am I supposed to alter (let's say) header2.php so that it contains only an image (no menu or anything else)? I do not really know any php so altering the actual code in the file is something i'm not too keen on trying.
if you don't mind the menu being in the source, you can hide it using CSS and not have to have another 'header.php', you can even have a seperate header image with the other pages using a rotating header by using
HTML Code:
body.page-template-xxxxxxxxx-php div#imagecontainer {background: url("http://yourdomain.com/wp-content/uploads/2012/07/cropped-dragonfly3.jpg") no-repeat scroll left top transparent !important;}
body.page-template-xxxxxxxxx-php div#imagecontainer img {display:none !important;}
t
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #3  
Old Nov 7, 2012, 11:18 AM
gr870sfunk's Avatar
gr870sfunk
 
110 posts · Mar 2011
Montgomery, AL
Thanks JD! I have gotten that issue taken care of thanks to your help and some putzing around with the CSS.

I have come across another issue though. Currently, the right sidebar has no background on my site, but this sub-site I am creating (using the new page template "beyond.php") needs to have a plain old white background and some sort of border.

I read over this thread, but I don't understand how the footer would effect the sidebar.

Long story short, I don't know how to style the sidebar of this new page template. Many thanks!

EDIT:
Nevermind. I figured it out.
HTML Code:
body.page-id-2111 #right{
 background-color: #FFF;
}

Last edited by gr870sfunk; Nov 7, 2012 at 11:29 AM.
  #4  
Old Nov 7, 2012, 11:30 AM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
what is the url of the page in question?
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support

Last edited by juggledad; Nov 8, 2012 at 10:48 AM.
  #5  
Old Nov 8, 2012, 10:08 AM
gr870sfunk's Avatar
gr870sfunk
 
110 posts · Mar 2011
Montgomery, AL
http://www.energyfairness.org/beyond-affordable pw: Emily2012

The problem I'm having now is how to change the width of the center column and sidebar in the new page template.

EDIT:
again, after some more research, I have solved the sidebar width problem using .colthree as my selector.

HTML Code:
body.page-template-beyond-php .colthree{
background-color: #FFF;
width:450px !important;
}

Last edited by gr870sfunk; Nov 8, 2012 at 10:15 AM.
  #6  
Old Nov 8, 2012, 10:51 AM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
good job! any other issues?
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #7  
Old Nov 8, 2012, 12:13 PM
gr870sfunk's Avatar
gr870sfunk
 
110 posts · Mar 2011
Montgomery, AL
Not as of now, but Lord only knows what I might run into. I've moved onto the widgets for the sidebar, so I think i'm good to go on the over page template layout.

I feel kinds stupid for posting and then answering my own questions, but I know if i've run into these problem someone else has or will. Hopefully this will help some folks out.

Bookmarks

Tags
center column, custom page template, header.php and footer.php, index.php



Similar Threads
Thread Thread Starter Forum Replies Last Post
HOWTO: a 'Custom Query' PAGE template juggledad Atahualpa 3 Wordpress theme 1 Jul 15, 2010 07:07 PM


All times are GMT -6. The time now is 11:42 AM.


Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.