Artistopia Help Center

CSS allows for a personalized web experience within Artistopia and an artist, band or group's profile. With this tool, some knowledge and a few tips, that Member has control over expressing creative input as to who they are and what they do. Your Artistopia profile can now be your own unique musical thumbprint on the web.

Q. What is CSS?

A. CSS is the acronym for Cascading Style Sheets which Artistopia has applied for Members to customize their profile pages if they wish. Basically, it’s a feature that defines how certain HTML code should be displayed and gives the Artistopia Member more control on how their profile looks including font, text, background and colors.

Bonus Features: You set your browsing experience! You have a choice of applying CSS so that the public can view your CSS or not on your profile. AND you can apply the CSS you created for your own browsing of Artistopia or just your profile.

Members do not have to necessarily learn code to customize their profile, but some basic knowledge is needed. If a Member wants to really take it to another level, we offer some tips, pointers and links within the Member Console CSS Help to further articles and tutorials if you want to really dig deep and put the lipstick on!

Note: Artistopia does not offer support for the use of CSS other than what is given in this section of the Help Center. Discussion, tips and questions about CSS should be generated within the Artistopia message boards ONLY!

Q. How can I customize my pages?

A. Click on the provided “Here’s Some Help” and see the sample code, the CSS FAQs and the suggested Web Links. The variations are indeed, endless. If you are game, delve into the world of CSS. Feel free to play - you can't hurt Artistopia. If you are a CSS pro - have at it, but until you get the hang of it, the advice is to answer the question, "Do you want outside visitors to view your profile as you have customized it?" with "No".

Want to see a sample on what can be done? Go to the Elements tab. Click “Load Custom CSS Sample” and then “Copy CSS Code to Clipboard”. Paste the code in your member profile CSS Stylesheet Code area then in the ‘…Browsing…’ field, select “Entire Website” and in ‘…view your profile as customized…', select “No”. Click “Update CSS Stylesheet”. The colors will be outrageous, but only you will see it. This is was CSS can do.

Now do this, being careful to only replace this exactly. Where you see:
.BodyBack {
background-color: #4888FF;
background-image: url('http://www.artistopia.com/images/css/ex1/back.jpg')
}
.PageBack {
background-color: #E6E7F9;
background-image: url('http://www.artistopia.com/images/css/ex1/page.jpg')
}
Change it to:
.BodyBack {
background-color: #4888FF;
background-image: url('http://www.pha.jhu.edu/~bingz/background.gif')
}
.PageBack {
background-color: #E6E7F9;
background-image: url('http://www.pha.jhu.edu/~bingz/background.gif')
}
Then update to see the change you made. This is only a hint of the potenital customization available to you. To return to the default settings, delete the entire code out of the CSS area and update.

For your convenience, Artistopia has grouped the major sections of the site into “Artistopia’s CSS Element Group” where you can work on a small area of the code at one time by selecting the “CSS Area”. Customize to your heart’s content and Copy Code then paste into the member console and update. This makes it easier to personalize the code on the smallest scale possible.

Q. What are the limits to what I can do with CSS?

A. Creativity can take you where you want to go here, but you truly should remember, Artistopia is your professional presentation of the artist TO the music industry, so when using CSS make it viewer friendly - easy on the eye. Wouldn't you hate to think someone didn't listen to you because your profile was an eye sore? This is stated here for a reason: On MySpace in particular, busy music executives don't have time for a music profile that takes too much time to figure out, load, read (dark text on dark background or vise-versa), or that the viewer has to high-light to see the text. So you can see, though creativeness is encouraged, if a music career is a goal - make it easy for the visitor.

That being said:

Ads can not be removed. The profiles that do not show ads are the artists and bands with an upgraded account.
CSS is available for use in member profiles, but HTML code is not.
Artistopia offers some functionality that other sites do not. The codes found to enhance your MySpace profile will not function within your Artistopia profile. The language is the same, but the wording is different. Don't assume that what can or can not be done on other sites will necessarily work in your Artistopia profile. The point here is to not only create a cool bio for you, but also one that is still readable and clear to the visitor if you select that option. So check out what you created and edit it as needed!
Inappropriate images viewable to the public will not be allowed.
Depending on the browser of choice for the end user, some fluctuations may appear. These issues will be handled over time.

Q. This is all new to me, what do I need to know?

A. Let’s go ahead and give you a mini glossary in case “web stuff” is not your thing:

Ad Back Color: The background color chosen for a displayed ad.
Ad Link Color: The color chosen for a displayed ad link.
Ad Text Color: The color chosen for a displayed ad wording.
Backgrounds: The part of the viewable page that lies behind objects in the foreground, can be arranged with color or images. An element for customization on Artistopia.
Box Container: An element on Artistopia that can be edited. An example would be the individual forum thread responses and replys.
Cascading: Defines the weight (or importance) of individual styling rules, allowing disagreeing rules to be sorted out should such rules apply to the same selector. It orders the precedence for the browser to apply the style rules in multiple sheets. The style rule or sheet that has the highest priority is the one that is used.
Class: A group of instances of the same element to which an unique style can be attached or instances of different elements to which the same style can be attached.
Elements: The smallest division within an XML document that is defined within a schema. An example is < body >formatted text (less the spaces between the tags and text). Body is the element.
HTML: A computer language code, also called Hypertext Markup Language, which creates a web page in a browser.
JavaScript: A computer script language code that can be embedded in an HTML document.
Hyperlinks: A connection to another web file, page or site. This element can be edited as well, including size and color
Schema: Defines vocabularies, structure and rules by which each type of element within an information set are interrelated and stored for further processing.
Schema Themes: An element on Artistopia that can be custom manipulated, including MainColor, Separator and Column Titles. Selectors: Part of a rule indicating the element(s) to which the style should be applied.
Styles: Defines the color and background, fonts, text and classification.
Style Sheets: Templates which are very similar to templates in desktop publishing applications, containing a collection of rules declared to various selectors (elements).
Syntax: The rules by which the words in a program are combined to form commands to a computer. CSS syntax is made up of three parts - a selector, a property and a value
Tab Colors: Another element is the navigation links of the Member profile including Overview, Music, Events, Boards. Color and text size can be changed.
Text Properties: An element for editing, including the spacing, decoration, alignment, indentation and height of the text.
URL: The acronym for Uniform Resource Locator, which is an address on the Web. All URLs begin with http://.
Value: A physical characteristic of the property. Property declares what should be formatted, while value suggests how the property should be formatted. There must always be a corresponding property to each value or set of values.

There is a sample CSS provided in the Elements area which you could load and Update (save) which shows the potential of CSS. The best advice would be to take one of the suggested links to a CSS tutorial to learn how to use it. The variations are extensive, so if you like, get familiar with some of the cool ways to create a profile that is truly your own. Screenshots are an additional way to get familiar with the layout.

Q. What is the Artistopia CSS Element Group?

A. The Artistopia sections available for customization are broken up into the following Elements by groupings:

Backgrounds
Schema Themes
Tab Colors
Box Container
Hyperlinks
Text Properties

“Load Custom CSS Sample” generates the entire code of a sample Cascading Style Sheet which you can “Copy CSS Code to Clipboard”, then paste into your Member Console customize area.

“Select CSS Area” gives you the ability to take a portion of the code page out for viewing and editing. If you are a newbie to this, we recommend you to go slow at this and do some small tweaking first.

Q. Why can't I see my CSS changes?

A. You have to be logged in to view YOUR CSS. Also, make sure that when you do make a change to your code, you use the "Update CSS Stylesheet" which will SAVE your work.

A good suggestion is to create/copy your CSS code to Word, WordPad or Notepad and file it so that you have a copy available. That's too much code to lose in case of an accident!

Q. I don’t like the changes I made, what can I do?

A. By selecting the option "Do Not Use CSS" after the question, "How do you want the customization to affect your browsing at Artistopia?" you in fact turn off the code you created and return to the default setting of a normal Artistopia page. You must then Update CSS Stylesheet for the final step.

Q. Where can I get more help?

A. For further reading to enhance your profile, please see the Web Links for more information. Again, Artistopia does not offer support for the use of CSS - it's just here for you to use as you have time or inclination. Questions sent via Member Support or contacting Artistopia, we are sad to say, will NOT be entertained. Discussion, questions, tips, and suggestions may be generated within the Artistopia message boards - Members and especially Staff responses are “at-will”.

To find if your question or comment about CSS is already under discussion in the message boards, use the available "Search Forum Posts" within the message board area.

Check here periodically for updates. As the community discovers and shares ideas and tips, regular items will come up which may then be included in this Help area. Have fun and we look forward to seeing your creations!