Digg3 Column Header CSS Customization

  • Unknown's avatar
    limepumpkin · Member ·

    I’m very new to CSS and HTML (just started today) and I’m trying to figure out how to change my Digg3 Column header from a 160×904 to something much bigger. For example: From http://www.pinkalliesofcp.wordpress.com to http://www.cpsmac.com . Is there a certain code or what do I need to do? I just downloaded Firebug but it’s a foreign language to me. :s

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    designsimply · Member ·

    The http://www.cpsmac.com site owner has done a lot of CSS work to change the look of their theme. You can actually use Firebug to see the CSS they’ve added. Open Firebug, click the CSS tab, and select the CSS that starts with “?custom-css”.

    What they’ve done is made the normal Appearance → Header iamge black and then taken a large image that they designed and added it over the top of the design. Here is an example snippet using a logo image instead of their image:

    #pagetitle {
	width:904px;
	height:384px;
	background:url('http://s.wordpress.org/about/images/wordpress-logo-notext-bg.png');
	position:relative;
	margin:2px auto;
}

#header {
	width:904px;
	height:384px;
	color:#333;
	position:relative;
	margin:0 0 7px;
}

    To make that work, add it to your Appearance → Custom Design → CSS editor and click the Preview button. You can adjust the url() value to change out the image and adjust all the other height, width, and color values until your image looks good.

    To learn CSS, I would recommend starting with a tutorial like this one:
    http://www.htmldog.com/guides/cssbeginner/

  • The topic ‘Digg3 Column Header CSS Customization’ is closed to new replies.