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.

How to move the picture.

View previous topic View next topic Go down

How to move the picture.

Post by Kaizer Lee on 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.



It'd be great if you can help Very Happy.

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

Re: How to move the picture.

Post by Cassius Dio on 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
Forumember

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

http://beatles.forummo.com/

Back to top Go down

Re: How to move the picture.

Post by Kaizer Lee on 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
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

Re: How to move the picture.

Post by Cassius Dio on 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
Forumember

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

http://beatles.forummo.com/

Back to top Go down

Re: How to move the picture.

Post by Kaizer Lee on 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
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

Re: How to move the picture.

Post by Cassius Dio on 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
Forumember

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

http://beatles.forummo.com/

Back to top Go down

Re: How to move the picture.

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



^ What happened for the code you gave me.



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
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

Re: How to move the picture.

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

Bump.

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

Re: How to move the picture.

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

Bump.

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

Re: How to move the picture.

Post by SLGray on 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.


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


SLGray
Administrator
Administrator

Male Posts : 36705
Reputation : 2445
Language : English
Location : United States

http://ztwds.forumotion.com/

Back to top Go down

Re: How to move the picture.

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

Bump.

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

View previous topic View next topic Back to top


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