I've been changing some of the margins in Bartik and applying small changes in the css. But there are two problems where I am unable to find the correct css-file and the part to edit.

It is the position of the user image on the account page. And the width of the user-picture upload on the "edit account page". I can not find where to reduce the width of the input filed.

I included two screeshots of the problem areas.

Can anyone help me to find out where I can set the position of the user image and the width of the user-image upload?

Regards,
Paul

CommentFileSizeAuthor
#6 User_Picture_Upload.jpg68.88 KBpaul_constantine
User_Picture_Position_Account.jpg28.82 KBpaul_constantine
User_Picture_Upload.jpg68.88 KBpaul_constantine

Comments

pixelsweatshop’s picture

pixelsweatshop commented
Status: Active » Closed (fixed)

You need to download and use Firebug http://getfirebug.com/ to identify the element and associated css file. You can also use http://drupal.org/project/imagecache_profiles to set user profile pictures that are consistent throughout your site and allows avatars on the user profile pages, nodes and comments to be a different size.

paul_constantine’s picture

paul_constantine commented

Thank you. I've been using firebug for over a year now. And I tried "LIVE CSS" and "SWEAVER" both D7 modules.

But I have not been able to identify the file that contain the css settings for these problems. I strongly suspect that I need to change core files to do any changes here and I am very reluctant to do that.

None of the css files in the bartik theme contain any entries that allow me to solve my two problems.

:-(

pixelsweatshop’s picture

pixelsweatshop commented

I should have mentioned that best practices would dictate that you create a subtheme so that when you update drupal, it does not override your hacks to the bartik theme. See http://drupal.org/node/225125

This will also mean that your custom css file will load last, overriding anything you would like to in Bartik

paul_constantine’s picture

paul_constantine commented

Thank you for the advice. I found this howto and it worked fine for the subtheme part:

1. Copy the bartik theme from \themes.
2. Paste it into \sites\all\themes.
3. Rename the folder to mytheme (obviously replace mytheme with whatever name you like).
4. Open the folder and rename bartik.info to mytheme.info.
5. Delete the template.php file (or empty its contents).
6. Open mytheme.info and add the line "base theme = bartik" under the line core = 7.x.
7. Find the line stylesheets[all][] = css/style.css and rename style.css to mytheme.css.
8. Navigate to mytheme/css and rename the style.css file to mytheme.css.

That still does not tell me where to change the settings for the width of the "user-picture-upload" field.

Anyway, at least I got the sub-theme part working now :-)

Edit: I just noticed that the button says "Durchsuchen" which is kind of strange because I did not install any German language packs. Does this mean that the theme uses part of my OS and browser? And it it does, is there a way to override these settings in the .css files?

pixelsweatshop’s picture

pixelsweatshop commented

You will now have to use http://drupal.org/project/imagecache_profiles to set user profile pictures that are consistent throughout your site and allows avatars on the user profile pages, nodes and comments to be a different size.

paul_constantine’s picture

paul_constantine commented
StatusFileSize
new User_Picture_Upload.jpg68.88 KB

Dear Nicoz,

maybe I did not express myself clearly. I do not have any problem with the size of my user pictures. My main problem is the width of the "user picture upload field" on the "edit my account" page.

I can not find - even with firebug - the lines in the style.css where I can reduce the width of the upload input field. Right now the field is too wide and breaks my layout (see attached screenshot).

Is it possible that the style.css does not have any entries for that field?

Regards,
Paul

pixelsweatshop’s picture

pixelsweatshop commented

It is entirely possible that there is nothing set in the css to control it. You will have to add it. Find the div/class using firebug and add it along with

input {width:80%;} (or even a hard px width.)

paul_constantine’s picture

paul_constantine commented

Thank you NIcoz,

found the following code that changes the width of the upload field by changing the size from "48" to a lower or higher value:

<input id="edit-picture-upload" class="form-file" type="file" size="48" name="files[picture_upload]">

Tried to change the width by putting the following code into the style.css:

#edit-picture-upload .form-file {
        size:"30";
}

It did not work with size or with width in % or px. What am I doing wrong.

Best wishes and thank you for your patience,
Paul

pixelsweatshop’s picture

pixelsweatshop commented

As mentioned in my above post, you need to add "input" to your css

#edit-picture-upload input{width:200px;}

p.s. This issue is more appropriate in Drupal's forums rather than the core issue queue. If this issue persists, please feel free to post a new thread there.