Differences
This shows you the differences between the selected revision and the current version of the page.
| invisionfree:skinning:portal | invisionfree:skinning:portal 08-24-2009 4:11 pm current | ||
|---|---|---|---|
| Line 1: | Line 1: | ||
| + | ====== Skinning the Portal ====== | ||
| + | <note if>This documentation applies to **InvisionFree** only.</note> | ||
| + | |||
| + | This guide covers how to skin the portal separately from the rest of the forum using CSS. | ||
| + | |||
| + | =====Setting the Width===== | ||
| + | |||
| + | This code should really be used in most skins, however some use the Ipbwrapper class to set the width of the entire forum. | ||
| + | |||
| + | <note important>If you are using the Ipbwrapper to set the width of the forum, it is not recommended that you apply unique properties for the portal only, in the ipbwrapper class. This is because it will also change the properties for the forum itself.</note> | ||
| + | |||
| + | <code>#ipbwrapper { | ||
| + | text-align:left; | ||
| + | width:750px; | ||
| + | margin-left:auto; | ||
| + | margin-right:auto; | ||
| + | }</code> | ||
| + | |||
| + | Add the quoted code to your CSS, and change the **width** entry to the value you wish. You can use percentages (%) instead of pixels (px) to create a fluid layout that will adjust the fill of the portal to the entire page for any resolution. | ||
| + | |||
| + | =====Adding Properties to the Main Portal Table====== | ||
| + | |||
| + | You could also add a background colour or image, and a border to the main Portal table. | ||
| + | |||
| + | <code>#ipbwrapper { | ||
| + | text-align:left; | ||
| + | width:750px; | ||
| + | margin-left:auto; | ||
| + | margin-right:auto; | ||
| + | background-image:url ( IMAGE URL ); | ||
| + | background-color: #HEX; | ||
| + | border: 1px solid #HEX; | ||
| + | padding: left: 0px; | ||
| + | padding-right: 0px; | ||
| + | }</code> | ||
| + | |||
| + | Adding padding to the area will make the border stand out. | ||
| + | |||
| + | You can only add a normal CSS border here, so you can make it 5px solid if you wish, or 3px double, but note that this is not an image border. | ||
| + | |||
| + | If you want to get an image border effect, you can increase the left and right padding, and have a background image that repeats downwards ([i]background-repeat: repeat-y[/i]). This would only work on fixed width portals. | ||
| + | |||
| + | =====Changing Other Areas of the Portal===== | ||
| + | |||
| + | For those skins with creative maintitles, and indented text, the portal might end up looking rather messy in regards to the maintitle. You can edit the portal's maintitles only with this: | ||
| + | |||
| + | <code>#ipbwrapper .maintitle { | ||
| + | text-align: left; | ||
| + | background-image: url( IMG URL ); | ||
| + | padding: 8px 0px 8px 0px!important; | ||
| + | height: 30px; | ||
| + | }</code> | ||
| + | |||
| + | You may, depending on the graphic being used, need to adjust the padding to make the image appear correctly, or to move the text up or down. | ||
| + | |||
| + | ===== Other ===== | ||
| + | |||
| + | You can see from this image the other classes available to edit on the portal. | ||
| + | |||
| + | {{:skinning:if_portal.png?250}} | ||
| + | |||
| + | You can make your CSS specific to the portal by simply adding #ipbwrapper before the class, for example, if you wanted to change the background of the tablepad, you'd use this code: | ||
| + | |||
| + | <code> | ||
| + | #ipbwrapper .tablepad { | ||
| + | background-color: #HEX | ||
| + | } | ||
| + | </code> | ||
| + | |||
| + | You can also use this to change the tableborder area of the portal, which is usually fixed with javascript. CSS is a lot cleaner to use, so simply use: | ||
| + | |||
| + | <code>#ipbwrapper .tableborder{ | ||
| + | background-color: #HEX | ||
| + | } | ||
| + | </code> | ||
| + | |||