Welcome Guest [Log In] [Register]
We hope you enjoy your visit.

You're currently viewing our forum as a guest. This means you are limited to certain areas of the board and there are some features you can't use. If you join our community, you'll be able to access member-only sections, and use many member-only features such as customizing your profile, sending personal messages, and voting in polls. Registration is simple, fast, and completely free.


Join our community!


If you're already a member please log in to your account to access all of our features:

Username:   Password:
Add Reply
Change Areas of the Skin Using Javascript
Topic Started: Feb 23 2006, 11:09 AM (8,988 Views)
Nicola Feb 23 2006, 11:09 AM Post #1
.....

 Using Javascript to change specific areas of your skin

Have you ever made the perfect skin, only to find that in one area it doesn't work like it should?
Then this guide could be for you. Using this simple javascript code you can change one of the CSS properties for a specific area of the site.
The main problems people encounter is the tableborder in the portal, or the calendar text not fitting on the current maintitle.

This simple code can change that for you, just follow the steps to found out how:

Quote:
 

</style>
<script language='javascript'>
if ( location.search.indexOf('  The area of the skin you want to change ')!=-1) {
document.write("<style>.CSS Class{ All the new changes you want to make to the CSS area you have selected  }</style>")}
</script>
<style type="text/css">


You must place that at the end of your CSS.

Now for the explanation:

Quote:
 
if ( location.search.indexOf('  The area of the skin you want to change ')!=-1)

In the bolded area you need to put the area of the site you want to change. The tricky part is figuring out what to put in there. However the common areas are:

Quote:
 
act=calendar
act=members
act=site
showtopic
act=Post&CODE
act=UserCP&CODE
act=Msg&CODE


You can probably tell that those change the calendar, members, portal, topic viewing etc.

Quote:
 


Basically the area you need to insert into the above javascript line is the end of the URL of the area you want to change.

Once you have added the area you want to change to the code, you need to insert the CSS Class and give it the new 'instructions'.

For this example I shall change the maintitle of the topic viewing:

Quote:
 

</style>
<script language='javascript'>
if ( location.search.indexOf('showtopic')!=-1) {
document.write("<style>.maintitle { background-image: url( image url would go here  ); }</style>")}
</script>
<style type="text/css">


That code would simply change the background image of the maintitle for the topic viewing. If you wanted to change the text alignment or text colour you would have to add those extra properties in.

If you wish to use the javascript code more than once, you can set it out in the following way:

Quote:
 
</style>
<script language='javascript'>
if ( location.search.indexOf('showtopic')!=-1) {
document.write("<style>.maintitle { background-image: url( image url would go here  ); }</style>")}
if ( location.search.indexOf(' new area ')!=-1) {
document.write("<style>.maintitle { background-image: url(  image url would go here    ); }</style>")}
</script>
<style type="text/css">


The bolded area is the new addition, you do not need to keep adding the javascript and CSS tags. This is simply a tidier way of organising your javascript.

Using a DIV anywhere?

If you are using 'div.tableborder' or some sort of 'div' code, you need to add the 'div.' in front of the CSS class.
e.g
Quote:
 
document.write("<style>div.maintitle { background-image: url( image url would go here  ); }</style>")}


Of course it depends whether you have used it, or if the div affects your chosen page or not. This is just a note to explain why it may not work if you have used a 'div' and what to do. If you have used the div.tableborder code you need to use 'div.tableborder' in the CSS class in the javascript too for it to change.

Note:

  • This guide explains how to use a 'div' in your CSS. You may find it easier to use a 'div' to change something rather than Javascript, however div's dont always change the area you want. It is however, cleaner to use a div rather than a piece of javascript.
  • View This Topic for details on how to fix unreadable areas of the portal.
  • It is widely acknowledged that large quantities of Javascript can slow a site down for users with slow internet connections, so try not to overload your skin with it.
Offline Profile Quote Post Goto Top
 
1 user reading this topic (1 Guest and 0 Anonymous)
« Previous Topic · Skinning Documentation · Next Topic »
Add Reply