FM Design
Would you like to react to this message? Create an account in a few clicks or log in to continue.

IMPORTANT

FM Design is in read-only mode, please click here for more information.

Latest topics
» Forumactif Edge - Releases
by Ange Tuteur Tue 03 Sep 2019, 11:49

» GIFActif - Giphy Button for the Editor
by Ange Tuteur Wed 08 May 2019, 17:21

» Forum Closure
by Ange Tuteur Mon 01 Jan 2018, 01:28

» Chit Chat Thread
by Valoish Sun 31 Dec 2017, 19:15

» Font/Text background color.
by Valoish Sun 31 Dec 2017, 19:11

» Forumactif Messenger - Instant Message Application for Forumotion
by Wolfuryo Sun 31 Dec 2017, 18:24

» [GAME] Count to One Million!
by brandon_g Fri 29 Dec 2017, 18:58

» Post Cards
by manikbiradar Wed 20 Dec 2017, 07:50

» [GAME] Countdown from 200,000
by Valoish Wed 13 Dec 2017, 23:22

» GeekPolice Tech Support Forums - GeekPolice.net
by Dr Jay Mon 11 Dec 2017, 19:12

» Asking about some plugin for Forumotion
by Dr Jay Mon 11 Dec 2017, 19:10

» [GAME] What are you thinking right now?
by Van-Helsing Sat 09 Dec 2017, 14:51

» Widget : Similar topics
by ranbac Wed 06 Dec 2017, 18:11

» Change the Background of the Forum and put an image and how to make prefixs?
by Clement Wed 06 Dec 2017, 15:19

» Hello from Western Australia
by SarkZKalie Wed 06 Dec 2017, 05:34

Recent Tutorials
Top posting users this month

Who is online?
In total there are 18 users online :: 0 Registered, 0 Hidden and 18 Guests

None

[ View the whole list ]


Most users ever online was 515 on Tue 14 Sep 2021, 15:24

Re-Styling a chatbox with CSS from scratch

Page 2 of 2 Previous  1, 2

View previous topic View next topic Go down

brandon_g
brandon_g

Gender : Unspecified
Age : 26
Posts : 458
Points : 4047
Reputation : 67
Location : USA
Language : English
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : phpBB2
http://broadcastingduo.forumotion.com

Postbrandon_g Mon 09 Mar 2015, 15:29

First topic message reminder :

Heelo,

So I was using a custom styled AWC Chatbox before FM'S updates to the chatbox. After their updates it pushed the buttons out of view and hid them. It was styled using 'px' which I hear (even from coders and webmasters of paid sites) that 'px' can be a pain to use. I thought after playing with it for awhile that it should be re-styled by hand myself using 'cm' and/or 'mm'. So my question here today is more is if I can seek pointers, advice and helpful suggestions on how I can go about this


I would like it to look similar to how it was before the updates (like in this screenshot):
chatBox - Re-Styling a chatbox with CSS from scratch - Page 2 Chatbo10

but I would like the code styling to be 'cm' or 'mm' which much easier to work with.

This is my 1st time trying to style anything by hand with CSS but I hope that this project can help me learn and pick things up quicker.

Css and other things available upon request and a test forum is available to style it on. Smile

Any help would be appericated and thanked greatly.

-Brandon

Ange Tuteur
Ange Tuteur
Administrator
Gender : Male
Posts : 4741
Points : 12013
Reputation : 2375
Location : Pennsylvania
Language : EN, JA, FR
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
https://sethclydesdale.github.io/ https://twitter.com/sethc1995

PostAnge Tuteur Thu 02 Apr 2015, 14:44

You have a snippet of javascript code above your chatbox style. Most likely making the CSS afterwards invalid. Remove it :
Code:
avacweb_chat_config.add_event('onload', function () {
  $(avacweb_chat.id('achat_color_button')).after('Smileys');
});
brandon_g
brandon_g

Gender : Unspecified
Age : 26
Posts : 458
Points : 4047
Reputation : 67
Location : USA
Language : English
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : phpBB2
http://broadcastingduo.forumotion.com

Postbrandon_g Thu 02 Apr 2015, 14:58

Yeah, that snippet is essetial for the smiley's button to work, it is a bit different with phpbb2, that was provided by LG himself as a fix. So does the styling need adjustment? Because that has to stay.
Ange Tuteur
Ange Tuteur
Administrator
Gender : Male
Posts : 4741
Points : 12013
Reputation : 2375
Location : Pennsylvania
Language : EN, JA, FR
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
https://sethclydesdale.github.io/ https://twitter.com/sethc1995

PostAnge Tuteur Thu 02 Apr 2015, 15:20

JavaScript doesn't belong in a CSS file, it'll cause errors. So, that snippet in there is doing nothing, but causing problems with style rules. It looks like it should have gone in your Avacweb chat config.
brandon_g
brandon_g

Gender : Unspecified
Age : 26
Posts : 458
Points : 4047
Reputation : 67
Location : USA
Language : English
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : phpBB2
http://broadcastingduo.forumotion.com

Postbrandon_g Thu 02 Apr 2015, 15:27

He gave me css to put in here: http://www.avacweb.com/t2291p45-smilies-not-working-on-awc-chat#22736 I am confused... is that not the css he personally gave? I mean its defintelly not the js because the JS was larger. I am confused!
Ange Tuteur
Ange Tuteur
Administrator
Gender : Male
Posts : 4741
Points : 12013
Reputation : 2375
Location : Pennsylvania
Language : EN, JA, FR
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
https://sethclydesdale.github.io/ https://twitter.com/sethc1995

PostAnge Tuteur Thu 02 Apr 2015, 16:09

1 simple step. Remove the following code from your stylesheet because it's invalid :
Code:
avacweb_chat_config.add_event('onload', function () {
  $(avacweb_chat.id('achat_color_button')).after('Smileys');
});

Once you do that, the content in your stylesheet will be valid.
brandon_g
brandon_g

Gender : Unspecified
Age : 26
Posts : 458
Points : 4047
Reputation : 67
Location : USA
Language : English
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : phpBB2
http://broadcastingduo.forumotion.com

Postbrandon_g Thu 02 Apr 2015, 16:32

*sigh*

Ok, I will remove it, your the expert and I trust your skills.
brandon_g
brandon_g

Gender : Unspecified
Age : 26
Posts : 458
Points : 4047
Reputation : 67
Location : USA
Language : English
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : phpBB2
http://broadcastingduo.forumotion.com

Postbrandon_g Thu 02 Apr 2015, 16:37

Ok I removed as you said, the script is now as seen below, but it has made no difference Sad.

Code:
/* --- START DATABASE CP --- */
body.databaseBody { color:#666; font-size:11px; font-family:Verdana,Arial,Helvetica,sans-serif; background:#DEF; }
body.databaseBody a { text-decoration:none }
#db_wrap { background:#FFF; border:1px solid #CCC; width:80%; margin:40px auto; padding:3px; }
#db_wrap h1 { color:#479 !important; font-size:18px; border-bottom:1px solid #479; padding-bottom:3px; margin:3px 0; }
.database_table { background:#FFF; border:1px solid #CCC; border-spacing:0; width:100%; overflow:auto; }
.database_table a { background:none !important; display:inline-block; white-space:nowrap; overflow:hidden; max-width:100px; }
.database_table tr:nth-child(even) { background:#FFF }
.database_table tr:nth-child(odd) { background:#DDD }
.database_table tr:hover { background:#FFA }
.database_table td { border-right:1px solid #CCC; border-bottom:1px solid #CCC; padding:3px; }
.database_table tr.table_data { background:#EEE; box-shadow:0 10px 6px rgba(255,255,255,0.3) inset, 0 -10px 6px rgba(0,0,0,0.05) inset }
#db_list { background:#EEE; border:1px solid #CCC; float:left; width:150px; min-height:200px; padding:3px; margin-right:6px; }
#db_list .database { color:#999; text-shadow:1px 1px 0 #FFF; text-align:center; font-weight:bold; font-size:10px; background:none; border:1px solid #CCC; border-radius:3px; cursor:pointer; margin:3px 0; padding:3px; }
#db_list .database:hover { color:#479; border-color:#479; }
#db_list .database.dbactif { background:#DEF; color:#69B; border-color:#8BD; }
#db_tables { background:#EEE; border:1px solid #CCC; overflow-x:hidden; padding:3px; }
#innertable { height:400px; overflow:auto; }
.db_nav { text-align:right; background:#EEE; border:1px solid #CCC; padding:5px 3px; margin:6px 0; }
.db_nav a, .db_button, tr.table_data a { color:#999; text-shadow:1px 1px 0 #FFF; text-transform:uppercase; background:none; border:1px solid #CCC; border-radius:3px; display:inline-block; padding:3px 6px; margin:1px 3px; cursor:pointer; }
.db_nav a:hover, .db_button:hover, tr.table_data a:hover { color:#479; border-color:#479; }
.db_nav a:focus, .db_button:focus, tr.table_data a:focus { color:#8BD; border-color:#8BD; }
.db_title { color:#479; font-size:12px; font-weight:bold; border-bottom:1px solid #479; padding-bottom:3px; margin-bottom:3px; }
.db_info { color:#58A; text-shadow:1px 1px 0 #FFF; text-align:center; background-color:#DEF; border:1px solid #BCD; border-radius:3px; padding:5px 3px; margin:6px 3px; }
.db_erreur { color:#C66; font-size:12px; text-shadow:1px 1px 0 #FFF; font-weight:bold; height:20px; }
.db_overlay { background:rgba(0,0,0,0.3); position:fixed; top:0; left:0; right:0; bottom:0; z-index:999; }
.dbo_content { background:#EEE; border:1px solid #CCC; width:65%; height:50%; overflow:auto; padding:3px; position:absolute; top:20%; left:15%; }
.dbo_content.process { color:#996; text-shadow:1px 1px 0 #FFF; text-align:center; font-size:16px; font-weight:bold; width:30%; height:auto; padding:6px 24px; left:30%; top:40%; }
.db_textarea { color:#333; background:#FFF; border:1px solid #CCC; border-radius:3px; width:90% !important; height:50% !important; resize:none; display:block; padding:3px; margin:3px auto; }
.db_textarea:hover { border-color:#479 }
.db_textarea:focus { border-color:#8BD }
/* --- END DATABASE CP --- */
/* START fa_like */
.fa_like_row { margin-top:6px }
.fa_like_list { font-style:italic; min-height:25px; }
a.fa_like_button, .fa_like_button, .fa_liked { color:#FFF; font-size:10px; background:#6A6; border:1px solid #686; border-radius:3px; display:inline-block; padding:3px 6px; cursor:default; }
.fa_liked { cursor:default; opacity:0.3; }
a.fa_like_button:hover { background:#3A3; border:1px solid #383; cursor:pointer; }
/* END fa_like */

/* START Awc Styling */
    .a_chat_pm tr, .a_chat_pm td, .a_chat_tab tr, .a_chat_tab td {
        display:none!important;
    }
    .a_chat_pm:before, .a_chat_tab:before {
        content: 'Hidden Content';
        font-style: italic;
    }
    h4.away, h4.away + ul {
        display: none;
    }
.achat_row { color: gray; }
.achat_button, #awc_userlist h4.member-title {
  color:#000000 !important;
  font-weight:bold !important;
  border:1px solid #FFF !important;
  background:#000000 !important;
  box-shadow: #000000 !important;
  text-shadow:none !important;
}
#awc_header, #awc_footer, #awc_userlist h4.member-title, #avacweb_chat_button { background:#038BC9 !important }
#awc_userlist h4.member-title {
  border-radius:6px !important;
  margin:3px !important;
}
#awc_userlist, #awc_rightbox, #awc_message {
  color:#000000 !important;
  background:#000000 !important;
  box-shadow:none !important;
}
.achat_row,#awc_tabs {
  background: #000000 !important;
  border:none !important;
}
.bodyline {
border: 5px #868686 solid!important;
border-radius: 10px;
box-shadow: 0px 0px 15px #ffffff;
}
/* END of Awc styling */
Ange Tuteur
Ange Tuteur
Administrator
Gender : Male
Posts : 4741
Points : 12013
Reputation : 2375
Location : Pennsylvania
Language : EN, JA, FR
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
https://sethclydesdale.github.io/ https://twitter.com/sethc1995

PostAnge Tuteur Sat 04 Apr 2015, 17:05

Can you provide me with a test account ? It'll be a whole lot easier to figure out what's going on.
brandon_g
brandon_g

Gender : Unspecified
Age : 26
Posts : 458
Points : 4047
Reputation : 67
Location : USA
Language : English
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : phpBB2
http://broadcastingduo.forumotion.com

Postbrandon_g Sat 04 Apr 2015, 20:28

Ah sure thing.. I got to create one first. Very Happy

Edit: PM sent Ange Very Happy.
Ange Tuteur
Ange Tuteur
Administrator
Gender : Male
Posts : 4741
Points : 12013
Reputation : 2375
Location : Pennsylvania
Language : EN, JA, FR
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
https://sethclydesdale.github.io/ https://twitter.com/sethc1995

PostAnge Tuteur Tue 07 Apr 2015, 17:02

I'm not sure what happened before, but I repasted the CSS and it's displaying fine now.
brandon_g
brandon_g

Gender : Unspecified
Age : 26
Posts : 458
Points : 4047
Reputation : 67
Location : USA
Language : English
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : phpBB2
http://broadcastingduo.forumotion.com

Postbrandon_g Tue 07 Apr 2015, 17:18

Hmm... wierd...


If I provide you a test account to my main forum... would you ge willing to install it again there?

Warning: There is much more css to sort through on there Very Happy. You seem to have a magical touch.. all coding around you bows down before you.

If you consent, I will send you details to a test account. Smile
Ange Tuteur
Ange Tuteur
Administrator
Gender : Male
Posts : 4741
Points : 12013
Reputation : 2375
Location : Pennsylvania
Language : EN, JA, FR
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
https://sethclydesdale.github.io/ https://twitter.com/sethc1995

PostAnge Tuteur Thu 09 Apr 2015, 01:06

If you haven't added the CSS, I'd paste it at the top of your stylesheet. If you have existing CSS for the chatbox, remove it and paste the CSS I provided in my post in its place.

If none of that works, feel free to send me a PM with the necessary information. Wink
brandon_g
brandon_g

Gender : Unspecified
Age : 26
Posts : 458
Points : 4047
Reputation : 67
Location : USA
Language : English
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : phpBB2
http://broadcastingduo.forumotion.com

Postbrandon_g Thu 09 Apr 2015, 13:22

Well I have the css you developed for the awc chatbox in my css stylesheet on my main forum, yes, however, it has the same issue as the one the test forum is. I remove it, but I would need to go on the pc and I don't have time (only because it should take naturally 5 minutes, actually even less to complete this task, but on that pc it will take an hour and half... if I am luck) , the stylesheet on my main forum is pretty full, it has a lot in it, more then my test forum, so trying remove it and re copy and paste it from my tablet is a tedious task and takes very long because I can't I highlight and backspace... I have to remove it character by character (using the backspace button)... it is just a lot of time. I have a test account I can provide you, I will give it acp priviledges when i get home, reset the password then send you the details.

Besides, it seems to only like you, haha I copied and pasted the css and it didn't work, you do it and it does. So because of the fact that the pc is incredibly unbelievable slow at the house I live at, it is tedious from a tablet, it has a lot of css in it and the css listens to you, makes it easier and faster for you to do it.

I will send you a pm later this afternoon/evening.

-Brandon
Ange Tuteur
Ange Tuteur
Administrator
Gender : Male
Posts : 4741
Points : 12013
Reputation : 2375
Location : Pennsylvania
Language : EN, JA, FR
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
https://sethclydesdale.github.io/ https://twitter.com/sethc1995

PostAnge Tuteur Thu 09 Apr 2015, 23:09

The information you provided didn't work. scratch
brandon_g
brandon_g

Gender : Unspecified
Age : 26
Posts : 458
Points : 4047
Reputation : 67
Location : USA
Language : English
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : phpBB2
http://broadcastingduo.forumotion.com

Postbrandon_g Fri 10 Apr 2015, 07:10

Oops... I must have made a typo when resetting the password... It should work with the info I provided now.
Ange Tuteur
Ange Tuteur
Administrator
Gender : Male
Posts : 4741
Points : 12013
Reputation : 2375
Location : Pennsylvania
Language : EN, JA, FR
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
https://sethclydesdale.github.io/ https://twitter.com/sethc1995

PostAnge Tuteur Mon 13 Apr 2015, 22:51

Done. Wink
brandon_g
brandon_g

Gender : Unspecified
Age : 26
Posts : 458
Points : 4047
Reputation : 67
Location : USA
Language : English
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : phpBB2
http://broadcastingduo.forumotion.com

Postbrandon_g Tue 14 Apr 2015, 06:38

Thanks Ange.. your the best like always Smile.
Ange Tuteur
Ange Tuteur
Administrator
Gender : Male
Posts : 4741
Points : 12013
Reputation : 2375
Location : Pennsylvania
Language : EN, JA, FR
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
https://sethclydesdale.github.io/ https://twitter.com/sethc1995

PostAnge Tuteur Wed 15 Apr 2015, 02:25

No problem Angel
Sponsored content

PostSponsored content

Page 2 of 2 Previous  1, 2

View previous topic View next topic Back to top

Create an account or log in to leave a reply

You need to be a member in order to leave a reply.

Create an account

Join our community by creating a new account. It's easy!


Create a new account

Log in

Already have an account? No problem, log in here.


Log in

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