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.

Help creating a stylish Login and a theme selection.

View previous topic View next topic Go down

Solved Help creating a stylish Login and a theme selection.

Post by Cell Tennyson on January 24th 2014, 10:13 am

Hello there Friends! Very Happy

i need to know about few things which i want to add in my forums. So How do i create a Theme selection option in the Code box which will change the color of of the background or text inside code? Like below


Also how do i add images in the Username and password text fields?? like in the Picture below.


Please tell. Smile

Thanks in advance.. Very Happy

Cell Tennyson
Forumember

Male Posts : 102
Reputation : 1
Language : English

http://gtamr.forumotion.net/

Back to top Go down

Solved Re: Help creating a stylish Login and a theme selection.

Post by Ange Tuteur on January 24th 2014, 6:57 pm

Hello Cell Tennyson,

For your first question, I'm not sure.

For your second question add this to your CSS :
Administration Panel > Display > Pictures and colors > Colors > CSS stylesheet
Code:
#username {
background-image:url(http://illiweb.com/fa/optimisation_fdf/fr/bg_posttitle.png);
background-repeat:no-repeat;
}
#password {
background-image:url(http://illiweb.com/fa/optimisation_fdf/fr/bg_posttitle.png);
background-repeat:no-repeat;
}

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2683
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Help creating a stylish Login and a theme selection.

Post by Cell Tennyson on January 25th 2014, 6:28 am

Thanks Mr Ange Tuteur but is there something you could not understand about the first one?

well thats in one of my friends forums. It is sort of a code theme changer, it has a rollout with themes when selecting a theme the color of code will change it's alphabets and all. how to make something like that.

Cell Tennyson
Forumember

Male Posts : 102
Reputation : 1
Language : English

http://gtamr.forumotion.net/

Back to top Go down

Solved Re: Help creating a stylish Login and a theme selection.

Post by Ange Tuteur on January 25th 2014, 6:32 am

I would not know the exact code used, have you tried asking your friend for it ?

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2683
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Help creating a stylish Login and a theme selection.

Post by Cell Tennyson on January 25th 2014, 7:10 am

Ok but that friend won't tell me that coding. He'll make excuses that it will be difficult to make. You tell me that why there is no space after the picture. The text is getting entered on the picture.

Cell Tennyson
Forumember

Male Posts : 102
Reputation : 1
Language : English

http://gtamr.forumotion.net/

Back to top Go down

Solved Re: Help creating a stylish Login and a theme selection.

Post by Ange Tuteur on January 25th 2014, 7:21 am

Oops I forgot, you need to add padding to the left so the text doesn't go on the image. If you use a larger image, try increasing the left padding. (the 20px)

Code:
#username {
padding-left:20px;
background-image:url(http://illiweb.com/fa/optimisation_fdf/fr/bg_posttitle.png);
background-repeat:no-repeat;
}
#password {
padding-left:20px;
background-image:url(http://illiweb.com/fa/optimisation_fdf/fr/bg_posttitle.png);
background-repeat:no-repeat;
}

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2683
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Help creating a stylish Login and a theme selection.

Post by Cell Tennyson on January 25th 2014, 11:13 am

Thanks Mr Ange Tuteur. Smile

But i also want that the background color inside the username & password box be white and the text that will be entered inside it be black (just like the picture above) and i want to do it through Css will that be possible??

Cell Tennyson
Forumember

Male Posts : 102
Reputation : 1
Language : English

http://gtamr.forumotion.net/

Back to top Go down

Solved Re: Help creating a stylish Login and a theme selection.

Post by Ange Tuteur on January 25th 2014, 9:23 pm

Of course, we can set the properties for both the username and password fields using the following CSS.
Code:
#username, #password {
color:#000;
background-color:#fff;
border:1px solid #000;
}

If you want to add additional styles, have a look at this reference of properties you can use :
http://www.w3schools.com/cssref/default.asp

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2683
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Help creating a stylish Login and a theme selection.

Post by Cell Tennyson on January 26th 2014, 8:23 am

Thanks again Mr Ange Tuteur but there is one more problem and this is last one then this topic can be declared solved. The problem is that the images are not coming in the username and password boxes in the homepage login. See the picture below how to correct that??


Cell Tennyson
Forumember

Male Posts : 102
Reputation : 1
Language : English

http://gtamr.forumotion.net/

Back to top Go down

Solved Re: Help creating a stylish Login and a theme selection.

Post by Ange Tuteur on January 26th 2014, 11:42 pm

It's because they do not have the id attribute. You'll have to use this CSS for it :
Code:
.user_login_form label input {
color:#000;
background-color:#fff;
border:1px solid #000;
}
/* username */
.user_login_form label input {
padding-left:20px;
background-image:url(http://i58.servimg.com/u/f58/18/02/89/19/log111.png);
background-repeat:no-repeat;
background-position:left;
}
/* password */
.user_login_form label + label input {
padding-left:20px;
background-image:url(http://i58.servimg.com/u/f58/18/02/89/19/log1210.png);
background-repeat:no-repeat;
background-position:left;
}

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2683
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Help creating a stylish Login and a theme selection.

Post by Kite Trojan on January 26th 2014, 11:47 pm

For the Log in, I used this code:
Code:
        .user_login_form input[type="password"], .user_login_form input[type="text"] {
            border: 1px solid #DDD;
            padding: 5px;
            border-radius: 0px!important;
            cursor: text;
            top: 0px;
            }
            .user_login_form input[type="text"] {
            background: url(http://i.imgur.com/rzOu1.png)no-repeat;
            padding-left: 20px;
            }
            .user_login_form input[type="password"] {
            background: white url(http://i.imgur.com/dlS8w.png)no-repeat;
            padding-left: 20px;
            }
            #username {
            border: 1px solid #DDD;
            padding: 5px;
            border-radius: 0px!important;
            cursor: text;
            top: 0px;
            padding-left: 20px;
            background: white url(http://i.imgur.com/rzOu1.png)no-repeat;
            }
            #password {
            border: 1px solid #DDD;
            padding: 5px;
            border-radius: 0px!important;
            cursor: text;
            top: 0px;
            background: white url(http://i.imgur.com/dlS8w.png)no-repeat;
            padding-left: 20px;
            }

Kite Trojan
Forumember

Male Posts : 823
Reputation : 19
Language : English

http://galacticda.forumotion.com/

Back to top Go down

Solved Re: Help creating a stylish Login and a theme selection.

Post by Cell Tennyson on January 27th 2014, 7:36 am

Thanks you all..

Tell me how to learn CSS coding?

Now this topic can be locked.

Cell Tennyson
Forumember

Male Posts : 102
Reputation : 1
Language : English

http://gtamr.forumotion.net/

Back to top Go down

Solved Re: Help creating a stylish Login and a theme selection.

Post by Luffy on January 27th 2014, 7:46 am

@Cell Tennyson wrote:Thanks you all..

Tell me how to learn CSS coding?

Now this topic can be locked.

You can search the internet for learning css. But begin from the beginning so you understand it completely!

Luffy
Manager
Manager

Male Posts : 4035
Reputation : 407
Language : Greek, English
Location : Greece

http://www.thinktankforum.net

Back to top Go down

Solved Re: Help creating a stylish Login and a theme selection.

Post by Ange Tuteur on January 27th 2014, 8:47 am

@Cell Tennyson wrote:Thanks you all..

Tell me how to learn CSS coding?

Now this topic can be locked.
I would recommend starting here : http://www.w3schools.com/css/

Topic solved and archived.

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2683
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