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
Portal Missing Its Border
Topic Started: Jul 22 2008, 07:55 PM (738 Views)
fdol
Member
 *   *  
On my forum I have a border but it doesn't show on the Portal. Can someone help me with this please :(

My Forum
Offline Profile Quote Post Goto Top
 
Tony
Member Avatar
If found, please report missing.

Unfortunately image borders can't be implemented onto a portal as there are no wrappers to add the table code to.

The best option you have is to change the colour:
Quote:
 
#ipbwrapper { text-align:left; width: 800px;padding:10px; background-color: #F9F9F9;border:1px solid#53676D; margin-left:auto;margin-right:auto }
Change the bold part to #333

You can view this guide to skinning the portal.

As a side note, the white borders within your posts don't fit well.
Quote:
 
.post1 { background-color: #414141;border-top:1px solid#FFF;border-right:1px solid#FFF; background-image: url(http://) }
.post2 { background-color: #414141;border-top:1px solid#FFF;border-right:1px solid#FFF; background-image: url(http://) }
.postlinksbar { background-color: #F0F0F0; padding: 5px; border-left: 1px solid #DEDBDB; border-right: 1px solid #DEDBDB; margin-top: 1px; font-size: 10px; background-image: url(http://i6.ifrm.com/10293/177/upload/p2385760.png); }
Swap these for a darker colour if you wish. :)
Online Profile Quote Post Goto Top
 
fdol
Member
 *   *  
Thankyou for your assistance but I am very new to the whole skinning thing. Where do I find those codes you mentioned before?
Offline Profile Quote Post Goto Top
 
Codes Rock
Member Avatar
Member
 *   *   *   *  
*#Tony#*
Jul 23 2008, 05:47 AM


The best option you have is to change the colour:
Quote:
 
#ipbwrapper { text-align:left; width: 800px;padding:10px; background-color: #F9F9F9;border:1px solid#53676D; margin-left:auto;margin-right:auto }
Quote:
 
Unfortunately image borders can't be implemented onto a portal as there are no wrappers to add the table code to.


This is not correct. If you look at the code of the Portal, you'll see at the top of the body code a division:

Code:
 
<div id='ipbwrapper'>


As such, this can be edited in the CSS to be displayed anyway you like. Simply adding

Code:
 
background: url('http: //address to image');


will have an image displayed, thus, an image can be used for the border. To show more of the image, as in to create a larger width border, you would simply add

Code:
 
padding: *px;


By changing the * to a number of thickness you want to show.

Pretty simple, actually.

FDOL, in your AdminCP on the left you'll want to look for Skinning & Styles and then click on · Manage Style Sheets

The Style Sheet, or as it's known Cascading Style Sheet or CSS, is where you would add all that fancy code we've been talking about.

There is alot of tutorials on the internet and InvisionFree has good documentation here: http://if.invisionfree.com/forum/31/

and a CSS guide here: http://if.invisionfree.com/topic/6114/1/#new
Offline Profile Quote Post Goto Top
 
fdol
Member
 *   *  
I'm looking at the CSS but I'm really confused at what to edit to what.

I tried looking at the URL's you posted however it just confused me so much more. I'm sorry about this.
Edited by fdol, Jul 23 2008, 08:56 AM.
Offline Profile Quote Post Goto Top
 
Codes Rock
Member Avatar
Member
 *   *   *   *  
Fdol, the CSS (Style Sheet) is a way to tell a visitors computer monitor (or browser, like Internet Explorer or Firefox) how to display the code that you have written.

If you right click on this page, and then click on View Source, or View Page Source (depends on your browser), you will see all the code that it takes to make this page.

If scroll down a little bit you should see on the left of the page a html tag with an id

Code:
 
<div id="submenu">


This is a division (or section) that they have something inside of. In this case, it is the menu bar that has Search Members Calendar FAQ Board Rules (04/30)

If you were to look at their Style Sheet, for the id submenu, you would see:

Code:
 

#submenu {
background:url(http://z3.ifrm.com/static/3/css/topmenu.png) repeat-x top #dee7f5;
border:1px solid #72aaeb;
color:#dee7f5;
font-size:85%;
margin:0 2%;
padding:3px 1% 4px;
text-align:right;
}


Now let me explain what all this means.

#submenu
this is the ID of the division, we know this is an ID for it has a # (pound) sign before it. If it had a . (period), it would have been a class

{
opening bracket

background:url(http://z3.ifrm.com/static/3/css/topmenu.png) repeat-x top #dee7f5;
this tells how the background is to be displayed for the menu bar. So they put background, followed by a colon and then a url (address) of an image. They then go on to tell the browser to repeat the image all the way across the division [repeat-x] and for the browser to ensure the image is displayed all the way to the top of the division [top]. Lastly, in the event the image isn't displayed for some reason, they want the background to at least have a color, so they gave a hex color code of #dee7f5

border:1px solid #72aaeb;
The border line tells the browser to put a border that is 1px thick all the way around the division, in a solid line, and make it the color of #72aaeb

color:#dee7f5;
Color tells the browser what color to display the font, in this case they are asking for #dee7f5

font-size:85%;
font-size is pretty easy to understand, they want the font-size to be displayed 85% of the size of the regular font size for the page

margin:0 2%;
here they are wanting some space placed around their division, in this case they have 0 followed by a 2%. This means they want zero space on the top and bottom of the division, but 2% space on the left and right sides

padding:3px 1% 4px;
padding is for space inside the division, and you can see the want 3px at the top, 1% on the sides and 4px on the bottom

text-align:right;
now this is easy to understand as well, for they want the text to be aligned, or on the right side of the division

}
finally, this is the closing bracket telling the browser that we have finished telling it how to display the submenu

I hope this helps a little. Remember, study a little and in no time you'll be reading code just like others read comic books!
Offline Profile Quote Post Goto Top
 
Tony
Member Avatar
If found, please report missing.

Codes Rock
Jul 23 2008, 08:19 AM
This is not correct. If you look at the code of the Portal, you'll see at the top of the body code a division:

Code:
 
<div id='ipbwrapper'>
To achieve the border effect around the board a table is added into the board wrappers.

The portal has no wrappers and is not controlled by the board wrappers.

Placing a background image on ipbwrapper is futile, boards get longer with more categories and there would be no border at the bottom.

The effect used on the board uses td tags to repeat an image for the height of the board.

As I assume the padding you mentioned was taken from Nicola's guide that is a work around to the no image issue.

@fdol, see my first post. In your CSS search for the lines I have quoted and edit what I have in bold to change to colour.
Online Profile Quote Post Goto Top
 
Codes Rock
Member Avatar
Member
 *   *   *   *  
Take a look at this http://z4.invisionfree.com/HMIS_Example2/index.php?act=site

This is a weak example of what I was talking about in what a person can do.

You can add html in the Affiliates box in the IP Dynamic Lite Setup.
Offline Profile Quote Post Goto Top
 
Tony
Member Avatar
If found, please report missing.

Yes, the image there is a background image.

What this person is after is the same borders on the board itself. This is not possible.

I know all about the affiliates box, adding the table code to this will have an undesired effect on the portal.

If someone wishes to have their portal at a set height, not adding posts or affiliates etc then a background image and a play with the margins will give us the fancy image border. However, fdol has affiliate images so if more are added or some removed the background image would need to be re-created.

@fdol, I appologise for destroying your support topic. If you require further assistance please let us know.

@Codes Rock, this discussion may be best kept to PM's.
Online Profile Quote Post Goto Top
 
fdol
Member
 *   *  
Ok then so whose advice do I follow now O_o
Edited by fdol, Jul 24 2008, 12:12 AM.
Offline Profile Quote Post Goto Top
 
Codes Rock
Member Avatar
Member
 *   *   *   *  
fdol
Jul 24 2008, 12:12 AM
Ok then so whose advice do I follow now O_o
*#Tony#*'s
Offline Profile Quote Post Goto Top
 
1 user reading this topic (1 Guest and 0 Anonymous)
« Previous Topic · zIFBoards - Skinning & Code Support · Next Topic »
Add Reply