Need help? Check out our Support site, then


Widgets

  1. Hi,

    I would like to change the widget colours and put them all on the left side of my blog, how can I do it?

    Thanks

    The blog I need help with is branconpelele.wordpress.com.

  2. You could use absolute positioning to move the main sidebar from the bottom of the content to the side, however, it doesn't work the best together with the fixed position header (site title, description, image, and menu). Try out this example to see what I mean:

    #main {
    	position: relative;
    }
    
    #secondary {
    	position: absolute;
    	width: 180px;
    	top: 366px;
    	left: -276px;
    }

    You could try to work around that by making the background of the header area match the main background color so that the sidebar slides underneath them when the page scrolls:

    #branding hgroup,
    #branding > a,
    #branding #access {
    	background: #FC8E07;
    }
    
    #site-description {
    	margin-bottom: 0;
    	padding-bottom: 15px;
    }
    
    #branding {
    	margin-top: -75px;
    }
    
    #branding hgroup {
    	padding-top: 75px;
    }
    
    #branding #access {
    	margin-top: 0;
    }

    Or another option would be to hide the current header area and just show widgets. With this solution, you would want to recreate the title, description, image, and menu from the header using widgets instead:

    #main {
    	position: relative;
    }
    
    #secondary {
    	position: absolute;
    	width: 200px;
    	top: 0;
    	left: -280px;
    }

    Here is an example showing how to change the color and font size of widget titles:

    .widget-title {
    	color: #b22222;
    	font-size: 1.5em;
    }

    You can adjust the color code and the numbers, and you can add different CSS properties too. To learn more about CSS properties, start out here:
    http://www.htmldog.com/guides/cssbeginner/

Topic Closed

This topic has been closed to new replies.

About this Topic