The secure CMS.

Welcome to Geeklog, Anonymous Monday, November 25 2024 @ 02:52 pm EST

Geeklog Forums

Axonz Expandable ContentBox Hack

 New Topic  Post Reply
 01/24/04 10:03am (Read 4,083 times)  
Status: offline

Turias

Forum User
Full Member
Registered: 10/20/03
Posts: 807
I've hacked at the Axonz theme to allow for a centerblock that expands depending on which blocks are shown. It was tricky and involved using Javascript to dynamically change the class of the contentbox depending on which blocks are showing.

Wooge, feel free to take any of this code and incorporate it into your own, if you wish.

I've only found one problem: If a story has an image inside of it with an align attribute of "right", and if that image extends beyond that boxes content, causing the story footer's clear:both attribute to kick in, IE 6 will ignore the margin-left attribute of contentblock, causing the left gray border to extend beyond the left blocks.

A fairly small problem, but I would be really interested in knowing how to fix it.

So, I would appreciate any feedback. Let me know if it fixes any of the incompatibilities that the original Axonz theme had. Also, let me know if it introduces any new problems.

Finally, Wooge, a sincere thanks for releasing the greatest theme for Geeklog that I have encountered!


Installation:

If you would like to try out my modification, you first need to download The X Library at CrossBrowser.com and include the x.js file in the Axonz folder.

Then, change the files that I modified, which are below:

style.css:
Text Formatted Code
/*
====================================================================================
THEME VERSION:  3.2
IMPORTANT NOTES:

800 x 600 USERS - NOTE!
If you want your site to be 800x600 compatible, change the 'width' value of the 'contentblock'
style (under the layout options), to 55% or less. For 1024x768 or higher, use 60%

If you continue to experience problems running at 800x600, make the width value less. eg. 50%

IMAGES - NOTE!
I placed all the image references in the following file to make changing
the paths easier. So i have to import this file:
====================================================================================


====================================================================================
REDEFINED HTML OBJECTS
====================================================================================
*/

@import url(images.css);

a
{
        font-weight: bold;
        color: #4A4A4A;
        text-decoration : none;
}

a:hover
{
        color: #CC0000;
        text-decoration : none;
        text-shadow: 0 0 0.2em #F00;
}

body
{
        color: #444444;
        font-family: "Lucida Grande", Helvetica, Arial, sans-serif;
        margin-left: 0px;
        margin-right: 0px;
        margin-top: 0px;
        margin-bottom: 0px;
        background-color: #FFFFFF;
}

ul
{
        margin: 0 0 0 0;
        padding: 0 0 0 1.5em;
        list-style: disc outside;
}

li
{
        margin: 0 0 0 0;
        padding: 0 0 0 0;
}

td
{
        font-family: "Lucida Grande", Helvetica, Arial, sans-serif;
        font-size: 12px;
}

th
{
        font-family: "Lucida Grande", Helvetica, Arial, sans-serif;
        font-size: 12px;
        font-weight: bold;
}


h1
{
        font-size: 14px;
        font-family: "Lucida Grande", Helvetica, Arial, sans-serif;
}

h2
{
        font-size: 12px;
        font-family: "Lucida Grande", Helvetica, Arial, sans-serif;
}

h3
{
        font-size: 11px;
        font-family: "Lucida Grande", Helvetica, Arial, sans-serif;
        font-weight: bold;
}

option
{
        font-size: 11px;
        font-family: "Lucida Grande", Helvetica, Arial, sans-serif;
}

textarea
{
        font-size: 11px;
        font-family: "Lucida Grande", Helvetica, Arial, sans-serif;
}

select
{
        font-size: 11px;
        font-family: "Lucida Grande", Helvetica, Arial, sans-serif;
}

input, submit
{
        font-size: 11px;
        font-family: "Lucida Grande", Helvetica, Arial, sans-serif;
}


/*
====================================================================================
LAYOUT OPTIONS - Styles to replace Table Formatting
====================================================================================

800 x 600 USERS - NOTE!
If you want your site to be 800x600 compatible, change the 'width' value of the 'contentblock'
style, to 55% or less. For 1024x768 or higher, use 60%

If you continue to experience problems running at 800x600, make the width value less. eg. 50%

*/

.page-float {
        float:left;
}

#centerblock {
        border: solid black 1px;
        height: 100%;
}


#leftblocks {
        position: absolute;
        top: 130px;
        left: 0px;
        width: 175px;
        margin-top: 5px;
        margin-left: 10px;
        margin-bottom: 20px;
}

#contentblock
{
        width: auto;
        font-size: 12px;
        padding:        15px;
        margin-top: 5px;
        margin-left: 200px;
        margin-bottom: 20px;
        margin-right: 250px;
        border-top:     #DDDDDD;
        border-right:   #EEEEEE;
        border-bottom:  #EEEEEE;
        border-left:    #DDDDDD;
        background: #FAFAFA;
        border-width: 1px 1px 1px 1px;
        border-style: solid;
}

#contentblocknoleft
{
        font-size: 12px;
        width: auto;
        padding:        15px;
        margin-top: 5px;
        margin-left: 20px;
        margin-bottom: 20px;
        margin-right: 250px;
        border-top:     #DDDDDD;
        border-right:   #EEEEEE;
        border-bottom:  #EEEEEE;
        border-left:    #DDDDDD;
        background: #FAFAFA;
        border-width: 1px 1px 1px 1px;
        border-style: solid;
}

#contentblocknoright
{
        font-size: 12px;
        width: auto;
        padding:        15px;
        margin-top: 5px;
        margin-left: 200px;
        margin-bottom: 20px;
        margin-right: 20px;
        border-top:     #DDDDDD;
        border-right:   #EEEEEE;
        border-bottom:  #EEEEEE;
        border-left:    #DDDDDD;
        background: #FAFAFA;
        border-width: 1px 1px 1px 1px;
        border-style: solid;
}

#contentblocknoblocks
{
        font-size: 12px;
        width: auto;
        padding:        15px;
        margin-top: 5px;
        margin-left: 20px;
        margin-bottom: 20px;
        margin-right: 20px;
        border-top:     #DDDDDD;
        border-right:   #EEEEEE;
        border-bottom:  #EEEEEE;
        border-left:    #DDDDDD;
        background: #FAFAFA;
        border-width: 1px 1px 1px 1px;
        border-style: solid;
}

#rightblocks
{
        position: absolute;
        top: 130px;
        right: 0px;
        width: 175px;
        margin-top: 5px;
        margin-left: 20px;
        margin-bottom: 20px;
}

#whats-related-options
{
        position: absolute;
        top: 130px;
        right: 0px;
        width: 175px;
        margin-top: 5px;
        margin-left: 20px;
        margin-bottom: 20px;
}

#footerblock {
        background-color: #666666;
        clear: both;
        visibility: hidden;
}


/*
====================================================================================
HEADER OPTIONS
====================================================================================
*/

.sitebanner-left {
        font-size: 30px;
        color: #FFFFFF;
        font-family: "Lucida Grande", Helvetica, Arial, sans-serif;
        padding-top: 0px;
        padding-bottom: 0px;
        padding-right: 0px;
        text-align: left;
        height: 80px;
        font-weight: bold;
        letter-spacing: 0px;
        float: left;
}

.sitebanner-right {
        font-size: 11px;
        font-family: "Lucida Grande", Helvetica, Arial, sans-serif;
        height: 80px;
        padding-right: 20px;
        text-align: right;
        vertical-align: middle;
        white-space: nowrap;
}

.headertext {
}

#header-textbar {
        padding-top: 20px;
        padding-left: 20px;
        padding-right: 20px;
        height: 30px;
        background-color: #666666;
        vertical-align: middle;
}

.header-datestamp {
        color: #EEEEEE;
        font-size: 9px;
        font-family: "Lucida Grande", Helvetica, Arial, sans-serif;
        text-align: left;
        white-space: nowrap;
        float: left;
}

.header-links
{
        color: #EEEEEE;
        font-size: 11px;
        font-family: "Lucida Grande", Helvetica, Arial, sans-serif;
        text-align: right;
        white-space: nowrap;
}
.header-links a { color: #FFFFFF; }
.header-links a:hover { color: #CC9999;}


#header-imagebar
{
        clear: both;
}



/*
====================================================================================
STORY OPTIONS
====================================================================================
*/

.story-header
{
        width: 100%;
        height: 25px;
        border-bottom-color: #999999;
        border-bottom-style: solid;
        border-bottom-width: 1px;
        margin-bottom: 4px;
}

.story-date
{
        color: #777777;
        font-size: 10px;
        font-family: "Lucida Grande", arial, sans-serif;
        white-space: nowrap;
        float: left;
        vertical-align: middle;
}
       
.story-options
{
        color: #888888;
        font-size: 10px;
        font-family: "Lucida Grande", arial, sans-serif;
        text-align: right;
        white-space: nowrap;
        float: right;
}


.story-body
{
        clear: both;
        white-space: nowrap;
}

.story-image
{
        width: 50px;
        float: left;
        margin-top: -2px;
}

.story-text
{
        color: #888888;
        font-size: 11px;
        font-family: "Lucida Grande", arial, sans-serif;
        margin-top: 5px;
        margin-left: 50px;
        white-space: normal;
}

.storytitle {
        color: #000000;
        font-size: 18px;
        font-weight: bold;
        font-family: "Lucida Grande", Helvetica, Arial, sans-serif;
        text-shadow: 0.25em 0.2em 0.25em gray;
}

.storybyline {
        font-size: 11px;
        font-family: "Lucida Grande", arial, sans-serif;
}

.story-block {
}

.storycontent {
        color: #333333;
        font-size: 11px;
        font-family: "Lucida Grande", Helvetica, Arial, sans-serif;
        line-height: 16px;
        padding-top: 10px;
        padding-bottom: 20px;
}

.storyinfo {
        color: #888888;
        font-size: 11px;
        font-family: "Lucida Grande", Helvetica, Arial, sans-serif;
}


.featuredstorytitle {
        color: #CC0000;
        font-size: 18px;
        font-weight: bold;
        font-family: "Lucida Grande", Helvetica, Arial, sans-serif;
        padding-top: 3px;
        text-shadow: 0.25em 0.2em 0.25em gray;
}



.welcomeblock {
        color: #000000;
        font-size: 11px;
        font-family: "Lucida Grande", Helvetica, Arial, sans-serif;
        padding-top:2px;
        padding-bottom:2px;
        padding-left:2px;
        padding-right:2px;
}

.story-footer {
        font-size: 11px;
        font-family: Arial, Helvetica, sans-serif;
        background-color: inherit;
        padding-top: 3px;
        padding-left: 5px;
        padding-bottom: 3px;
        border-bottom-width: 1px;
        border-bottom-style: solid;
        border-bottom-color: #666666;
        clear: both;
}

/*
====================================================================================
BLOCK OPTIONS
====================================================================================
*/
.block {
        font-size: 10px;
        color: #777777;
        padding-left: 0px;
        margin-bottom: 15px;
}

.blocktitle
{
        color: #000000;
        font-size: 12px;
        font-weight: bold;
        padding-left: 9px;
        margin-bottom: 3px;
        border-bottom: #999999;
        width: 80%;
        text-shadow: 0.25em 0.2em 0.25em gray;
}

.option {
        color: #999999;
        font-size: 11px;
        width: 65%;
        padding-top: 1px;
        padding-bottom: 2px;
        padding-left: 10px;
}

.option:hover {
        background: #FFEEEE;
}

.option:hover a {
        color: #CC0000;
        text-shadow: 0 0 0.2em #F00;
}

.option-off {
        color: #CC9999;
        font-size: 11px;
        font-weight: bold;
        padding-top: 1px;
        padding-bottom: 2px;
        padding-left: 10px;
}

.option-plain {
        color: #666666;
        font-size: 11px;
}



/*
====================================================================================
COMMENT OPTIONS
====================================================================================
*/
.commentbar4 {
        color: #000000;
        font-size: 11px;
        font-family: "Lucida Grande", arial, sans-serif;
        background-color: #EEEEEE;
}

.commentbar1 {
        color: #000000;
        background-color: #EEEEEE;
        font-size: 11px;
        font-family: "Lucida Grande", arial, sans-serif;
}

.commentbar2 {
        background-color: #EEEEEE;
        font-size: 11px;
        font-family: "Lucida Grande", arial, sans-serif;
}

.commentbar3 {
        color: #888888;
        background-color: #EEEEEE;
        font-size: 10px;
        font-family: "Lucida Grande", arial, sans-serif;
}

.commenttitle {
        color: #000000;
        font-size: 12px;
        font-weight: bold;
        background-color: #EEEEEE;
        font-family: "Lucida Grande", arial, sans-serif;
}




/*
====================================================================================
FOOTER OPTIONS
====================================================================================
*/
#prefooter {
        color: #FFFFFF;
        font-size: 9px;
        font-family: "Lucida Grande", Helvetica, Arial, sans-serif;
        text-align: left;
        background-color: #CC0000;
        padding-top: 10px;
        padding-left: 20px;
        padding-right: 0px;
        white-space: nowrap;
        border-top-style: solid;
        border-top-width: 1px;
        border-top-color: #999999;
        clear: both;
        height: 20px;
        visibility: hidden;
}
#prefooter a { color: #FFFFFF; }
#prefooter a:hover
{
        color: #CC9999;
}

.footer-left {
        color: #EEEEEE;
        font-size: 9px;
        font-family: "Lucida Grande", Helvetica, Arial, sans-serif;
        text-align: left;
        line-height: 12px;
        padding-top: 10px;
        padding-left: 20px;
        padding-bottom: 10px;
        float: left;
        white-space: nowrap;
}
.footer-left a { color: #FFCCCC; }
.footer-left a:hover {  color: #CC9999;}


.footer-right {
        color: #FFFFFF;
        font-size: 9px;
        font-family: "Lucida Grande", Helvetica, Arial, sans-serif;
        text-align: right;
        line-height: 12px;
        padding-top: 10px;
        padding-left: 0px;
        padding-right: 20px;
        padding-bottom: 10px;
        white-space: nowrap;
}
.footer-right a { color: #FFCCCC; }
.footer-right a:hover { color: #CC9999;}


.footer {
        border-top-style: solid;
        border-top-width: 1px;
        border-top-color: #999999;
        vertical-align: top;
}

.footer {
font-size: 11px;
font-family: "Lucida Grande", arial, sans-serif;
}



/*
====================================================================================
CALENDAR OPTIONS
====================================================================================
*/

.cal_day {
        font-size: 11px;
}

.cal_body {
        font-family: "Lucida Grande", Helvetica, Arial, sans-serif;
        font-weight: bold;
        border-style: none none none none;
}

.cal-nullday {
        background-color: #FFFFFF;
        border-style: solid solid none none;
        border-color: #BBBBBB #BBBBBB #BBBBBB #BBBBBB;
}

.cal-oldday {
        font-size:9px;
        background-color: #EEEEEE;
        border-style: solid solid none none;
        border-color: #BBBBBB #BBBBBB #BBBBBB #BBBBBB;
}

.cal-futureday {
        font-size:9px;
        background-color: #FFFFFF;
        border-style: solid solid none none;
        border-color: #BBBBBB #BBBBBB #BBBBBB #BBBBBB;
}

.cal_month {
        font-size: 9px;
        background-color: #EEEEEE;
        border-style: solid solid solid solid;
        border-color: #BBBBBB #BBBBBB #BBBBBB #BBBBBB;
}

.cal-today {
        font-size:9px;
        background-color: #FF7777;
        color: #ffffff;
        border-style: solid solid solid solid;
        border-width: 2px 2px 2px 2px;
        border-color: #CC0000 #CC0000 #CC0000 #CC0000;
}
.cal-today a {
        color: #ffffff;
}
.cal-today a:hover {
        color: #ffCCCC;
}


.cal-event {
font-size: 6px;
}

.weekview_caltitle {
background-color: #dddddd;
font-weight: bold;
font-size: 13px;
color: #000000;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 5px;
}

.weekview-curday {
background-color: #66A6CE;
color: #000000;
}

.weekview-offday {
color: #000000;
}

.weekview_dayformat {
font-size: 11px;
background-color: #eeeeee;
color: #000000;
padding-left: 5px;
padding-top: 5px;
}

.weekview_addevent {
font-size: 11px;
background-color: #eeeeee;
color: #000000;
padding-top: 5px;
padding-right: 5px;
}

.weekview_daterange {
font-size: 16px;
font-weight: normal;
color: #000000;
}


.dayview_times {
font-size: 14px;
color: #000000;
}

.dayview_datecol {
font-weight: normal;
font-size: 16px;
color: #000000;
padding-left: 5px;
padding-top: 5px;
}

.dayview_quickaddtitle {
font-weight: bold;
background-color: #C0C0C0;
font-size: 13px;
color: #000000;
}

.searchAuth {
    font-weight: normal;
    font-size: 80%;
    font-family: sans-serif;
    text-align: left;  
    color:#557755;
}
.searchDate {
    font-weight: normal;
    font-size: 80%;
    font-family: sans-serif;
    text-align: right;  
    color:#557755;
}
.searchHits {
    font-weight: normal;
    font-size: 80%;
    font-family: sans-serif;
    text-align: right;
    color:#557755;
}
.highlight {
    background-color: yellow;
    text-decoration: none;
}


/*
====================================================================================
UNFILED STYLES
====================================================================================
*/

.warning {
        color: red;
        font-size: 12px;
        font-weight: bold;
        font-family: "Lucida Grande", arial, sans-serif;
}

.warningsmall {
        color: red;
        font-size: 11px;
        font-family: "Lucida Grande", arial, sans-serif;
}


/*
====================================================================================
THE END - C'MON WHAT WERE YOU EXPECTING?
====================================================================================
*/

 


header.thtml:
Text Formatted Code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
        <title>{page_title}</title>
        <meta http-equiv="Content-Type" content="text/html; charset={charset}">
        <meta name="ROBOTS" content="INDEX,FOLLOW">
        <!-- <meta http-equiv="Pragma" content="no-cache">-->
        <!-- <link rel="SHORTCUT ICON" href="{site_url}/favicon.ico"> -->
        <link rel="stylesheet" type="text/css" href="{css_url}" title="{theme}">

        <!-- Needed JavaScript Code -->
        <script type="text/javascript" language="JavaScript1.2">
            var cleared = 0;
            function clearField(field)
            {
                if (cleared != 1) {
                    field.value = ""
                    cleared = 1
                } else {
                    cleared = 0
                }
            }
        </script>

        <script src="{layout_url}/x.js" type="text/javascript">  
        </script>
{plg_headercode}
</head>
<body>
<!-- HEADER START ============================================================================== -->
<div id="header-textbar">
        <div class="header-datestamp">
        </div>
        <div class="header-links">
            <a href="{site_url}/forum/index.php">Forum</a>  .  
            <a href="{site_url}/gallery/">Gallery</a>  .  
            <a href="{site_url}/filemgmt/index.php">Downloads</a>  .  
            <a href="{site_url}/links.php">Links</a>  .  
            <a href="{site_url}/calendar.php">Calendar</a>  .  
            <a href="{site_url}/pollbooth.php">Polls</a>  .  
            <a href="{site_url}/search.php">Advanced Search</a>
        </div>
</div>
<div id="header-imagebar">
        <div class="sitebanner-left"><a href="{site_url}"><img src="{layout_url}/images/clblogo.gif" border="0" alt="Copious Lunch Buffet Logo"><!-- {site_name} --></a></div>
        <div class="sitebanner-right"><br>
                <form action="{site_url}/search.php" method="get">
                        <input type="text" name="query" class="menusearch" size="20" maxlength="255">  
                        <input type="submit" value="{button_search}">
                        <input type="hidden" name="type" value="all">
                        <input type="hidden" name="mode" value="search">
                </form>
        </div>
</div>
<!-- HEADER END ================================================================================ -->
<!-- CONTENT START ============================================================================= -->
{left_blocks}

<div id="contentblock">

 


leftblocks.thtml:
Text Formatted Code
<div id="leftblocks">
{geeklog_blocks}
</div>

 


rightblocks.thtml:
Text Formatted Code
<div id="rightblocks">
{geeklog_blocks}
</div>

 


footer.thtml:
Text Formatted Code
</div>

<div id="verticalspacer"> </div>

{right_blocks}
<!-- CONTENT END =============================================================================== -->

<script type="text/javascript">  
var contentblock = top.document.getElementById("contentblock");
var leftblocks = top.document.getElementById("leftblocks");
var rightblocks = top.document.getElementById("rightblocks");
var whatsrelated = top.document.getElementById("whats-related-options");

if(whatsrelated != null)
{
        if (whatsrelated.innerHTML.length > 5)
        {
                rightblocks = new Object();
        }
}


if (rightblocks == null && leftblocks == null)
{
        contentblock.id = "contentblocknoblocks";
}
else if (rightblocks == null)
{
        contentblock.id = "contentblocknoright";
}
else if (leftblocks == null)
{
        contentblock.id = "contentblocknoleft";
}

function adjustLayout()
{
        var maxHeight;
        var cHeight;

        if (top.document.getElementById("contentblock") != null)
        {
                cHeight = xHeight("contentblock");  
                var lHeight = xHeight("leftblocks");  
                var rHeight = xHeight("rightblocks");
                maxHeight = Math.max(cHeight, lHeight, rHeight);
        }
        else if (top.document.getElementById("contentblocknoright") != null)
        {
                cHeight = xHeight("contentblocknoright");  
                var lHeight = xHeight("leftblocks");  
                maxHeight = Math.max(cHeight, lHeight);
        }
        else if (top.document.getElementById("contentblocknoleft") != null)
        {
                cHeight = xHeight("contentblocknoleft");  
                var rHeight = xHeight("rightblocks");  
                maxHeight = Math.max(cHeight, rHeight);
        }
        else
        {
                maxHeight = xHeight("contentblocknoblocks");
                cHeight = maxHeight;
        }

        var spacerHeight;
        if (maxHeight == cHeight)
                spacerHeight = 1;
        else
                spacerHeight = maxHeight - cHeight;
        xHeight("verticalspacer", spacerHeight);

        xShow("prefooter");
        xShow("footerblock");
}

</script>

<!-- FOOTER START ============================================================================== -->
<div id="prefooter">
         
</div>
<div id="footerblock">
        <div class="footer-left">
                W3C: <a href="http://validator.w3.org/check/referer">Valid HTML 4.01</a> , <a href="http://jigsaw.w3.org/css-validator/">Valid CSS</a>
                {powered_by}: <a target="_blank" href="http://www.geeklog.net/"> GeekLog</a>
                <!--
                <rdf:RDF xmlns="http://web.resource.org/cc/" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
                        <Work rdf:about="">
                                <license rdf:resource="http://creativecommons.org/licenses/by-nc-sa/1.0/" />
                        </Work>
                        <License rdf:about="http://creativecommons.org/licenses/by-nc-sa/1.0/">
                           <requires rdf:resource="http://web.resource.org/cc/Attribution" />
                           <requires rdf:resource="http://web.resource.org/cc/ShareAlike" />
                           <permits rdf:resource="http://web.resource.org/cc/Reproduction" />
                           <permits rdf:resource="http://web.resource.org/cc/Distribution" />
                           <permits rdf:resource="http://web.resource.org/cc/DerivativeWorks" />
                           <prohibits rdf:resource="http://web.resource.org/cc/CommercialUse" />
                           <requires rdf:resource="http://web.resource.org/cc/Notice" />
                        </License>
                </rdf:RDF>
                -->

        </div>
        <div class="footer-right">
                {copyright_notice}
                {execution_textandtime}
        </div>
</div>
<!-- FOOTER END =============================================================================== -->

<script>
window.onload = function()  
{
        xAddEventListener(window, "resize", adjustLayout, false);  
        adjustLayout();  
}
</script>

</body>
</html>

 


article/article.thtml:
Text Formatted Code
                        {formatted_article}<br>
                        {commentbar}
                        </div>
                                    <div id="whats-related-options">{whats_related_story_options}</div>

 
 Quote
 01/25/04 09:52am  
Status: offline

Turias

Forum User
Full Member
Registered: 10/20/03
Posts: 807
Oh, and I almost forgot. I also added a couple really neat CSS2 features to the style.css file. At the moment, you can only see a difference in CSS2 enabled browser like Safari (not Mozilla or IE).

But still, they are gorgeous. Check out the drop shadows under the story and block titles as well as the amazing link rollover effect! Smile
 Quote
 01/25/04 11:22pm  
Status: offline

wooge

Forum User
Junior
Registered: 12/27/02
Posts: 17
hey turias - woah... thanks for the code man!... i'm testing it out right now... drop shadows!... geeze.. css is wilder than i thought!

This seems like a great pach/fix for my layout problem... the bain of my existence lately Wink i'll let you know how it goes.


-- edit --

ok .. i tested it out... a few layout issues, but overall it did fix the content block size.

i'm still convinced there is a purely css way of doing this (maybe i'm asking to much of css / maybe i'm just obsessed) ... but your script does give people a way of working around it...

cheers!
 Quote
 01/26/04 10:42am  
Status: offline

Turias

Forum User
Full Member
Registered: 10/20/03
Posts: 807
Quote by wooge: i'm still convinced there is a purely css way of doing this (maybe i'm asking to much of css / maybe i'm just obsessed) ... but your script does give people a way of working around it...


Yeah, once I started thinking about ways to try and expand the content box, I also became pretty obsessed. Smile

After doing some Googling, I came across a ton of sites that display a css approach to a three column layout (I'm sure you've seen 'em all). Many of the sites explicitly positioned at least the right and left columns, and then either explicitly positioned the middle column, too, or gave it large margins.

Others took your approach with left floating all of the columns. Unfortunately, in all of my looking, I only found two sites that displayed layouts that could adjust themselves depending on the number of columns that were going to be displayed. One of them changed the class of the center column by passing in a variable in the URL and then using PHP to set the id. This isn't possible with Geeklog, since we aren't sure exactly which blocks are going to be displayed until the end of the page.

The second involved dynamically changing things with Javascript, which is what I decided to try and do. It seems to have worked, except for the one issue I mentioned before. Have you seen any other issues?

Sadly, I don't think there is a pure CSS way to do this...

Also, I decided to opt for the margin approach instead of the float approach because I thought the layout would be more pleasing with static-sized right and left blocks with a center column that expands with the browser window. But, eh, it's just a personal preference.

Anyway, thanks again for the great theme, and please let me know of any other "layout issues" you may have come across with my hack.
 Quote
 08/05/04 04:18pm  
Status: Banned

machinari

Forum User
Full Member
Registered: 03/22/04
Posts: 1512
Quote by Turias:
Quote by wooge:
Sadly, I don't think there is a pure CSS way to do this...

there is a way using just CSS and I did it with only minor unecessary restrictions. the theme will be uploaded here this week sometime as soon as i clean up the sheet a bit--what a mess.
 Quote
 08/05/04 04:18pm  
Status: Banned

machinari

Forum User
Full Member
Registered: 03/22/04
Posts: 1512
Quote by Turias: Sadly, I don't think there is a pure CSS way to do this...

there is a way using just CSS and I did it with only minor unecessary restrictions. the theme will be uploaded here this week sometime as soon as i clean up the sheet a bit--what a mess.
 Quote
 08/05/04 05:29pm  
Status: offline

inspiremin

Forum User
Regular Poster
Registered: 01/07/04
Posts: 111
You might want to emphasize that this is for Axonz 3.2, not 3.4. The hack does not play nice with 3.4.

Blessings!

inSPIREmin
www.Scripturetoolkit.com www.inSPIREministries.com
 Quote
 New Topic  Post Reply
All times are EST. The time is now 02:52 pm.
  • Normal Topic
  • Sticky Topic
  • Locked Topic
  • New Post
  • Sticky Topic W/ New Post
  • Locked Topic W/ New Post
  •  View Anonymous Posts
  •  Able to post
  •  Filtered HTML Allowed
  •  Censored Content