Apple

[ARG01]

Hi, i'm using this theme and I noticed the login button is unbalanced. How do I fix it?



Great theme btw!

I am just guessing that you need to expand the userarea width. A link to your site would help.

[benjauregui]

Hi, i'm using this theme and I noticed the login button is unbalanced. How do I fix it?



Great theme btw!

I am just guessing that you need to expand the userarea width. A link to your site would help.

foropruebapsu.byethost32.com/index.php

[420Connect.co.uk]

I'm also using this theme although I have changed many parts of it..

The following should achieve what you're after..

Trial different numbers to shift parts around (where it says width & margin etc.) but this seems to work fine for me:

In themes/Apple/css/Index.css

open and find:

Code Select Expand

.user {
float: right;
width: 70px;
  margin-top: -4%;
padding: 10px;
color: #555;
}
.user a {
color: #555;
}
.user a:hover {
color: #4c80ab;
}
.user p {
float: left;
margin: 0 1em 1em 0;
padding: 0;
}
.user img.avatar {
width: 55px;
height: 55px;
}
.user ul {
margin: 0;
padding-left: 10px;
}
.user ul li {
margin-bottom: 2px;
}
.user ul li.greeting {
font-size: 12px;
font-weight: bold;
line-height: 12px;
}
.user input.input_text, .user input.input_password {
background: #fcfcfc;
border: 1px solid #dcdcdc;
outline: none;
padding: 4px;
color: #9d9d9a;
}
.user input.button_submit {
background: #4c80ab;
border: 1px solid #4c80ab;
color: #f1f1f1;
padding: 3px 6px;
margin: 0;

replace with:

Code Select Expand

.user {
float: right;
height: 70px;
margin-top: -1%;
padding: 22px;
color: #fff;
}
.user a {
color: #fff;
}
.user a:hover {
color: #79a60e;
}
.user p {
float: left;
margin: 0 1em 1em 0;
padding: 0;
}
.user img.avatar {
width: 55px;
height: 55px;
}
.user ul {
margin: 0;
padding-left: 10px;
float: left;
}
.user ul li {
margin-bottom: 2px;
}
.user ul li.greeting {
font-size: 12px;
font-weight: bold;
line-height: 12px;
color: white;
}
.user input.input_text, .user input.input_password {
background: #fcfcfc;
border: 1px solid #dcdcdc;
outline: none;
padding: 4px;
color: #9d9d9a;
}
.user input.button_submit {
background: #4c80ab;
border: 1px solid #4c80ab;
color: #f1f1f1;
padding: 4px 16px;
margin: 0;


I've possibly changed other parts like the logo size which could turn out a bit different on yours but try this and see how you get on!


~ Just tested this on your site and updated the code to what i imagine you're looking to achieve.. ~ enjoy

[ARG01]

I am not sure what code 420connect is using as it does not seem to contain the width for the ".user" as in the original file. For starters you could simply try finding this and expanding the width from 320px to maybe 420px:

Code Select Expand

.user {
    color: #555;
    float: right;
    height: 70px;
    margin-top: 0;
    padding: 10px;
    width: 320px;
}

The Language you are using requires longer words to fit in that area, which is the direct cause of your issue.

[420Connect.co.uk]

Strange!
I must have removed it at some point to achieve something else..

still works from what I can see though?

[420Connect.co.uk]

Just noticed you have a very long news item that spills onto your main forum so fixed that up for you too..

Attached file should replicate this:




You can try this and see how it works out for you: (Attached)

Remember to make a copy of your original one though! 

[ARG01]

Strange!
I must have removed it at some point to achieve something else..

still works from what I can see though?

That was my point. You were offering advice using file code that was not original, which usually results in more confusion than anything else.

[420Connect.co.uk]

Mine began the same as the OP's although I think I remember removing the width as it caused a secondary issue with how things were displayed to members as opposed to guests once fixing the first issue.. 

[ARG01]

Mine began the same as the OP's although I think I remember removing the width as it caused a secondary issue with how things were displayed to members as opposed to guests once fixing the first issue.. 

If you removed the width from your code, then yours was not the same as the OP's. Considering that the width is the focus of the OP's issue and solution, I find it difficult to understand your logic.

[420Connect.co.uk]

I mean I began with the same as the OP, and also wanted to achieve the same thing a while ago..
I've not really got much knowledge of css/php or any language to be honest but all I know is without it / that code, solved my issues

[ARG01]

I have been using SMF since it's creations, and have been desiging themes fpr SMF since 2007. If I remember correctly, until just recently, the vast majority of your posts here were in the form of support requests.

What I am attempting to drive into your brain here is that the user will more than likely be confused when those offering support are offing inaccurate information. In your case, offering support using different code than the original or, different code of the user.

What I am getting at is that you suggested the user find this in their file:

Code Select Expand

.user {
float: right;
width: 70px;
  margin-top: -4%;
padding: 10px;
color: #555;
}

Which their file actually contained this:

Code Select Expand

.user {
    color: #555;
    float: right;
    height: 70px;
    margin-top: 0;
    padding: 10px;
    width: 320px;
}

A beginner may find this quite confusing since your code is different from what they have. Not only does the code that you suggest they find not contain the "width", as theirs does but is also laid out different from theirs. From experience, this could result in the user needlessly searching through code for hours.

If you cant comprehend that, then I guess we are done here.

Best of luck benjauregui. 

[420Connect.co.uk]

Sorry? ..I never meant to cause such a scene

.. I see now where I had gone wrong in my first reply, I must have copied the wrong code part for my "find" suggestion..

I'll be sure to review my posts before trying to help out next time..

[benjauregui]

Just noticed you have a very long news item that spills onto your main forum so fixed that up for you too..

Attached file should replicate this:




You can try this and see how it works out for you: (Attached)

Remember to make a copy of your original one though! 

Would you mind telling me what styles did you adjust? Because i just changed .user and .user input.button_submit from the index.css you posted and it looks like this.



I was trying something else with that news, it's not like its going to be that long lol

Also, this is really off topic because its not a theme question, but when I edit style and things like that on google chrome it takes ages to show the changes, do you know how to fix that?

[ARG01]

For one thing that entire header area is a mess. That theme was not designed to have that huge clock, which even without looking through the code I can tell that it more than likely has a lot to do with your issue. But if the clock is necessary, removing the News area may help. Or at least try moving the News text to the left instead of having it centered. I believe that this setting is in your index.template file instead of index.css, where it should be.

Also try adjusting the padding for the .user area.

Find,

Code Select Expand

.user {
    color: #555;
    float: right;
    height: 80px;
    margin-top: 3%;
    padding: 22px;
}

change to,

Code Select Expand

.user {
    color: #555;
    float: right;
    height: 80px;
    margin-top: 3%;
    padding: 2px 22px;
}