Ravens PHP Scripts: Forums
 

 

View next topic
View previous topic
Post new topic   Reply to topic    Ravens PHP Scripts And Web Hosting Forum Index -> Themes
Author Message
killing-hours
RavenNuke(tm) Development Team


Joined: Oct 01, 2010
Posts: 438
Location: Houston, Tx

PostPosted: Tue Jan 04, 2011 4:52 pm Reply with quote

Hey all-

I'm attempting to learn how to work with themes but I've got a question for you theme guru's out there. I'm using the simply blue theme as a base to learn from (I like fixed themes) and I'm trying to get an image to repeat down the side of the tables (OpenTable, CloseTable) as a spacer and part of a the a table border. I've been able to get the top and bottom to work... I just haven't been able to figure out the sides. (this is not a CSS border... it's a border made of images)

Code:


---------------------
|                        | <-Say this is the first image repeated down
|                        |
|                        |
|                        |
---------------------


Does anyone know how this could be accomplished?

Here is the code from the theme.php:

Code:
function OpenTable() {

   echo '<div class="centerblocks">';
   echo '<div class="centertopleft"></div>';
   echo '<div class="centerMiddle"></div>';
   echo '<div class="centertopright"></div>';
   echo '<div class="centerblockcontent">';
}

function CloseTable() {
   echo '</div>
   <div class="centerbottomleft"></div>
   <div class="centerMidBottom"></div>
   <div class="centerbottomright"></div>
   </div>
   ';
}



Here is the matching CSS:

Code:
.centerblockcontent {

   padding:10px 6px 6px 6px;
   background:#cee7fa;
   border:1px solid #5a83a1;
}

.centerblockcontent h2 {
   font-size:12px;
}

.centerblockcontent h1 {
   font-size: 14px;
   text-decoration: underline;
   font-weight: bold;
   color: #263a49;
}

.centerblockcontent h2 {
   font-size: 12px;
   text-decoration: underline;
   font-weight: bold;
   color: #263a49;
}

.centerblockcontent h3 {
   font-size: 10px;
   text-decoration: underline;
   font-weight: bold;
   color: #263a49;
}

.centerbottomleft {
   background:url(../images/blockbottom_01.png) bottom left;
   margin-top:-15px;
   width:5px;
   height:15px;
   float:left;
   clear:none;
}

.centerbottomright {
   background:url(../images/blockbottom_04.png) bottom right;
   margin-top:-15px;
   width:5px;
   height:15px;
   float:right;
   clear:none;
}

.centertopleft {
   background:url(../images/blocktop_01.png) top left;
   margin-top:0px;
   width:5px;
   height:15px;
   float:left;
   clear:none;
}

.centertopright {
   background:url(../images/blocktop_04.png) top right;
   margin-top:0px;
   width:5px;
   height:15px;
   float:right;
   clear:none;
}
.centerblocks {
   margin-bottom:5px;
   margin-right:5px;
   margin-left:5px;
}

.centerleft {
   background:url(../images/block_08.png) top left;
   width:2px;
   height:25px;
   float:left;
   clear:none;
}
.centermiddle {
   background:url(../images/block_09.png) repeat-x;
   height:25px;
   width:99%;
   float:left;
   clear:right;
}
.centermiddle span {
   color:#ffffff;
   font-size:16px;
   padding:3px 6px;
   line-height:150%;
   clear:none;
}
.centerright {
   background:url(../images/block_11.png) top right;
   width:3px;
   height:25px;
   float:left;
   margin:0px;
   clear:none;
}


Thanks in advance.

_________________
Money is the measurement of time - Me
"You can all go to hell…I’m going to Texas" -Davy Crockett 
View user's profile Send private message
spasticdonkey
RavenNuke(tm) Development Team


Joined: Dec 02, 2006
Posts: 1692
Location: Texas, USA

PostPosted: Tue Jan 04, 2011 5:42 pm Reply with quote

This is pretty close to what you are looking for. This allows for border images on all 4 sides as well as images for all 4 corners. You would split the html @ "Your Content Here" to create your opentable/closetable functions.

HTML
Code:
<div class="article">

   <div class="article-wrap-left">
   <div class="article-wrap-right">
      <div class="article_top"><div><div>&nbsp;</div></div></div>
      <div class="article_content">
      Your Content Here
      </div>
      <div class="article_bot"><div><div>&nbsp;</div></div></div>
   </div>
   </div>
</div>

CSS
Code:
.article-wrap-left {

margin:0;padding:0;width:100%;
background-image: url(../images/whitedot.png);
background-repeat:repeat-y;
background-position:left top;
background-color: transparent;
}
.article-wrap-right {
margin:0;padding:0;width:100%;
background-image: url(../images/whitedot.png);
background-repeat:repeat-y;
background-position:right top;
background-color: transparent;
}
.article {
background-image: none;
background-color: #eaebe5;
border: none;
}
.article_top div,.article_top div div, .article_top, .article_bot div, .article_bot div div, .article_bot {
   width: 100%;
   height: 40px;
   font-size: 1px;
}
.article_top div {
   background: url(../images/goldtabLT.png) no-repeat top left;
}
.article_top div div{
   background: url(../images/goldtabRT.png) no-repeat top right;
}
.article_top {
background-image: url(../images/whitedot.png);
background-repeat:repeat-x;
background-position:left top;
background-color: transparent;
}
.article_bot div div {
   background: url(../images/goldtabRB.png) no-repeat bottom right;
}
.article_bot div {
   background: url(../images/goldtabLB.png) no-repeat bottom left;
}
.article_bot {
background-image: url(../images/whitedot.png);
background-repeat:repeat-x;
background-position:left bottom;
background-color: transparent;
}



this is a pretty basic example as I used a simple square image for all 4 side borders, but you could get more fancy Smile

Image
 
View user's profile Send private message Visit poster's website
Display posts from previous:       
Post new topic   Reply to topic    Ravens PHP Scripts And Web Hosting Forum Index -> Themes

View next topic
View previous topic
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum
You can attach files in this forum
You can download files in this forum


Powered by phpBB © 2001-2007 phpBB Group
All times are GMT - 6 Hours
 
Forums ©