How do I add space between the facebook bar & the white bar right below it? (See attached image)
Is this in the index.template.php file?
SMF 2.0.2 www.OurMomSpot.net
It will be in this file:
http://ourmomspot.net/community/Themes/moms/css/index.css?rc3
This bit:
.openid_login
{
background: white url(../images/openid.gif) no-repeat;
padding-left: 18px;
}
Maybe make it this?
.openid_login
{
background: white url(../images/openid.gif) no-repeat;
padding-left: 18px;
margin-top: 8px;
}
Also, the height of the whole thing should also be increased to adjust, so find this:
/* the upper_section, float the two each way */
#upper_section
{
overflow:visible;
padding: 5px;
height:125px;
}
And make it be this:
/* the upper_section, float the two each way */
#upper_section
{
overflow:visible;
padding: 5px;
height:142px;
}
Tweak the height of the last edit and the margin-top to your liking, too. :)
OOPS! I'll be back to edit this now that I see your menu is down some too. :)
Your index.template.php file is generating a line of code for this:
Quote<br class="clear" />
It appears right before:
<div class="navi">When I delete that element via Firebug, it makes the menu look much nicer. Maybe remove that from your file?
Perfecto!
How do i add my log in with twitter button so it's, just below the facebook log in button?
I will have to adjust the blue box more after that with the info you gave me :D
Quote from: monster mashby on October 26, 2012, 08:37:19 PM
OOPS! I'll be back to edit this now that I see your menu is down some too. :)
Yes, please help! LOL
Also... i want to add the part in green to these words:
Login with username, password and session length or log in using one of the social media options below.
Quote from: monster mashby on October 26, 2012, 08:37:19 PM
OOPS! I'll be back to edit this now that I see your menu is down some too. :)
Your index.template.php file is generating a line of code for this:
Quote<br class="clear" />
It appears right before:
<div class="navi">
When I delete that element via Firebug, it makes the menu look much nicer. Maybe remove that from your file?
But if I delete that - wont it affect something else... Check this out~> http://forums.bit-tech.net/showthread.php?t=132596
Is there any other way to adjust this?
Try removing that <br /> first to get your menu back in line. I don't think it will affect anything at all except make your site look better.
Twitter button...do you mean the one at the top right? Or another one?
The code for this:
Login with username, password and session length or log in using one of the social media options below.
is located in Themes/default/languages/index.english.php
Look for:
$txt['quick_login_dec']
Not sure where else that language string is used but by editing it, you'll likely soon find out. :)
Quote from: monster mashby on October 26, 2012, 08:47:15 PM
Try removing that <br /> first to get your menu back in line. I don't think it will affect anything at all except make your site look better.
Twitter button...do you mean the one at the top right? Or another one?
Click log in & scroll down - twitter sign in button right under facebook login button :)
Great suggestions so far thank you!
Looks to me like you could position the twitter on the same line as the one on the login page.
<a href="https://api.twitter.com/oauth/authenticate?oauth_token=c8pd6vyX4ZALYcyaU1Le1ZOHBhiqlNBW6H7p9k6Eyg"><img alt="Sign In with Twitter" src="http://si0.twimg.com/images/dev/buttons/sign-in-with-twitter-l.png" /></a>
Put that before or after the one for Facebook. Looked OK using Firebug. :)
Which file is this one again?
That would be in index.template.php. :)
Yes! See it - but exactly where should it (the code you suggested) go?
Sorry - I am only a mediocre coder at best (maybe)
Do you also happen to know where I can fix this typo?
Mind attaching that file? It might be easier in this case as all I'm seeing is the processed stuff. If you don't want to though, look for href="https://www.facebook.com/dialog...there's an image after that with a </a> after that image code. Right there might be a good place. Regarding the Click here here...what mod is that one? :)
My index file is attached.
Just asking where to place the twitter button code :)
Quote from: monster mashby on October 26, 2012, 09:04:48 PM
Mind attaching that file? It might be easier in this case as all I'm seeing is the processed stuff. If you don't want to though, look for href="https://www.facebook.com/dialog...there's an image after that with a </a> after that image code. Right there might be a good place. Regarding the Click here here...what mod is that one? :)
:) Twitter Integration Mod
Interesting attachment. I renamed it and uploaded it as index.template.php. :)
Let's see if this works before we move on to the Twitter mod. :)
Interesting attachment. I renamed it and uploaded it as index.template.php. :)
Let's see if this works before we move on to the Twitter mod. :)
Quote from: monster mashby on October 26, 2012, 09:14:02 PM
Interesting attachment. I renamed it and uploaded it as index.template.php. :)
Let's see if this works before we move on to the Twitter mod. :)
So... what do I do with this?
Do I replace my index.template.php file with it?
Yep...that should work. :)
Quote from: monster mashby on October 26, 2012, 09:17:46 PM
Yep...that should work. :)
Ok - I'll make a copy 1st though LOL!
Done! Very good help thanks
Looks OK. I would like to move the blue login block up a little...it seems to be sitting on the purple bar. How can I do that? :)
Hmm...my CSS skills aren't as good as others...I am a little confused as to the construction of it all. :)
What I'm seeing is that radius corners aren't being applied to the whole container...well, it's being applied, but we're running out of real estate for it to complete.
I think I found a combination that should work...in the CSS file,
Find:
#top_section
{
min-height: 45px;
overflow: hidden;
margin-top: 10px;
margin-bottom: 10px;
}
Replace with:
#top_section
{
min-height: 45px;
overflow: hidden;
margin-top: 10px;
}We're removing the bottom margin of 10...and then adding it here, so,
Find:
#upper_section
{
overflow:visible;
padding: 5px;
height:142px;
}
Replace with:
#upper_section
{
overflow:visible;
padding: 5px;
height:152px;
}
Not a good idea form me unfortunately... When logged in - it looks bad.
I will leave as is.
I really do appreciate your help!
Please tell me about the typo when you can :D
Mind providing a screen shot for the logged in view? Or perhaps PMing me a test user? Might help with looking at that Twitter thing too.
Quote from: monster mashby on October 26, 2012, 10:22:19 PM
Mind providing a screen shot for the logged in view? Or perhaps PMing me a test user? Might help with looking at that Twitter thing too.
Sure ...but I already changed it back :)
That's good if it looked funny when logged in. :)
Didn't even consider the implications of a logged in user.
And then it depends on the size of the avatar! If someone has a smaller avatar, it looks bad to move it up.
Which avatar should I select? I have the pink NFL football picked at the moment and tweaked the CSS via Firebug to the suggestions I made and it looked OK there. Maybe I don't have the content you have though. Besides the avatar, I have:
QuoteHello mashby
Show unread posts since last visit.
Show new replies to your posts.
October 26, 2012, 10:32:47 PM
Quote from: monster mashby on October 26, 2012, 10:35:13 PM
Which avatar should I select? I have the pink NFL football picked at the moment and tweaked the CSS via Firebug to the suggestions I made and it looked OK there. Maybe I don't have the content you have though. Besides the avatar, I have:
QuoteHello mashby
Show unread posts since last visit.
Show new replies to your posts.
October 26, 2012, 10:32:47 PM
You may try different ones... Check this out - perfect example...
Ah ok...I just used Firebug to change my avatar to yours (skateboard one). What are your settings for avatar sizes?
Admin > Forum > Attachments and Avatars > Avatar Settings
Specifically...height of external avatar and height of uploaded avatar
You can scale avs to suit the container if you want to. As an example, if you have the avatar image sitting inside a div or anchor or whatever that has id="wombats", this will work in the css:
#wombats {
max-width: 100px;
max-height: 100px;
}
#wombats img {
width: 100%;
height: 100%;
}
You might also want to set minimum dimensions for your pet wombats. Adjust to whatever works. The point is that this will preserve image proportions, while automatically scaling the image up or down to fit the insides of the wombats. :)
Quote from: monster mashby on October 26, 2012, 10:44:45 PM
Ah ok...I just used Firebug to change my avatar to yours (skateboard one). What are your settings for avatar sizes?
Admin > Forum > Attachments and Avatars > Avatar Settings
Specifically...height of external avatar and height of uploaded avatar
Hello :D
See my attachment...
Option 1: Decrease the height of the avatar to something like 135.
Option 2: Put this in the index.css file (excellent idea there, Ant! :)):
p.avatar {
max-width: 100px;
max-height: 135px;
overflow:hidden;
}
p.avatar img {
width: 100%;
height: 100%;
}
What's the exact filepath? I would like to try this :)
http://ourmomspot.net/community/Themes/moms/css/index.css?rc3