WordPress.org

Ready to get started?Download WordPress

Forums

[Theme: Dusk to Dawn] How to change theme width (2 posts)

  1. Asakasan
    Member
    Posted 2 years ago #

    Hi there, I would like to change, if possible, the width of the sidebar, and then expand the width of the main content area.

    Here is my blog:

    http://asaka.byethost10.com/

    Here is my theme:

    http://wordpress.org/extend/themes/dusk-to-dawn

    Thanks for your patience ;)

    Asa

    [ Please do not bump, it's not permitted here. ]

  2. DJ
    Member
    Posted 1 year ago #

    It looks like I figured out the answer today. I wanted 950x250 as my new header graphic size.

    You need to modify the functions.php file. I have a child theme but when I tried to copy the functions file to that directory it threw a 500 server error, so even though you are probably not supposed to I modified that file in the dusk-to-dawn directory. I feel like this file always has to stay where it is but I need to call my web host about it...so...for now, that's how it is. I also guess I would have to remember about this one change in the dusk-to-dawn directory if the theme was ever updated; otherwise I assume it could revert back to 870.

    In the functions.php file modify these two lines two whatever size you want your header image to be

    define( 'HEADER_IMAGE_WIDTH', 870 );
    define( 'HEADER_IMAGE_HEIGHT', 220 );

    Also in your child theme style.css you will need to have these two styles set to the new width

    #main {
    	background: url(../dusk-to-dawn/images/page.gif) repeat-y 0 0;
    	border-radius: 3px;
    	margin: 0 auto;
    	position: relative;
    	width: 950px;
    }
    
    #header-image {
    	border-top-right-radius: 3px;
    	border-top-left-radius: 3px;
    	height: 250px;
    	overflow: hidden;
    	width: 950px;
    }

    In the child theme style.css I also have the page style which I increased the width by the 80 px difference in sizes; but I am not sure if it's entirely necessary...we will see...

    #page {
    	background: url(images/ornaments.png) no-repeat 0 0;
    	display: block;
    	margin: 0 auto;
    	width: 1058px;
    }

    Last, you also need to modify your graphics. When I originally uploaded the larger header graphic I wanted through WordPress it was cropped to 870. Once you modify the functions.php file you will be able to upload the new size graphic in the WordPress admin without it being cropped. When I go to Appearance-->Header in the WordPress Admin it now says: Images of exactly 950 × 250 pixels will be used as-is

    Then you also need to modify the graphic in the themes-->dusk-to-dawn-->images directory page.gif OR page-rs.gif (if you are using the right side menu option). Notice in the code above for the main style, it references the location of the image I am using relative to the style.css file in my child theme directory (../dusk-to-dawn/images/page.gif).

    Page.gif is a 1x870 graphic which produces the color of the menu and content area. So create a graphic that is 1x950 (or whatever new width you are choosing) and put it in the dusk-to-dawn/ images directory...overwriting the other file. I'm not sure if I'm supposed to have a separate images directory in my child theme folder for anything I am creating new, but this seemed alright. I always make copies of whatever I am overwriting and put them in a different directory before I copy over files that came with the original theme, even graphics.

    So good luck with that, I hope I remembered all the steps.

Topic Closed

This topic has been closed to new replies.

About this Topic