Skin Trac using CSS so it looks like plone.org

GoogleCodeExporter commented 9 years ago

The Plone project uses the Trac issue tracker and repository browser for its 
development.

To complete this task, you should skin/theme http://dev.plone.org/plone so it 
looks like 
http://plone.org

Most changes should be done using only CSS, although we can change the 
underlying template for 
Trac somewhat too.

Original issue reported on code.google.com by l...@gmail.com on 19 Nov 2007 at 11:01

GoogleCodeExporter commented 9 years ago

Original comment by l...@gmail.com on 27 Nov 2007 at 7:04

Changed state: Open
Added labels: 3-day

GoogleCodeExporter commented 9 years ago

I claim this task

Original comment by braun.s...@googlemail.com on 30 Nov 2007 at 2:33

GoogleCodeExporter commented 9 years ago

Greatn, braun.sven - we look forward to your CSS in 3 days' time.

Original comment by optil...@gmail.com on 30 Nov 2007 at 2:39

Changed state: Claimed

GoogleCodeExporter commented 9 years ago

I'm really sorry - but I think I can't claim this task due to lots of work for 
school, sorry again!

Original comment by braun.s...@googlemail.com on 30 Nov 2007 at 5:25

GoogleCodeExporter commented 9 years ago

Original comment by optil...@gmail.com on 30 Nov 2007 at 5:31

Changed state: Open

GoogleCodeExporter commented 9 years ago

I claim this task

Original comment by grizl...@gmail.com on 1 Dec 2007 at 12:29

GoogleCodeExporter commented 9 years ago

Thanks grizlo42 - we look forward to your submission

Original comment by optil...@gmail.com on 1 Dec 2007 at 2:35

Changed state: Claimed

GoogleCodeExporter commented 9 years ago

Ok, I made it look like plone.org, but I had to do some work to the whole
banner/header section, cause CSS is somewhat limited in re-arranging 
formatting.  All
CSS was only done in the main "trac.css" file.  I will attach that in the next 
post.
 I also needed to include a small 1 px thick image.  I will attach that, but I need
to know where it will be placed so I can include the url in the CSS.  Also I 
will
write out the exact code for each page, because it is slightly different, only 
for
thew header section.

Original comment by grizl...@gmail.com on 1 Dec 2007 at 11:39

Attachments:

tracbg.gif

GoogleCodeExporter commented 9 years ago

The CSS sheet "trac.css" is attached, that is where most of the changes 
occurred.  A
few layout changes need to be made to finish off the theme.

All pages with no links that are just below the main navigation - such as 
timeline,
roadmap, and search - need the code between "<body>" and "<div
id="main">" (leaving the "<div id="main">") to be changed to this:

Code:
<body>

<div id="banner">

  <div id="header" style="position:absolute;left:11px;top:-2px;">
    <a id="logo" href="http://plone.org/"><img src="http://plone.org/logo.jpg"
alt="Plone" width="252" height="57" align="left" />
    </a>
  </div>
  <div id="metanav" class="nav">
    <ul>
        <li class="first">
            <a id="ctxtnav" href="/plone/login">Login</a>
        </li>
        <li>
            <a href="/plone/settings">Settings</a>
        </li>
        <li>
            <a accesskey="6" href="/plone/wiki/TracGuide">Help/Guide</a>
        </li>
        <li class="last">
            <a href="/plone/about">About Trac</a>
        </li>
    </ul>
  </div>  <font size="+1"> </font><br/>
<form id="search" action="/plone/search" method="get">
  <div>
    <label for="proj-search">
    Search:</label>
  <input type="text" id="proj-search" name="q" width="100" accesskey="f" value="" />
  <input style="background:White url(http://plone.org/search_icon.gif) 2px 1px
no-repeat;cursor:pointer;padding:1px 1px 1px 15px;text-transform:none;" 
type="submit"
value="Search" />
  <input type="hidden" name="wiki" value="on" />
  <input type="hidden" name="changeset" value="on" />
  <input type="hidden" name="ticket" value="on" />
      </div>
</form>
</div>
<div id="mainnav" class="nav"><br /><ul><center>
      <li><a accesskey="1" href="/plone/wiki">Wiki</a>  </li>
      <li class="first active"><a accesskey="2" href="/plone/timeline">Timeline</a>
 </li>
      <li><a accesskey="3" href="/plone/roadmap">Roadmap</a>  </li>
      <li><a href="/plone/browser">Browse Source</a>  </li>
      <li><a href="/plone/report">View Tickets</a>  </li>
      <li class="last"><a accesskey="4" href="/plone/search">Search</a>  </li>
    </center></ul>

  <table width="100%" class="first" border="0" cellspacing="0" cellpadding="1">
  <tr >
      <td width="100%" align="right" valign="middle" class="first"> </td>
  </tr>
</table>

    </div>

--------------End Code--------------

The main page same place:

Code:

<body>

<div id="banner">

  <div id="header" style="position:absolute;left:11px;top:-2px;">
    <a id="logo" href="http://plone.org/"><img src="http://plone.org/logo.jpg"
alt="Plone" width="252" height="57" align="left" />
    </a>
  </div>
  <div id="metanav" class="nav">
    <ul>
        <li class="first">
            <a id="ctxtnav" href="/plone/login">Login</a>
        </li>
        <li>
            <a href="/plone/settings">Settings</a>
        </li>
        <li>
            <a accesskey="6" href="/plone/wiki/TracGuide">Help/Guide</a>
        </li>
        <li class="last">
            <a href="/plone/about">About Trac</a>
        </li>
    </ul>
  </div>  <font size="+1"> </font><br/>
<form id="search" action="/plone/search" method="get">
  <div>
    <label for="proj-search">
    Search:</label>
  <input type="text" id="proj-search" name="q" width="100" accesskey="f" value="" />
  <input style="background:White url(http://plone.org/search_icon.gif) 2px 1px
no-repeat;cursor:pointer;padding:1px 1px 1px 15px;text-transform:none;" 
type="submit"
value="Search" />
  <input type="hidden" name="wiki" value="on" />
  <input type="hidden" name="changeset" value="on" />
  <input type="hidden" name="ticket" value="on" />
      </div>
</form>
</div>
<div id="mainnav" class="nav"><br /><ul><center>
      <li class="first active"><a accesskey="1" href="/plone/wiki">Wiki</a>  </li>
      <li><a accesskey="2" href="/plone/timeline">Timeline</a>  </li>
      <li><a accesskey="3" href="/plone/roadmap">Roadmap</a>  </li>
      <li><a href="/plone/browser">Browse Source</a>  </li>
      <li><a href="/plone/report">View Tickets</a>  </li>
      <li class="last"><a accesskey="4" href="/plone/search">Search</a>  </li>
    </center></ul>

  <table width="100%" class="first" border="0" cellspacing="0" cellpadding="1">
  <tr >
      <td width="100%" align="right" valign="middle" class="first">
        <div id="ctxtnav">
            <a href="/plone/wiki">Start Page</a> 
            <a href="/plone/wiki/TitleIndex">Index by Title</a> 
            <a href="/plone/wiki/RecentChanges">Index by Date</a> 
            <a href="/plone/wiki/WikiStart?action=diff&version=35">Last Change</a> 
        </div>
    </td>
  </tr>
</table>

    </div>
-----------End Code--------------

The browse source page:

Code:
<body>

<div id="banner">

  <div id="header" style="position:absolute;left:11px;top:-2px;">
    <a id="logo" href="http://plone.org/"><img src="http://plone.org/logo.jpg"
alt="Plone" width="252" height="57" align="left" />
    </a>
  </div>
  <div id="metanav" class="nav">
    <ul>
        <li class="first">
            <a id="ctxtnav" href="/plone/login">Login</a>
        </li>
        <li>
            <a href="/plone/settings">Settings</a>
        </li>
        <li>
            <a accesskey="6" href="/plone/wiki/TracGuide">Help/Guide</a>
        </li>
        <li class="last">
            <a href="/plone/about">About Trac</a>
        </li>
    </ul>
  </div>  <font size="+1"> </font><br/>
<form id="search" action="/plone/search" method="get">
  <div>
    <label for="proj-search">
    Search:</label>
  <input type="text" id="proj-search" name="q" width="100" accesskey="f" value="" />
  <input style="background:White url(http://plone.org/search_icon.gif) 2px 1px
no-repeat;cursor:pointer;padding:1px 1px 1px 15px;text-transform:none;" 
type="submit"
value="Search" />
  <input type="hidden" name="wiki" value="on" />
  <input type="hidden" name="changeset" value="on" />
  <input type="hidden" name="ticket" value="on" />
      </div>
</form>
</div>
<div id="mainnav" class="nav"><br /><ul><center>
      <li><a accesskey="1" href="/plone/wiki">Wiki</a>  </li>
      <li class="first active"><a accesskey="2" href="/plone/timeline">Timeline</a>
 </li>
      <li><a accesskey="3" href="/plone/roadmap">Roadmap</a>  </li>
      <li><a href="/plone/browser">Browse Source</a>  </li>
      <li><a href="/plone/report">View Tickets</a>  </li>
      <li class="last"><a accesskey="4" href="/plone/search">Search</a>  </li>
    </center></ul>

  <table width="100%" class="first" border="0" cellspacing="0" cellpadding="1">
  <tr >
      <td width="100%" align="right" valign="middle" class="first">
        <div id="ctxtnav">
            <a href="/plone/log/">Revision Log</a> 
            <a href="/plone/changeset/18237/">Last Change</a>
        </div>
      </td>
  </tr>
</table>

    </div>

----------End Code--------------

The "View Tickets" Page:

Code:
<body>

<div id="banner">

  <div id="header" style="position:absolute;left:11px;top:-2px;">
    <a id="logo" href="http://plone.org/"><img src="http://plone.org/logo.jpg"
alt="Plone" width="252" height="57" align="left" />
    </a>
  </div>
  <div id="metanav" class="nav">
    <ul>
        <li class="first">
            <a id="ctxtnav" href="/plone/login">Login</a>
        </li>
        <li>
            <a href="/plone/settings">Settings</a>
        </li>
        <li>
            <a accesskey="6" href="/plone/wiki/TracGuide">Help/Guide</a>
        </li>
        <li class="last">
            <a href="/plone/about">About Trac</a>
        </li>
    </ul>
  </div>  <font size="+1"> </font><br/>
<form id="search" action="/plone/search" method="get">
  <div>
    <label for="proj-search">
    Search:</label>
  <input type="text" id="proj-search" name="q" width="100" accesskey="f" value="" />
  <input style="background:White url(http://plone.org/search_icon.gif) 2px 1px
no-repeat;cursor:pointer;padding:1px 1px 1px 15px;text-transform:none;" 
type="submit"
value="Search" />
  <input type="hidden" name="wiki" value="on" />
  <input type="hidden" name="changeset" value="on" />
  <input type="hidden" name="ticket" value="on" />
      </div>
</form>
</div>
<div id="mainnav" class="nav"><br /><ul><center>
      <li><a accesskey="1" href="/plone/wiki">Wiki</a>  </li>
      <li class="first active"><a accesskey="2" href="/plone/timeline">Timeline</a>
 </li>
      <li><a accesskey="3" href="/plone/roadmap">Roadmap</a>  </li>
      <li><a href="/plone/browser">Browse Source</a>  </li>
      <li><a href="/plone/report">View Tickets</a>  </li>
      <li class="last"><a accesskey="4" href="/plone/search">Search</a>  </li>
    </center></ul>

  <table width="100%" class="first" border="0" cellspacing="0" cellpadding="1">
  <tr >
      <td width="100%" align="right" valign="middle" class="first">
        <div id="ctxtnav">
            <a href="/plone/report">Available Reports</a> 
            <a href="/plone/query">Custom Query</a>
        </div>
      </td>
  </tr>
</table>

    </div>
----------End Code--------------

If I missed any other pages that have links you can send me an email at
grizlo42@gmail.com, or simply put the link(s) inside the table below the main 
nav
beginning them with "<div id="ctxtnav">", adding just the "a href" and the
ending statement part, no formatting around it, and after all links closing 
with an
end div statement.

Original comment by grizl...@gmail.com on 2 Dec 2007 at 1:30

Attachments:

trac.css

GoogleCodeExporter commented 9 years ago

oh last comment, the trac.css references "tracbg.gif", this can be replaced 
with the
relative location of that file wherever it is uploaded too.

Original comment by grizl...@gmail.com on 2 Dec 2007 at 1:34

GoogleCodeExporter commented 9 years ago

oh, i noticed that in IE, the image is misaligned. the fix for this is on all 
pages
adding before "<form id="search" action="/plone/search" method="get">" and right
after "  </div>" adding  "<font size="4"> </font><br/>" instead of "  <font
size="+1"> </font><br/>"

Original comment by grizl...@gmail.com on 2 Dec 2007 at 2:04

GoogleCodeExporter commented 9 years ago

Looks like div#metanav and form#search have just switched places.  There might 
be
some little changes too, should all be fairly easy to change in the trac 
templates. 
I'm going to close this.

Good job and thanks for your contribution!

Original comment by mw4...@googlemail.com on 4 Dec 2007 at 1:59

Changed state: Closed

GoogleCodeExporter commented 9 years ago

Your welcome, thanks for such a fun task that promotes an important skill!  I 
really
enjoyed it.

Original comment by grizl...@gmail.com on 5 Dec 2007 at 12:34

GoogleCodeExporter commented 9 years ago

Original comment by ospoad...@gmail.com on 8 Dec 2007 at 6:04

Added labels: claimedby-grizlo42

ericmckean / google-highly-open-participation-plone

Skin Trac using CSS so it looks like plone.org #12