Need help? Check out our Support site, then


How to widen columns in Digg 3 Column

  1. I am using the theme: Digg 3 Column

    But I would like to widen the 3 columns and the block on top of the page with the header.

    I am totally new to CSS, but would like to make some changes. I thought you would take the default settings and adjust it by in- or decreasing the figures. Instead I find an empty CSS sheet with comments...

    As I am Dutch, I do not understand all the specific words used by CSS...
    Thank you for taking time to read this post!

    The blog I need help with is andijkernieuws.net.

  2. One of the best ways to view CSS is to use your browser tools. Modern browsers have them built in and if your browser is up to date then you should be able to right-click an element and select the "Inspect Element" option to see the HTML for the item you clicked on as well as all of the CSS that applies to it. You can also find a link to the theme's CSS file on the Appearance → Custom Design → CSS editor page if you click "Edit" next to "Mode: Add-on" on the right.

    The change you've asked for is actually a bit advanced because of the way the Digg 3 Column theme was designed using background images with set widths. To make adjustments to those set images, you would need to download them, recreate them at the sizes you want, re-upload them, and replace the proper reference for each one using custom CSS. That would take some work, and I could help guide you on how to get started. You would need to learn some CSS in order to do it. I know of a good tutorial in English which I will link below, but you might also want to look around for Dutch resources if you're serious about learning enough CSS to make advanced changes.
    http://www.htmldog.com/guides/cssbeginner/

    The background image behind the header image is one example of a set image width. Here is a link to the image so you can see what I mean:
    http://s1.wp.com/wp-content/themes/pub/digg3/images/bg_header_overlay.png

    There is a way to expand the width of the Digg 3 Column theme without editing images if you simply remove them. Here is an example I researched for you that shows how it would work:

    #container,
    #header,
    #header-overlay,
    #pagetitle,
    .pagewrapper {
    	width: 1204px;
    }
    
    .wrapper,
    .narrowcolumnwrapper,
    .narrowcolumn,
    .content {
    	width: 800px;
    }
    
    .entry {
    	max-width: 775px;
    }
    
    .narrowcolumnwrapper,
    .narrowcolumn,
    .content,
    #page {
    	background: none;
    }
    
    #header-overlay img,
    #header-image img {
    	display: none;
    }
    
    #header-image {
    	background: url('http://andijker.files.wordpress.com/2012/09/header0011.png') center repeat-x;
    	border-radius: 8px;
    	width: 1204px;
    	height: 160px;
    }

    This example simply removes some of the background images and resets several of the widths. If you use this example you should also change the Content Width setting on your Appearance → Custom Design → CSS page to 775, or whatever value you use for ".entry" in the CSS example above.

Topic Closed

This topic has been closed to new replies.

About this Topic