The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Quick login box

View previous topic View next topic Go down

Solved Quick login box

Post by Apex on September 11th 2014, 11:32 am

My forum link:
http://thedivine.forumotion.com

Alright so as you can see in the following screencap:
http://i.imgur.com/FmRB9nQ.png

My password box has a shadow to it where my username box does not. Also, both boxes are slightly lower than the actual words rather than lined up with them. I am wondering two things...

1.) How can I add a shadow to my username box or at least delete the shadow from my password box?

2.) How can I align both boxes so that they are even with the words Username: and Password:

Here is my CSS if needed:
.sceditor-container { border:1px solid #171717 !important }
.sceditor-container .sceditor-toolbar { border-bottom:1px solid #171717 !important }
.post {
margin-bottom: 0px;
}
.postprofile {
border-right: solid 0px #171717;
}
.postprofile dt img {
max-height: 150px !important;
max-width: 135px !important;
}
body#phpbb {
font: 10px tahoma,helvetica,arial,sans-serif;
background: #363636 url(http://i.imgur.com/yttSH.jpg) repeat;
color: #c2c2c2;
padding: 0px;}
.conteneur_minwidth_IE {
background: url(http://fc08.deviantart.net/fs71/f/2014/204/2/5/edit_by_impactonyou-d7s12dm.png) no-repeat center 0;
}
.conteneur_layout_IE {
background: url(http://i.imgur.com/qPIe8.png) repeat-x 0 top;
}
.conteneur_container_IE {
background: url(http://i.imgur.com/zDoNS.png) repeat-x 0 bottom;
}
#wrap {
padding: 0;
margin: auto;
width: 990px;
}
#site-title h1 {display: none;}
#site-title, #site-title h1{display: none;}
#logo-desc p {display: none;}

img[src="http://illiweb.com/fa/empty.gif"] {
display: none;}
img[src="http://illiweb.com/fa/m/icon_mini_faq1.gif"] {
display: none;}
img[src="FAQ IMAGE LINK"] {
display: none;}
a[href="/faq"] { display: none; position: absolute;}
a img [href="/faq"] { display: none; position: absolute;}

#page-body {
margin: auto;
width: auto;
background: none repeat scroll 0 0 rgba(0, 0, 0, 0.4);
box-shadow: 0 1px 8px rgba(0, 0, 0, 0.9) inset, 0 2px 8px rgba(255, 255, 255, 0.1);
line-height: 120%;
padding: 10px 15px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
overflow: hidden;
}

#page-header .navbar {
margin: 5px 0 15px;
text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.Cool;
background: url(http://i.imgur.com/BLynG.png) repeat-x top;
border-color: #111;
border-radius: 5px 5px 5px 5px;
border-style: solid;
border-width: 1px;
line-height: 34px;
padding: 2px 5px 5px 5px;
text-shadow: 0 1px 0 #000;
box-shadow: 0 2px 6px #222;
-webkit-box-shadow: 0 2px 6px #222;
-moz-box-shadow: 0 2px 6px #222;
}
ul.navlinks li a {
padding: 7px 7px 8px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
font: 13px tahoma,helvetica,arial,sans-serif;
}
ul.navlinks li a:hover {
color: #103bb7;
box-shadow: 0 1px 0 rgba(255,255,255, 0.1), inset 0 5px 10px rgba(0,0,0, 0.3);
-webkit-box-shadow: 0 1px 0 rgba(255,255,255, 0.1), inset 0 5px 10px rgba(0,0,0, 0.3);
-moz-box-shadow: 0 1px 0 rgba(255,255,255, 0.1), inset 0 5px 10px rgba(0,0,0, 0.3);
position: relative;
background: rgba(0,0,0, 0.1);
}
#fa_ticker_block .module , .module{
background: #353535;
box-shadow: 0 5px 10px #111;
-webkit-box-shadow: 0 5px 10px #111;
-moz-box-shadow: 0 5px 10px #111;
margin-bottom: 20px;
padding: 0px 10px 10px 10px;
border: 1px solid black;
}
.module span.corners-top {
height: 29px;
background: url(http://i.imgur.com/kVSS8.png) repeat-x top;
border-bottom: 1px solid #111;
}
.panel {
border: 1px solid black;
background: #272727 url(http://i.imgur.com/dnkF9.png) repeat-x 0 0 !important;
padding: 10px;
}
.forabg , .forumbg{
padding: 0;
border-color: #111;
border-style: solid;
border-width: 1px;
background: url(http://i.imgur.com/qP5wM.png) repeat-x top;
color: white;
-webkit-border-radius: 3px 3px 0 0;
-moz-border-radius: 3px 3px 0 0;
border-radius: 3px 3px 0 0;
box-shadow: 0 5px 10px #111;
-webkit-box-shadow: 0 5px 10px #111;
-moz-box-shadow: 0 5px 10px #111;
}
module span.corners-top {
height: 29px;
background: url(http://codegame.net/public/style_images/cgn/user_navigation.png) repeat-x top;
border-bottom: 1px solid #111;
}

ul.forums li.row dl { min-height: 50px; }

span.corners-bottom {display:none;}
.header {
margin-top: 1px!important;
padding-bottom: 2px!important;
border-bottom: 1px solid #111;
padding-left: 4px;
}
ul.topiclist.forums , ul.topiclist.bg_none{
background: #272727 url(http://i.imgur.com/dnkF9.png) repeat-x 0 0 !important;
}
#profile-advanced-layout {
background: #272727 url(http://i.imgur.com/yttSH.jpg) repeat 0 0!important;
}
.post {
box-shadow: 0 5px 10px #111;
-webkit-box-shadow: 0 5px 10px #111;
-moz-box-shadow: 0 5px 10px #111;
background: #272727 url(http://i.imgur.com/dnkF9.png) repeat-x 0 0 !important;
border: 1px solid #111 !important;
}
.post span.corners-top {
border-top: 1px solid #111;
border-bottom: 1px solid #111;
background: url(http://i.imgur.com/kVSS8.png) repeat-x 0 top;
padding: 0 10px;
height: 36px;
line-height: 36px;
}

#search-box {
display:none;
}
#search-box #keywords {
width: 130px;
background: transparent;
color: #6C6C6D;margin-left: 15px;
font-family: Verdana;margin-top:5px;
font-style: normal;
font-size: 12px;}

#search-box input {
border: none !important;
background: none;}

#search-box input.search {
background: none;
margin-left: 0px;
margin-top: 0;}

#search-box input.button2 {visibility: hidden;
}

#search_menu {
background: #ffffff;
font-size: 11px !important;
position: relative;
width: 350px;
top: 160px!important;
left: 200px!important;
}
#search_menu .title-overview {
background: url(http://i.imgur.com/kVSS8.png) repeat-x top;
border-bottom: 1px solid #111;
}
#search_menu a{color:#000!important;}
#plus_menu .title-overview {
background: url(http://i.imgur.com/kVSS8.png) repeat-x top;
border-bottom: 1px solid #111;
}
/*------------------------------------------------*/
/*-------------[Borrar el subrayado de los enlaces]------------*/
/*------------------------------------------------*/
a {text-decoration: none;}
a:link {text-decoration: none;}
a:hover {text-decoration: none!important;}
a.forumtitle {text-decoration: none;}
a.forumtitle:hover {text-decoration: none!important;}
a.topictitle {text-decoration: none;}
a.topictitle:hover {text-decoration: none!important;}
#main-content a.cgu-buttons:hover, button.button2:hover, input.button1:hover, input.button2:hover {
border: 1px solid rgb(0, 0, 0);
}
#main-content a.cgu-buttons, button.button2, input.button1, input.button2 {
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
padding: 3px;
background: url(http://i.imgur.com/kVSS8.png) repeat-x top;
border: 1px solid #111;
cursor: pointer;
color: #c2c2c2;
}
.postbody .content {
font-size: 11px;
color: #c2c2c2;
#ipbwrapper {
font-size: 10px !important;
}
}
.postprofile {
width: 18%;
text-align: left;
}
.user_login_form input[type="text"], .user_login_form input[type="password"]{
position:relative;
top:7px;
}
.postbody .topic-title {
font-size: 10px;}
.postbody {
width: 80%;
}
fieldset.fields1 div {
margin: 0px;
}
input[type="text"], textarea {
background: rgb(51, 51, 51) url("http://i.imgur.com/yttSH.jpg")!important;
border: 1px solid rgb(17, 17, 17)!important;
color: #c1c1c1!important;
box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
}
blockquote {
background: rgb(43, 43, 43);
padding: 5px;
border: 1px solid rgb(15, 15, 15);
border-radius: 4px;
}
.codebox dd {
padding: 0px 5px;
}
dl.codebox dt, .codebox dt {
background: url(http://i.imgur.com/kVSS8.png) repeat-x top;
border-bottom: 1px solid #111;
padding: 4px;
}
dl.codebox, .codebox {
background: rgb(41, 41, 41);
border: 1px solid rgb(10, 10, 10);
}
blockquote blockquote {
border: 1px solid rgb(2, 2, 2);
background: rgb(31, 31, 31);
}
.vote .vote-bar {
border: 1px solid rgb(0, 0, 0);
}
.module .box-content .mod-login-avatar dt img {
height: 100px;
width: 100px;
border: 1px solid rgb(66, 66, 66);
box-shadow: 0px 0px 0px rgb(0, 0, 0);


Last edited by Apex on September 11th 2014, 4:07 pm; edited 1 time in total

Apex
Forumember

Posts : 76
Reputation : 1
Language : English

Back to top Go down

Solved Re: Quick login box

Post by Luffy on September 11th 2014, 11:51 am

Hello

Search for this:
Code:
.user_login_form input[type="text"], .user_login_form input[type="password"] {
position: relative;
top: 7px;
}
and replace it with this:
Code:
.user_login_form input[type="text"], .user_login_form input[type="password"] {
position: relative;
top: 0px;
}






Luffy
Manager
Manager

Male Posts : 4245
Reputation : 424
Language : Greek, English
Location : Greece

http://helpgr.forumgreek.com/forum

Back to top Go down

Solved Re: Quick login box

Post by Apex on September 11th 2014, 12:19 pm

That code is found nowhere in my CSS or in any of my templates.

Apex
Forumember

Posts : 76
Reputation : 1
Language : English

Back to top Go down

Solved Re: Quick login box

Post by Luffy on September 11th 2014, 12:35 pm

Ok then add it in the CSS Stylesheet!
Code:
.user_login_form input[type="text"], .user_login_form input[type="password"] {
position: relative;
text-shadow: 0px 0px 5px #ddd;
top: 0px;
}
As for the shadow for the text you asked i edited the code.






Luffy
Manager
Manager

Male Posts : 4245
Reputation : 424
Language : Greek, English
Location : Greece

http://helpgr.forumgreek.com/forum

Back to top Go down

Solved Re: Quick login box

Post by Apex on September 11th 2014, 1:03 pm

Alright so this has done nothing except add a glow to the text within the boxes when you fill them out. You misunderstand what I am talking about, I guess.

Look CAREFULLY at this screenshot:


The password form fill box has a shadow to it, where the username form fill box does not. I would like to either find a way to add a shadow to the Username box, or remove it from the Password box. Also, the position of the form boxes have not moved at all from your code. I would like for them to be lined up with both 'Username:' and 'Password:'

Apex
Forumember

Posts : 76
Reputation : 1
Language : English

Back to top Go down

Solved Re: Quick login box

Post by Ange Tuteur on September 11th 2014, 1:51 pm

Hello Apex,

1. ) Choose one of these rules :

Remove the box shadow :
Code:
.user_login_form.center input.post { box-shadow:none !important }

Add box shadow :
Code:
.user_login_form.center input.post { box-shadow:0 0 3px rgba(0,0,0, 0.5) !important }

2. ) You mean display them on multiple lines ? You can do that if you display them as block level elements :
Code:
.user_login_form.center label { display:block }

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Quick login box

Post by Apex on September 11th 2014, 2:02 pm

Alright so the shadow code fixed what I was talking about except it turned the inside of the box a yellow-ish color, which I definitely do not want.

As for the block code, no, it was not what I was meaning but I like the way it came out anyway so thanks.

What I'm meaning is, see how each box is sort of lower than the words to the left of them? I would like for them to be aligned evenly with the words to the left. If you take a look they are slightly lower than the words beside them. I am looking for a way for the form fill boxes to line up perfectly with the words to the left of them, if that is possible.

ALSO, the words that are beside each form fill box to the left, Username and Password, I am wondering if I can increase the text size?

Apex
Forumember

Posts : 76
Reputation : 1
Language : English

Back to top Go down

Solved Re: Quick login box

Post by Ange Tuteur on September 11th 2014, 2:06 pm

Oooh, the position is being manipulated a bit. Try this :
Code:
.user_login_form input[type="text"], .user_login_form input[type="password"] { position:static }

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Quick login box

Post by Apex on September 11th 2014, 2:15 pm

Didn't seem to work :/

Apex
Forumember

Posts : 76
Reputation : 1
Language : English

Back to top Go down

Solved Re: Quick login box

Post by Ange Tuteur on September 11th 2014, 2:35 pm

Try making it important :
Code:
.user_login_form input[type="text"], .user_login_form input[type="password"] { position:static !important }

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Quick login box

Post by Apex on September 11th 2014, 2:51 pm

It worked! Now one last thing, it changed form fill box color to a yellow-ish color. How can I change that?

Apex
Forumember

Posts : 76
Reputation : 1
Language : English

Back to top Go down

Solved Re: Quick login box

Post by Ange Tuteur on September 11th 2014, 3:01 pm

Just so we're clear, where is this yellow ? Are you talking about how the password field is a lighter color than the username field ?

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Quick login box

Post by Apex on September 11th 2014, 3:05 pm

No both the username and password field boxes have changed to a very light yellow-ish color on the inside. I am asking how to change this to a color that I would like

Apex
Forumember

Posts : 76
Reputation : 1
Language : English

Back to top Go down

Solved Re: Quick login box

Post by Ange Tuteur on September 11th 2014, 3:09 pm

Weird, try adjusting the background color with this rule :
Code:
.user_login_form input.post { background:#333 !important }

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Quick login box

Post by Apex on September 11th 2014, 3:14 pm

It definitely is weird. I just tried that code, when I refresh the page I can quickly see the background color that I have changed it to and then the same yellow-ish color takes over.

Apex
Forumember

Posts : 76
Reputation : 1
Language : English

Back to top Go down

Solved Re: Quick login box

Post by Ange Tuteur on September 11th 2014, 3:19 pm

Try clearing your browser cache to see if that's the problem.

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Quick login box

Post by Apex on September 11th 2014, 3:23 pm

Nope not the problem. It happened when I added this code
Code:
.user_login_form.center input.post { box-shadow:0 0 3px rgba(0,0,0, 0.5) !important }

Apex
Forumember

Posts : 76
Reputation : 1
Language : English

Back to top Go down

Solved Re: Quick login box

Post by Ange Tuteur on September 11th 2014, 3:24 pm

Does it go away when you remove it ?

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Quick login box

Post by Apex on September 11th 2014, 3:35 pm

Nope. It stays there but brings back my original issue where the password box had a shadow behind it and the username did not.

It's not the biggest of deals if I can't fix this

Apex
Forumember

Posts : 76
Reputation : 1
Language : English

Back to top Go down

Solved Re: Quick login box

Post by Ange Tuteur on September 11th 2014, 3:45 pm

That's weird this is how it looks to me :


Did you try removing the box shadow instead ?
Code:
.user_login_form.center input.post { box-shadow:none !important }

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Quick login box

Post by Apex on September 11th 2014, 3:53 pm

Just tried it, still the same. If that's how it looks for you than I'm sure that's how it looks for everyone else on my forum. Oh well, no worries. I was going to make another topic regarding this but I figured it would be a waste, so could you possibly answer this question for me? Then we can mark this topic as solved.

Is there any way to have a theme selector other than using hitskin.com links?

Apex
Forumember

Posts : 76
Reputation : 1
Language : English

Back to top Go down

Solved Re: Quick login box

Post by Ange Tuteur on September 11th 2014, 3:59 pm

If you have external CSS files you can use those instead. Just have to tweak the script I wrote to work with them. The theme selector currently only works with hitskin themes as it loads the theme directly from your forum.

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Quick login box

Post by Apex on September 11th 2014, 4:06 pm

Hmm alright don't really understand what you mean by using external CSS files, but oh well. Thanks again for all your help.

Apex
Forumember

Posts : 76
Reputation : 1
Language : English

Back to top Go down

Solved Re: Quick login box

Post by Ange Tuteur on September 11th 2014, 4:10 pm

You're welcome ^^

here this should explain : http://www.w3schools.com/css/css_howto.asp

Topic archived

Have a nice day. Smile

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum