Many CSS questions

Question 1: How can I get the chat on most pages, but not all?

I was able to use an iframe to put the chat on all pages (by putting it in the overall_header). Unfortunately, I don't want it on every page, just the boards. I do not want the chat on the Portal, Search, FAQ, Members, Groups, Profile, or Private Message pages. 

Question 2: How do I put the navbar buttons and the logo on the same line?

I want something like this -> https://i.imgur.com/Iwa8Snh.png. Again, I have no knowledge of CSS at all so this will probably take a lot to explain...

Question 3: How do you do a re-direct when you have multiple URLs?

We do not yet have multiple URLs, so a general code would be very helpful

Hello,

1. ) Did you add an ID or classname to the iframe which contains the chatbox ? For example :

Code:

<iframe id="chatbox" src="/chatbox"></iframe>

You can use JavaScript to filter from certain pages. If you're not sure could you provide the iframe ?


2. ) You would need to center the logo and add a negative margin, or use position properties. For the links you'd need to use margin and maybe z-index so the logo doesn't overlap them. ( mostly jargon ) I'd need to see your forum to do something like that.



3. ) With a small line of JavaScript you can send users to a different website :
Administration Panel > Modules > JavaScript codes management > Create a new script

WARNING : Be careful what pages you allow this to run, if set in all pages you wont be able to access the front of your forum.

Code:

window.location.href = 'http://www.example.com/default.htm';

Simply replace http://www.example.com/default.htm by the url of your website. If you want it to run on a certain url, like a topic, you'd need to use a conditional statement.

1. The code is...

<iframe src="/chatbox/index.forum?" frameborder="0" width="900" height="350"></iframe>


2. http://xwauniverse.forumotion.com/forum

The buttons we're using currently aren't the ones I'd want to use, but I could probably figure out how to switch them out. Maybe.

3. Thank you! I think that is what we need. I guess I'll check back in with more on that when we have the second domain.

1. )

Replace the code by :

Code:

<iframe id="chatframe" src="/chatbox/index.forum?" frameborder="0" width="900" height="350"></iframe>

Make sure to publish the template

Then go to Modules > JavaScript code management > Create a new script

Title : Your choice
Placement : in all the pages

Code:

$(function() {
  var l = location.pathname;
  if (l == '/' || l == '/search' || l == '/faq' || l == '/memberlist' || l == '/groups' || l == '/profile' || l == '/privmsg') document.getElementById('chatframe').parentNode.removeChild(document.getElementById('chatframe'));
});

2. ) This is a test
Add the following code to Display > Colors > CSS stylesheet

Code:

#i_logo { margin-bottom:-100px }
#i_icon_mini_faq { margin-right:250px }
#i_icon_mini_members { margin-left:150px }

1. First code worked. Thanks!

2. Got this -- https://i.imgur.com/5B8Dgux.png

Which leaves me with a few more questions...

A - Should I upload the rendered version of the logo as the "forum main logo"?

B - How could I get the graphical bit above the buttons I posted in the original concept picture? Would I need to include that on the buttons? If I put it behind the rendered logo would that work? I'm not sure how the opacity works at all.

C - And this is unrelated to our current discussion, but currently our adds our below our chatbox. If we paid the ~$20 to remove the ads, would that box go away and leave us without that space, or would it just be empty space?

For clarity -- https://i.imgur.com/NgZ1Whx.png

Also I found a problem with the first code. The chat loads for all subsets of the navbar sections I blocked. If you go to "groups" you don't see it, but if you go to one of the groups the chat then loads which sort of defeats the purpose...

A - Nav buttons will display above the logo image, since they have a higher stack index

B - To me that line looks like a part of the logo image

C - If ads are removed that space should disappear.

EEYEN3 wrote:Also I found a problem with the first code. The chat loads for all subsets of the navbar sections I blocked. If you go to "groups" you don't see it, but if you go to one of the groups the chat then loads which sort of defeats the purpose...

I forgot about this, thanks. I added a regular expression which should check if you're on a group page, replace your script with the one below :

Code:

$(function() {
  var l = location.pathname;
  if (l == '/' || l == '/search' || l == '/faq' || l == '/memberlist' || l == '/groups' || l == '/profile' || l == '/privmsg' || /\/g\d+-/.test(location.pathname)) document.getElementById('chatframe').parentNode.removeChild(document.getElementById('chatframe'));
});

Let me know. Also, do you want to remove it on user profiles ? Because that would need another regexp.

OK, I'm messing with the code trying to get everything into place....

Here's where I'm at.

https://i.imgur.com/sCr8qYm.png

This the code that got me there:

#i_logo { margin-bottom:-77px }
#i_icon_mini_faq { margin-right:190px }
#i_icon_mini_members { margin-left:96px }

My background:

https://i.imgur.com/qdfBRB5.png

Try editing the index icon :

Code:

#i_icon_mini_index {
  background: url('http://i.imgur.com/Cfz28Y4.png') no-repeat;
  height: 44px;
  width: 80px;
}

( it looks cut off ? )

Here is the whole CSS part, hopefully it'll help

body { background:url('https://i.imgur.com/1yBt9xc.jpg')repeat;
background-position: top center
background-attachment: fixed;
}

a[href="/h1-test"] {
position: relative;
bottom: 24px;
left: 0px;
}

#i_logo { margin-bottom:-77px }
#i_logo { margin-left:-8px }
#i_icon_mini_faq { margin-right:180px }
#i_icon_mini_members { margin-left:100px }

#i_icon_mini_index{width:80x; height:44px; background:url(https://i.imgur.com/Cfz28Y4.png) no-repeat 0 0;}

#i_icon_mini_portal{width:0px; height:0px; background:url(https://2img.net/i/fa/empty.gif) no-repeat 0 0;}

#i_icon_mini_gallery{width:0px; height:0px; background:url(https://2img.net/i/fa/empty.gif) no-repeat 0 0;}

#i_icon_mini_calender{width:0px; height:0px; background:url(https://2img.net/i/fa/empty.gif) no-repeat 0 0;}

#i_icon_mini_faq{width:80px; height:44px; background:url(https://i.imgur.com/htgRlMy.png) no-repeat 0 0;}

#i_icon_mini_search{width:80px; height:44px; background:url(https://i.imgur.com/KWslxyy.png) no-repeat 0 0;}

#i_icon_mini_members{width:80px; height:44px; background:url(https://i.imgur.com/r1pz7bF.png) no-repeat 0 0;}

#i_icon_mini_profile{width:80px; height:44px; background:url(https://i.imgur.com/NcOfeWu.png) no-repeat 0 0;}

#i_icon_mini_message{width:80px; height:44px; background:url(https://i.imgur.com/P47mY2u.png) no-repeat 0 0;}

#i_icon_mini_new_message{width:80px; height:44px; background:url(https://i.imgur.com/nwc69qe.png) no-repeat 0 0;}

#i_icon_mini_logout{width:80px; height:44px; background:url(https://i.imgur.com/SXvv0sw.png) no-repeat 0 0;}

#i_icon_mini_register{width:80px; height:44px; background:url(https://i.imgur.com/GSFZejg.png) no-repeat 0 0;}

#i_icon_mini_login{width:80px; height:44px; background:url(https://i.imgur.com/8eIOd9a.png) no-repeat 0 0;}

Replace it by :

Code:

body {
background:url('http://i.imgur.com/1yBt9xc.jpg')repeat;
background-position: top center
background-attachment: fixed;
}

a[href="/h1-test"] {
position: relative;
bottom: 24px;
left: 0px;
}

#i_logo { margin-bottom:-77px }
#i_logo { margin-left:-8px }
#i_icon_mini_faq { margin-right:180px }
#i_icon_mini_members { margin-left:100px }

#i_icon_mini_index{width:80px; height:44px; background:url(http://i.imgur.com/Cfz28Y4.png) no-repeat 0 0;}

#i_icon_mini_portal{width:0px; height:0px; background:url(http://2img.net/i/fa/empty.gif) no-repeat 0 0;}

#i_icon_mini_gallery{width:0px; height:0px; background:url(http://2img.net/i/fa/empty.gif) no-repeat 0 0;}

#i_icon_mini_calender{width:0px; height:0px; background:url(http://2img.net/i/fa/empty.gif) no-repeat 0 0;}

#i_icon_mini_faq{width:80px; height:44px; background:url(http://i.imgur.com/htgRlMy.png) no-repeat 0 0;}

#i_icon_mini_search{width:80px; height:44px; background:url(http://i.imgur.com/KWslxyy.png) no-repeat 0 0;}

#i_icon_mini_members{width:80px; height:44px; background:url(http://i.imgur.com/r1pz7bF.png) no-repeat 0 0;}

#i_icon_mini_profile{width:80px; height:44px; background:url(http://i.imgur.com/NcOfeWu.png) no-repeat 0 0;}

#i_icon_mini_message{width:80px; height:44px; background:url(http://i.imgur.com/P47mY2u.png) no-repeat 0 0;}

#i_icon_mini_new_message{width:80px; height:44px; background:url(http://i.imgur.com/nwc69qe.png) no-repeat 0 0;}

#i_icon_mini_logout{width:80px; height:44px; background:url(http://i.imgur.com/SXvv0sw.png) no-repeat 0 0;}

#i_icon_mini_register{width:80px; height:44px; background:url(http://i.imgur.com/GSFZejg.png) no-repeat 0 0;}

#i_icon_mini_login{width:80px; height:44px; background:url(http://i.imgur.com/8eIOd9a.png) no-repeat 0 0;}

Thank you so much! You're literally my hero.

One last thing....

When you're not logged in it's not... right... https://i.imgur.com/wnBypDY.png

Actually, there is another thing.


This code:

$(function() {
  var l = location.pathname;
  if (l == '/' || l == '/search' || l == '/faq' || l == '/memberlist' || l == '/groups' || l == '/profile' || l == '/privmsg' || /\/g\d+-/.test(location.pathname)) document.getElementById('chatframe').parentNode.removeChild(document.getElementById('chatframe'));
});


Mostly works. When you look at your own profile, you don't see the chat. But still when you look at someone else's profile, you see it. Is there anyway for that to not happen?

EEYEN3 wrote:One last thing....

When you're not logged in it's not... right... https://i.imgur.com/wnBypDY.png

That is to be expected since the profile button does not display for guests. You could create a nav button which only displays for guests to fill the empty space on the right.
Display > Headers and navigation > add a customized menu

EEYEN3 wrote:Actually, there is another thing.


This code:

$(function() {
  var l = location.pathname;
  if (l == '/' || l == '/search' || l == '/faq' || l == '/memberlist' || l == '/groups' || l == '/profile' || l == '/privmsg' || /\/g\d+-/.test(location.pathname)) document.getElementById('chatframe').parentNode.removeChild(document.getElementById('chatframe'));
});


Mostly works. When you look at your own profile, you don't see the chat. But still when you look at someone else's profile, you see it. Is there anyway for that to not happen?

Try now

Code:

$(function() {
  var l = location.pathname;
  if (l == '/' || l == '/search' || l == '/faq' || l == '/memberlist' || l == '/groups' || l == '/profile' || l == '/privmsg' || /\/g\d+-/.test(location.pathname) || /\/u\d+/.test(location.pathname)) document.getElementById('chatframe').parentNode.removeChild(document.getElementById('chatframe'));
});


You're wonderful. I hope they pay you enough.

EEYEN3:  When you are posting codes, please use the BBCode code tags.

P.S.  We are not employees of the company.

... She doesn't get paid for this?

... because she should get paid for this.

EEYEN3 wrote:... She doesn't get paid for this?

... because she should get paid for this.

It's volunteer, something to do in my free time.

Is the problems in this topic solved now ? I forgot to ask.

Yes the topic is solved. Thank you so much.

You're welcome !

Topic archived

Have a great day. ^^