New div class for one page « Graphene Theme Forum

Graphene Theme Forum » Graphene Wordpress theme » Support

New div class for one page

(8 posts) (2 voices)

Started 4 months ago by garyc
Latest reply from garyc
This topic is closed
This topic is resolved

Skip to the latest post | RSS feed for this topic

garyc
Member

Hi

I've put some new content into the middle section of http://www.hackneytools.com, and would
like to style this slightly differently to the blog pages and other pages.

I've moved the posts to 'blog' page and the new front page is now to sell tools, and is therefore
a page made up mainly of one long html document. I'm not even sure this is the way to go
with this, but I'm just making mstakes as I go along, and we'll see how it goes!

I'd like to make a new div class in my child theme, and have highlighted the present div,
thinking I could make a start by copying that chunk, but using Firebug, the box seems
to be either 'clearfix', or 'post 1072'??

Really all I want to do is:

1. Make groups of pics on horizontal lines (so far I've tried various 'clear' and 'float' combinations,
with no success.

2. Sort out the spacing, so that the copy for each entry sits close to each picture group, and
not to the pic group below.

3. Work out how (when you click on an image), the 'Lighbox' plugin only lets you click through
that small group of images in the set, and not through all the images on the page???

If you can help with any of these queries, I'd really appreciate it. It would be easier if I had
posts on this page I think, but my posts page is now elsewhere you see, so I somehow have
to format a whole long page, or maybe I'm missing something? (very likely)

Thank you
Gary

Posted 4 months ago #
Kenneth John Odle
Moderator
Float is not an easy concept to figure out.

Something like this in the html editor:
```
<div class="hackneyfrontpage">
<div class="picture">stuff for the image, caption, etc.</div>
<div class="picture">stuff for the image, caption, etc.</div>
<div class="picture">stuff for the image, caption, etc.</div>
<div style="clear:both;"></div>
<div class="picture">stuff for the image, caption, etc.</div>
<div class="picture">stuff for the image, caption, etc.</div>
<div class="picture">stuff for the image, caption, etc.</div>
</div>
```
And in the css:
```
.hackneyfrontpage {style elements here;}
.picture {float: left;}
```
You probably want to choose a more descriptive class name that "picture", however.

This should give you three pictures in each of two rows.

You can learn more here:
<div class="img"></div>

Click on the "Try it yourself" button to figure it out. I've learned lots that way.

See this if you need a better example: http://pastebin.com/jj08JYM5

More helps are available on my blog.
Follow this advice for setting up your blog.
Problems? Questions? Read the forum rules and help us to help you.
Posted 4 months ago #
garyc
Member

Ah, thanks John. I'll get back on this in the afternoon. Your code looks full of promise!

I've managed to get Lightbox firing multiple images from one thumbnail, YAY! However, when
the images come up, because images are all on the same page, the second set start from
'4-6', and also scroll through the first set, '1-3'. This really is doing my head in. I'm a total
newbie, and doing my best, but I can't see a way out, unless I dump Lightbox, which
I really don't want to do.

Keeping thumbnails small means I can get loads of sales pics on the page, and zooming
in on them for a close view is really useful for people buying these types of tools.

Slightly confused about best way forward, but will try your code for layout and go from there

Thanks John

best
Gary

Posted 4 months ago #
garyc
Member

Sorry, 'Kenneth', not 'John'!

Posted 4 months ago #
garyc
Member

Hi Kenneth

Ok, I stripped everything out as you said and used this code.

http://hackneytools.com/

Lightbox now recognises groups of images as groups, (when I worked out what the 'rel'
tag was for). I can now scroll through sets of only 3 or four, numbered properly. GOOD!

Images are now in horizontal rows, rather than stacked vertically. GOOD!

Only thing is, I now have text wrap on each group of pics. I thought I could use 'clear:right'
in the css for the pics within this special div, but having tried that, nothing got forced
round? Am I doing something wrong? I wonder if I need a special tag for the last pic
in the row, as presumably 'clear:right' on all pics would stack them vertically again?

Also, my right sidebar has now been forced down to the bottom, for some reason?

Thanks Kenneth.

best
Gary

Posted 4 months ago #
Kenneth John Odle
Moderator

I thought I could use 'clear:right'
in the css for the pics within this special div,

Try applying that to the special div in the css:

.hackneyfrontpage {clear:right;}

Also, my right sidebar has now been forced down to the bottom, for some reason?

Did you remember to close the main <div class="hackneytools"> with a closing </div>?

More helps are available on my blog.
Follow this advice for setting up your blog.
Problems? Questions? Read the forum rules and help us to help you.

Posted 4 months ago #
garyc
Member

Ok, sidebar has popped back up, so you're right about those closing div tags, I must
have deleted them by accident.

Still got text wrap around the groups of images though. Frustrating. This is what had
me stumped first time round. Any more ideas, Kenneth?

Thanks for your help.
Gary

http://www.hackneytools.com

Posted 4 months ago #
garyc
Member

Hi Kenneth

I sort of fixed it so it works, but it's the only way I could make it happen. I added a

.hackneyforsale p

specification under the css for the main .hackneyforsale div, and gave the 'p' a width
of 380px. This seemed to push everything down under each group of pics, and achieved
what I'm looking for. There are no doubt better ways to achieve it, but it seems to work?

Gary

Posted 4 months ago #

Topic Closed

This topic has been closed to new replies.