Traduzione italiana: Allargare il tema per Wordpress “Gossip City”
Gossip City is a wonderful wordpress theme designed by Design Disease - the authors of well known themes like Illacrimo and the Dilectio Theme. As Google says, 352000 blogs are powered by this awsome theme. It’s meant for gossip blogs, but it’s so well-looking that you can use it for almost everything - I’m using it for this blog, for example! :P However, you may want a wider Gossip City, in order to:

  • use larger ads unit inside posts;
  • attach larger images (I think it’s important, for a gossip blog);
  • …

With a little CSS editing, you can easily enlarge it!

gossip city - enlarging the theme
Wider Gossip City VS the original version

Index
  1. Standard Gossip City VS wider Gossip City
  2. Enlarging Gossip City
    1. Reducing left sidebar’s width
    2. Enlarging the main container
    3. Use original width for the comments’ div!
    4. Use original width for the trackbacks’ div!

Standard Gossip City VS wider Gossip City

You can increase the theme’s width by 140 pixels. How?

  • reducing left sidebar’s width by 60px;
  • enlarging the sidebars and post container by 80px.

Enlarging Gossip City

Now you have to hack a little the CSS stylesheet. Open the style.css file and follow the instructions!

Reducing left sidebar’s width

Find

.SRL { width: 230px; float: left; padding: 0px;}

and replace it with

.SRL { width: 170px; float: left; padding: 0px;}

Now you have to narrow the sidebars’ container, too. Find

.SR { width: 415px; float: right; position: relative; padding: 0px 0px 20px 0px; }

and replace it with

.SR { width: 355px; float: right; position: relative; padding: 0px 0px 20px 0px; }

If you want to stop here, you have to edit another line, otherwise jump to the next section! ;)

So, you don’t want to narrow the theme any more. Find

.SC { width: 455px; float: left; padding: 0px 0px 20px 0px; }

and replace it with

.SC { width: 515px; float: left; padding: 0px 0px 20px 0px; }

Now, you have to fix the comments div’s problem.

Enlarging the main container

Find

.CON { width: 900px; position: relative; margin: 0 auto; padding: 0px; margin-top: 25px; }

and replace it with

.CON { width: 980px; position: relative; margin: 0 auto; padding: 0px; margin-top: 25px; }

Use original width for the comments’ div!

Since the Gossip City theme isn’t fluid, you have to reduce the comments div’s width, else it’ll look awful. Find

.Comments { margin: 20px 0px 0px 0px;}

and replace it with

.Comments { margin: 20px 0px 0px 0px; width: 455px;}

Use original width for the trackbacks’ div!

Same problem for the trackback list’s div. Find

.TrackList { background: #f4ebef url(images/TrackListBottom.gif) no-repeat bottom; padding: 15px; margin-top: 20px; position:relative;}

and replace it with:

.TrackList { background: #f4ebef url(images/TrackListBottom.gif) no-repeat bottom; padding: 15px; margin-top: 20px; position:relative; width: 425px;}

Why 425px, instead of 455px? Because the TrackList div has got a 15px padding; since

real width (we need 455px) = declared width + padding-left (15px) + padding-right (15px)

declared width must be 455-15-15 = 425!

That’s all, folks! :D

Related Posts