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.

CSS Related: Logo Position, Avatar Position and Borders, Username Position questions

View previous topic View next topic Go down

Solved CSS Related: Logo Position, Avatar Position and Borders, Username Position questions

Post by Shiroforum on March 15th 2014, 5:41 pm

Hello, sorry to bother you guys once more.

1) Why isn't my logo centered, since I have the center option turned on.

2) If someone could please check a post, because I would like to know how can I center only the Username (Red Thing) and Avatar.

3) Is it possible to add like a fade, little blur around the avatar. Something that will apply to each Avatar (around the picture's borders)?

4) If 3 is not possible, then is there a way to add a Border around the Avatar (Picture) that will make the picture's corners rounded a give it a nice line around it?

5) How can I center only the Avatars.

6) Is there a CSS code or something that will allow users to enter Forum (threads etc) by just clicking everywhere on the box?

7) Is there a way of inserting something like a EXP Bar but based on Post Counts? And when it meets the requirements it will grant a title (Level in this case, I use titles as levels).

http://swordartonline.forumcreativ.com/t4-welcome-to-sword-art-online


Last edited by Shiroforum on March 17th 2014, 9:12 pm; edited 1 time in total

Shiroforum
Forumember

Posts : 28
Reputation : 1
Language : English

Back to top Go down

Solved Re: CSS Related: Logo Position, Avatar Position and Borders, Username Position questions

Post by Pizza Boi on March 15th 2014, 6:03 pm

Hi Very Happy

1) Why isn't my logo centered, since I have the center option turned on.

It is centered for me Smile. Though if it insecures you, try this code:

Code:
#pun-logo {
left: #px !important;
}

You can adjust the #px into the number to adjust it to center. Try 200px first and if it doesn't move, add this in the CSS code: position: absolute;

Edit: Here's the right solution:

Code:
#pun-logo {
position: relative;
top: 0px;
left: -20px;
}

2) If someone could please check a post, because I would like to know how can I center only the Username (Red Thing) and Avatar.

Try this:

Code:
.username {
text-align: center !important;
}

If text-align doesn't work, try align and if it doesn't, please adjust it in your template Smile.

Edit: Do 70px. It fixed the problem for me. And it's actually: left: 70px !important; and not text-align: center !important;

3) Is it possible to add like a fade, little blur around the avatar. Something that will apply to each Avatar (around the picture's borders)?

I know how to do it but I do not know the selectors to be used x_x...

4) If 3 is not possible, then is there a way to add a Border around the Avatar (Picture) that will make the picture's corners rounded a give it a nice line around it?

Same applies, I do not know the selectors since I use phpBB2 more.

5) How can I center only the Avatars.

If you can find out the selectors for the avatar, you can add a align: center in it.

6) Is there a CSS code or something that will allow users to enter Forum (threads etc) by just clicking everywhere on the box?

Please explain this one further.

7) Is there a way of inserting something like a EXP Bar but based on Post Counts? And when it meets the requirements it will grant a title (Level in this case, I use titles as levels).

Yes, ACP < Modules < Points System < Modify it < Save

Regards,
Pizza Boi


Last edited by Pizza Boi on March 15th 2014, 6:16 pm; edited 1 time in total

Pizza Boi
Hyperactive

Male Posts : 2016
Reputation : 160
Language : French
Location : Pizza Hut!

http://redlustempire.forumtl.com/

Back to top Go down

Solved Re: CSS Related: Logo Position, Avatar Position and Borders, Username Position questions

Post by Ange Tuteur on March 15th 2014, 6:09 pm

Hello Shiroforum,

Your logo may not appear centered because it is a large size; it will overflow. You could try adjusting its size with this :
Code:
#pun-logo img { width:100%; }

Add this CSS to center the name/ava :
Code:
.pun .user-ident .username {
  text-align:center;
  position:relative;
  top:-20px;
  margin-bottom:-15px;
}
.pun .user-ident .user-basic-info { text-align:center; }

All codes should go :
Administration panel > display > colors > css stylesheet

Ange Tuteur
Forumaster

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

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: CSS Related: Logo Position, Avatar Position and Borders, Username Position questions

Post by Pizza Boi on March 15th 2014, 6:20 pm

Hi Very Happy

Sorry, Ange's right, I derped at #1 and #2 and when I posted the edits, he posted the answers.

Anyway, #3 is possible, I checked and here's an example of what you can do with it:

Code:
.pun fieldset, .pun img {
box-shadow: aquamarine 1px 1px 1px 1px;
}

Regards,
Pizza Boi

Pizza Boi
Hyperactive

Male Posts : 2016
Reputation : 160
Language : French
Location : Pizza Hut!

http://redlustempire.forumtl.com/

Back to top Go down

Solved Re: CSS Related: Logo Position, Avatar Position and Borders, Username Position questions

Post by Ange Tuteur on March 15th 2014, 6:28 pm

You should try to make your selection more exact. What you wrote above will give every image in the wrapper a box shadow.

It can look something like :

We select the first image inside the user profil
Code:
.pun .user-ident .user-basic-info img:first-child { box-shadow:0 0 6px #f00; }

or this :

Without first child we could select images that are inside an anchor since avatars are usually linked to the user page.
Code:
.pun .user-ident .user-basic-info a img { box-shadow:0 0 6px #f00; }

Ange Tuteur
Forumaster

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

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: CSS Related: Logo Position, Avatar Position and Borders, Username Position questions

Post by Shiroforum on March 15th 2014, 6:49 pm

1) The thing about the banner is that I wanted to make something similar to this onehttp://www.fairytailrp.com/

6) Is there a CSS code or something that will allow users to enter Forum (threads etc) by just clicking everywhere on the box?http://fairytail-roleplay.boards.net/--- You can click anywhere (almost) on the "Forum" section in order to access it.


4') What code do I need to add to this, in order to make the shadow Overlay the picture.
Code:
.pun .user-ident .user-basic-info a img { box-shadow:0 0 6px #000000; }

4'') Also, if I want to make it's borders something like thishttps://i71.servimg.com/u/f71/13/07/69/12/1210.png

Also, thank you guys a lot.

Shiroforum
Forumember

Posts : 28
Reputation : 1
Language : English

Back to top Go down

Solved Re: CSS Related: Logo Position, Avatar Position and Borders, Username Position questions

Post by Shiroforum on March 16th 2014, 12:21 am

Ups, a new problem arose.

8.) I've added a new background, and the chat looks a bit weird since the background is lighter. Can I force a color on the chat's background to be on, all the time? (Not just when I type)


.
9) Also, there's the a box on the Username. Can I get rid of it? (It might be because of this CSS.

Code:
.user {
background-image:url('http://fc01.deviantart.net/fs70/f/2014/074/2/b/avatartemplate_by_kyoxcore-d7aawp5.png');
border: 2px solid #ffffff;}

Shiroforum
Forumember

Posts : 28
Reputation : 1
Language : English

Back to top Go down

Solved Re: CSS Related: Logo Position, Avatar Position and Borders, Username Position questions

Post by Pizza Boi on March 16th 2014, 4:51 pm

Hi Very Happy

I will post my answer within the quotes. Marked it red too.

@Shiroforum wrote:1) The thing about the banner is that I wanted to make something similar to this onehttp://www.fairytailrp.com/

Please know that the banner they used is definitely bigger than yours so create one as big as the the whole forum width. Check your forum width via ACP < General < Configuration < Forum Width.

6) Is there a CSS code or something that will allow users to enter Forum (threads etc) by just clicking everywhere on the box?http://fairytail-roleplay.boards.net/--- You can click anywhere (almost) on the "Forum" section in order to access it.


Hi, they used <a href="" /> tags for that and what you're doing is similar when you used the [url=] thing. Anyway, if you wish to put that in an area, simply create a new widget and enter this code:


Code:
<a href="URL Link"><img src="IMG Link" /></a>

^ If you wish to add more, expand it to just this and with a line break if you wish:

Code:
<a href="URL Link"><img src="IMG Link" /></a><a href="URL Link"><img src="IMG Link" /></a><br />Add as many as you want.

They also used the <marquee> code and you can just input [scroll.][/scroll] in it.

4') What code do I need to add to this, in order to make the shadow Overlay the picture.
Code:
.pun .user-ident .user-basic-info a img { box-shadow:0 0 6px #000000; }

Well... there is no box-shadow-z-index so you can make a somewhat glow image and add this in:

Code:
background-img:url(IMG Link)
z-index: 999;

^ You can try that and if it doesn't work, Ange knows the answer since I'm a newbie in comparison with him, lol.

4'') Also, if I want to make it's borders something like thishttps://i71.servimg.com/u/f71/13/07/69/12/1210.png

Technically, the one you got is an image with borders, but it's possible with:

Code:
.pun .user-ident .user-basic-info a img {
box-shadow:0 0 6px #000000;
border: Color;
border-radius: 1px 1px 1px 1px;
}

Also, thank you guys a lot.

@Shiroforum wrote:Ups, a new problem arose.

8.) I've added a new background, and the chat looks a bit weird since the background is lighter. Can I force a color on the chat's background to be on, all the time? (Not just when I type)



I don't know this one since I do not use punBB but I do know it is possible.
.
9) Also, there's the a box on the Username. Can I get rid of it? (It might be because of this CSS.

Code:
.user {
background-image:url('http://fc01.deviantart.net/fs70/f/2014/074/2/b/avatartemplate_by_kyoxcore-d7aawp5.png');
border: 2px solid #ffffff;}

Well yes, because of that since .user does require even the username as affected. If you wish, you can remove this portion #ffffff.

Sorry if I made a mistake in some of them, but I'm not as experienced in punBB as I am with phpBB2 Sad .

Regards,
Pizza Boi

Pizza Boi
Hyperactive

Male Posts : 2016
Reputation : 160
Language : French
Location : Pizza Hut!

http://redlustempire.forumtl.com/

Back to top Go down

Solved Re: CSS Related: Logo Position, Avatar Position and Borders, Username Position questions

Post by Shiroforum on March 16th 2014, 8:38 pm

Thank you alot Pizza Boi.

1) The thing with the banner is that If I make it larget, it will go towards the right (the image). The left side will remain empty. Also the forum Width is 75% because I want to keep the forum as whole at that Resolution. (I just want the banner to be 100%)

2) The only problems I got left besides the forum banner, are the Chat Box related ones, the rest has been resolved.

Shiroforum
Forumember

Posts : 28
Reputation : 1
Language : English

Back to top Go down

Solved Re: CSS Related: Logo Position, Avatar Position and Borders, Username Position questions

Post by Pizza Boi on March 17th 2014, 2:45 am

Hi Very Happy

Well, for #1, we can always resolve it via CSS Smile . As for the chat box, sorry if I cannot provide it since I do not know the selectors for punBB Sad .

Edit: I found the solution :o !

Please try this code Smile and just removed the selectors you don't want to have the color change Very Happy .

Code:
.chatbox_row_2, h4.member-title.online, p.chatbox_row_1.clearfix {
background-color: Color !important;
}

#chatbox, #chatbox_members {
background-color: Color !important;
}

Regards,
Pizza Boi

Pizza Boi
Hyperactive

Male Posts : 2016
Reputation : 160
Language : French
Location : Pizza Hut!

http://redlustempire.forumtl.com/

Back to top Go down

Solved Re: CSS Related: Logo Position, Avatar Position and Borders, Username Position questions

Post by Shiroforum on March 17th 2014, 1:47 pm

The background image still overlays the chat, I really have no idea what this is happening, even though the codes are good.

Thank you, a lot sir.

Shiroforum
Forumember

Posts : 28
Reputation : 1
Language : English

Back to top Go down

Solved Re: CSS Related: Logo Position, Avatar Position and Borders, Username Position questions

Post by Pizza Boi on March 17th 2014, 2:02 pm

Hi Very Happy

Can you please post a screen shot of what is happening?

Regards,
Pizza Boi

Pizza Boi
Hyperactive

Male Posts : 2016
Reputation : 160
Language : French
Location : Pizza Hut!

http://redlustempire.forumtl.com/

Back to top Go down

Solved Re: CSS Related: Logo Position, Avatar Position and Borders, Username Position questions

Post by Shiroforum on March 17th 2014, 2:14 pm



It looks the same, also I needed to change # to . for Punbb (I think)

Then I tried replacing "background-color: Color"with "background:#419313", it does change the color (When I refresh the page I can easily spot that the color has changed, though the background image remains overlaying the chatbox.

Shiroforum
Forumember

Posts : 28
Reputation : 1
Language : English

Back to top Go down

Solved Re: CSS Related: Logo Position, Avatar Position and Borders, Username Position questions

Post by Pizza Boi on March 17th 2014, 2:19 pm

Hi Very Happy

Please post the whole CSS you're using for the chat box at the moment because I do not encounter that problem o.O.



Regards,
Pizza Boi

Pizza Boi
Hyperactive

Male Posts : 2016
Reputation : 160
Language : French
Location : Pizza Hut!

http://redlustempire.forumtl.com/

Back to top Go down

Solved Re: CSS Related: Logo Position, Avatar Position and Borders, Username Position questions

Post by Shiroforum on March 17th 2014, 2:53 pm

I don't use any other CSS regarding the Chatbox. Can you upload a image (on the image section of your forum "Pics Management") as a background and see if that still works?

Also this is my whole CSS

Code:
a  {
  text-decoration: none !important;
  }
blockquote { background:#257 !important; }

.user {
background-image:url('http://fc01.deviantart.net/fs70/f/2014/074/2/b/avatartemplate_by_kyoxcore-d7aawp5.png');
border: 2px solid #ffffff;}
.pun .user-ident .username {
    text-align:center;
    position:relative;
    top:-20px;
    margin-bottom:-15px;
}
.pun .user-ident .user-basic-info { text-align:center; }
.pun .user-ident .user-basic-info a img {
box-shadow:0 0 6px #000000;
border: Color;
border-radius: 6px 6px 6px 6px;
}
.username { text-transform:uppercase; }
.chatbox_row_2, h4.member-title.online, p.chatbox_row_1.clearfix {
background-color: Color !important;
}

.chatbox, .chatbox_members {
background-color: Color !important;
}

Shiroforum
Forumember

Posts : 28
Reputation : 1
Language : English

Back to top Go down

Solved Re: CSS Related: Logo Position, Avatar Position and Borders, Username Position questions

Post by Pizza Boi on March 17th 2014, 3:18 pm

Hi Very Happy

Well, there's no problem to be honest.

Try changing the code into this:

Code:
a  {
  text-decoration: none !important;
  }
blockquote { background:#257 !important; }

.user {
background-image:url('http://fc01.deviantart.net/fs70/f/2014/074/2/b/avatartemplate_by_kyoxcore-d7aawp5.png');
border: 2px solid #ffffff;}
.pun .user-ident .username {
    text-align:center;
    position:relative;
    top:-20px;
    margin-bottom:-15px;
}
.pun .user-ident .user-basic-info { text-align:center; }
.pun .user-ident .user-basic-info a img {
box-shadow:0 0 6px #000000;
border: Color;
border-radius: 6px 6px 6px 6px;
}
.username { text-transform:uppercase; }
.chatbox_row_2, h4.member-title.online, p.chatbox_row_1.clearfix {
background-color: #000000 !important;
}

.chatbox, .chatbox_members {
background-color: #000000 !important;
}

Regards,
Pizza Boi

Pizza Boi
Hyperactive

Male Posts : 2016
Reputation : 160
Language : French
Location : Pizza Hut!

http://redlustempire.forumtl.com/

Back to top Go down

Solved Re: CSS Related: Logo Position, Avatar Position and Borders, Username Position questions

Post by Shiroforum on March 17th 2014, 3:44 pm

Nope, the background image still overlays the Chat one.

Shiroforum
Forumember

Posts : 28
Reputation : 1
Language : English

Back to top Go down

Solved Re: CSS Related: Logo Position, Avatar Position and Borders, Username Position questions

Post by Pizza Boi on March 17th 2014, 3:46 pm

Hi Very Happy

Can you please provide me an admin test account? I'll see if I can fix it myself Smile .

Regards,
Pizza Boi

Pizza Boi
Hyperactive

Male Posts : 2016
Reputation : 160
Language : French
Location : Pizza Hut!

http://redlustempire.forumtl.com/

Back to top Go down

Solved Re: CSS Related: Logo Position, Avatar Position and Borders, Username Position questions

Post by Shiroforum on March 17th 2014, 3:48 pm

Yeah, sure. Let me make one and I'll PM you.

Shiroforum
Forumember

Posts : 28
Reputation : 1
Language : English

Back to top Go down

Solved Re: CSS Related: Logo Position, Avatar Position and Borders, Username Position questions

Post by Pizza Boi on March 17th 2014, 5:11 pm

Hi Very Happy

I think we have solved this via forum. Anyway, you left before I got to explain everything D: .

I fixed your current CSS to this one:

Code:
/* Logo Code */
#pun-logo {   
  position: relative;   
  top: 0px; 
  left: -11px; 
}

/* Links Code */
a  {
  text-decoration: none !important;
  }

/* Quote Code */
blockquote { background:#257 !important; }

/* Profile Code for Topics */
div.user {
  background-image:url('http://fc01.deviantart.net/fs70/f/2014/074/2/b/avatartemplate_by_kyoxcore-d7aawp5.png');
  border: 2px solid #ffffff;
}
.pun .user-ident .username {   
  text-align:center;   
  position:relative;   
  top:-20px;   
  margin-bottom:-15px;
}
.pun .user-ident .user-basic-info {
  text-align:center;
}
.pun .user-ident .user-basic-info a img {
  box-shadow:0 0 6px #000000;
  border: Color;
  border-radius: 6px 6px 6px 6px;
}
.username {
  text-transform:uppercase;
}

/* Chatbox Profile Code */
span.user {
  background-image: none !important;
}

/* Chatbox code */
.chatbox_row_2, h4.member-title.online, p.chatbox_row_1.clearfix {
  background-color: red !important;
}

.online-users, .chatbox, div#chatbox_members {
  background-color: yellow !important;
}

#chatbox_footer, #chatbox_members {
  border-color: red !important;
}

#chatbox_members {
  border-right: 1px !important;
}

#chatbox_footer {
  border-top: 1px !important;
}

#chatbox {
  left: 170px;
  background-color: blue !important;
}

Please change yellow, red, and blue to your desired colors. Also, there was a difference between the user which is div.user and span.user. The .user you declared was in general so everything was affected, but if you put div and span before it then it will be specified. Lastly, for the logo, the code I used is in the first area and I have adjusted your forum width to accommodate the logo. You can see there that I attempted to adjust the width but as I said, it would be preferred if you create a new banner Smile .

Regards,
Pizza Boi

Pizza Boi
Hyperactive

Male Posts : 2016
Reputation : 160
Language : French
Location : Pizza Hut!

http://redlustempire.forumtl.com/

Back to top Go down

Solved Re: CSS Related: Logo Position, Avatar Position and Borders, Username Position questions

Post by Shiroforum on March 17th 2014, 9:14 pm

Dear God, Pizza Boi is simply divine. Thank you a lot, I'll be forever in your debt, even though I can do about nothing.

Also, thank you Ange a lot as well, you two are amazing.

Pizza Boi is a trustworthy person.

Shiroforum
Forumember

Posts : 28
Reputation : 1
Language : English

Back to top Go down

Solved Re: CSS Related: Logo Position, Avatar Position and Borders, Username Position questions

Post by SLGray on March 18th 2014, 4:04 am

Problem solved & topic archived.


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

View previous topic View next topic Back to top


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