Moving the sidebar in Ambiru
-
Would someone be able to help me with this? I searched in the forums and I can’t seem to find the answer. I have the Ambiru theme and the sidebar is all the way at the bottom. Is there a way to move it to the left side next to the main area?
The blog I need help with is: (visible only to logged in users)
-
Hi. thekokopelli.wordpress.com uses the Kubrick theme and has a sidebar at the right place.
In order to help you accurately, we need the URL of the blog you are talking about please.
-
Feeling generous… and bored, this will do it. I tweaked the sidebar (bottom bar) design a little since it the original design did not lend it self well to being on the side. You will have to make a new header image that is 740px x 225px, upload it to your media library, get the URL of that image and then place it between the quote marks in the background declaration in the #header section where it says, URL_of_new_header .
#wrap { width:740px; } #header { background: url("URL_of_new_header") no-repeat scroll 0 0 transparent; width:740px } #nav { width:720px } #sidebar { background: none repeat-x scroll 0 0 #484848; border: 5px solid #DDDDDD; width:200px; }Ambiru is perhaps one of the easiest and most straightforward of these I’ve done.
-
Hi thesacredpath, thanks for the info! I had this same question and I followed your instructions. The header picture I uploaded looks a little larger than the home/about navigation bar. Is there a way to stretch the navigation bar so that it is flush with the header pic?
Thanks!
-
-
@TSP
Just asking … Do you think it needs some padding at the very top to accomodate the nav bar we wordpress.com users have when we view the blog? -
@TT, yeah, I would probably add about 10-15px of padding at the top of #wrap and maybe even add a grey top border to match the side borders. I’d have to try some different things. As it is now, it definitely seems unfinished, or you want to try and scroll up past the top to see if there is more up there.
-
-
Great suggestions, much appreciated! Little by little it’s looking better and I am learning CSS :)
-
Hi guys, I also have the ambiru theme and all I really care to do is make the width of my blog page bigger so my pictures can be bigger. I have no clue how to make the width of my page bigger but I know its possible. I did the CSS upgrade.
Any help would be GREATLY appreciated.. Thanks so much!
-
-
Hi again. Thank you for responding, I havent been on my gmail account in ages.
2,816px × 1,880px would be perfect. Is there any way to keep it that large? I hate scaling.. Thanks so much! -
Ummm, some things you should consider as 2800px wide is a really bad design idea.
You do realize that 0% (zero percent) of internet users have monitors that wide don’t you? I’ have a huge monitor and mine is only 2360px wide. Here are the top 6 monitor resolutions in use on the internet:
1 — 1024×768 — 40.28%
2 — 1280×1024 — 16.97%
3 — 1280×800 — 16.89%
4 — 1440×900 — 7.71%
5 — 1680×1050 — 4.28%
6 — 800×600 — 4.01%1. Note that 1680px wide is just over 4% of users? Do you really want to shut out over 95% of web surfers?
2. Do you know that horizontal scrolling is one of the top 10 things people dislike most on the web? Most will simply leave your site.
3. Do you know that anyone going to your site and being confronted with a 2816px wide image is simply going to click away and go elsewhere?
4. Do you have any idea how long it would take to download and display even 2 or 3 such images? Internet users are impatient and will simply not wait.
5. Are you aware that most of the web users would see less than 1/4 of your image on their screens? This would be a bad user experience.
6. Are you aware that a good portion of people using the internet are on 1.5Mbps or slower internet connections?
Always keep your visitors in mind as that is who the site is for (unless you made it just for yourself).
In general, as a web designer, I always try and stick to designs that will fit on a 1024px wide monitor without having to scroll horizontally. That means that given the frame for a browser window and the vertical scroll bar you want the outer width of the design at 990px. 1000px wide at the absolute widest.
-
OK, I’m going to update my chart above as the one I have been using doesn’t seem to be getting updated anymore. The following is as of December 2012 from StatCounter Global Stats.
1 — 1024×768 — 26.52%
2 — 1280×800 — 16.82%
3 — 1366×768 — 11.05%
4 — 1280×1024 — 8.81%
5 — 1440×900 — 7.44%
6 — 1680×1050 — 4.01%My other comments still hold though even with the above change in statistics.
-
thanks for the input, I really appreciate it. Ok will I would like to stick to the most common monitor resolution. I just want my blog to be able to post pictures up with about the same size as the pictures on this other blog: http://www.fashiontoast.com. Ive tried, but nothing seems to work. Any suggestions on how with ambiru?
thanks
-
On that site, the images are 700px wide. Is that what you want to shoot for. You could go up to 900px easily enough, which would give you a little more. If you go that big though, make sure and optimize your images, and keep the number of posts showing on the main page down to perhaps 3 so that the site loads fast. Your image file size you should try and keep under 100k each, and if you could keep them under that, it would be even better.
Let me know what size you want to shoot for.
-
-
The following gives you 700px clear for images.
#wrap { width: 740px; } #nav { width: 730px; } #content { width: 730px; }Make sure and set the maximum video and image width, in the field below the CSS edit text area to 700 so that when you select full-sized for images, they will come in at 700px wide.
-
Hi, thanks for helping me out.. I think I got it right. Would you happen to know how to add the facebook like icon on each of my post? A lot of blogs have it, but I cant seem to figure it out. Any info would help. thanks :)
- The topic ‘Moving the sidebar in Ambiru’ is closed to new replies.
WordPress.com Forums 