• Registered: 2005-01-17
  • Posts: 22

Topic: Changing the layout

Ok.. I think this should be my last question since I've gotten most of the design of the forums to match the rest of the site. But I have one thing.. I want to change the layout of the "pages, location, new post/post reply" string.

This is how it currently looks (still working on getting that looking good)
http://img65.exs.cx/img65/381/menulink8cc.jpg

And I want to look like this
http://img7.exs.cx/img7/2871/menulinkmoded2bp.jpg

Where is that code located?

And also..  why is there a space between the Category and the forums table? See below:
http://img7.exs.cx/img7/2466/space4kg.jpg

See the space which is maybe 2px high. I can't figure out why it's doing this...

I hope you don't mind the questions...

Thanks..

-Jason
---------------------------------
[img]http://camaro.ph-productions.com/images/sig_camaro.jpg[/img]
1999 Z28 A4
  • Registered: 2005-01-17
  • Posts: 22

Re: Changing the layout

anybody?  once I can find where that portion of the forums is located and I can edit it I can open my forums up..

Thanks to anyone with the help smile

-Jason
---------------------------------
[img]http://camaro.ph-productions.com/images/sig_camaro.jpg[/img]
1999 Z28 A4
  • Gizzmo
  • Senior Member
  • Offline
  • From: Earth, Milkyway Galaxy
  • Registered: 2004-01-27
  • Posts: 762

Re: Changing the layout

look in the css files

  • Registered: 2005-01-17
  • Posts: 22

Re: Changing the layout

Gizzmo wrote:

look in the css files

Are those locations in the CSS or are they seperate from the CSS?  I don't see anything in the camaro_cs.css and camaro.css about locations. Main colors, borders etc..

-Jason
---------------------------------
[img]http://camaro.ph-productions.com/images/sig_camaro.jpg[/img]
1999 Z28 A4

5 Reply by roo

  • roo
  • Member
  • Offline
  • Registered: 2004-11-11
  • Posts: 28

Re: Changing the layout

the section of mark-up is here:

<div class="linkst">
    <div class="inbox">
        <p class="pagelink conl">Pages: <strong>1</strong></p>
        <p class="postlink conr"><a href="post.php?tid=5955">Post reply</a></p>
        <ul><li><a href="index.php">Index</a></li><li> » <a href="viewforum.php?id=40">PunBB discussions</a></li><li> » Changing the layout</li></ul>

        <div class="clearer"></div>
    </div>
</div>

to make it look like you're after, I think you'd need something like this (mind you I haven't tested it, and it's probably going to require some fiddling to get it right):

.linkst .inbox {
position: relative;

height: 36px;
}
.linkst .inbox p.conl {
position: absolute; 
right: 0; bottom: 0;
}
.linkst .inbox .conr {
position: absolute;
bottom: 0; left: 0;
}
.linkst .inbox .conr a {
margin: 0; padding: 0;
}

.linkst .inbox ul {
display: block
text-align: left;
margin: 0;
}
  • Gizzmo
  • Senior Member
  • Offline
  • From: Earth, Milkyway Galaxy
  • Registered: 2004-01-27
  • Posts: 762

Re: Changing the layout

the second one i think is a css problem, and the first one you could change in viewforum.php around line 90

7 Reply by Paul

  • Paul
  • Senior Member
  • Offline
  • From: Wales, UK.
  • Registered: 2003-08-13
  • Posts: 3,089

Re: Changing the layout

It's very simple to do in the markup, just change the relevant bit to

<div class="linkst">
    <div class="inbox">
    <ul><li><a href="index.php">Index</a></li><li> » <a   href="viewforum.php?id=40">PunBB discussions</a></li><li> » Changing the layout</li></ul>
        <p class="pagelink conr">Pages: <strong>1</strong></p>
        <p class="postlink conl"><a href="post.php?tid=5955">Post reply</a></p>
        <div class="clearer"></div>
    </div>
</div>

Then in the css file just remove the left margin from .linkst UL

All the locations are in the css files. What you are looking for is float:left, float:right etc in base.css.

Be warned though, that bit of markup will be changed slightly in PunBB 1.2.1 to prevent the generation of some empty tags though it will only take you a moment to modify it.

  • Registered: 2005-01-17
  • Posts: 22

Re: Changing the layout

Ok sweet I found the code for it from your above post and I got it to look like I want.. one last thing.

http://img116.exs.cx/img116/3583/gap3bt.jpg

How do I remove that gap between "Index >> General Chit-Chat" and "Pages:1"?  I am looking in the CSS once again and have been looking for padding info but have found none.  And not quite sure which CSS markup would need the padding if that is the problem.  One thing that would be nice for this software (which I'm falling in love with the more I use it) is a writeup or manual on editing the CSS and what everything is and does.

Anyways.. one last thing and I"m there..

Thanks again...

-Jason
---------------------------------
[img]http://camaro.ph-productions.com/images/sig_camaro.jpg[/img]
1999 Z28 A4

9 Reply by Paul

  • Paul
  • Senior Member
  • Offline
  • From: Wales, UK.
  • Registered: 2003-08-13
  • Posts: 3,089

Re: Changing the layout

Its at section 6.1 of Oxygen.css etc. This line puts 3px top and bottom padding on paragraphs and lists

.pun P, .pun UL, .pun DL, DIV.blockmenu LI, .pun LABEL, #announce DIV.inbox DIV {PADDING: 3px 0}

You need to override it by adding the following to section 6.1
.pun .linkst UL, .pun .linkst P {PADDING-BOTTOM: 0}
.pun .linkst P {PADDING-TOP: 0}

10 Reply by pailheadz28 (edited by pailheadz28 2005-01-21 13:56)

  • Registered: 2005-01-17
  • Posts: 22

Re: Changing the layout

Paul wrote:

Its at section 6.1 of Oxygen.css etc. This line puts 3px top and bottom padding on paragraphs and lists

.pun P, .pun UL, .pun DL, DIV.blockmenu LI, .pun LABEL, #announce DIV.inbox DIV {PADDING: 3px 0}

You need to override it by adding the following to section 6.1
.pun .linkst UL, .pun .linkst P {PADDING-BOTTOM: 0}
.pun .linkst P {PADDING-TOP: 0}

Well I did the above and it didn't adjust the space between the two items.

Here's the code I adjusted in the viewforum.php file

<div class="linkst">
    <div class="inbox">
        <li><a href="index.php"><?php echo $lang_common['Index'] ?></a> » <?php echo pun_htmlspecialchars($cur_forum['forum_name']) ?></li>
        <p class="postlink conr"><?php echo $post_link ?></p>
        <p class="pagelink conl"><?php echo $paging_links ?></p>
        <div class="clearer"></div>
    </div>
</div>

And after adding your code to my CSS file there was no change.

Thanks for the help..

-Jason
---------------------------------
[img]http://camaro.ph-productions.com/images/sig_camaro.jpg[/img]
1999 Z28 A4

11 Reply by Paul

  • Paul
  • Senior Member
  • Offline
  • From: Wales, UK.
  • Registered: 2003-08-13
  • Posts: 3,089

Re: Changing the layout

It works fine for me.

You seem to have missed the UL tag for the breadcrumbs.

  • Registered: 2005-01-17
  • Posts: 22

Re: Changing the layout

Paul wrote:

It works fine for me.

You seem to have missed the UL tag for the breadcrumbs.

Yeah this is where my lack of CSS knowledge comes thru. I took the UL tags out so that the "Inbox..." wouldn't be centered on the page.   What would you recommend for changing the location of the UL in the "Inbox..." source..

Thanks...

-Jason
---------------------------------
[img]http://camaro.ph-productions.com/images/sig_camaro.jpg[/img]
1999 Z28 A4

13 Reply by Paul

  • Paul
  • Senior Member
  • Offline
  • From: Wales, UK.
  • Registered: 2003-08-13
  • Posts: 3,089

Re: Changing the layout

I think I said in an earlier post that you had to remove the left margin from the UL. It's item 5.3 in base.css.