The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.

How to move the picture.

3 posters

Go down

How to move the picture. Empty How to move the picture.

Post by Kaizer Lee August 23rd 2013, 9:59 pm

Code:
<div id="usermenu"><center><span class="fa_proxy" style="left: 0px !important;"></span></center><div id="usermenu-left">

<div id="usermenu-profile">Logged in as: <b><strong><span class="USERNAME"></strong></span></b>
<br>
Posts: <strong><span class="USERCOUNTPOST"></span></strong>
<br>
<br>
<br>
<a href="/profile?mode=editprofile">My profile</a> | <a id="myinbox" href="/privmsg?folder=inbox">New PM</a></div></div>

<div id="usermenu-right"><div style="text-align:right; margin-bottom:6px; display:block; width:100%; float:right;"><div class="jclock" style="float: right; font-weight: bold;"><b><div id="clockbox"></div></b></div><div style="float:right;"><b><div id="clockbox"></div></b></div></div><div id="usermenu-options-right"><a href="/search?search_id=activetopics">Today's active topics</a><br><a href="/memberlist?mode=today_posters">Today's Top 20 posters</a><br><a href="/memberlist?mode=overall_posters">Overall Top 20 posters</a><br><a href="/forum?mode=delete_cookies">Delete forum cookies</a></div><div id="usermenu-options-left"><a href="/search?search_id=newposts">Posts since your last visit</a><br><a href="/search?search_id=egosearch">View your posts</a><br><a href="/search?search_id=unanswered">View unanswered posts</a><br><a href="/forum?mark=forums">Mark all forums read</a></div></div></div>
Anyway, the code above is the one for the image below. I can't seem to figure out how the heck to move the one in the red box to be aligned with the Logged in as: Posts, etc.

How to move the picture. 5uIzPcJ

It'd be great if you can help Very Happy.
Kaizer Lee
Kaizer Lee
Active Poster

Female Posts : 1064
Reputation : 54
Language : English, Tagalog, Spanish and Chinese
Location : Philippines

http://www.medievalchaos.net/forum

Back to top Go down

How to move the picture. Empty Re: How to move the picture.

Post by Cassius Dio August 24th 2013, 8:01 am

Hi, bye

Can you give us a test account on your forum (without permissions to administration panel!)? Thanks!
Cassius Dio
Cassius Dio
Forumember

Male Posts : 581
Reputation : 79
Language : Romanian &English
Location : Yellow Submarine

http://beatles.forummo.com/

Back to top Go down

How to move the picture. Empty Re: How to move the picture.

Post by Kaizer Lee August 24th 2013, 8:13 am

Uh, even you do have a test account, that won't resolve anything, the problem's with the templates and I just need to move it here and there, but I can't figure out what's wrong.

I already checked the JS but it's okay, it's either the CSS or Templates atm.
Kaizer Lee
Kaizer Lee
Active Poster

Female Posts : 1064
Reputation : 54
Language : English, Tagalog, Spanish and Chinese
Location : Philippines

http://www.medievalchaos.net/forum

Back to top Go down

How to move the picture. Empty Re: How to move the picture.

Post by Cassius Dio August 24th 2013, 8:30 am

Nope, I can solve it if you'll give me a test account, I need it just to identify the avatar selectors and I'll make the CSS code you need for moving that avatar. thumleft 
Cassius Dio
Cassius Dio
Forumember

Male Posts : 581
Reputation : 79
Language : Romanian &English
Location : Yellow Submarine

http://beatles.forummo.com/

Back to top Go down

How to move the picture. Empty Re: How to move the picture.

Post by Kaizer Lee August 24th 2013, 12:04 pm

Selector for Avatar: span class="fa_proxy"

http://www.medievalchaos.net/forum If you need the website.
Kaizer Lee
Kaizer Lee
Active Poster

Female Posts : 1064
Reputation : 54
Language : English, Tagalog, Spanish and Chinese
Location : Philippines

http://www.medievalchaos.net/forum

Back to top Go down

How to move the picture. Empty Re: How to move the picture.

Post by Cassius Dio August 24th 2013, 1:25 pm

If this is the selector for avatar, go to "Administration Panel ~> Display ~> Pictures and colors ~> Colors ~> CSS Stylesheet" and add:
Code:
#fa_proxy{
position: relative;
top: 100px !important;
}

#usermenu-profile{
position: relative;
left: 15px !important;
}
Cassius Dio
Cassius Dio
Forumember

Male Posts : 581
Reputation : 79
Language : Romanian &English
Location : Yellow Submarine

http://beatles.forummo.com/

Back to top Go down

How to move the picture. Empty Re: How to move the picture.

Post by Kaizer Lee August 24th 2013, 1:59 pm

How to move the picture. CIL1hqm

^ What happened for the code you gave me.

How to move the picture. UpmB2GU

When I revised the code myself. Now the problem is how to move the one on the right -.-...

I'm pretty sure the Avatar Size has nothing to do with that one now since I experimented with different sizes adjustments in the Javascript.

Code:
#usermenu{
  width:98%;
border:1px solid #292929;
  padding: 5px;
  font-size:12px;
  margin-top:5px;
    margin-bottom:5px;
margin-left:2px;
  float:left;
}
#usermenu-left{
  width:43%;
  float:left;
}
#usermenu-img{
  float:left;
  width:85px;
}
#usermenu-profile{
  float:left;
    width:200px;
  margin-left: 2px;
  margin-top: 5px;
}
#usermenu-profile a{
  color:#006CE0;
  text-decoration:none !important;

  font-weight:bold;
  -webkit-transition:color 0.2s ease-in; 
      -moz-transition:color 0.2s linear; 
      -o-transition:color 0.2s ease-in; 
      transition:color 0.2s ease-in; 
}
#usermenu-profile a:hover{
      color:#fff; 
      text-decoration:none !important;
    } 
#usermenu-profile a:link{
 
      text-decoration:none !important;
    } 
#usermenu-profile a:visited{
 
      text-decoration:none !important;
    }
#usermenu-profile a:active{
 
      text-decoration:none !important;
    }

#usermenu-right{
  float:right;
  width:57%;
}
#usermenu-right a{
color:#006CE0;
  text-decoration:none !important;

  font-weight:bold;
  -webkit-transition:color 0.2s ease-in; 
      -moz-transition:color 0.2s linear; 
      -o-transition:color 0.2s ease-in; 
      transition:color 0.2s ease-in; 
}
#usermenu-right a:hover{
      color:#fff; 
      text-decoration:none !important;
    } 
#usermenu-right a:link{
 
      text-decoration:none !important;
    } 
#usermenu-right a:visited{
 
      text-decoration:none !important;
    }
#usermenu-right a:active{
 
      text-decoration:none !important;
    }
#usermenu-options-left{
  float:right;
  padding:2px;
    margin-left:10px;
}
#usermenu-options-right{
  float:right;
  padding:2px;
  margin-left:10px;
}

#fa_proxy {
  float: left;
  padding: 2px;
  margin-right: 10px;
}
^ The CSS that made the 2nd picture.

Code:
<center><span class="fa_proxy" style="left: 0px !important;"></span></center>

<div id="usermenu"><div id="usermenu-left">

<div id="usermenu-profile">Logged in as: <b><strong><span class="USERNAME"></strong></span></b>
<br>
Posts: <strong><span class="USERCOUNTPOST"></span></strong>
<br>
<br>
<br>
<a href="/profile?mode=editprofile">My profile</a> | <a id="myinbox" href="/privmsg?folder=inbox">New PM</a></div></div>

<div id="usermenu-right"><div style="text-align:right; margin-bottom:6px; display:block; width:100%; float:right;"><div class="jclock" style="float: right; font-weight: bold;"><b><div id="clockbox"></div></b></div><div style="float:right;"><b><div id="clockbox"></div></b></div></div><div id="usermenu-options-right"><a href="/search?search_id=activetopics">Today's active topics</a><br><a href="/memberlist?mode=today_posters">Today's Top 20 posters</a><br><a href="/memberlist?mode=overall_posters">Overall Top 20 posters</a><br><a href="/forum?mode=delete_cookies">Delete forum cookies</a></div><div id="usermenu-options-left"><a href="/search?search_id=newposts">Posts since your last visit</a><br><a href="/search?search_id=egosearch">View your posts</a><br><a href="/search?search_id=unanswered">View unanswered posts</a><br><a href="/forum?mark=forums">Mark all forums read</a></div></div></div>
^ Current Template settings for the 2nd picture in the index_body.

Anyone have an idea how to move the one on the right now? I'm going bonkers over it.
Kaizer Lee
Kaizer Lee
Active Poster

Female Posts : 1064
Reputation : 54
Language : English, Tagalog, Spanish and Chinese
Location : Philippines

http://www.medievalchaos.net/forum

Back to top Go down

How to move the picture. Empty Re: How to move the picture.

Post by Kaizer Lee August 25th 2013, 4:26 pm

Bump.
Kaizer Lee
Kaizer Lee
Active Poster

Female Posts : 1064
Reputation : 54
Language : English, Tagalog, Spanish and Chinese
Location : Philippines

http://www.medievalchaos.net/forum

Back to top Go down

How to move the picture. Empty Re: How to move the picture.

Post by Kaizer Lee August 26th 2013, 9:05 am

Bump.
Kaizer Lee
Kaizer Lee
Active Poster

Female Posts : 1064
Reputation : 54
Language : English, Tagalog, Spanish and Chinese
Location : Philippines

http://www.medievalchaos.net/forum

Back to top Go down

How to move the picture. Empty Re: How to move the picture.

Post by SLGray August 26th 2013, 6:30 pm

Yesterday at 9:26 am
Today at 2:05 am

Please don't double/triple post. Your post need to be separated by 24 hours before bumping, replying or adding more information. Please use the edit button instead!

You have received a warning since this is your third reminder.


How to move the picture. Slgray10

When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.
SLGray
SLGray
Administrator
Administrator

Male Posts : 51463
Reputation : 3519
Language : English
Location : United States

https://forumsclub.com/gc/128-link-directory/

Back to top Go down

How to move the picture. Empty Re: How to move the picture.

Post by Kaizer Lee August 27th 2013, 3:14 pm

Bump.
Kaizer Lee
Kaizer Lee
Active Poster

Female Posts : 1064
Reputation : 54
Language : English, Tagalog, Spanish and Chinese
Location : Philippines

http://www.medievalchaos.net/forum

Back to top Go down

Back to top


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