Results 1 to 6 of 6

Thread: Change the width ratio between Listings and Widgets (vers. 3.1.8)

  1. March 31st, 2012 #1
    samcy
    samcy is offline
    Thread Starter
    samcy's Avatar
    Join Date
    Mar 2012
    Location
    Germany
    Posts
    12,098
    Thanks
    121
    Thanked 1,756 Times in 1,442 Posts

    Lightbulb Change the width ratio between Listings and Widgets (vers. 3.1.8)

    Ok, this tutorial is nothing special, but maybe the one or other newbie likes to have it explained.

    Why changing?:

    I didn't like the size of the widgets on the right side, as i believe they are a bit to big. I prefer to have the listings a bit bigger in the width. The standard widget is 340px width. Our goal is to get it 294px width (46px smaller) and in the same time the listings 46px longer. See the 2 screenshots to compare:

    [CENTER]Original
    original-width.jpg

    46px more width in listings
    46px-bigger.jpg[/CENTER]

    To do that, it only needs a few little changes in the style.css

    Please first make a backup of your style.css in /wp-content/themes/classipress/

    Done? Ok, lets go:

    Open the style.css an go to the following code (starts at line 200)

    PHP Code:
    .content_left { margin:0; padding:0 10px 0 0; float:left; width:590px;}
    .    content_right { margin:0; padding:0; float:left; width:340px;} 
    Replace the above code with:

    PHP Code:
    .content_left { margin:0; padding:0 10px 0 0; float:left; width:636px;}
    .    content_right { margin:0; padding:0; float:left; width:294px;} 
    Now go to line 396 and find:

    PHP Code:
    .post-block { width:560px; background: url("images/block_topbg.gif") repeat-x scroll center top #FFFFFF; margin:0; padding:13px; border:1px solid #fff; -khtml-border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px;} 
    Replace the above code with:

    PHP Code:
    .post-block { width:606px; background: url("images/block_topbg.gif") repeat-x scroll center top #FFFFFF; margin:0; padding:13px; border:1px solid #fff; -khtml-border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px;} 
    save the file.

    In case you are using the facebook like box widget, just go to your admin area at appearance / widgets and edit the facebook widget. Set the width there to 260 and save it.

    That's it. As i said its nothing special, but maybe someone finds it better looking.

    Greets
    Reply With Quote Reply With Quote

  2. The Following 4 Users Say Thank You to samcy For This Useful Post:

    budihartono (January 22nd, 2013), chathuranga50 (December 3rd, 2013), ismpereira (April 1st, 2012), levt (April 6th, 2012)
  3. March 31st, 2012 #2
    jomarkosabel
    jomarkosabel is offline
    jomarkosabel's Avatar
    Join Date
    Mar 2009
    Location
    Philippines
    Posts
    40,895
    Thanks
    167
    Thanked 3,398 Times in 3,269 Posts
    You must be an AppThemes customer and logged in to view this response. Join today!
    Please help our moderating team work more efficiently by not sending us support questions via PM. You can read more about how AppThemes support works here. However, you can send a PM to follow up and remind me if I missed your support request/thread.

    Thank you and have a nice day.
    Reply With Quote Reply With Quote
  4. March 31st, 2012 #3
    samcy
    samcy is offline
    Thread Starter
    samcy's Avatar
    Join Date
    Mar 2012
    Location
    Germany
    Posts
    12,098
    Thanks
    121
    Thanked 1,756 Times in 1,442 Posts
    You must be an AppThemes customer and logged in to view this response. Join today!
    Reply With Quote Reply With Quote

  5. The Following 3 Users Say Thank You to samcy For This Useful Post:

    ismpereira (April 2nd, 2012), levt (April 8th, 2012), mzaha (December 7th, 2012)
  6. January 11th, 2013 #4
    nicholasdhilton
    nicholasdhilton is offline
    Member nicholasdhilton's Avatar
    Join Date
    Mar 2012
    Location
    United States
    Posts
    66
    Thanks
    0
    Thanked 0 Times in 0 Posts
    You must be an AppThemes customer and logged in to view this response. Join today!
    Reply With Quote Reply With Quote
  7. January 11th, 2013 #5
    samcy
    samcy is offline
    Thread Starter
    samcy's Avatar
    Join Date
    Mar 2012
    Location
    Germany
    Posts
    12,098
    Thanks
    121
    Thanked 1,756 Times in 1,442 Posts
    You must be an AppThemes customer and logged in to view this response. Join today!
    Rolf Hassel (Samcy)
    Reply With Quote Reply With Quote
  8. January 14th, 2013 #6
    kieukhanh
    kieukhanh is offline
    kieukhanh's Avatar
    Join Date
    Sep 2011
    Location
    Vietnam
    Posts
    75
    Thanks
    4
    Thanked 1 Time in 1 Post
    You must be an AppThemes customer and logged in to view this response. Join today!
    Reply With Quote Reply With Quote
« Wordpress update caused error in the popular tab in classipress | How do I modify the number of ads per page »

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Similar Threads

  1. [MOD NEEDED] Sidebar Width Change
    By jmarshall in forum ClassiPress General Discussion
    Replies: 1
    Last Post: January 11th, 2011, 08:41 AM
  2. How To Change the Width Size of the Welcome Box?
    By michaeldante in forum ClassiPress General Discussion
    Replies: 1
    Last Post: December 21st, 2010, 04:57 PM
  3. Reducing the Featured Listings width?
    By tbase in forum ClassiPress General Discussion
    Replies: 2
    Last Post: May 29th, 2010, 12:28 PM
  4. [SOLVED] Change header and footer width?
    By quirkmedia in forum ClassiPress General Discussion
    Replies: 5
    Last Post: April 28th, 2010, 07:20 PM
  5. Reducing the Featured Listings width?
    By tbase in forum Help Using ClassiPress
    Replies: 0
    Last Post: December 31st, 1969, 06:00 PM