Simple Machines Community Forum

Customizing SMF => Graphics and Templates => Topic started by: 420Connect.co.uk on November 18, 2014, 11:45:26 AM

Title: Minor modifications help!
Post by: 420Connect.co.uk on November 18, 2014, 11:45:26 AM
5/6 issues now solved.. - scroll to bottom :)

Hello everyone,
I hope everyone is well!

I've taken a few screenshots and merged them to show a few minor annoyances about my forum..

I've had a look for existing MOD's but they're now outdated etc.

Happy to post any files required and I appreciate any help given! :)

(see attachment)


Thank you
Title: Re: Minor modifications help!
Post by: Gwenwyfar on November 18, 2014, 12:31:46 PM
I'll leave the php file edits to someone with more time, but for the css stuff, as long as these things weren't changed much on your theme, this should work:


#guest_form {
   color: white;
}

.poster {
   text-align: center;
}


Add that to the bottom of your css file.
Title: Re: Minor modifications help!
Post by: 420Connect.co.uk on November 18, 2014, 01:17:41 PM
Awesome -  thank you! :D

would I add "color: white;" somewhere else to make the date and time under "hello [username]" white also?

thanks!
Title: Re: Minor modifications help!
Post by: Gwenwyfar on November 18, 2014, 01:21:04 PM
Yes, that one's just for the guest form. You can change that part to this to include the date:

#guest_form, #upper_section .user {
   color: white;
}
Title: Re: Minor modifications help!
Post by: 420Connect.co.uk on November 18, 2014, 01:45:55 PM
Thanks for the reply!

I've just noticed a weird issue that's just started happening:
hopefully you can help


(posts have a huge spacing issue)
Title: Re: Minor modifications help!
Post by: 420Connect.co.uk on November 18, 2014, 03:30:27 PM
.

I made an updated picture of problems for anyone willing to help..

Version: 2.0.9
Theme: Apple (with tweaks)

Index.css attached and I can upload board.index's etc if need be!

I'm trying things myself but fear I'll make anything worse and/or create new problems.. :(

Thank you!
Title: Re: Minor modifications help!
Post by: Gwenwyfar on November 18, 2014, 03:38:46 PM
Can't really tell you what's wrong without seeing your code/your forum. The code above, if you inserted it correctly, should have had no effect on any sort of positioning or sizes (which are what could cause the problem you see).
Title: Re: Minor modifications help!
Post by: 420Connect.co.uk on November 18, 2014, 03:48:04 PM
I'm happy to upload any files if you wouldn't mind taking a look through them (or make you an account?)

thanks again for helping out! :)
Title: Re: Minor modifications help!
Post by: Gwenwyfar on November 18, 2014, 03:51:24 PM
Ah, didn't notice you had the link on your signature before, rarely pay attention to them :P

Just change the part you added here:

.poster {
   text-align: center;
}


to

.poster {
   text-align: center;
   float: left;
}

Title: Re: Minor modifications help!
Post by: 420Connect.co.uk on November 18, 2014, 04:04:56 PM
Ahhhhhhhhh!

Thank you, Thank you, Thank you, Thank you, Thank you x 1000000000 :DDD

That worked perfectly! :D

1/5 (http://www.420connect.info/forum/Smileys/SMILE/tiick.gif)

Feel free to help solve any of the other 4! :D
Title: Re: Minor modifications help!
Post by: Deaks on November 18, 2014, 04:07:13 PM
1. 42's answer should fix that
2. will need to alter the padding and margins
3. http://custom.simplemachines.org/mods/index.php?mod=1410 < try this mod (should work I made it then sold it lol)
4. need Display.template.php to remove that
5. is this in your profile area? what mods do you have installed could be a duplicate code :?
Title: Re: Minor modifications help!
Post by: 420Connect.co.uk on November 18, 2014, 04:23:01 PM
Thank you very much Bry! :)
You're a true legend!

1. (now solved)
2. still to play with
3. actually solved this myself by removing:

[size=8pt]"<ul class="reset">
<li class="floatleft"><img src="', $settings['images_url'], '/', $context['theme_variant_url'], 'new_some.png" alt="" /> ', $txt['new_posts'], '</li>
<li class="floatleft"><img src="', $settings['images_url'], '/', $context['theme_variant_url'], 'new_none.png" alt="" /> ', $txt['old_posts'], '</li>
<li class="floatleft"><img src="', $settings['images_url'], '/', $context['theme_variant_url'], 'new_redirect.png" alt="" /> ', $txt['redirect_board'], '</li>
</ul>"[/size]

from boardindex

4. Display.template.php - (attached now)
5. Yes - on a users profile page.

MODS:

1.   Ultimate Profile   0.9.1   [ Uninstall ]
2.   Country Flags   2.1   [ Uninstall ]
3.   NiceTooltips   1.9   [ Uninstall ]
4.   Badge Awards   1.0.15   [ Uninstall ]
5.   Additional Membergroups on Profile   1.2   [ Uninstall ]
6.   AdditionalMembergroups   1.04   [ Uninstall ]
7.   SMFPacks Shoutbox Pro   1.0.8   [ Uninstall ]
8.   Remove Help From Menu   1.0   [ Uninstall ]
9.   SA Facebook   2.0.5   [ Uninstall ]
10.   Stop Forum Spam   1.0   [ Uninstall ]
11.   Bad Behavior mod   1.5.18   [ Uninstall ]
12.   SimplePortal   2.3.6   [ Uninstall ]
13.   Referrals System   3.1   [ Uninstall ]
14.   Default Avatar   2.3   [ Uninstall ]
15.   Images On Board   3.0   [ Uninstall ]
16.   Multiple Stars   V2   [ Uninstall ]
17.   Drafts   2.0.5   [ Uninstall ]
18.   Tagging System   3.0   [ Uninstall ]
19.   SA Chat   0.1.4 Rev105   [ Uninstall ]
20.   LUP: Logout Under Profile   1.0.0   [ Uninstall ]
21.   @mention members   1.1.2   [ Uninstall ]
22.   Ad Managment   3.2




Thankyou both once again! :)
Title: Re: Minor modifications help!
Post by: Deaks on November 19, 2014, 05:44:53 AM
ok in the Display.template.php

look for and remove this code


// Show the member's primary group (like 'Administrator') if they have one.
if (!empty($message['member']['group']))
echo '
<li class="membergroup">', $message['member']['group'], '</li>';
Title: Re: Minor modifications help!
Post by: Deaks on November 19, 2014, 05:48:42 AM
as for the profile one can you attach your profile.template please.
Title: Re: Minor modifications help!
Post by: 420Connect.co.uk on November 19, 2014, 07:47:53 AM
Thanks again Bry!

Attached is my profile template and I managed to remove the membergroup titles by emulating an old version and installing an older mod - worked perfectly :D

I also tried figuring out the margin/wrapper issue with the login button..
after lots of playing around, I managed to get the login button displayed better
however this causes other things to display incorrectly...

.css also attached! :)



edit: - I just thought, I'm using ultimate profile mod so you'd probably need this too/instead?

(attached)
Title: Re: Minor modifications help!
Post by: Deaks on November 19, 2014, 08:37:35 AM
ok im not entirley sure about profile one but can you try searching for

<span class="smalltext"> ' . $context['member']['online']['text'] . '</span>

and remove it (remember backup the file) ...
Title: Re: Minor modifications help!
Post by: 420Connect.co.uk on November 19, 2014, 08:55:19 AM
Thanks again for the reply TB!

I tried what you suggested but never seen any difference so undid my changes,
I then had a look in UltimateProfile for the same line, removed it and it worked a charm! :D
(and repeated the process to remove another place that had the same issue)


Thank you very much again! :D

Current problem list!: 4/5 (http://www.jvhero.com/wp-content/uploads/2013/08/small-tick.png)

Last issue is my bloody login area,
I'm not 100% but I think a small piece of code would need to be added to only move certain things?
Title: Re: Minor modifications help!
Post by: Deaks on November 19, 2014, 09:14:43 AM
issue is that user is set as a fixed width

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


remoce the width attribute or increase it (even look at using a fluid width so %) also restrict the size of the .news width
Title: Re: Minor modifications help!
Post by: 420Connect.co.uk on November 19, 2014, 09:45:08 AM
I've played around with the numbers and tried %'s instead but when I fix one thing, it causes another issue :(

Title: Re: Minor modifications help!
Post by: 420Connect.co.uk on November 19, 2014, 10:55:40 AM
update:

after a million attempts at changing numbers, refreshing and clearing cache etc. I've managed to get it to display as close to perfect as possible.. (to my ability?)

(attached picture of logged in / out now)

Ideally the space I've marked in red wouldn't be there (user info would be further right)


Also on my quest to fix the problem I came across this:
http://css-tricks.com/the-perfect-fluid-width-layout/
It's a .css script to re-size and display things better depending on a users screen size..

I "noobily" tried pasting the .css at the end of mine..
and although it made everything look strange, some things did infact fit better and were properly aligned.
code:
* {
margin: 0;
padding: 0;
}

body {
font-size: 62.5%;
background: url(images/stripe.png) repeat;
}

p, li {
font: 1.2em/1.8em Tahoma, sans-serif;
margin-bottom: 10px;
}

h1 {
font: 2.0em Tahoma, sans-serif;
color: white;
height: 0px;
}

h2 {
font: 1.8em Tahoma, sans-serif;
color: green;
margin-bottom: 10px;
}

ul {
margin-left: 25px;
}

img {
border: none;
}

#page-wrap {
background: white;
min-width: 780px;
max-width: 1260px;
margin: 10px auto;
}
#page-wrap #inside {
margin: 10px 10px 0px 10px;
padding-top: 10px;
padding-bottom: 10px;
}

#main-content {
background: url(images/left-sidebar.gif) repeat-y white;
padding-left: 230px;
padding-top: 20px;
}

#header {
background: #267f23;
text-align: center;
}

#left-sidebar {
width: 150px;
float: left;
padding-left: 15px;
padding-top: 20px;
}

#footer {
background: #267f23;
text-align: center;
padding-top: 20px;
padding-bottom: 20px;
color: white;
}



If someone knew what they were doing and managed to combine my .css file and the above code so it displays perfectly, I would be most grateful and will try and reward you in some way when I get a chance! :)

(latest index.css attached)


Thanks again for all the help!
I SMF :D
Title: Re: Minor modifications help!
Post by: Gwenwyfar on November 19, 2014, 11:10:05 AM
the "*" selects every element (basically everything), and sets margin and padding to 0 with that. When you add that to top of the css, it "resets" any browser default config, and from there follows the next margins, paddings, etc. If you add that to the bottom, you overide every padding, margin in your entire css file. So I don't think that's going to end well. If you have any other issues you should fix them with a specific selector to the part you're having trouble with, otherwise you end with a mess everywhere :P

Though as for the rest of the code you used, that is not going to work with smf existing classes, and smf (and your theme's too) css already has its own things set, so overiding that to something that did not ever have smf in mind is easily going to cause you trouble. I'd remove everything but the margin/padding reset.

About your spacing issue: Do you have a test account I could use to check that?
Title: Re: Minor modifications help!
Post by: 420Connect.co.uk on November 19, 2014, 12:02:49 PM
Hey again,

I've completely removed the random code I found earlier (it was just an experiment to try and solve the other problem) - I wouldn't mind adding in a version that would work for me though..

Did you mean pasting the code I found at the top of the page, rather than bottom would achieve what I'm looking for?

& How I have my index.css now is going to cause problems?

normal user test account:
name and pw: smftest
site: www.420connect.info

Again thanks for the help! :)
You're a legend!
Title: Re: Minor modifications help!
Post by: Gwenwyfar on November 19, 2014, 12:22:04 PM
No, it would still be useless for the most part, but the first one, the * { margin: 0 padding: 0 } thing is useful to have at the top, that way it resets some browser defaults before the rest of the code goes on  :)

And even if the code was changed to affect smf, it still wouldn't do much because smf themes are usually made differently than what that code wants to achieve, and there is already code in smf doing what that code is about doing, there is no point in redoing it. That thing is just a generic template for making some site, nothing else :P

For the spacing then:

On this part:

.user {
    float: right;
    width: 390px;

Remove the "width: 390px;".
Title: Re: Minor modifications help!
Post by: 420Connect.co.uk on November 19, 2014, 03:31:51 PM
Thanks again for the reply FortyTwo! :)

I'd popped

* { margin: 0 padding: 0 }

at the top of my index.css and tested removing the the "width: 390px;"

but my user info then changes for the worse.. (pic)

Title: Re: Minor modifications help!
Post by: Gwenwyfar on November 19, 2014, 04:30:19 PM
Ah, the avatar. Don't have one on the test account so it looked fine when I tested.

Keep it without the width: 390px, and change this part:

.user ul {
    margin: 0px;
    padding-left: 10px;
}

to

.user ul {
    margin: 0px;
    padding-left: 10px;
    float: left;
}
Title: Re: Minor modifications help!
Post by: 420Connect.co.uk on November 19, 2014, 04:54:35 PM
I COULD KISS YOU YOU!

(http://img3.wikia.nocookie.net/__cb20130526160440/austinally/images/f/fa/Kiss_emoticon.png)

that worked perfectly and this small but very annoying problem has been a 'problem' for about 2 months!! :D
Thank you very much for all your help (and patience / ability to understand my ramblings)


:D
Title: Re: Minor modifications help!
Post by: 420Connect.co.uk on November 19, 2014, 05:05:07 PM
I had marked this solved then spotted one more little thing I'd like to add..


<----------------- In this section that contains the members info, I'd like to display my online/offline status images below their avatar or below their username..

I thought I'd seen a MOD for this a while ago but couldn't find it again :(

Kudos in advance for any assistance!
off to bed for now!  :P



;)