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! > Center Content Box design question
-Asiria- (New Admin) 10/25/2008 2:28 PM EST : Center Content Box design question

-Asiria-
Posts: 226
Fingers of Fury!

I would like to keep the left and right content boxes as thier default. However for the center I would like to use one scroll parchment as the background image for all the center content with a divider separating the content title boxes. Basicly, so that the image would be a seemless parchment with muliple content title boxes. My question is how do i get this to work so that I do not get one image of my scroll per content title.


eg.

center content background image start

Welcome.....

-------------

News....

-------------

about us...

center content background image end


Hope I didnt confuse the question too much..

Thanks for any help in advance
TopBottom

Rhiannanna (Guild Admin) 10/25/2008 10:49 PM EST : RE: Center Content Box design question
Rhiannanna
Posts: 1501
Zomgawsh Poster

errrrrrrrrrrm only way i can think of doing this is to have the scroll as your background image, and 'transparent' content boxes...., there is a way of doing this damned if i can remember i'm afraid...


TopBottom

Mottie (MVP) 10/27/2008 7:11 AM EST : RE: Center Content Box design question
GuildPortal MVP
Mottie
Posts: 3884
Zomgawsh Poster

Hi Asiria!

I put together some code which I think is what you are describing... Here is a screenshot




Setting up the site:

  • Fix the column widths:

    With this design, the middle is 450 pixels wide and both sides are 175 pixels width for a total width of 800 pixels. This is where you set this values in the control panel

    Overall page:

    Control Panel > Style & Colors > Page Style > Page Body Tab

    Content Area Width: 800px
    Content Area Alignment: Center
    Content Box Background: ignore this, you set it in the CSS



    Each Tab: (this example is just for the Home tab)

    Control Panel > Site Pages > (Home) - Display Options

    Left Pane Width: 175px
    Center Pane Width: 450px
    Right Pane Width: 175px

  • Make a Footer Area

    Control Panel > Style & Colors > Footer (under Advanced Style Settings in the right side panel)

    Add this line at the top, enable and save changes.

    <div class="FooterArea"></div>
The CSS:

I don't know if you have started using your custom stylesheet, so I'll include all the CSS I used in the example.
Control Panel > Style & Colors > Custom StyleSheet (under Advanced Style Settings in the right side panel)
Copy the CSS below and paste it into the Custom StyleSheet area, check the "Enable" box and Save.
html, body, div, p, td, form, img, h1, h2, h3, h4, h5, h6, input, select {font-family: Verdana,Tahoma,Segoe,sans-serif;font-size: 9pt;}
body {background-color: #222; color:#000;}
form {padding: 3px;border: none;}
img { border: none; }
hr { color: #2d2d2d; }
 table { color: #2f17000;font-family: Verdana, Tahoma,Segoe,sans-serif;font-size: 9pt; }
.MessageAuthorLinkCell1{width: 135px;}
.MessageAuthorInfoCell1{text-align: center;width: 135px;vertical-align: top;}
.ContentBoxTitle {color: #2f17000;margin-top: 0px;padding-top: 0px;}
.StateBar {background-color: transparent; color: #dddddd; text-align: center;padding: 5px;}
.TabBar {background-color: transparent; padding: 0px; margin:auto; width:700px; }
.SelectedTab {background-color: #2d2d2d;color: #daca92;border: solid 1px #2d2d2d;border-color: #2d2d2d;text-align: center;padding: 2px;}
.UnSelectedTab {background-color: #000000;color: #daca92;border: solid 1px #2d2d2d;text-align: center;cursor: pointer;padding: 2px;}
.UnSelectedTabMo {background-color: #2d2d2d;color: #daca92;border: solid 1px #2d2d2d;border-color: #2d2d2d;cursor: pointer;text-align: center;padding: 2px;}
.MoGridRow { text-align: left; }
.AltGridRow{background-color: #222222;color: #daca92;}
.NormGridRow{background-color: #111111;color: #daca92;}
.ContentBox {background-color: #000000;border: solid 1px #2d2d2d;}
.ContentBoxTitle {padding: 5px;background-color: #2d2d2d;color: #daca92;}
.ContentBoxBody {background-color: #000000;color: #daca92;padding: 5px;}
.ContentTable { background-color: #000000;color: #daca92;font-family: Verdana,Tahoma,Segoe,sans-serif;font-size: 9pt;}
a:active {color: #c8c8e8; text-decoration: none;}
a:link {color: #c8c8e8; text-decoration: none;}
a:hover {color: #c8c8e8; text-decoration: underline;}
a:visited {color: #c8c8e8; text-decoration: none;}


.CenterContentZone {padding: 0px 30px;}
.CenterContentZone .ContentBox {background-color: transparent; border: 0px;}
.CenterContentZone .ContentBoxTitle {padding: 5px;background-color: transparent; color: #2f1700; font-weight:bold;}
.CenterContentZone .ContentBoxBody {background-color: transparent; color: #2f1700; padding: 5px; border: #000000 0px solid; border-bottom-width:1px;}
.CenterContentZone .ContentTable { background-color: transparent; color: #2f1700;font-family: Verdana,Tahoma,Segoe,sans-serif; font-size: 9pt;}
.CenterContentZone .ForumCategoryHeader {background-color: #000000; color: #daca92; border: #2d2d2d 1px solid; padding: 0px 5px; margin: 1px;}
.CenterContentZone .MoGridRow {background: #cccccc; text-align: left; }
.CenterContentZone .AltGridRow {background: transparent; color: #2f1700;}
.CenterContentZone .NormGridRow {background: transparent; color: #2f1700;}
.CenterContentZone a:active {color: #3d1f1f; text-decoration: none;}
.CenterContentZone a:link {color: #2f1700; text-decoration: none;}
.CenterContentZone a:hover {color: #ffffff; text-decoration: none;}
.CenterContentZone a:visited {color: #9d4f4f; text-decoration: none;}

#ctl00_ContentPlaceHolder1_ContentRow {background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/scrolltop-2.gif) center top no-repeat;}
#ctl00_ContentPlaceHolder1_ContentTable {background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/scrollmiddle-1.gif) center top repeat-y; }
.FooterArea {background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/scrollbottom-1.gif) center top no-repeat; height: 176px;}
Customizing
  • The CSS in grey is the CSS for the side content boxes.

  • The CSS starting with ".CenterContentZone" styles the center column with the scroll background image

  • The CSS in blue is where the background color is defined... almost all are "transparent" to allow the background image to show through.

  • The CSS in green is where the horizontal line is defined that separates each box

  • The CSS in orange is the URL to the background images (the scroll)

TopBottom

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