Fredy-san
(?)Community Member
Offline
- Posted: Thu, 09 May 2013 18:25:50 +0000
WELCOME TO EXTENDED FAQ FOR PROFILE DISCUSSION SUBFORUM
/*=======================================================*/
/*=======================================================*/
Notes: Please do not bump this thread without important need
THE EXTENDED FREQUENTLY ASKED QUESTIONS FOR PROFILE DISCUSSION SUBFORUM
These FAQ lists the questions and answers that not covered up in old sticky FAQ & resources thread or giving extra explanations to those listed in old FAQ to keep them being relevant. Please note every answer posted here is tested and based on successfully solved-case thread. But there are many chances that your case might be similar but actually requires entirely different answer to solve.
Q: What is CSS?
A: CSS is short of Cascading Style Sheet , in easy term: it is what used to style a webpage appearance. For the rest of the stuff, just google!!
Q: I need help with my problem and created a thread, what I suppose to do to help it solved easier?
A: Simple, just provide the details about what problem you are facing with and what you expect it should be. Things like what is your current code(s) and screenshot(s) helps the progress but not much. Since most problems is cleared by checking the page directly It is also recommended to open your profile for public since it helps a lot if the problem lies in your page or give the link to the profile where the problem exists.
Q: I can not move my panels in v2 / I can not edit my v2 profile in Chrome!!
A: Chrome has issues with GAIA profile editor, so change your browser. Firefox or IE are recommended.
This is technical summary from the browser in brief.
The chrome issue is that browser can not detect the editor script range. When it suppose to cover area as big as the whole page total size, Chrome sets the limit to monitor range instead due to gaia default body and html size set to 100%. Thus limiting the moving range to how big your window is on initial, counted starting from top:0px fixed; . To workaround this, you can set html, body height to value of 'auto' or absolute height example height:1400px; which covers the whole profile. then after you done arranging them, you can remove that code part.
Q: There is a picture / floating text bubble / text box stucks above my profile page and I can not move it , drag it, or grab it because it is below / covered by the header !!
A: you can use CSS to move it into the middle page so you can delete it
#texts_container, #pictures_container {top:100px;position:absolute;}
}
That code will bump all floating decorations slightly down so you can remove anything stuck under the header bar. Remove the code after use.}
Q: Please make me a profile!! / I want to buy a profile!! / I am selling a profile page!! / I am making profile page for free
A: !! MODERATOR DECISION !! Do not reply the thread. you should instead directly use the 'report this topic' for misplaced thread.
Go to personalized graphics or service subforum
Personalized graphics or f.168: https://www.gaiaonline.com/forum/extended-discussion/f.168
Services subforum or f.169: https://www.gaiaonline.com/forum/services/f.169/
Q: Are there rules for editing the GAIA profile??
A: The answer is already in sticky thread, however let me try make it simple. For top navigation header
*You are not allowed to remove the gaia logo or alter it that makes it not similar to its current original.
*You are not allowed to reposition the header bar, it must stays on top of the page, functional, and unhindered by anything else.
*The links inside the header bar also not allowed to be removed, or repositioned afar from its original
*You also not allowed to resize the header. It must stays stretched across the page.
*You are not allowed to modify the header in such way that is become too hard or even not viewable, not readable, or hard to use by your page visitors.
* As for the page contents, just do not (try to) put any inappropriate contents like adult contents.
Q: Help, v2 profile can not save, returned to default, background not changed, part of code(s) not working, or any changes made not showing?!
A: There are many possible cause for this, but most commons are:
- If the background not showing up but the other codes works fine
The background link is invalid or not allowed to be used outside the provider site. Solution: reupload the image somewhere and also make sure you have permission for that. OR
The background link also could be contains spaces or special symbols. Solution: wrap the url in a single quote
Quote:
background-image:url('.....');
It also could be a BB code bug being saved into URL background. This bug usually happens on v2 Current profile and caused when about-me or a custom panel saved as the first panel in first column. To solve this: Go to editor > Theme > URL > insert a blank space and save.
If the editor tells you can not save
You also need to have at least one panel exist on v2 Current profile to save (exist, but does not have to be visible. display:none; is counted as removed however)
Another common cause is JUNK CODES . Do you think leaving some random numbers / texts , unclosed code blocks, or anything like that in your code field wont affect your profile?? 40% of most code-not-working problem actually caused by this reason.
Username / nickname changes would also cause the profile to reset !
Also if your background image not showing up despite all other fix, check if the site that hosts the image actually gives the correct direct image link. Some sites like zerochan, konachan, wallpaperdesktop, or such usually does not allow hotlinking the picture thus the user usually have to re-upload the image somewhere else first.
Q: There is a white space below my profile / My background is cropped at one line / point / on bottom of my page?!
A: This have many possible answers:
1. Check the background code, for full page background, it usually uses html, body selector. So missing one will cut the background
2. Check the background size, is it enough to cover the whole page for starter? If yes, then you should check is background-size property used or not.
3. If the background does not sticks to the screen, using Background-attachment:fixed; on the background code will usually helps. Remember this should not be used on background guided profile layout.
Q: How to stretch my page background image / how to make my background fill entire page?
A: The answer is by utilizing background-size. background-size has 5 kinds of "fill the whole page" valid values you can use, which are cover, contain , 100% auto, auto 100% and 100% 100%
* Cover works like "Fill" on desktop background. Which the image will be scaled to biggest ratio to fill up the entire screen
* Contain is more like "Fit", which the image will be scaled to smallest ratio
* 100% auto and auto 100% means the image will stretch to either height or width while the other side will be scaled on same ratio
* 100% 100% however is like "Stretch" on your desktop background.
The code usage for example
html, body {background:url('http://BACKGROUND_LINK_HERE');background-size:cover;}
or
html, body {background:url('http://BACKGROUND_LINK_HERE');background-size:100% 100%;}
Learn more about background-size property
or you can use this Gaia background-related threads search link
Q: Profile code reverting , reset , or returned back after deleting the codes
A: Gaia does not accept sudden-delete of your whole code. Think that as safe option from hackers that trying to ruin your codes or providing way for user who made mistakes. If you want to delete all your codes, make sure you have backed it up first if you planning to use again later. After that, replace all of the code with a single blank space and save. That should empty your code sheet to blank.
Q: v2 'Current' profile panels duplicated / glitched
A: Known fix steps
1. Add one any new panel that does not duplicated yet.
2. Remove all panels that duplicated
3. Save profile
Afterwards, you can read the panel you have removed. If the panel you are going to remove is a custom or media panel, it is recommended to save the content first (ie: media url used, BB code and text contents, etc.
This usually happens when you accidentally dragged a panel on top of a custom panel center and drops it there. Mostly on Chrome, but also could rarely happens in Firefox. (TESTED)
Q: How to reset V2 Current profile while keeping CSS code
A: create a panel, edit the name to just a 'backslash' (the one beside backspace button, not the 'slash' beside shift button), update and save. Your Current profile will reset all its panel back to default structure while maintaining the profile code.
Q: Spoiler button glitched!! I can not save and all my columns / section got merged into , help?!
A: https://www.gaiaonline.com/forum/t.92747803/
Q: How to make [INSERT NAME HERE] on mouse hover over ??
A; learn CSS about :hover
Q: How to center [INSERT NAME HERE] in my profile page??
A: Quick code to center columns in v2
#columns,#texts_container, #pictures_container {
width:1035px;
transform:translateX(-50%);
position:absolute;
left:50%;
}
@media screen and (max-width:1035px) {
#columns, #texts_container, #pictures_container {
transform:translateX(0%);
left:0%;}
}
width:1035px;
transform:translateX(-50%);
position:absolute;
left:50%;
}
@media screen and (max-width:1035px) {
#columns, #texts_container, #pictures_container {
transform:translateX(0%);
left:0%;}
}
related answers: Link 1
You can also try the margin:0px auto; method, though it is not always working with some elements
If you have problems with "Centering" things, use advanced search feature , go here https://www.gaiaonline.com/gsearch/forums then set the keyword "center" without quotes, open up the advanced search feature, and set the location to search profile discussion subforum only. There are dozen of threads about this
Q: My Youtube is ..... ?
A:
- Media link is not working??
Are you sure you have used correct embed link for Youtube??
By default, correct embed youtube link is https://www.youtube.com/v/VIDEO-ID
example valid one: https://www.youtube.com/v/0nlJuwO0GDs
Error " Link must started with http " ??
Check the start of the link, if it is using https, change it back to http. This happens due to GAIA url auto-convert or user mistake sometimes.
Auto start or auto play?
Just add &autoplay=1 by the end of the URL. Note that some browsers by default disabled autoplay of media with audio and mobile browsers also to prevent unwanted load.
Autoplay not working?
1. Make sure your flash plugin is set to always run
2. Be careful with visibility:hidden; or display:none; affecting the media panel or media player object property as it could disable the content.
Need to be as small as PLAY / PAUSE button only :
EASY-EDIT code for AS3 player
http://pastebin.com/SQeN3buP
Youtube as profile background ??
Please look here https://www.gaiaonline.com/forum/t.94360273/ for more information . By the way, the code is for v2 Current only. Due to circumstance of Gaia not setting wmode for media object in Classic profile. It is strongly advised not to use it Classic due to no control over the z-index = the media will overlaps the top navigation header and you guys should have know the risk.
Hidden media ??
Just use position:fixed; and left:-5000px; on the CSS section, which would be #multimedia (v1) or .media_panel (v2)
#multimedia , .media_panel {
position:fixed;
left:-5000px;
}
position:fixed;
left:-5000px;
}
Move it to the bottom of the page?? Stretch it into something like long bar??:
Related Link 1
Related Link 2
Related Link 3
Related Link 4, non-strecth bar version
Not working because unknown reasons?
check the URL, is it correct for use on GAIA? Is the parameter correct? Are you sure you not hit by above reasons?
Please note Gaia removes URL parameters other than autoplay on default youtube.com/v/ media url. So if you want to use other parameters, it is recommended to use youtube.googleapis.com/v/ url instead.
Playlist?
https://www.gaiaonline.com/forum/t.85104505/
Start at certain time??
You can use &start=XX url parameter, change the XX to number of seconds you want to skip ahead. You can also use &end=XX to end the song at certain time. For playlist usage, this will only affect the first track.
Loop Youtube ?
You need to bypass Gaia parameter limit then use &loop along with &playlist. If you only want to loop a single video, setting videoseries to the &playlist works
https://ca.youtube.com/v/VIDEO_ID?loop=1&playlist=videoseries
Example if your Youtube video address is:
https://www.youtube.com/watch?v=qediav063xQ
Example done url with autoplay:
https://ca.youtube.com/v/qediav063xQ?loop=1&playlist=videoseries&autoplay=1
Start or adjust initial volume??
Youtube deprecated volume parameter on URL. Instead Youtube stores its media player setting on user's browser cookies or cache. This means for example you just watched a video on youtube site and last time muted the video before closing the page. The next time you open a Youtube video on anywhere like on Gaia, 9Gag, Facebook, Youtube itself or just anywhere on the internet, it will starts muted because that is your last known setting. User can have two different setting, one for HTML5 player and the other one is for Flash based.
Q: Can I shuffle playlist ?
A: There is one known media provider which supports playlist shuffling called hypster. Fortunately hypster also supports importing media / video tracks from Youtube
Check this thread for more info:
https://www.gaiaonline.com/forum/t.92973941/
There are also some other media players out there that AFAIK also supports shuffling, but they are hardly used or usually stand-alone swf.
Q: My playlist.com and Grooveshark is not working anymore?
A: Ever since they changed their coding layout, playlist.com is no longer working with direct embedding. There is a rumor about workaround using tiny.url, pretty much same like WIX workaround. But I never confirm about it. As for Grooveshark, it is have been taken down due to copyright problem.
Q: Why my media is not working?
A: The common reasons mostly are wrong media url or in some case the media url is too long. Gaia media has a limit of 255 character long, more than that and the rest are cut off by system. Otherwise, make sure your device or computer supports flash player.
Q: Why opacity and z-index are not working on Classic media player?
A: It is because gaia does not set any parameter for the flash windowmode="..." in Classic profile. The explanation is very technical though.
Q: Is it okay to make a reward here?
A: Depends on who you are talking to. For me, it is okay as long you see my rules above.
Q: What are the tools used usually to fix up someone page?
A: Firefox's Style Editor (SHIFT+F7)
All browsers except mobile versions have source page feature (CTRL+U) and element inspector (Right click > Inspect )
Q: My WIX profile is not working, help!!
A: There is a thread dedicated for troubles regarding WIX
https://www.gaiaonline.com/forum/t.81836519/
Go post your WIX problem there. Horntastic is one of the good person at such thing. Please note WIX no longer supports creation of new flash template.
Q: What is the code to make a rounded edge?
A: get the selector you need and use border-radius
selector {
border-radius:#px;
}
The selector can comes in #ID_selector or .Class_selector or even tag_selector (like just img) or even combinations of them like: #id_wishlist .item img border-radius:#px;
}
Oh yeah, the bigger the border-radius, the rounder it is. If you want to make circle, give it 9999px or 100%.
Q: When I clicked one of my wishlist item , the equipped list also pop up / appeared ?
A: Patch code
.premium_sparkle, #avatar_menu+div+div, #footer~script[src*='blockedimage']~script+script+div[style*='display']~div, noscript+script+script+noscript+div[style*='display']~div, .owner_checkmark, #avatar_menu+*+* * {display:none;}
It also removes the sparkles btw.Q: I clicked one of my wishlist item or equipped list, on close there is a black semi-transparent layer which covers my screen ?
A: Just refresh the page, it is Gaia system problem on first profile visit of the day.
Q: How to change page background??
A: Learn css and the selector you would need usually is html, body
Q: I can not move my avatar in v1 profile even though I already used the right code??
A: the avatar selector in v1 Classic will change depends on whether you are wearing any animated (astra) item on your avatar or not. It is best to use both selectors to comply every change:
#profile .avatar , #profile #animated_item {..... }
Q: How to add visitor avi / avatar on my profile??
A: https://www.gaiaonline.com/forum/t.85662663/
Q: How to make my avatar move / float / bounce / animation up and down ?
A: related thread https://www.gaiaonline.com/forum/t.96718715/
Example code for Classic V1
For Current V2 profile, change the bolded part to #id_details img, #id_details object
Quote:
#profile .avatar, #animated_item {
animation: cssbounce 2s infinite alternate;
}
@keyframes cssbounce {
0% {transform:translateY(-10px);}
100% {transform:translateY(10x);}
}
animation: cssbounce 2s infinite alternate;
}
@keyframes cssbounce {
0% {transform:translateY(-10px);}
100% {transform:translateY(10x);}
}
Q: How to make rounded / circle avatar head / bubble ?
A: www.gaiaonline.com/forum/t.97560403/#4
Q: Why my font-face can not load on Firefox?
A: There are many reasons for this
1. The server does not allows for cross domain usage of the file.
2. The font format is not supported.
3. For google fonts, you have to use Firefox when opening the CSS stylesheet so Google will give you the correct file which compatible with Firefox browser.
Read more here https://www.gaiaonline.com/forum/t.93967277/
Q: How to change profile cursor??
A:
html, body {
cursor:url('.....') , auto;
}
learn more about the code and its compatibility here:cursor:url('.....') , auto;
}
https://developer.mozilla.org/en-US/docs/Web/CSS/cursor
Q: How to change text color ?
A: To change text color of certain element, you need the correct selector and CSS color properties.
Example, changing the color of links in recent visitors to blue color would be
#id_footprints a { color: blue;}
Another example changing the color of all panels in general to grey using hex color
.panel {color: #DDDDDD;}
Q: How to remove links underline effect when mouse hovering over it?
A:
a:hover {
text-decoration:none !Important;
}
text-decoration:none !Important;
}
Q: How to make texts or boxes or panels glowing ??
A: The answer is by using text-shadow for texts and box-shadow for other elements.
Example is .panel { text-shadow:0px 0px 3px #AAF; } will give a light blue glow to all the texts in your v2 profile panels. However .panel {box shadow: 0px 0px 3px #AAF;} will make the panels edges / borders glowing instead.
Q: How do you put images or texts before / after every links in GAIA header?
A: that is created using pseudo class #selector:after and/or #selector:before then the properties content:'...'; or content:url('PUT_LINK_HERE');
Related thread: https://www.gaiaonline.com/forum/t.88491857/
example
#header_left:after {content: ' TEXT HERE '; }
or #header_right:before {content: ' TEXT HERE '; }
Remember though if you set #gaia_header ul, #header_left or #header_right to color:transparent; . You have to set color:...; properties as well on those code above or else they will be transparent since they are inheriting color from the parent.
Q: I can not change the height or font size of GAIA header?
A:https://www.gaiaonline.com/forum//t.90085821/
Q: I tried to change the background color of #gaia_header , but it is not working
A:Have you also change the #header_left and #header_right background color to transparent?
Q: Is it possible to put :hover on :after / :before content?
A: http://www.gaiaonline.com/forum/t.86462849/
yes it is possible.
Q: How to make something like a panel , element , or any part of my profile from ( half ) transparent or semi transparent to go back or fade to solid , opaque , not transparent on mouse hover / over ?
A: Set opacity to that element and make :hover part have another opacity, give it transition if needed, example for v2
.panel {opacity:0.5;transition:all 1s; }
.panel:hover {opacity:1;}
.panel:hover {opacity:1;}
Opacity value ranges from 0 for transparent to 1 for solid.
Search link for anything about transparency or opacity-related question
Q: How to keep background from scrolling with my content?
A: Learn about how to use background-attachment:fixed;
Q: How to put a scrollbar on an element?
A: Give it some width, height, and overflow property
PLEASE NOTE: overflow:....; is the shorthand combined code of overflow-x:....;overflow-y:....; . So using both in one rule block will overwrites which comes first, the shorthand or the overflow-x and y, making the first is JUNK code. Unless you have a valid reason, code line such as
Quote:
SELECTOR {
overflow:auto;overflow-x:hidden;overflow:-y:auto;
height:....px;
width:....px;
}
overflow:auto;overflow-x:hidden;overflow:-y:auto;
height:....px;
width:....px;
}
Q: How to make an invisible scrollbar?
A: Learn CSS ( =,=) there is a guide thread in this forum. Search it.
Q: Why I can not make hidden / invisible scrollbar for v2 wishlist, recent visitors, or some other panels
A: Hidden / invisible scrollbar should works properly only IF there is a child container. The main concept is you set the parent to have hidden overflow, then set this child container to have scrollbar but also bigger. Thus the scrollbar gets cropped by the parent hidden overflow. But problems arise when panels in v2 suchs as the wishlist and recent visitors does not have child container. As the workaround, instead applying it to the panel, the code must be taken into column level where the column acts as the hidden overflow to crop the panel scrollbar.
Q: Custom scrollbar not appearing?
A: Custom scrollbar only supported by Chrome and old IE. Both use different code too.
Q: How to move stuff out from hidden / scroll / auto overflow?
A; https://www.gaiaonline.com/forum/t.91768265/
Q: How to remove / customize panels header
A: Basically it is something to do with the selector .panel h2 For example, to remove the panel headers, you can use
.panel h2 {display:none;}
Or to change its background color to black and its texts to red
Quote:
.panel h2 {
background:black ;
color:red;
}
background:black ;
color:red;
}
Q: How to make custom sections in v1 Classic??
A:https://www.gaiaonline.com/forum/t.85870333_196/
Easiest way is by creating ordered-list BB code as container first in your about-me section. example about-me template
[list=1] FIRST CONTENT HERE [/list]
[list=2] SECOND CONTENT HERE [/list]
[list=2] SECOND CONTENT HERE [/list]
Then aim for the selector ' #about ol:nth-of-type(1) ' for the first box and selector ' #about ol:nth-of-type(2) ' for second box and style them. Dont forget you maybe also need to set overflow:visible; on the #about if you want to move things outside.
Q: Are there any good CSS guide for newbie and pro alike?
A: There are two guides that most of the time used by newbies:
the first one is from Kaylev
https://www.gaiaonline.com/forum/t.42151201/ I warned you that thread is outdated and also some method over there are miss. It is good for newbie, but you will never step next level from there. If you are good enough to read CSS and have the idea, the next guide is from Yoshi which is simply more advanced, correct, and accurate. Though it is not pretty fit for blind newbie and more like CSS index library to me
https://www.gaiaonline.com/forum/t.81812403/
Btw, if you put a question there, Knight Yoshi could answer faster there as I simply not patrolling there.
Q: Where I can find good pre-made profiles?
A: just google "Gaia profile" will gives a list of the popular sites which contain many premade profiles code are put or profile generators. Gaiatools and skem9 are trusted hosts for premade profiles and generator. Whatever it is, if the site asking you for password or/and username, watch the address bar to make sure it is not phising and also note that you WOULD and SHOULD be NOT logged out from Gaia so there be no way Gaia would ask ur username and password again.
Q: How do you link search results?
A: Base link
https://www.gaiaonline.com/gsearch/forums?query=KEYWORD&author=AUTHOR&forum=FORUM_ID
KEYWORD = what do you want to search, spaces must be replaced with %20
AUTHOR = search post made by specific someone, leave empty for all search
FORUM_ID = the forum ID numbers, for example Profile Discussion ID number is 170, leave empty for global all forums. You can obtain the subforum ID by visiting the subforum front page and look for the number on the address bar
Example, if you want to search for anything related to keyword "panel" made by "Fredy-san" from Profile Discussion subforum only, the link would be
https://www.gaiaonline.com/gsearch/forums?query=panel&author=fredy-san&forum=170
==============
Other Threads
The Gaia profile stuffs library:
https://www.gaiaonline.com/forum/t.97510341/
WIX discussion central thread can be found here
https://www.gaiaonline.com/forum/t.81836519/
Cascading Style Sheet or aka CSS's "index library" by Yoshi
https://www.gaiaonline.com/forum/t.81812403/
The hidden scrollbar guide thread:
(Old) https://www.gaiaonline.com/forum/t.43863509/
(Better, but not newb-read friendly) https://www.gaiaonline.com/forum/t.82650973/
Guide to create custom sections in v1 classic, kinda outdated, but still works: https://www.gaiaonline.com/forum/t.41111089/
Complete external CSS references
Mozilla Developer Network (MDN) CSS properties reference *recommended*
Sitepoint's CSS common and advanced reference
w3schools.com's CSS properties reference
caniuse's site to check current CSS compatibilities across multiple browsers platform
