Skip to:
Content
Pages
Categories
Search
Top
Bottom

reducing the width of buddypress theme

  • Avatar of Maythil
    Maythil
    Participant

    @maythil

    I wish to reduce the size of my site to 800px.

    I did some changes in css files; it works in general.

    but personal pages like myprofile retains the original width.

    can someone help me please?

Viewing 17 replies - 1 through 17 (of 17 total)
  • Avatar of Mark
    Mark
    Participant

    @webdude2000

    Hi

    Profile / members pages uses a separate theme and thus you will need to modify its css as well, under /www/wp-content/member-themes/buddypress-member

    Perhaps someone will write us a global css plugin that allows css editing from WPMU dashboard?

    Regards

    Mark

    Avatar of Burt Adsit
    Burt Adsit
    Participant

    @burtadsit

    There are a couple of files that can be used that bp looks for. You\’ll need to create them. In the themes, if you create custom.css in the /css directory it overrides the css for each theme. Also in the home theme or your custom theme if you create a file called /css/site-wide.css that overrides all css generated by bp.

    That way you don’t need to modify the distributed css files and your upgrade experience will be much happier.

    Avatar of Maythil
    Maythil
    Participant

    @maythil

    Dear Burt, thanks for the reply.

    I tried a /css/site-wide.css as you suggested.

    It doesn’t affect the top/header menu,

    It doesn’t affect My Account, My Blogs or Notification or any item under it.

    In the second horizontal menu, agains it doesn’t affect Home and Blog

    but Members, Groups and Blogs display 800px (approx) pages as desired.

    Under ‘Visit’ (top right), Random Member and Random Group also do the same,

    but Random Blog shows the same wide screen.

    By the way I am using WPMU 2.1.87 and BP RC2.

    Avatar of Jeff Sayre
    Jeff Sayre
    Participant

    @jeffsayre

    Maythil-

    I’m not entirely sure if I understand your issue with the Buddy bar. It is set so that it automatically resizes if you reduce the width of your browser’s window.

    Give it a try. Drag the bottom, right corner of your browser window to the left, thus making the browser window narrower. The Buddy bar “resizes” as you narrow the window.

    Avatar of Maythil
    Maythil
    Participant

    @maythil

    Well, Jeff, what I said is very simple.

    Take a look at the top menu, the one that starts with the ‘buddypress” logo. It’s width is within 800px (roughly). What I want is a just a site that’s only as wide as that top grey menu. And it’s not easy.

    I see a white patch after “Visit” — the length of that patch shows how unnecessarily wider is the rest of the screen.

    When I use IE6, I see my site as I want to see it. If only I were able to make the ie6.css my default style sheet!

    If you have time, kindly browse the following links using Firefox

    and you will see what I mean

    http://onlicone.com/my (wide)

    http://onlicone.com/my/members (real fit)

    Thanks and regards for your kind concern.

    Avatar of Jeff Sayre
    Jeff Sayre
    Participant

    @jeffsayre

    Maythil-

    I hope you don’t think I was being snooty to you. Your issue was simply not clear to me.

    Anyway, I now understand that you want the entire screen to be constrained to exactly 800 pixels in width, that you do not want the Buddy bar to be resized upon screen resizing.

    There are a few ways to accomplish this. But, the best way is to create a CSS selector that will override the selector in the core file.

    If you go to the admin-bar-logo.css file and look at the #wp-admin-bar selector, you’ll see that it has a width property set to 100%. This needs to be changed to your desired fixed width. But, do not change it within this file because it will be lost upon the next BuddyPress upgrade.

    Instead, you place your custom CSS in the site-wide-sample.css file found in the BuddyPress-home/css directory. You must rename that file to site-wide.css. Now, your custom CSS selector will override the core BP CSS. Here’s what you’ll place in that file:

    #wp-admin-bar { width: 800px !important; }

    By the way, do you use Firebug with Firefox? If you don’t, it is a great tool. It not only allows you to find out within which files certain CSS selectors are located, but also to temporarily change them and see what impact they have on the design.

    I hope this helps!

    Avatar of Maythil
    Maythil
    Participant

    @maythil

    Snooty? Oh, no Jeff :)

    Thanks for the instruction. I will give it a try.

    No, I don’t use Firebug. Will try that too :)

    Avatar of Maythil
    Maythil
    Participant

    @maythil

    dear jeff, it doesn’t work.

    a site-wide.css helps put more pages within 800px –

    the main page, as well as ‘home’ and ‘blog’ in the second row manu, for instance,

    but everything under My Account, My Blog and Notifications (Top Menu)

    still displays a 70mm screen to put it in cinematic language :)

    Avatar of Jeff Sayre
    Jeff Sayre
    Participant

    @jeffsayre

    Maythil-

    Hum? That is strange since that directly addresses the admin bar styling. What browser are you using? Is it FireFox?

    When go into FIreFox and make those changes, I see your site’s admin bar set to 800 px. Did you use the !important declaration?

    Avatar of Maythil
    Maythil
    Participant

    @maythil

    I think I must have another clean install.

    The only problem is WPMU folders are undeletable from c-panel.

    Several of them with the wp-content already exist :)

    Avatar of Jeff Sayre
    Jeff Sayre
    Participant

    @jeffsayre

    Ah, that could be causing an issue. Do you have a FTP client? If so, you should be able to delete any file and folder in any of your domains.

    BEfore deleting and reinstalling, just make sure you’ve backed up any data that you want to save and any custom theme changes. Also, make a note of which plugins you’re using just in case you accidentally delete them out of the wp-content folder.

    Avatar of Maythil
    Maythil
    Participant

    @maythil

    dear jeff, u r my only saviour :)

    i have only dummy data.

    i have not launched my site yet. so no problem there.

    but i am not sure ftp will override the wpmu moorings.

    btw, as i mentioned in a note above, ie6 only displays 800px screens.

    is there a way to trick firefox or chrome into behaving like that?

    wishful thinking? :)

    Avatar of Jeff Sayre
    Jeff Sayre
    Participant

    @jeffsayre

    Maythil-

    You’re welcome–although I don’t know how helpful I’ve been.

    With FTP, you should be able to go into your web root and do pretty much anything you want–that is assuming your hosting firm gives you FTP access privileges.

    ie6 only displays 800px screens. is there a way to trick firefox or chrome into behaving like that?

    Well, it seems that you are trying to do just that via the CSS. I’m not sure what the issue is though?

    I suppose you could use JavaScript to force a resize of the browser window but this would only work for users you have javascript enable (most do) and have not set the Firefox Option that prevents a script from moving or resizing a window. Look here: http://schleichermann.wordpress.com/2009/02/04/javascript-resize-window/

    Another great FireFox Add-on is the Web Developer Tools. It may help you gain more insight into what is going on!

    Avatar of Maythil
    Maythil
    Participant

    @maythil

    Interesting things, Jeff.

    Thanks for introducing Firebug and Web Developer Tools. Imagine my plight of going to every file through the Cpanel file manager (which has no Back button!).

    *

    <script type=“text/javascript” language=“javascript”>

    window.resizeTo(800, 600)

    </script>

    Is the height parameter a must, or can you leave it like (800, )?

    *

    I usually use the FTP service from My Network Places in my Windows-XP.

    When I tried to remove one WPMU folder I got the error message

    “500 Can’t Remove Directory. Permission denied”.

    I had posted this problem at a WPMU forum.

    The answer I got was WPMU does something at the Apache level

    and that I can’t do much about it unless mine is a dedicated hosting service.

    From what you said I gather that my work is to be done somewhere up,

    not under public-html at the folder level, right?

    Avatar of Maythil
    Maythil
    Participant

    @maythil

    JEFF, THE LATEST.

    I have a new installation now.

    I think the width problem is to be fixed elsewhere.

    Please consider these:

    1. Immedaitely after the installation I found the Admin bar is 800px by default.

    The rest of the body, starting from the top red line to the bottom silver bar, is much wider than that. The difference in the width can be clearly seen as a white ptach right of the admin bar (At buddypress.org this area is silver or light grey). It’s a blemish.

    2. This means that I don’t have to put #wp-admin-bar { width: 800px !important; } in the site-wide.css . In fact I need to put #wp-admin-bar { width: 960px !important; } instead, so that the width of the admin bar would expand to the right all the way to cover the width of the body. I don’t understand this header/body width disparity?

    3. The above is applicable to Firefox and Chrome (but making the Admin bar width 960px creates a problem with in IE6, where the whole site is set within 800px by default).

    Regards.

    Avatar of Jeff Sayre
    Jeff Sayre
    Participant

    @jeffsayre

    Is the height parameter a must, or can you leave it like (800, )?

    No. You cannot leave the parameter blank. You could pass a variable into the space if you wanted, but it must have something.

    When I tried to remove one WPMU folder I got the error message

    “500 Can’t Remove Directory. Permission denied”.

    A few questions:

    1. Have you checked the files / folder permission on your WPMU install? You should be able to delete everything that you personally upload to your public_html. Although, with shard hosting, there could be issues with apache owning certain files and folders.
    2. Are you using an automatic WordPress Mu install option from your hosting company? I’m not sure if any hosting companies offer that option for WPMU, but it’s worth asking.

    The answer I got was WPMU does something at the Apache level and that I can’t do much about it unless mine is a dedicated hosting service.

    1. Have you contacted tech support for your hosting service provider and asked for their help? This WPMU forum post may prove useful in talking with tech support: http://mu.wordpress.org/forums/topic.php?id=3173&replies=3#post-19388
    2. Have you considered changing hosting companies or upgrading to a more robust hosting plan? A VPS perhaps?

    WPMU really does not do too well on a cheap hosting plan. Here is sage advice from andrea_r, a WPMU guru: http://wpmututorials.com/news/choosing-a-host/

    I have a new installation now.

    I think the width problem is to be fixed elsewhere.

    Please consider these:

    As far as figuring out what’s going on with your CSS, this is where the Firebug tool comes in very handy! It takes awhile to learn how to use it. But once you do, you can determine where a given div or class is pulling its instructions from and then temporarily override those selector parameters within Firebug and see how that affects the overall layout. It is a very powerful and useful tool!

    Concerning CSS issues with IE6: my personal opinion is to not worry about supporting that browser anymore. It is just a big pain and too much work for too little return–less than 20% usage ( http://www.w3schools.com/browsers/browsers_stats.asp ). Again, that is just my opinion.

    Avatar of Maythil
    Maythil
    Participant

    @maythil

    Jeff, I can’t afford a VPS. I have to go with this, but the service is much better than is usual. Think of Elgg, it requres so many things including very new MySql and PHP versons and several other stuff. My HS guys took care of it and installed it themselves for me, though it’s not under the “Script Software’.

    As for WPMU, first I tried to install myself allowing all permissions for the database concerned. I had a problem, and asked the help of my HS. They installed it for me. I asked them whether they had to do anything special at their end for the installation. They said NO, just make it 0777 for wp-content and it would work. It did.

    In fact, they removed several WPMU folders at my request, but at the time I had not realized that all of them were WPMU folders. I was frantically installing, deleting and re-installing all kkind of CMS and SNW softwares. When I realized it, I posted a note at a WPMU forum. The rest you know.

    What happens is when I click a folder, inside I see wp-content, and then a blog folder, it goes on like that until a 2 or 2009, and then I get the error message. I go on changing prmissions as I go along, but at last I reach a point where I am not allowed to change the permission setting. Anyway, I am going to ask my HS what’s the problem involved. I will let you know.

    Thnaks for your long conerned reply.

Viewing 17 replies - 1 through 17 (of 17 total)

The topic ‘reducing the width of buddypress theme’ is closed to new replies.