Increasing the width og the template borders

  • Author
    Posts
  • #307955

    loveinspired
    Member

    I paid for the upgrade. I am a photographer and I am not happy with the 450px width limit on my images. I would like my images to be viewed at 800px. Can this be done?

    The link to my blog is http://loveinspired.wordpress.com
    Is this the Kubrik template?
    Can anyone help?

    Kind Regards,

    Andy

    #308108

    timethief
    Member

    There’s no staff support for learning CSS. There are afew bloggers here who occasionally drop in and give advice. CSS resources are found here http://faq.wordpress.com/2006/08/15/where-can-i-find-css-customization-help/

    #308118

    devblog
    Member

    I haven’t forgotten about your request, loveinspired. I’ll have something for you by Friday, sooner if I can.

    #308134

    loveinspired
    Member

    Thank you Devblog!!

    I really appreciate your help!

    #308286

    devblog
    Member

    loveinspired,

    Add this code in your CSS editor:

    div#page {
    width: 1000px;
    background: #fff !important;
    clear: both;
    overflow: hidden;
    padding: 0;
    margin: 0 auto;
    }
    
    #header, #footer{clear: both; width: 1000px !important; margin: 0 !important; padding: 0 !important;}
    
    #header {background: #fff !important;}
    
    #header #headerimg {margin: 0; padding: 0;}
    
    #content {
    width: 780px;
    padding: 0 10px;
    float: left;
    overflow: hidden;
    }
    
    #sidebar {
    width: 180px;
    padding: 0 5px;
    margin: 0;
    float: right;
    }
    
    #footer {background: #fff !important;}
    
    .widecolumn {margin: 0 auto;  float: none !important;}

    The main content has a width of 780px, so I’d suggest you not to make your images wider than 750px.

    The main container is 1000px wide, so you’d need to create a new header image 1000px wide.

    You may want to create an image for the footer or just leave it as it is (with a white background).

    On a final note, I noticed that it seem you’re writing your posts in Word, then copy the text and paste it into the editor. That’s not recommended, as you can read here:

    http://faq.wordpress.com/2006/11/09/why-not-to-use-word/

    HTH.

    #308318

    loveinspired
    Member

    I could not customize the header to expand accross the page. It wanted to crop it to original template header size.

    #308319

    You need to upload the image for the header to the image library and then put the URL into the CSS at the appropriate place. The custom image header uploader is designed for the standard theme, not a modified theme, so it will always try and crop it to the original size.

    #308321

    loveinspired
    Member

    Sounds like a plan. Does any body know the right code for pulling my image from the image library and placing it as my custom header?

    #308323

    loveinspired
    Member

    I added this code to the css editor as thesacredpath suggested but it did not increase the size of my header.
    ————————————————————————–
    #pic {
    background:transparent url(http://loveinspired.files.wordpress.com/2008/12/animated1000-light4.gif) no-repeat scroll 0 0;
    }
    —————————————————————————

    At the same time I added the code devblog posted and it worked except for the header. The header stayed the same. The image that I am linking is 1000 px wide but I am seeing something smaller at the header.
    Again my url is http://loveinspired.wordpress.com

    —————————————————————————-
    div#page {
    width: 1000px;
    background: #fff !important;
    clear: both;
    overflow: hidden;
    padding: 0;
    margin: 0 auto;
    }

    #header, #footer{clear: both; width: 1000px !important; margin: 0 !important; padding: 0 !important;}

    #header {background: #fff !important;}

    #header #headerimg {margin: 0; padding: 0;}

    #content {
    width: 780px;
    padding: 0 10px;
    float: left;
    overflow: hidden;
    }

    #sidebar {
    width: 180px;
    padding: 0 5px;
    margin: 0;
    float: right;
    }

    #footer {background: #fff !important;}

    .widecolumn {margin: 0 auto; float: none !important;}

    #308324

    devblog
    Member

    See if you can reset the header image (put the original image back), then try adding the following to the CSS code I gave you:

    #headerimg { background: transparent url(URL/to/new/image) top left no-repeat !important;}
    #308326

    loveinspired
    Member

    That did not work. What happened was it showed a portion of the larger image because the box was smaller than the new image. In other words, it showed an un-resized newer image in a smaller frame so only part of the nbewer banner could be seen. Strange…

    #308327

    devblog
    Member

    it is strange because in my tests it does work.

    What’s the URL to the new header image?

    #308328

    devblog
    Member

    never mind my previous post, it does work with the background color, and I thought you’d make the new header image with the same height as the old one… there’s more that need to be changed because the new image is taller…

    I’ll post a revised code as soon as I can.

    #308329

    devblog
    Member

    Okay, here’s the revised code. Replace all the code I previously gave you with this one:

    h2 {text-align: left;}
    
    div#page {
    	width: 1000px;
    	background: #fff !important;
    	clear: both;
    	overflow: hidden;
    	padding: 0;
    	margin: 0 auto;
    }
    
    #header, #footer{
    	clear: both;
    	width: 1000px !important;
    	margin: 0 !important;
    	padding: 0 !important;
    }
    
    #header {background: #fff !important;}
    
    #header #headerimg {
    	width: 1000px !important;
    	height: 263px !important;
    	background: #fff url(http://loveinspired.files.wordpress.com/2008/12/animated1000-light4.gif) top left no-repeat;
    	margin: 0; padding: 0;
    }
    
    #content {
    	width: 780px;
    	padding: 0 10px;
    	float: left;
    	overflow: hidden;
    }
    
    #sidebar {
    	width: 180px;
    	padding: 0 5px;
    	margin: 90px 0 0;
    	float: right;
    }
    
    #footer {background: #fff !important;}
    
    .widecolumn {float: none !important;}
    
    .narrowcolumn, .widecolumn {margin: 63px auto 0;}

    it should work now. Really.

    Let me know.

    #308330

    loveinspired
    Member

    Thank you devblog…

    You are right! The change you made works. I am so excited. Thank you for staying with me on this.

    Kind Regards,

    Andy

    #308331

    loveinspired
    Member

    Haha… I spoke too soon. Even though the borders and the header are exactly correct the images that I upload are no different which was the goal in the first place. 450px x 275px
    Oh wait… I just realized that I can chamge the image by using the advanced settings and change it to “original size”. It’s more steps but I am fine with it.

    Thanks again devblog.

    #308332

    devblog
    Member

    Sure thing. Glad it worked.

    #308333

    teewilling
    Member

    I have been trying to help myself by following this thread and it has helped me alot. I am having the same problem with my header. I tried everything except for substituting my header location in the appropriate place… My blog: http://teewilling.wordpress.com/

    #308334

    teewilling
    Member

    Here is the text of my stylesheet:

    h2 {
    text-align:left;
    }

    div#page {
    width:1000px;
    background:#000!important;
    clear:both;
    overflow:hidden;
    margin:0 auto;
    padding:0;
    }

    #header,#footer {
    clear:both;
    width:1000px!important;
    margin:0!important;
    padding:0!important;
    }

    #header {
    background:#fff!important;
    }

    #header #headerimg {
    width:1000px!important;
    height:236px!important;
    background:transparent url(‘http://teewilling.wordpress.com/wp-admin/media.php?action=edit&attachment_id=354’) top center no-repeat;
    margin:0;
    padding:0;
    }

    #content {
    width:780px;
    float:left;
    overflow:hidden;
    padding:0 10px;
    }

    #sidebar {
    width:180px;
    float:right;
    margin:90px 0 0;
    padding:0 5px;
    }

    #footer {
    background:#000!important;
    }

    .widecolumn {
    float:none!important;
    }

    .narrowcolumn,.widecolumn {
    margin:63px auto 0;
    }

    #308335

    teewilling
    Member

    Merry Christmas to myself. I deleted this “#fff!important” from this:

    “#header {
    background:#fff!important;
    }

    And now it works… amazing… I want to thank the orginator of this this thread along with devblog for saving me mucho dineros… I am devoting my spare time to helping others too!!!

The topic ‘Increasing the width og the template borders’ is closed to new replies.