Mystique Customizations?

• 

  txcowboydancer · Member · Feb 5, 2013 at 11:26 pm

  • Copy link
  • Add topic to favorites

  I’m trying to do the following:

  1. Change the default width for the theme to make it fill more of the browser window (I’d like it to be flexible and set to 90%) rather than a fixed pixel size.

  2. Change the width of the columns so that they are also flexible and set to a percentage.

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

• 

  designsimply · Member · Feb 18, 2013 at 12:15 am

  • Copy link

  Here is a CSS example to get you started. It will make the main container, the content area container, and the sidebar a flexible width:

  #container {
  	width: 90%;
  }
  
  #content-container {
  	width: 70%;
  }
  
  #sidebar {
  	width: 28%;
  }
  
  #branding {
  	width: 100%;
  }

  You may also want to adjust your header image to something wider or that has cleaner areas on the left and right so it looks better repeated on an x-axis. Once you’ve uploaded a new image to your media library, you can replace the url() value in this example to change out the image to your custom image:

  #branding {
  	background: url('http://txcowboydancer.files.wordpress.com/2013/02/banner-3c-940x200.png');
  }

  Widget title backgrounds are currently set with an image:
  http://s0.wp.com/wp-content/themes/pub/mystique/colors/images/red/widget-title-red-large.png

  That won’t work for a flexible width, so you could add something like this that’s a bit simpler and will always work no matter what the sidebar width adjusts to:

  .widget-title, .widget-title span {
  	background: red;
  	border-radius: 8px;
  }