Recent Topics
  1. b2evolution CMS Support Forums
  2. b2evolution Support
  3. Templates, skins, XHTML and CSS
  4. [1.9.x] Special css into styles.css for a gallery [solved]

[1.9.x] Special css into styles.css for a gallery [solved]

1 Apr 26, 2007 01:52    

My b2evolution Version: 1.9.x

I have designed a very simple gallery approach, which uses just css and html to be rendered (no javascript needed). It is very basic and provides a nice gallery effect creating the thumbnails from constraining the images. It utilizes the hover mechanism and it opens the image in a new window (which could be changed of course).

I want to be able to write this in a post which on the surface shouldn't be too hard... but I need some help in incorporating my css into one of the style sheets.

My problem is that while I have written the css for this... I don't know how to get that css into one of the style sheets (like a skin style sheet) without conflicting with style elements which are already specifed, such as the ul, the a and the li elements.

Here is an example of the gallery (done in an html file):

http://www.samredman.com/b2example/cssmenu/ (opens in new window)

Here is the code for that page (which includes the css which I want to incoporate into a skin styles.css):

<html>
<head>
<style type="text/css">
ul
{
float:left;
width:100%;
padding:0;
margin:0;
list-style-type:none;
}
a
{
float:left;
width:6em;
text-decoration:none;
color:white;
background-color:B59629;
padding:0.2em 0.6em;
border-right:1px solid white;
}
a:hover {background-color:#F7DFC6}
li {display:inline}
</style>
</head>

<body>

<ul>
<li><a href="../images/nature1.jpg" target="_blank"><img src="../images/nature1.jpg" BORDER=0 height="90" width="123" alt="nature scene" title="nature scene - shows in new window" align="left"/></a>

<li><a href="../images/nature2.jpg" target="_blank"><img src="../images/nature2.jpg" BORDER=0 height="90" width="120" alt="interesting pic" title="Click here to view interesting picture - shows in new window" align="left"/></a>

<li><a href="../images/nature3.jpg" target="_blank"><img src="../images/nature3.jpg" BORDER=0 height="90" width="123" alt="images/nature scene" title="nature scene - shows in new window" align="left"/></a>

<li><a href="../images/nature4.jpg" target="_blank"><img src="../images/nature4.jpg" BORDER=0 height="90" width="120" alt="interesting pic" title="Click here to view interesting picture - shows in new window" align="left"/></a>
</ul>
<br>
<br>
<p>
<ul>
<li><a href="../images/nature5.jpg" target="_blank"><img src="../images/nature5.jpg" BORDER=0 height="90" width="123" alt="nature scene" title="nature scene - shows in new window" align="left"/></a>

<li><a href="../images/nature6.jpg" target="_blank"><img src="../images/nature6.jpg" BORDER=0 height="90" width="120" alt="interesting pic" title="Click here to view interesting picture - shows in new window" align="left"/></a>

<li><a href="../images/nature7.jpg" target="_blank"><img src="../images/nature7.jpg"BORDER=0 height="90" width="123" alt="nature scene" title="nature scene - shows in new window" align="left"/></a>

<li><a href="../images/nature8.jpg" target="_blank"><img src="../images/nature8.jpg" BORDER=0 height="90" width="120" alt="interesting pic" title="Click here to view interesting picture - shows in new window" align="left"/></a>
</ul>

</body>
</html>

I sure would appreciate help anyone who knows how to properly create (would that be a new class?) the code to insert my css into a skin styles.css, so I can display my simple gallery in a post

Back to top

2 Apr 26, 2007 02:16

You can either put the css in an existing stylesheet or create a new one. If you create a new one, you should add it to the _main.php file, like this:

<link rel="stylesheet" href="new_stylesheet.css" type="text/css" />


in the <head> section.

Now you have two different <ul>'s with different style. You can achieve that by naming them different. You should use a class:

<ul class="gallery">xxxxyyyyzzzzz</ul>


In your HTML.
In your stylesheet you must name them also:

ul.gallery(
float:left;
width:100%;
padding:0;
margin:0;
list-style-type:none;
}

This way there is no conflict in styles.

You can also do a lot of image styling in your css like so:

img.gallery{
border: none;
width: 120px;
height: 90px;
float: left)


and your image in the HTML:

<img class="gallery" src="image.gif" alt="alt_name" title="title" />

Good luck.

Back to top

3 Apr 26, 2007 02:21

Why don't you just give the gallery an ID eg: wrap it in a div called #gallery

Then simply have #gallery ul and #gallery li etc etc
That way it won't clash with other list elements tha may already exist in your b2 style sheets.

Back to top

4 Apr 26, 2007 05:22

Great progress. I am now showing a gallery of sorts, as you can see here in the blog demo I have set up.

http://samredman.com/blogdemo/index.php?blog=3

While it does show a thumbnail gallery and hovering does produce some effect. It still is not achieving the look I have in my example webpage, which is my objective (link follows). In the blog post, it is missing the borders around the thumbnails and there is no white space separation. This is what I am trying to achieve:

http://www.samredman.com/b2example/cssmenu/

Here is the addition I made to a skins styles.css file:

/* start div gallery */

.gallery a:hover {background-color:#F7DFC6}

.gallery a {
float:left;
width:6em;
text-decoration:none;
color:white;
background-color:B59629;
padding:0.2em 0.6em;
border-right:1px solid white;
}

.gallery ul {
float:left;
width:100%;
padding:0;
margin:0;
list-style-type:none;
}

.gallery li {display:inline} 

.gallery img { 
border: none; 
width: 120px; 
height: 90px; 
float: left)


 /* end div gallery */

What do I need to add or change in that css to accomplish what I have on that webpage? I think I have all of the css I was using there in the styles.css (you can see my webpage css in my earlier post).

The following is my posting in the blog:

<div class="gallery">

<ul>
<li><a href="http://samredman.com/b2example/images/nature1.jpg" target="_blank"> <img src="http://samredman.com/b2example/images/nature1.jpg" alt="nature scene" title="nature scene - shows in new window"/> </a> </li>

<li><a href="http://samredman.com/b2example/images/nature2.jpg" target="_blank"><img src="http://samredman.com/b2example/images/nature2.jpg" alt="interesting pic" title="Click here to view interesting picture - shows in new window" /></a>   </li>

<li><a href="http://samredman.com/b2example/images/nature3.jpg" target="_blank"><img src="http://samredman.com/b2example/images/nature3.jpg" alt="interesting pic" title="Click here to view interesting picture - shows in new window" /></a>   </li>
</ul>
<ul>
<li><a href="http://samredman.com/b2example/images/nature4.jpg" target="_blank"><img src="http://samredman.com/b2example/images/nature4.jpg" alt="interesting pic" title="Click here to view interesting picture - shows in new window" /></a>   </li>
<li><a href="http://samredman.com/b2example/images/nature5.jpg" target="_blank"><img src="http://samredman.com/b2example/images/nature5.jpg" alt="interesting pic" title="Click here to view interesting picture - shows in new window" /></a>   </li>
<li><a href="http://samredman.com/b2example/images/nature6.jpg" target="_blank"><img src="http://samredman.com/b2example/images/nature6.jpg" alt="interesting pic" title="Click here to view interesting picture - shows in new window" /></a>   </li>

</ul>
</div>

In the html... I did not have to close the <li> tags but in the b2evolution, an error display demanded that they be closed. I don't know if that is relevant to the solution or not.

Back to top

6 Apr 26, 2007 08:36

Thanks Afwas... that missing character did improve it (of course)...

Take a look now...

http://samredman.com/blogdemo/index.php?blog=3

You can see that it's better with the background color... But I still need to get separation between the thumbnails side by side and between the rows. I wonder if there is something I could put in the post to cause a line break or two? (I tried <br> but the error trapping says no to that).

Then the separation between the thumbnails.. that's a puzzle. I'll bet ¥åßßå will have a trick up his sleeve.

Back to top

8 Apr 26, 2007 08:54

add

margin-right: 10px;


to both the ul and the a in the css.
Delete the <br> and the <p> between this two rows in the HTML. If you need addiyional space between the lines, add:

margin-bottom: 10px;


to both the ul and the a in the css.

Experiment. You can also use margin (all four sides) and margin-top and margin-left.

Back to top

9 Apr 26, 2007 08:57

Ok... I fixed it (with that tip to go look at the w3schools...

border-style: solid;
border-right-color: #ff0000
border-right-width: 15px

Plus... I will continue to experiment with thos ¥åßßå suggestions... thanks to all.. this is a going to be very nice simple gallery. I did take a look at the zoom a while back.. but it just quivered all over the place. So, I thought I would just like to have something very very simple.

Back to top

10 Apr 26, 2007 09:01

This little magic trick changes the colour of the border when hoover:

a:hover img{
border-color: #F7DFC6;
}

Back to top

11 Apr 26, 2007 09:02

You might like to take a look at it in FF ;)

¥

Back to top

12 Apr 26, 2007 09:05

Thanks so much for the help from everyone.. I am going to bed now (2:00 am) and will play with this tomorrow to get it really nice... y'all have given me several more things to try... but I am quite excited, it is actually very usable now..

With the latest tweaks.. it's looking the same in FF as IE. I just checked.

Back to top

13 Apr 26, 2007 09:10

If this is the url [url=http://samredman.com/blogdemo/index.php?blog=3]http://samredman.com/blogdemo/index.php?blog=3[/url] then it still looks like my screenshot in FF2

¥

*edit*
Try this :


/* start div gallery */

.gallery a:hover {background-color:#F7DFC6}

.Zoom a { padding:0; } 

.gallery a {
display:block;
text-decoration:none;
padding:0.2em 0.6em;
color:white;
background-color:#B59629;
}

.gallery ul {
padding:0;
margin:0;
list-style-type:none;
}

.gallery li {
float:left;
padding:1px;
} 

.gallery img { 
border: none; 
width: 120px; 
height: 90px; 
)

Back to top

14 Apr 26, 2007 17:45

Thanks.. ¥åßßå that certainly fixed it (and what is crazy is that I did see that other display and was willing to accept that as ok, even though it wasn't my original objective... shows you how sleepy I was)... but now with your code correction, it's showing those thumbnails correctly.

I have one new problem now... (I'm sure it's minor). I need a line break (or maybe some adjustment in that "li" float code) to separate them properly in rows... I am getting three on the first row two on the second flush right and one on the third row flush left.

Here is a screen capture of that "alignment" problem:

http://samredman.com/b2example/images/example1.jpg

Once that "line break" formatting problem in the post is solved, this will produce a very nice simple gallery.

Back to top

15 Apr 26, 2007 18:04

Add margins. From the looks of it into the .gallery a { declaration.

.gallery a {
margin: 5px;
...
...

Back to top

16 Apr 26, 2007 18:10

Don't do the linebreak hardcoded. Remove all <br /> and <p>.
The images will flow automagically to the next row. What happens in your example is the automaggically linebreak after pic 3, then the hardcoded stuff resulting in whitespace, then two pics, then an automagical linebreak and then the last picture.

Back to top

17 Apr 26, 2007 18:33

Ok.. I added that margin: 5px; (later changed that to 2px)to the a element. Plus, I removed all the break stuff... and it did look nicer (better space between)...

But, the same problem of bad alignment was still there.

However, I found a "fix."

I added a non-breaking space "&nbsp;" just prior to the termination of the a element like this, "&nbsp;</a>" and

that fixed it.

Here is how it looks now:

http://samredman.com/blogdemo/index.php?blog=3

Notice, also that I created another post with just text and no images (but, still with links to the images), utilizing the same new div gallery class (it's the second post on the page). That makes a nice menu effect in a post (something someone was asking about a while back).

Back to top

18 Apr 27, 2007 01:24

Well done.

Your solution uses the <ul> which is not neccesary (it isn't a list). I came up with this one without:

<style type="text/css">
img.galery{
border-style: groove;
border-width: 12px;
border-color: #B59629;
height: 90px;
width: 120px;
}
a:hover img.galery{
border-color: #F7DFC6;
}


and the XHTML:

<div id="galery">
<a href="../images/nature1.jpg" target="_blank"><img src="../images/nature1.jpg" alt="nature scene" title="nature scene - shows in new window" /></a>
.. more images
</div>


As you can see I style the images, where you style the unordered list.

Back to top

19 Apr 27, 2007 06:56

Afwas... I can see where styling the image is perhaps a good approach.

I'm going to stick with what I've got now... because it's working. But, even my ul method could probably use some tweaking.

Back to top


Form is loading...