so if i were to use the repeat, what's the call for the images? I'm
unfamiliar with this.
I tried <collection class="usercollection" param/>
and in the css file I added
.css-class-usercollection {
display: inline;
}
and it still doesn't do anything. ;(
I've also tried creating a new div tag with particular id, and
defining that in the application.css, but that didn't seem to work
either... I also tried following the div declarations in my page
extend to hone in on which exact label to give i the css; came up
with
body content main content li {
display: inline;
}
also a no go.
here's my application.dryml and application.css - maybe someone will
see something I dont? hope someone doesn't mind taking a look
---------------------------------------------------------------------------------------------------
<include src="rapid" plugin="hobo"/>
<include src="taglibs/auto/rapid/cards"/>
<include src="taglibs/auto/rapid/pages"/>
<include src="taglibs/auto/rapid/forms"/>
<include src="paperclip" plugin="paperclip_with_hobo"/>
<def tag="app-name">Domanitech</def>
<def tag="form" for="User">
<form merge multipart param="default">
<error-messages param/>
<field-list fields="photo, name, about" param/>
<div param="actions">
<submit label="Save" param/><or-cancel param="cancel"/>
</div>
</form>
</def>
<def tag="card" for="Blog">
<card class="blog" param="default" merge>
<body: param>
<h1 align="center" param="heading"><a><name/></a></h1>
<div id="endblock"></div>
<a:user param="creator-link"></a>
<count:replies color="black" param/>
</body:>
</card>
</def>
<def tag="card" for="Client">
<card class="client" param="default" merge>
<header: param>
<h4 param="heading"><a><name/></a></h4>
</header:>
</card>
</def>
<def tag="card" for="Project">
<card class="project" param="default" merge>
<header: param>
<h4 param="heading"><a><name/></a></h4>
</header:>
<body: param>
</body:>
</card>
</def>
<def tag="card" for="Reply">
<h6><view:body/></h6>
<p><view:created_at/><a:user param="creator-link"/></p>
<br />
</def>
<def tag="card" for="User">
<card class="user" param="default" merge>
<!-- <header: param> -->
<!-- <h4 param="heading"><a><name/></a></h4> -->
<!-- <a action="new" if="&this.administrator" to="&model"
param="new-link"/> don't uncomment this line -->
<!-- <li if="&signup_url" class="nav-item" param="sign-up"><a
href="&signup_url">Sign up</a></li> -->
<!-- anything inside these brackets is a comment. Remove the comment-
arrow-brackets from the above line to allow signup on the user page --
>
<!-- </header:> -->
<body:>
<a><%= image_tag this.photo.url(:small) %></a>
<h5><a><name/></a></h5>
</body:>
</card>
</def>
<def tag="card" for="Timesheet">
<card class="timesheet" param="default" merge>
<div id="timecard">
<header: param>
<h5 param="heading"><a>created: <view:created_at/></a></h5>
<h5 param="heading"><a>updated: <view:updated_at/></a></h5>
</header:>
<body: param>
<a:user param="creator-link"/>
</body:>
</div>
</card>
</def>
<def tag="main-nav">
<navigation class="main-nav" merge-attrs param="default">
<nav-item href="#{base_url}/">Home</nav-item>
<nav-item with="&About">About Us</nav-item>
<nav-item with="&Client">Clients</nav-item>
<nav-item with="&User">The Team</nav-item>
</navigation>
</def>
<def tag="sub-nav">
<navigation class="main-nav" merge-attrs param="default">
<nav-item with="&Timesheet">Timesheets</nav-item>
<nav-item with="&Project">Projects</nav-item>
<nav-item with="&Blog">Company Blog</nav-item>
</navigation>
</def>
<def tag="account-nav">
<do with="¤t_user">
<ul class="navigation account-nav" param>
<if test="&logged_in?">
<li class='nav-item' param="logged-in-as"><a
to="¤t_user">Logged in as <name/></a></li>
<li class='nav-item' param="account"><a
action="account">Account</a></li>
<li class='nav-item' param="log-out"><a href="&logout_url">Log
out</a></li>
</if>
<else>
<li class='nav-item' param="log-in"><a href="&login_url">Log
in</a></li>
</else>
</ul>
</do>
</def>
<def tag="show-page" for="Client">
<page merge title="Client">
<body: class="show-page client" param/>
<content: param>
<header param="content-header">
<h2 param="heading"><name/></h2>
<record-flags fields="" param/>
<a action="edit" if="&can_edit?" param="edit-link">Edit
Client</a>
</header>
<section param="content-body">
</section>
</content:>
</page>
</def>
<def tag="index-page" for="Client">
<page merge title="Clients">
<body: class="index-page client" param/>
<content: param>
<header param="content-header">
<h1 param="heading" align="center">Clients</h1>
</header>
<section param="content-body">
<h6><a action="new" to="&model" param="new-link"/>
<page-nav param="top-page-nav"/>
<collection param/></h6>
<page-nav param="bottom-page-nav"/>
<div id="endblock"></div>
</section>
</content:>
</page>
</def>
<def tag="index-page" for="User">
<page merge title="Users">
<body: class="index-page user" param/>
<content: param>
<header param="content-header">
<h2 param="heading">Users</h2>
<p param="count" if>There <count prefix="are"/></p>
</header>
<section param="content-body">
<!-- <a action="new" to="&model" param="new-link"/> -->
<page-nav param="top-page-nav"/>
<collection class="usercollection" param/>
<repeat param>
</repeat>
<page-nav param="bottom-page-nav"/>
</section>
</content:>
</page>
</def>
<def tag="show-page" for="User">
<page merge title="User">
<body: class="show-page user" param/>
<content: param>
<header param="content-header">
<h2 param="heading"><name/></h2>
<record-flags fields="administrator" param/>
<a action="edit" if="&can_edit?" param="edit-link">Edit
User</a>
</header>
<section param="content-body">
<field-list fields="about, email_address" param/>
</section>
</content:>
</page>
</def>
<def tag="index-page" for="Timesheet">
<page merge title="Timesheets">
<body: class="index-page timesheet" param/>
<content: param>
<header param="content-header">
<h2 param="heading">Timesheets</h2>
<p param="count" if>There <count prefix="are"/></p>
</header>
<section param="content-body">
<a action="new" to="&model" param="new-link">Add Hours</a>
<page-nav param="top-page-nav"/>
<collection param/>
<page-nav param="bottom-page-nav"/>
</section>
</content:>
</page>
</def>
<def tag="new-page" for="Timesheet">
<page merge title="New Timesheet">
<body: class="new-page timesheet" param/>
<content: param>
<section param="content-header">
<h2 param="heading">New Hours</h2>
</section>
<section param="content-body">
<form param>
<submit: label="Add Hours"/>
</form>
</section>
</content:>
</page>
</def>
<def tag="show-page" for="Timesheet">
<page merge title="Timesheet">
<body: class="show-page timesheet" param/>
<content: param>
<header param="content-header">
<a href="http://domanitech.com/rails/timesheets/new";>Add
More Hours</a>
<h2 param="heading"><name/></h2>
<record-flags fields="" param/>
<a:user param="creator-link"/>
<a action="edit" if="&can_edit?" param="edit-link">Edit
Timesheet</a>
</header>
<section param="content-body">
<field-list fields="date, hours, client, project" param/>
</section>
</content:>
</page>
</def>
<extend tag="page">
<%= '<?xml version="1.0" encoding="iso-8859-1"?>' %>
<%= '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">' %>
<html xmlns="http://www.w3.org/1999/xhtml";>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Domanitech</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<%= stylesheet_link_tag 'application' %>
</head>
<body param>
<div id="content">
<section/>
<div id="header">
<div id="right">
<account-nav/>
</div>
<div id="logo">
</div>
<div id="menu">
<main-nav/>
</div>
<div if="&logged_in?" id="submenu">
<sub-nav/>
</div>
<div id="main">
<div param="aside"/>
<div param="content"/>
</div>
<div id="footer">
<p>SITE BEST VIEWED WITH FIREFOX AND INTERNET EXPLORER. PLEASE
UPGRADE TO IE8 OR LATER</p>
<p>Copyright © 2008. Designed by <a href="http://
www.metamorphozis.com/" title="Free Web Templates">Free Web Templates</
a></p>
<p><a href="#">Privacy Policy</a> | <a href="#">Terms of Use</a> |
<a href="http://validator.w3.org/check/referer"; title="This page
validates as XHTML 1.0
Transitional"><abbr title="eXtensible HyperText Markup
Language">XHTML</abbr></a> | <a href="http://jigsaw.w3.org/css-
validator/check/referer" title="This
page validates as CSS"><abbr title="Cascading Style Sheets">CSS</
abbr></a></p>
</div>
</div>
</div>
</body>
</html>
</extend>
---------------------------------------------------------------------------------------------------
/*
Design by Metamorphosis Design
http://www.metamorphozis.com
Released for free under a Creative Commons Attribution 2.5 Licens
*/
*
{
margin: 0px;
padding: 0px;
}
ul {
list-style: none;
}
.css-class-usercollection {
display: inline;
}
a:link {
color: #0000ff;
}
content main content li {
display: inline;
}
a:hover {
text-decoration: none;
color: #FF0000;
}
a:visited {
color: #006fff;
}
body {
background: #000000 url(images/back_110.jpg);
font: 15px Arial, Helvetica, sans-serif;
color: #F2F2F2;
background: black;
}
#.body {
background: #000000 url(images/back_110.jpg);
font: 15px Arial, Helvetica, sans-serif;
color: #F2F2F2;
background: black;
display: inline;
}
#aside {
color: blue;
font: blue;
background: blue;
border: 15px solid blue;
}
#content
{
text-align: left;
background: url(images/background.jpg) no-repeat;
border: 10px solid black;
}
#timecard {
margin: 15px;
}
#main
{
font-size: 15px;
line-height: 1.5;
width: 838px;
padding: 10px;
margin-left: 25px;
margin-bottom: 20px;
color: #fbb855;
border: 10px solid black;
background: black;
}
#main td
{
color: white;
}
#main li
{
margin: 0;
padding: 0px;
font-size: 12px;
font-color: #ffffff;
color: #ffffff;
list-style: none;
display: inline;
}
#main H1
{
margin: 0;
padding: 0px;
font-size: 24px;
font-color: #ffffff;
color: #ffffff;
background: url(images/title_l.gif) no-repeat;
margin-top:15px;
}
#main H2
{
line-height: 1.5;
margin: 0px;
padding-top: 10px;
font-size: 20px;
style-variant: small-caps
font-color: #da6419;
color: #da6419;
}
#main H3
{
margin: 0px;
padding: 0px;
font-size: 12px;
font-color: #da6419;
color: #da6419;
line-height: 20pt
}
#main H4
{
margin: 0px;
padding: 0px;
padding-top: 15px;
width: 800px;
font-size: 16px;
font-color: #a2e4ff;
color: #ffffff;
}
#H4 a {
font-color: #a2e4ff;
}
#main H5
{
margin: 0px;
padding-bottom: 25px;
width: 800px;
font-size: 12px;
font-color: #ffffff;
}
#main H6
{
color: #000000;
margin: 0px;
padding: 10px;
padding-top: 25px;
width: 780px;
font-size: 12px;
background: url(images/title_back_l.gif) repeat-y;
}
#endblock{
background: url(images/title_bottom_l.gif) no-repeat;
padding-bottom: 25px;
padding-top: 10px;
}
#userblock{
display: inline;
}
#back
{
width: 1024px;
}
#header {
height: 436px;
display: inline;
}
#logo {
width: 859px;
height: 173px;
text-align: left;
padding-left: 20px;
margin-top: 50px;
padding-top: 60px;
}
#logo a {
text-decoration: none;
text-transform: lowercase;
font-style: italic;
font-size: 18px;
color: #ffffff;
}
#logo H2 a
{
font-size: 12px;
}
#menu
{
background: url(images/menu.gif) no-repeat;
width: 800px;
height: 83px;
padding-left: 90px;
padding-right: 0px;
}
#menu a {
float: left;
display: block;
width: 170px;
height: 83px;
text-align: center;
text-decoration: none;
color: #ffffff;
font-weight: bold;
font-size: 14px;
text-transform: uppercase;
vertical-align: middle;
padding-top: 20px;
margin-left:5px;
}
#menu a:hover {
background: url(images/menu_r.gif) repeat-x;
float: left;
display: block;
width: 170px;
height: 83px;
text-align: center;
text-decoration: none;
color: #ffffff;
font-weight: bold;
font-size: 14px;
text-transform: uppercase;
vertical-align: middle;
}
#submenu
{
margin-left: 140px;
background: url(images/submenu.gif) no-repeat;
height: 83px;
padding-left: 10px;
padding-right: 0px;
width: 779px;
margin-top: 20px;
}
#submenu a {
float: left;
width: 135px;
height: 83px;
display: block;
text-align: center;
text-decoration: none;
color: #ffffff;
vertical-align: middle;
font-weight: bold;
font-size: 14px;
text-transform: uppercase;
padding-top: 20px;
margin-left: 45px;
}
#submenu a:hover {
padding: 0px;
width: 135px;
height: 83px;
background: url(images/menu_r.gif) repeat-x;
float: left;
display: block;
text-align: center;
text-decoration: none;
color: #ffffff;
font-weight: bold;
font-size: 14px;
text-transform: uppercase;
vertical-align: middle;
padding-top: 20px;
}
#left
{
width: 195px;
}
#left H3
{
width: 170px;
height: 26px;
font-size: 30px;
font-weight: bold;
padding-left: 25px;
padding-top: 15px;
text-transform: uppercase;
color: #ffffff;
background: url(images/title.gif) ;
margin-top: 20px;
}
#left ul {
list-style: none;
padding-bottom: 10px;
margin-bottom: 10px;
}
#left .title_back
{
background: url(images/title_back.gif) repeat-y;
}
#left .title_bottom
{
background: url(images/title_bottom.gif) no-repeat bottom;
padding: 10px;
}
#left li ul {
border: 0px;
margin-left: 20px;
margin-bottom: 10px;
padding-top: 20px;
background: none;
}
#left li li {
padding: 4px 4px;
color: #000000;
border: 0px;
display: inline;
}
#left a {
color: #D65811;
}
#left a:visited {
color: #D65811;
}
#left td
{
color: #ffffff;
}
#left th
{
color: #D65811;
}
#left caption
{
color: #D65811;
}
#left p
{
padding: 10px;
color: #D65811;
}
#calendar1 {
padding: 20px 10px 20px 10px;
}
#calendar table {
width: 100%;
text-align: center;
}
#calendar thead {
}
#calendar tbody td {
border: 1px solid #F1F1F1;
}
#calendar #prev {
text-align: left;
}
#calendar #next {
text-align: right;
}
#calendar tfoot a {
text-decoration: none;
font-weight: bold;
}
#calendar #now {
background: #696969;
border: 1px solid #ff0000;
font-weight: bold;
color: #ffffff
}
#right
{
float: right;
width: 600px;
padding-right: 10px;
text-align: right;
z-index: 10;
}
#aright H4
{
margin: 0;
padding: 0px;
font-size: 12px;
font-color: ffffff;
color: #ffffff;
}
#right p {
margin: 0;
padding: 0;
padding-bottom: 10px;
}
#right ol, #right ul
{
margin-left: 30px;
}
#right a {
font: white;
color: white;
text-align: right;
text-decoration: underline;
}
#right li {
font: white;
color: white;
text-align: right;
display: inline;
}
#right h2 {
margin: 0;
padding: 0;
padding-top: 10px;
color: #D65811;
}
.date {
text-align: right;
color: #D65811;
font-size: 11px;
}
.date a {
color: #D65811;
}
#footer {
padding-top: 20px;
margin-top: 20px;
height: 64px;
clear: both;
background: url(images/footer.gif) repeat-x bottom;
}
#footer p {
margin: 0px;
width: 778px;
font-size: 10px;
text-align: center;
color: #ffffff;
}
#footer a {
color: #ffffff;
}
#H2 {
line-height: 1.5;
}
#table-plus {
padding-top: 25px;
}
#td {
color: white;
font-size: 14px;
}
On Jul 8, 3:18 pm, kevinpfromnm <[email protected]> wrote:
> Repeat will just cycle through each element of a collection and render
> the interior of the block (view if no text given) with no extra
> wrapping tags. Your collection you probably want to have a class or
> id defined so you can change your css for the collection to use
> something like .css-class-name li { display: inline } that or you
> might be able to do it with float but that's probably another can of
> worms if you're not familiar with css.
>
> On Jul 8, 12:51 pm, hobo_hippy <[email protected]> wrote:
>
> > This has been mentioned before, but I've had no luck trying the
> > previously mentioned solutions. I posted a topic called CSS help, but
> > I think that title scared people away. Anyways...
>
> > I have a collection of users, and using the paperclip plugin and a
> > modified card for User, the collection displays a user picture and
> > their name below the picture. No matter what I do to the CSS, I can't
> > get the user pictures to display horizontally, that is, I can't get
> > them to list next to each other instead of on the next vertical
> > section of space. There was mention of using repeat instead of
> > collection in a previous discussion, and I'd like to explore that. If
> > I'm straight up redefining the index-page tag in application.css,
> > what's the right way to call repeat instead of collection? I already
> > tried just swapping out <collection param/> for <repeat param/> but
> > that just leave me with an empty list - nothing shows ;(
>
> > here's my def
>
> > <def tag="index-page" for="User">
> > <page merge title="Users">
> > <body: class="index-page user" param/>
> > <content: param>
> > <header param="content-header">
> > <h2 param="heading">Users</h2>
> > <p param="count" if>There <count prefix="are"/></p>
> > </header>
> > <section param="content-body">
> > <!-- <a action="new" to="&model" param="new-link"/> -->
> > <page-nav param="top-page-nav"/>
> > <collection param/>
> > <page-nav param="bottom-page-nav"/>
> > </section>
> > </content:>
> > </page>
> > </def>
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups "Hobo
Users" group.
To post to this group, send email to [email protected]
To unsubscribe from this group, send email to
[email protected]
For more options, visit this group at
http://groups.google.com/group/hobousers?hl=en
-~----------~----~----~----~------~----~------~--~---
