Sign Up! Login: Password: New User? Forgot? Support
Top Mods!
Wowhead Search
by sonofsamedi
Digital Clock
by Wolfar15
Admin Forums
Welcome to the GuildPortal Help Community! These forums are for admin-to-admin help.
Available Forums
Forums : Pimp My Site! > Hiding one or more content box borders
Mottie (MVP) 8/11/2008 8:41 AM EST : Hiding one or more content box borders
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster


*NOTE*This is an older post about how to hide content box borders. Don't bother with this post anymore as there is an easier way to do this without using javascript!! Please read "How to have a different style for each content box"



Limitations

  • This script will ONLY HIDE the box borders, I'll have to work on another version to replace the borders with CSS you defined - it's going to be a lot of work, so don't expect that any time soon. But you can always replace the background image or change it's color.

  • This script looks for the Title of the box border that you want to hide, so if you tell it to hide "News" it will hide ALL box borders with "News" in the title: "News", "GuildPortal News", "Game News" and "Guild News", etc. If you only want to effect specific box border make sure you give it a unique name.

  • This script also looks for image names that contain "top", "bottom", "left" and "right" inside the content box. So, if you have a screen shot name "leftinthedust.jpg", it'll probably get hidden. Sorry, but you'll need to rename it if you plan on using this.

  • If it looks like the script didn't do anything to your site, then you may have used Custom HTML for your box borders. Read the instructions below in the "Troubleshooting the Script" section to see how to get around that.

Adding the Script

I recommend copying (Ctrl-C) the following code into a "Free Form Text/HTML" box on the page you want to modify - make sure you are in HTML mode () when you paste (Ctrl-V) it.

You could add it to your header or footer, but be warned, it may hide box borders you don't want changed.
<style type="text/css">
.ContentBox2 { color: #ffffff; background-color: transparent; border: 0px; padding: 0px; }
.ContentBoxTitle2 { color: #ffffff; background-color: transparent; font-weight: bold; text-align: center; border: 0px; margin: 0px; padding: 0px; }
.ContentBoxBody2 { color: #ffffff; background-color: transparent; padding: 5px; }
.ContentBoxBody2 a:link, a:visited { color: #ffcc00; text-decoration: none; }
.ContentBoxBody2 a:hover { color: #ffffff; text-decoration: none; }
.blank { background-color: transparent; }
</style>
<script src="http://www.axiomfiles.com/Files/243007/hideborders-v1.js"></script>
<script type="text/javascript">$(document).ready(function() {
 hideBorder("Welcome|News");
});
</script>

Customizing the Script

  • Please read through the limitations of this script.

  • The script starts out with some CSS. Edit the colors and fonts of this CSS to match your site (in blue). If you don't want to make the background transparent, you could always pick a color, add a different color border or even a different background image.

  • I uploaded the script to my guildportal files. I don't know if there is a bandwidth limit on it (it may not always be paid, but it should be there), so if you want to copy the file and upload it to your site: http://www.axiomfiles.com/Files/243007/hideborders-v1.js

  • Decide which content box borders you want to hide/modify and add the names (in red).

    hideBorder("Welcome|News");

    • Add more than one name by adding a "|" between each title (shift-\ it's above the enter key). The example above will hide the box borders of content boxes titled with "Welcome" and content boxes titled with "News"
    • The names ARE NOT specific. "News" will hide borders of content boxes named "News", "GuildPortal News" and "Game News". Rename the content box if required.
    • The box names ARE case sensitive. "News" will get hidden, but not "news".
    • Hide ALL the box borders by using "#all"
    • Hide a COLUMN of box borders by using "#left", "#center" or "#right".

Troubleshooting the Script

If you install this script and it's not working, it's probably because you used custom box borders.

Custom CSS/HTML (from me)

First off, if you've ever used any of my custom box border HTML (this post), you'll need to add this to each box border HTML*. The script needs to see a table named "ContentBox" surrounding the entire content box. GuildPortal's default HTML is already set up this way, but I removed it in my custom version, sorry =(
  • Go to:

    Control Panel > Style & Colors > Content Boxes > Custom HTML (left side menu)

  • Into each custom HTML box (left, center and right), add this HTML to the TOP

    <table class="ContentBox" border="0" cellspacing="0" cellpadding="0" width="100%"><tr><td>

  • then add this to the BOTTOM.

    </td></tr></table>

  • click Save.
* Note: I've edited my original custom HTML boxes (in most of the posts) to reflect this change. Sorry again.

Custom CSS/HTML (your own)

This script can't cover every situation, so I built in this custom images feature.
  • Find the file names of the specific border images that aren't being hidden

  • Modify the above script as follows:

    hideBorder("Welcome|News","image1.gif|image2.gif")

  • As before, add a "|" between each image file name.

  • The entire URL is not required, in fact if you named your images with a similar name, just add the base name.

    Example:
    top left corner:
    "myborders-TLCorner.gif"
    top middle (repeated):
    "myborders-top.gif
    top right corner:
    "myborders-TRCorner.gif"

    The base name in this case would be "myborders", just use that in the custom image parameters like this:

    hideBorder("Welcome|News","myborders")
If you have any problems setting this up, please post your issues here (along with your site address) and I'll look into it.

Edit: Added the CSS for styling links that would be inside the box... the a:link, a:visited and a:hover are bolded so you can see.
TopBottom

Mottie (MVP) 8/13/2008 12:26 PM EST : RE: Hiding one or more content box borders
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

I wanted to add an example:

Before


After

The Title and borders of the "Navigation" and "Site Style" boxes are hidden.

The only change in the CSS is in blue
<style type="text/css">
.ContentBox2 { color: #ffffff; background-color: transparent; border: 0px; padding: 0px; }
.ContentBoxTitle2 { display:none; }
.ContentBoxBody2 { color: #ffffff; background-color: transparent; padding: 5px; }
.ContentBoxBody2 a:link, a:visited { color: #ffcc00; text-decoration: none; }
.ContentBoxBody2 a:hover { color: #ffffff; text-decoration: none; }
.blank { background-color: transparent; }
</style>
TopBottom

Gax_DDO (New Admin) 9/25/2008 11:41 AM EST : RE: Hiding one or more content box borders
Gax_DDO
Posts: 396
Fingers of Fury!

I seem to have a problem:


BEFORE:


AFTER:



It is chopping off my images.
Any hope for this?

This is my Custom CSS:

#box_Welcome { background: transparent; border:0px; }
#box_Welcome .ContentBoxTitle { background: transparent; color: #ffffff; font-size:12pt; }
#box_Welcome .topleft { background: url(http://www.axiomfiles.com/Files/99994/TL2.png) bottom right no-repeat; width:35px; height:22px; padding-left:6px; }
#box_Welcome .topright { background: url(http://www.axiomfiles.com/Files/99994/TR2.png) bottom left no-repeat; width:35px; height:22px; padding-right:101px; }
#box_Welcome .lefttile { background: transparent url(http://www.axiomfiles.com/Files/99994/LS2.png) right top no-repeat; width:36px; }
#box_Welcome .righttile { background: transparent url(http://www.axiomfiles.com/Files/99994/RS2.png) left top no-repeat; width:36px; padding-right:95px; }
#box_Welcome .ContentBoxBody2 { background: transparent url(http://www.axiomfiles.com/Files/99994/wbackground.png) left top no-repeat; padding: 10px 25px; color: #5a4129; }

#box_Links .ContentBoxBody2 { background: transparent url( http://www.axiomfiles.com/Files/99994/links.png) left top repeat-x; padding: 1px 25px; color: #5a4129; }















 

TopBottom

Mottie (MVP) 9/25/2008 12:04 PM EST : RE: Hiding one or more content box borders
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

Ummm, this is an older post about hiding content box borders, and it is very general... this post was made before my post about "How to have a different style for each content box"

So, I'm not sure what you're trying to do with your welcome box... you're defining the borders and now you want to hide them?

If you are using the Content Box Custom HTML from the "different style for each content box" post and you want to hide the box borders of a single content box, use this instead (replace "#box_myBox" with the ID of the content box you want to hide):
#box_myBox {background: transparent; border:0px}
#box_myBox .ContentBoxTitle { background: transparent; color: #ffffff; font-size:12pt; }
#box_myBox .ContentBoxBody, #box_myBox .ContentBoxBody2 {url() }
#box_myBox .topleft, #box_myBox .topright, #box_myBox .lefttile,#box_myBox .righttile { background: url() }


TopBottom

Gax_DDO (New Admin) 9/25/2008 12:15 PM EST : RE: Hiding one or more content box borders
Gax_DDO
Posts: 396
Fingers of Fury!

What I was trying to do was to hide the blue lined border seen in the Before pic and fill in black around the finished graphics with a background.

Is it possible?

Thanks
TopBottom

Mottie (MVP) 9/25/2008 5:56 PM EST : RE: Hiding one or more content box borders
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

Ok Gax,

I still don't know exactly what you're looking for, but there are a few things you need to fix.
  1. Please remove the extra table with the class "ContentBox" that was added around the original Content Box Custom HTML (original in blue, the HTML preventing you from having a transparent background in red). There is already a "ContentBox" class in the second line, so repeating this makes your blue border twice as thick, and your background color on two layers... so if you make the top layer transparent, you'll only see the layer below and not the background image.

    <table class="ContentBox" border="0" cellspacing="0" cellpadding="0" width="100%"><tr><td>

    <div id="box_$block[title]">
    <div class="ContentBox">
    <table border="0" cellspacing="0" cellpadding="0" width="100%">
    <tr>
      <td class="topleft"></td>
      <td class="toptile"><div class="ContentBoxTitle">$block[title]&nbsp;</div></td>
      <td class="topright"></td>
    </tr>
    </table>
    <table border="0" cellspacing="0" cellpadding="0" width="100%">
    <tr>
      <td class="lefttile"></td>
      <td class="ContentBoxBody2">$block[content]&nbsp;</td>
      <td class="righttile"></td>
    </tr>
    </table>
    <table border="0" cellspacing="0" cellpadding="0" width="100%">
    <tr>
      <td class="bottomleft"></td>
      <td class="bottomtile">&nbsp;</td>
      <td class="bottomright"></td>
    </tr>
    </table>
    </div>
    <div class="spacer"></div>
    </div>


    </td></tr></table>

  2. I wasn't sure why you made your welcome box background not repeat, or why you added all that padding on the right side... I'm guessing you didn't want the box to be as wide as the center box. So try this:

    Add this to your CSS:

    #box_Welcome .ContentBox { background:; border:0px; max-width:750px; margin:auto;}
    #box_Welcome .ContentBoxBody { background:; border:0px;}


    Change this in your CSS (in green)

    #box_Welcome .topright { background: url(http://www.axiomfiles.com/Files/99994/TR2.png) bottom left no-repeat; width:35px; height:22px; padding-right:10px; }
    #box_Welcome .righttile { background: transparent url(http://www.axiomfiles.com/Files/99994/RS2.png) left top no-repeat; width:36px; padding-right:5px; }

  3. Oh, and if you want to add some space between your content boxes, add this to your CSS:

    .spacer {height:10px;}
I hope that's the look you're trying to get.


TopBottom

Gax_DDO (New Admin) 9/27/2008 1:56 PM EST : RE: Hiding one or more content box borders
Gax_DDO
Posts: 396
Fingers of Fury!

Ok, I will look it over and compare to your gracious notes.
I obviously smashed it up somewhere experimenting.

LOL, just replaced my 19" sq with a 24" wide HD display. I have no idea why I turned off repeat on that one now. Fixed!

Thanks Mottie
TopBottom

Gax_DDO (New Admin) 9/27/2008 3:34 PM EST : RE: Hiding one or more content box borders
Gax_DDO
Posts: 396
Fingers of Fury!

Ok this is what I Have:


And this is what I am going for:


Threw this together in PS. Hope this clear it up.


I may be confusing some terminology.

Thanks again.

P.S.
I am using the A diffrent style for each content box. here


TopBottom

Mottie (MVP) 9/27/2008 5:44 PM EST : RE: Hiding one or more content box borders
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

Ok sorry,

The bit of CSS I told you to add, I apparently left out the "transparency"... so add the text in green to these two lines:
#box_Welcome .ContentBox { background:transparent; border:0px; max-width:750px; margin:auto;}
#box_Welcome .ContentBoxBody { background:transparent; border:0px;}

TopBottom

Admins Online
There are   members online.
So-and-so has logged on!
%title%
%message%