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.

Many CSS questions

View previous topic View next topic Go down

Solved Many CSS questions

Post by EEYEN3 on August 23rd 2014, 5:19 am

Background: I have no knowledge of CSS. Or any other coding.

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 -> http://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

EEYEN3
Forumember

Posts : 80
Reputation : 1
Language : English

Back to top Go down

Solved Re: Many CSS questions

Post by Ange Tuteur on August 23rd 2014, 6:02 am

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 Razz ) 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.

Ange Tuteur
Forumaster

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

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Many CSS questions

Post by EEYEN3 on August 23rd 2014, 6:18 am

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.

EEYEN3
Forumember

Posts : 80
Reputation : 1
Language : English

Back to top Go down

Solved Re: Many CSS questions

Post by Ange Tuteur on August 23rd 2014, 6:41 am

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 }

Ange Tuteur
Forumaster

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

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Many CSS questions

Post by EEYEN3 on August 23rd 2014, 7:41 am

1. First code worked. Thanks!

2. Got this -- http://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 -- http://i.imgur.com/NgZ1Whx.png

EEYEN3
Forumember

Posts : 80
Reputation : 1
Language : English

Back to top Go down

Solved Re: Many CSS questions

Post by EEYEN3 on August 23rd 2014, 9:10 am

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

EEYEN3
Forumember

Posts : 80
Reputation : 1
Language : English

Back to top Go down

Solved Re: Many CSS questions

Post by Ange Tuteur on August 23rd 2014, 7:35 pm

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.

Ange Tuteur
Forumaster

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

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Many CSS questions

Post by EEYEN3 on August 24th 2014, 1:39 am

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

Here's where I'm at.

http://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:

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

EEYEN3
Forumember

Posts : 80
Reputation : 1
Language : English

Back to top Go down

Solved Re: Many CSS questions

Post by Ange Tuteur on August 24th 2014, 2:01 am

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

Ange Tuteur
Forumaster

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

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Many CSS questions

Post by EEYEN3 on August 24th 2014, 2:06 am

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

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:80x; 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://illiweb.com/fa/empty.gif) no-repeat 0 0;}

#i_icon_mini_gallery{width:0px; height:0px; background:url(http://illiweb.com/fa/empty.gif) no-repeat 0 0;}

#i_icon_mini_calender{width:0px; height:0px; background:url(http://illiweb.com/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;}

EEYEN3
Forumember

Posts : 80
Reputation : 1
Language : English

Back to top Go down

Solved Re: Many CSS questions

Post by Ange Tuteur on August 24th 2014, 2:44 am

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://illiweb.com/fa/empty.gif) no-repeat 0 0;}

#i_icon_mini_gallery{width:0px; height:0px; background:url(http://illiweb.com/fa/empty.gif) no-repeat 0 0;}

#i_icon_mini_calender{width:0px; height:0px; background:url(http://illiweb.com/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;}

Ange Tuteur
Forumaster

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

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Many CSS questions

Post by EEYEN3 on August 24th 2014, 2:51 am

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

EEYEN3
Forumember

Posts : 80
Reputation : 1
Language : English

Back to top Go down

Solved Re: Many CSS questions

Post by EEYEN3 on August 24th 2014, 3:33 am

One last thing....

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

EEYEN3
Forumember

Posts : 80
Reputation : 1
Language : English

Back to top Go down

Solved Re: Many CSS questions

Post by EEYEN3 on August 24th 2014, 3:59 am

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
Forumember

Posts : 80
Reputation : 1
Language : English

Back to top Go down

Solved Re: Many CSS questions

Post by Ange Tuteur on August 24th 2014, 4:23 am

@EEYEN3 wrote:One last thing....

When you're not logged in it's not... right... http://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 Smile
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'));
});

Ange Tuteur
Forumaster

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

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Many CSS questions

Post by EEYEN3 on August 24th 2014, 4:38 am

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

EEYEN3
Forumember

Posts : 80
Reputation : 1
Language : English

Back to top Go down

Solved Re: Many CSS questions

Post by SLGray on August 24th 2014, 5:50 pm

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

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


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


SLGray
Administrator
Administrator

Male Posts : 35620
Reputation : 2372
Language : English
Location : United States

http://fmthemes.forumotion.com/

Back to top Go down

Solved Re: Many CSS questions

Post by EEYEN3 on August 24th 2014, 11:37 pm

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

... because she should get paid for this.

EEYEN3
Forumember

Posts : 80
Reputation : 1
Language : English

Back to top Go down

Solved Re: Many CSS questions

Post by Ange Tuteur on August 24th 2014, 11:50 pm

@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. Wink

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

Ange Tuteur
Forumaster

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

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Many CSS questions

Post by EEYEN3 on August 25th 2014, 12:52 am

Yes the topic is solved. Thank you so much.

EEYEN3
Forumember

Posts : 80
Reputation : 1
Language : English

Back to top Go down

Solved Re: Many CSS questions

Post by Ange Tuteur on August 25th 2014, 1:12 am

You're welcome ! Very Happy

Topic archived

Have a great day. ^^

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