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! > Invisible the box
pinstripesc (New Admin) 3/28/2012 4:11 AM EST : Invisible the box
pinstripesc
Posts: 4895
Zomgawsh Poster

Heya, last question for awhile..I swear it.

I want to make 2 (currently not existing) freeform HTML boxes with no borders, backgrounds, or titles. The only things showing would be what is in the HTML. I took a look at custom content borders and older posts but couldn't quite get at it.

Thanks as usual
TopBottom

pinstripesc (New Admin) 4/8/2012 6:48 AM EST : RE: Invisible the box
pinstripesc
Posts: 4895
Zomgawsh Poster

Yay/nay/eh? I did some digging and it seems to be a little more complicated due to our custom widget borders already in place, not sure if this new CSS/HTML support for GP should technically make it easier or harder, haha.

So close..!
TopBottom

Sandy Lewis (Blue Collar) 4/9/2012 6:27 PM EST : RE: Invisible the box
GuildPortal Support
Sandy Lewis
Posts: 1153
Zomgawsh Poster

HTML/CSS is Aaron's area, not mine.  I will ask him to drop in and look at this.
Sandy Lewis, GuildPortal Support
Admin Community - FAQ - Videos - Support Tickets
TopBottom

Aaron Lewis (Blue Collar) 4/9/2012 7:03 PM EST : RE: Invisible the box
GuildPortal Dev
Aaron Lewis
Posts: 1978
Zomgawsh Poster

Each widget is rendered with a class of gpWidget and a unique ID. In addition, the body itself is also wrapped in a div with a class of ContentBoxBody and a class cbb[ID], with the ID matching the ID of the widget. So if you view the source and find the widgets you're trying to give a unique appearance to, you find those elements and use them in the "CSS Additions to Standard" area of the control panel to modify their appearance.
Aaron Lewis, GuildPortal.com
TopBottom

pinstripesc (New Admin) 4/13/2012 4:27 AM EST : RE: Invisible the box
pinstripesc
Posts: 4895
Zomgawsh Poster

Ok, ok. Went through the source and found one of my boxes is 15221670, then tried all of these without success -

.ContentBoxBody cbb15221670 {
      background-color: #CC6600;
        border:none;
      font-size: 10px;
      color: #354b82;
    }

.ContentBoxBody cbb15221670 blkContent {

      background-color: #CC6600;
        border:none;
      font-size: 10px;
      color: #354b82;
    }

.gpWidgetTools-15221670 {

      background-color: #CC6600;
        border:none;
      font-size: 10px;
      color: #354b82;
    }

.15221670 {

      background-color: #CC6600;
        border:none;
      font-size: 10px;
      color: #354b82;
    }

.gpWidget-15221670 {

      background-color: #CC6600;
        border:none;
      font-size: 10px;
      color: #354b82;
    }
TopBottom

Mottie (MVP) 4/14/2012 4:15 PM EST : RE: Invisible the box
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

Try this:
.cbb15221670 {
    background-color: #CC6600;
    border:none;
    font-size: 10px;
    color: #354b82;
}
TopBottom

pinstripesc (New Admin) 4/20/2012 8:08 PM EST : RE: Invisible the box
pinstripesc
Posts: 4895
Zomgawsh Poster

Right on, that did it, naturally..

Now I can control the look of the box as far as backgrounds and the like, but can't find a way to overwrite the <td> being set up in the source by our custom box borders -

<tr>               <td style="width:13px;height:29px;background:url(http://www.axiomfiles.com/Files/42293/2011_brdr_btmleft.png) no-repeat;"></td>

  <td style="height:29px;background:url(http://www.axiomfiles.com/Files/42293/2011_brdr_btm.png) repeat-x;">&nbsp;</td>

<td style="width:13px;height:29px;background:url(http://www.axiomfiles.com/Files/42293/2011_brdr_btmright.png) no-repeat;"></td>

</tr>
TopBottom

pinstripesc (New Admin) 5/8/2012 11:21 PM EST : RE: Invisible the box
pinstripesc
Posts: 4895
Zomgawsh Poster

Sorry, shamefully bumping. We're so close to a new homepage I can smell it.
TopBottom

Aaron Lewis (Blue Collar) 5/9/2012 6:56 PM EST : RE: Invisible the box
GuildPortal Dev
Aaron Lewis
Posts: 1978
Zomgawsh Poster

Okay, here's the dizzle. This old content box custom images code makes my eyes bleed, because it was from a time when I didn't know what divs were for. For every single widget that has custom box border images, three (yes, three) tables are rendered. A table to contain the images along the top, a table to contain the images on the sides and the content in the middle, and a table to contain the images along the bottom.

I'm was going to show you CSS selectors that you could use to modify the properties of each table, row, and column, but while fiddling around with the code sample I was going to give you, I realized it wasn't going to work. See, the ID of the widget container (which I was going to use as the base for all the selectors) is numeric. According to the CSS2 spec (and CSS3 since applying the changes isn't working in my browser either)...

...and IDs in selectors) can contain only the characters [A-Za-z0-9] and ISO 10646 characters 161
and higher, plus the hyphen (-); they cannot start with a hyphen or a digit.

- The W3C

So, I'm going to have to change the output so that it puts "gpWidget" before that identifier, and then you'll be able to access the widget containers from the very top with a selector like #gpWidget15221670, which provides the easiest way to navigate down through all the contained child elements. It'll go live this Friday (unless a hotfix pushes it up).

Eventually I'll get to adding an alternative to the current box border images structure, too.
Aaron Lewis, GuildPortal.com
TopBottom

pinstripesc (New Admin) 5/10/2012 2:47 AM EST : RE: Invisible the box
pinstripesc
Posts: 4895
Zomgawsh Poster

Nasty! Ok, well I wait on the update then - much appreciate the response on that Aaron.
TopBottom

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