Changing the vertical line on front page

[Davenrothz]

Site: www.CareerProfessionals.info

How does one change the vertical line, or get rid of it altogether?

Once I changed the width of it, this vertical bar appeared on the site. I've tried removing certain GIF's and other files to identify what file it was, but no luck so far!

I'm new and not very saavy with forums at all, so please be gentle!

[Marc]

What width should the board have? If you tell me the width you want, I will modify the images and css and send you a customized version of proFormell.

Regards, Marc

[Davenrothz]

Oh, I can edit the CSS files and make all the modifications... I'm not that lazy! If you just tell me where to go and what line to remove, I'll photoshop it or do whatever I need to!

here's the bar I want removed from http://www.CareerProfessionals.info:



But if it's too complicated for me, I would be more than happy to receive those files

Thanks!

[Marc]

Well, just modify the bg_body.gif in the proFormell/theme/images folder to reflect your desired width.
The width of the outside border can be controlled with this part of the colours.css:

Code: Select all

.outside {
   margin: 0 auto;
   width : 950px;
   }

The width of the forum itself is controlled by this part in the common.css:

Code: Select all

#wrap {
	padding: 0 20px;
	width: 862px;
	margin: 0 auto;
	min-width: 650px;
}

But you probably already knew that.

[Davenrothz]

Believe it or not, I actually knew that! scary thought

This is what I have I have in my colours.css & common.css already (and refreshed all my stuff as well in ACP):

Code: Select all

.outside {
   margin: 0 auto;
   width : 1200px;
   }

I then have this in my common:

Code: Select all

#wrap {
	padding: 0 20px;
	margin: 0 auto;
}

The width of the forum is perfect and I finally like the layout. However, that pesky dark vertical bar appears in the background. I thought it might've been a GIF/PNG/JPG somewhere in the images, but I couldn't find one that seemed to match it. If I had found the file, I was simply going to create a transparant replacement image with the size of 1 pixel by 1 pixel, that way it doesn't show up anymore.... but of course I couldn't find it. I scoured the CSS files in a meager attempt to make sense of it all, but alas I could not.

Am I missing something?

[Davenrothz]

I changed the GIF from 950x8 to 1200x10, but that pesky dark bar is still there.

[Marc]

Try the following:

Open common.css and find:

Code: Select all

    #wrap {
       padding: 0 20px;
       margin: 0 auto;
    }

And replace it with this:

Code: Select all

    #wrap {
       padding: 0 20px;
       width: 1175px;
       margin: 0 auto;
       min-width: 650px;
    }

[phpbb3user]

ScreenShot003.jpg (2.03 KiB) Viewed 33834 times

Hi Mark,

I'd like to change the frame width to 1px (1line) of the main display topic. Can you show me how ?

Thanks

[Marc]

Try this:

Open common.css
Find:

Code: Select all

.forabg {
	background: #b1b1b1 none repeat-x 0 0;
	margin-bottom: 4px;
	padding: 0 5px;
	clear: both;
}

.forumbg {
	background: #ebebeb none repeat-x 0 0;
	margin-bottom: 4px;
	padding: 0 5px;
	clear: both;
}

Replace with:

Code: Select all

.forabg {
	background: #b1b1b1 none repeat-x 0 0;
	margin-bottom: 1px;
	padding: 0 1px;
	clear: both;
}

.forumbg {
	background: #ebebeb none repeat-x 0 0;
	margin-bottom: 1px;
	padding: 0 1px;
	clear: both;
}

[phpbb3user]

After change common.css according your code. Here is result

ScreenShot001.jpg (2.99 KiB) Viewed 33818 times

How to change horiontal line to 1px ?

Again, Thank for your response