Ask your WordPress questions! Pay money and get answers fast! Comodo Trusted Site Seal
Official PayPal Seal

Change widget size and blog post.. WordPress

  • SOLVED

Hi,

http://www.airlinestaffrates.com
I want to change the widget to 300px and the blog post accordingly

Move the header up a bit


http://www.airlinestaffrates.com/travelmagazine
Change the green color on "Kontakt"

Move the white navigation header up a bit to the logo

thanks

2011-05-24 by Charlotte Raboff

Answers (1)

2011-05-24

Christianto answers:

Hi Charlotte,

<strong><em>This use 350px that would fit most content on sidebar widget, see my explanation on comment below.</em></strong>

On style.css
line 12 change #wrapper to

#wrapper {
margin: 5px auto 20px;
width: 990px;
}

line 26 change .blog to

.blog{
background: white url(http://airlinestaffrates.com/wp-content/themes/charlotte_ny_new/images/blogtop.gif) no-repeat 0% 0%;
float: left;
margin-top: 10px;
width: 630px;
}

line 129 change #sidebar to

#sidebar{
display: block;
float: right;
margin-right: 10px;
overflow: hidden;
width:350px;
}

line 113 change #sidebar3 width to 310px

#sidebar3 {
background: white url(http://airlinestaffrates.com/wp-content/themes/charlotte_ny_new/images/sidebar3top.jpg) no-repeat 0% 0%;
display: block;
overflow: ;
padding-right: 20px;
width: 310px;
}


Hope this help

Christianto comments:

Honestly this require not only editing css but also content adjustment...
Most of image/widget in your site will get cut if you set the width to 300px..

Charlotte Raboff comments:

They are already 300px but, it will be the blog post that have to not enough wide images..

anyway - I just added your changes but nothing happen

Christianto comments:

350px would be a good number, I've edit the above code to 350px

Also there are background image that need adjustment..
the background image create an effect of round box..
directory :
charlotte_ny_new/images/blogtop.gif
charlotte_ny_new/images/blogbottom.gif
charlotte_ny_new/images/sidebar3top.jpg
charlotte_ny_new/images/sidebar3bottom.jpg

for the SEARCH & BOOK HOTELS search, Did you use plugin or custom code, I think you should edit it manually.

Charlotte Raboff comments:

thanks - the widget is now changed BUT it has to be align with the header and the blogpost need to be wider accordingly

Charlotte Raboff comments:

thanks for the background image files!

re widget I think 300px looks ok

I will change the Search Hotel box manually later on...

Christianto comments:

Please see my code above again.. I edit it the code..

Christianto comments:

sorry on line 129 should be #sidebars not #sidebar

#sidebars{
display: block;
float: right;
margin-right: 10px;
overflow: hidden;
width:350px;
}

Christianto comments:

and .blog on line 26 to #blog

#blog{
background: white url(http://airlinestaffrates.com/wp-content/themes/charlotte_ny_new/images/blogtop.gif) no-repeat 0% 0%;
float: left;
margin-top: 10px;
width: 630px;
}


:D

Charlotte Raboff comments:

Ops - something happen!! the widget is gone

Charlotte Raboff comments:

Thanks - it´s working now

can you help me the other small issues at http://www.airlinestaffrates.com/travelmagazine

Christianto comments:

for the white navigation header
on line 33 in custom.css change #menu to

#menu {
margin: 20px 0px;
}


For the kontakt what color you want to show?

Charlotte Raboff comments:

I want red f0381e

Christianto comments:

on custom.css line 41 change a tag to

#menu .tagsmenu a {
color: #f0381e;
}

Charlotte Raboff comments:

Thanks :)

Charlotte Raboff comments:

Christiano,

the hotel search box has just been wider but it does not show correctly now when the blogroll is wider - see http://www.airlinestaffrates.com

thanks