1. Josh
  2. Free Templates / Extensions
  3. Friday, 23 March 2012
  4.  Subscribe via email
I seem to be having trouble being able to center the logo on the template. :( I've tried all sorts of things like "margin-left: auto; margin-right: auto", using center tags around the divs, align:center and so forth. Non of them seem to center the logo. Any help would be greatly appreciated. B)

Edit: The url of my site is http://www.joshklewis.com/
Accepted Answer Pending Moderation
0
Votes
Undo
The second link is better. Again, think of using a differing serif type face for your captions. Give some margins, top and bottom to the captions. In other words, make the captions stand out just as much as the photography does, just a little toned down so as not to detract from the imagery. Classes would be a saving grace for you.

I love your photography work. I wish I had access to the site. An enhancement would be some typesetting of the material to make it look more like a professionally done article for a magazine. B) Too much white space which is a distraction.

Use a headline, generally the same text as your article title, as the first line of the article. Put a line (<hr style="text-align:center;width:85%;"> under the article followed by your text and images. Make the line what ever style you choose, single, double, size, color, etc., not forgetting to adjust the line's top and bottom margin as necessary for aesthetics.

For testing purposes comment out using <!-- and --> the Sulpher Creek during evening image. Duplicate the image to the left and in your favorite image editor add some shadow and line layer adjustment to the file. Put it immediately adjacent to your original image and see what you get. I attached a sample for testing purposes.

[attachment]josh_001.png[/attachment]
  1. more than a month ago
  2. Free Templates / Extensions
  3. # 1
Accepted Answer Pending Moderation
0
Votes
Undo
The Baker ascent story (as mentioned) on my personal site looks different than on another site I post it on:
http://www.alpinejosh.com/adventure/120-winter-ascent-of-mount-baker (personal site)

A improved version of this can be seen on my site Alpine Ascent (css used for styling of dozens of articles):
http://www.alpineascent.com/trip-report/1-winter-ascent-of-mount-baker

Let me know what you think. B)
  1. more than a month ago
  2. Free Templates / Extensions
  3. # 2
Accepted Answer Pending Moderation
0
Votes
Undo
Hey Josh,

Can I respectively offer a comment? In replying to the previous post I noticed something on your site, purely aesthetic.

I was down into your Winter Ascent of Mount Baker and noticed you had no styling for your captions. How about this for the caption under your Mount Shuskan image?
<p style="text-align: center; font-size: larger; margin-top: 4px"><b>Mount Shuksan Clearing Up</b></p>

In various sites over the years I got so tired of typing it out that I finally created several classes, each different from the other, to save my fingers. For the larger images I created a class calling it caption_large. For the images under the Mt. Shuskan image I would create a class caption_medium tailoring to your desires. It also applies to spans where you're not using a <p> and </p>. I would also try a different font class to attract the reader's eye to the caption. Since your site primarily uses a sans-serif font, try a serif font. Other than Times Roman which I detest for its metrics. :P

Your main image on that page, the video, needs a class something akin to iframe_margin (call it what you will) that applies a margin to both the top and the bottom. I thought it was recommended to cease using tables and iframes? Myself for other than an old site I developed years ago, now long gone, I've avoided using such things for years.

Cheers!
  1. more than a month ago
  2. Free Templates / Extensions
  3. # 3
Accepted Answer Pending Moderation
0
Votes
Undo
dear josh lewis,
Hi
Can you say name of joomla extension that you use in first page of your site as slide show? is that free?


Josh is using [color=#993300]JSN Image Show Pro[/color] which is a commercial extension. Its pretty good from what I've read. In essence it creates an Adobe Flash movie which, IMHO, is a pain in the rear. Others like Flash, I do not and I have the full version of Flash in my Creative Suite. On a Joomla site, IMHO, it creates additional, unneeded overhead to the site.

There are other slide shows available on the [color=#993300]Joomla Extensions[/color] page that will do the same thing.
  1. more than a month ago
  2. Free Templates / Extensions
  3. # 4
Accepted Answer Pending Moderation
0
Votes
Undo
dear josh lewis,
Hi
Can you say name of joomla extension that you use in first page of your site as slide show? is that free?
  1. more than a month ago
  2. Free Templates / Extensions
  3. # 5
Accepted Answer Pending Moderation
0
Votes
Undo
Touché my friend and I hope I spelled that correctly. That's what makes the Internet so fun, two people can take differing approaches to developing a web site and have them both work.

Your menu system does make me wonder though. Why on a 24" at 1920 pixels is it size X on screen and proportionally a different size on a 17" at 1440 pixels. Oddly phrased I know and I wish I could figure that one out.

Yeah, I know what you mean about older browsers but I'm stuck with it. Heck, I have enough problems keeping a friend's system up to date from afar. Long story short with the essence of it being that if I could reach thru the phone and ring his neck, I would. The man still thinks that typing a url into Google search is the way to get to a website. :blink: It took me two months to convince him to load Firefox. And believe it or not I am developing a site with him. :S

As to the drop shadow I can see where you're coming from in regard to site members. The previous paragraph applies here as well, with some of my contributors not even knowing rudimentary HTML or CSS coding. Even after I set up paragraph styles accessible via drop downs the concept eludes them. I had a gent pass along two photographs of antiquity with both of them color whacked, JPG greased and clipped, removing subject matter. I put my foot down and will not use them. I think I would much rather have your members, I'll give you mine and five bucks for an aggravation fee if you'll take. 'em :evil:

As for your site I think hiring a professional coder might be in order. IF the funding (your pocket) can support it that is. It is a tough row, all of my sites are funded by me with a little support from others, but somehow we as developers get by. You're vision is good, your photography better, and believe you will succeed. Now put out some calendar's as that seems like a good way to fund the site. You have a ready audience which will likely grow as your site gets passed around. For that matter send me three or four, that one I like included, and I'll whip a sample up. I need a break from coding. B)

Cordially,
Wayne
  1. more than a month ago
  2. Free Templates / Extensions
  3. # 6
Accepted Answer Pending Moderation
0
Votes
Undo
I suppose the way I see it is that if someday it improves my site to make it a png, then I'll do so later on. ;) (Although when it comes to css and such I like to stay up to date)

As for the advanced search link, even when I disable the main menu module it still floats around. :huh: So it has nothing to do with my css menu (the blue one).

I don't think it was the image that was clipping it but rather the image that was produced with the left side module. For 2 years the template would have a strange display with modules longer than something like 600px. So yesterday I re-designed my template to produce the sides by a border instead. In firefox the border is round, but in ie7 the template looks a bit square like. The way I see it is that some day people will (hopefully) realize that they should upgrade their browser or else websites just won't look as beautiful. Usually I don't like Internet Explorer, but IE9 is starting to get into the zone of working to display special css codes. :) I was reading in the joomla forum someone mentioning that if developers keep supporting Joomla 1.5 software after J 1.5 is unsupported that it would not encourage users from migrating. Same thinking with IE.

Regarding the drop shadow, over time I expect the frontpage to be populated by my site members rather than myself. Hence if I were to try your idea I would have to add a drop shadow every week to multiple thumbnails! :woohoo: And that's not even including the featured photos.
  1. more than a month ago
  2. Free Templates / Extensions
  3. # 7
Accepted Answer Pending Moderation
0
Votes
Undo
I usually don't work with TIF's and PNG files, and when I do I usually convert them to jpg. ;)

I use transparent PNG images because if in the future I want to go with a slightly differing shade for my site background I don't have to worry about my image backgrounds. To each their own and I err on the side of future possibilities.

The template I used on my Alpine Ascent site was originally "Yoo Beyond" as seen here: http://www.yootheme.com/demo/joomla/beyond
When I upgraded my site to joomla 1.7 and eventually 2.5...

That explains a lot then. It took Ciaran a short spell of time for my previous and next buttons, but he came thru like the champ he is. At least it wasn't something I had done. :dry:

Although I do admit I'm having trouble positioning the "Advanced" link which links to the advanced search. It looks fine on my screen but moves around on bigger screens. :huh:

I just looked at it using my 24" monitor at 1920 pixels and it is okay. On my 17" laptop at 1440 it has a problem. I think the problem lies in your menu system. I would suggest putting in place a standard menu that came with your version of Joomla and see how it reacts. Proportionally the menu takes up more screen real estate using differing resolutions. It should not do that.

As for the regions deal, what browser are you using? Do you mind providing me a screen shot of this.

I primarily use Firefox tho' I also test in Internet Explorer 7 with a dose or two of Safari. In the captures below from FF please note that the drop shadow for the images to the left is clipped. In other words, the image is too large for the container. Trying adding some negative right margin to your <aidanews2> class. The two images should reflect this concept.




One note after having developed extensive PS actions for production work. Depending upon my target Internet image dimensions, I use differing amounts of drop shadow. It is a proportional concept.

I believe you're doing the drop shadow via CSS. When I view the page in IE7 I see no drop shadows anywhere. I like to offer the visitor the same image, no matter the browser. And since I have a production routine I developed, I can deliver the images easier. And the file sizes are not really that different, depending. Your red sunset JPG image is 13kb. A transparent PNG image version with drop shadow is 25kb. The actions I posted can do what you want with a little re-do on your part.

As for the panorama, I've got many panoramic photos that I've saved over the years. Appreciate your comment and will have to look into it one of these days.

They'd make awesome screen savers. I use Second Nature's as I also on occasion purchase their images. They're likely right up your alley. Myself I'm into Dungeons & Dragons so I take my old calendars and game modules and create my own desktop and saver images. B)

Cordially,
Wayne
  1. more than a month ago
  2. Free Templates / Extensions
  3. # 8
Accepted Answer Pending Moderation
0
Votes
Undo
I usually don't work with TIF's and PNG files, and when I do I usually convert them to jpg. ;)

With the Beez20 template there are bits and pieces one can take off and use for other templates. B)

The template I used on my Alpine Ascent site was originally "Yoo Beyond" as seen here: http://www.yootheme.com/demo/joomla/beyond
When I upgraded my site to joomla 1.7 and eventually 2.5 I still very much wanted to use this template. At the time I was less knowledgeable with css and such so I had a bit of difficulty converting the template. With much experimentation and reading documentation I managed to upgrade the template to joomla 1.7. I decided that because the Yoo Beyond seemed kinda abandoned I decided to rename the template to "Adventure". To make it fair I stripped out much of the typography that I did not use and over time added all sorts of corrections and css additions. I completely stripped out the menu and swapped to Ice Mega Menu because it gave me more freedom of positioning and such. With the upper part of the template I know it might look a little odd, but I decided to try on a style that I have never seen in any other website which was to have the logo in a sense be part of the bar below the menu with the breadcrumbs inside of it as well as the search. This way it's compressed, easy to find stuff, and looks alright.

Although I do admit I'm having trouble positioning the "Advanced" link which links to the advanced search. It looks fine on my screen but moves around on bigger screens. :huh:

As for the regions deal, what browser are you using? Do you mind providing me a screen shot of this.

Regarding the tabbing system, it uses a few extensions for this. I use a extension called "Tabber" which allows you to insert a code {tab=name}{tabs} which you can insert as many tabs as you want. Then I used another extension called nt3template which allows me to automatically generate the tabs in content categories that I specify. Then I convinced a few developers to make it so I could insert a component/plugin in these tabs with codes like {jcomments} and {comments}. I used two comment systems, one for a travel log and the other for comments.

As for the panorama, I've got many panoramic photos that I've saved over the years. Appreciate your comment and will have to look into it one of these days.
  1. more than a month ago
  2. Free Templates / Extensions
  3. # 9
Accepted Answer Pending Moderation
0
Votes
Undo
And here I thought I was late to bed and early to rise! Myself, the bottom margin was copesetic. I go with a slighter drop shadow, moving it closer to the image. I think I use 120deg, 3 pixel distance and 5 to 10 pixel for size. But 'tis your site, your choice.

You can download a sample set of my Photoshop actions here. I process directories containing up to 30 GB and over 800 files of TIF files. And I have hundreds of such directories so I eat hard drives like candy. Be forewarned, the "export" routine in the PNG action needs to be set up specific to each directory.

I have a TIF directory and a PNG directory. Before I run the PNG action I open a TIF and skip down to the export item and double click into it. I then change the directory to the directory set I'm working on, exporting the PNG to the PNG directory. I close the TIF, not saving it, and then run the PNG action on the TIF directory. I've used this set of action, with minor changes, ever since PS 7.0. I do different work than you but it will likely work for you as well. I have a slightly different routine I run over in Fireworks that gets rid of the massive amounts of white space output from PS.

Myself, I'm stumped by the navigation buttons too. I got it to work using Beez20 but not Neptune. I don't mean to pose aspersions against Neptune but it makes me wonder. I see there's a response to my posting on the matter, so hopefully Ciaran has a solution.

I like the template you used on your Alpine Ascent site. Which one is it? I don't think it will work on my material, I need my main content window to stay a fixed width, but I see possibilities for a site a friend wants me to help him set up. Actually I see possibilities everywhere, there everywhere. :evil:

As for the calendar idea I seem to recall there was a script for InDesign to create a calendar layout. I took a set of heavily touched images and created one for fun back when I first bought CS4. I gave four of them away at my family reunion years ago. They screamed when I told them if they wanted more it would cost them $10.00. Go figure!

The only other idea for Alpine I might have to offer is to make more room for the images under your "Featured Regions" on the left. Your drop shadow is getting clipped. Did the tabbed content come with the template or is that a plug-in you got somewhere else. The site looks good and don't forget my comment about prints of the large panoramic shot on your Josh site. That is one awesome image.

Good work,
Wayne
  1. more than a month ago
  2. Free Templates / Extensions
  3. # 10
Accepted Answer Pending Moderation
0
Votes
Undo
I still have to work out the previous and next deal as well. :dry:

As for the 10 pixel margin with the pictures, this has been applied thanks to your suggestion. :) I decided to add a 8 pixel bottom margin as well.

I moved the checkbox as you mentioned and did a little more customization to the registering link and such to make it more appealing.

I fixed a glitch where google chorme would center the image rather than put it to the left, so adding a class in the main template fixed this. Drop shadow also added. :cheer: The drop shadow idea was a good suggestion. With a few more fix ups my AlpineAscent.com site will start looking pretty. Any more suggestions on that would be appreciated.

As for my coding skills, although I know some css, I still struggle with finding the exact class names for certain features like pagination sometimes. :unsure:

I actually won a contest a few months ago where one of my pictures is in over 100 calendars for an organization. But yeah, that's a good idea, sometimes I forget about that option.
  1. more than a month ago
  2. Free Templates / Extensions
  3. # 11
Accepted Answer Pending Moderation
0
Votes
Undo
Nice image and it works!

As for your problem with pagination I can't get it to work either. I just migrated my Neptune from 1.5.23 to 1.5.25 to 2.5.3 and I lost pagination, period. From what I saw on the Joomla forums there are some others having problems as well. Like I said, it worked just fine in 1.5.

I've gone thru every stinking think making sure pagination is turned on and can't get either the "Prev" or "Next" or the numbered list to turn on. Its almost like Neptune doesn't have any pagination CSS in it.

As for your other site, nice. I might suggest adding 10 pixels right margin to your <.aidanews2 img> class, the text is a little tight to the right of your image. I don't know how it might impact your design but it looks okay on the front page and doesn't effect the images running down the far right side. I wonder how a subtle drop shadow might work on your images?

I got to start a thread on pagination on what I just discovered. In looking at your posting you made me realize something. I took my Neptune 2.5 install and just set it to use the Beez20 template. Now all of a sudden I have my "Next" and "Prev" buttons. Hmmm...

Another note. Create a <mod_login_remembermetext> class or id and add some right margin to it. The check box is right up against the "Remember me" text. Ten pixels seems to work.

Sorry I can't help, my strong point is aesthetics, and I have a suspicion your coding skills are probably better than mine. :dry: In closing, create some calendars using your photography and writing skills. They deserve it. I come from a publishing background, mostly small time, but I recognize quality when I see it. Do up about 30 or so of 'em for your friends and the like. Who knows, you might get orders from shops you deal with or your mountaineering supplier.

Cordially,
Wayne

P.S. Start using <space&npbs;> to end a sentence. It keeps the sentences from bleeding together. B) Especially when dealing with smaller font sizes.
  1. more than a month ago
  2. Free Templates / Extensions
  3. # 12
Accepted Answer Pending Moderation
0
Votes
Undo
Thanks again for the descriptive reply.

I changed my logo once again (looks better on my actual site)

http://www.joshklewis.com/templates/j51_oxygen/images/logo.jpg

Let me know if I added too much inner shadow on my logo. ;)

As for the slideshow, I like jsn slideshow because not only does it display text, loads at a decent speed, but most importantly it allows me and my users to scroll though the pictures and go back with a display of the thumbnails. Navigation is important in my opinion with a slideshow.

With the images on my page I usually use a editor that can extract most of a copy and paste. I post most of my trip reports/pages on SP as seen here: http://www.summitpost.org/users/josh-lewis/67750
With the Eldorado Peak example the page was supposed to look like this:
http://www.summitpost.org/eldorado-peak/150316
This makes it easy for me to post my pages on my personal website as well as trip reports onto my other site. B)

I posted in another forum post on this site where I'm currently having template issues as seen in the following post:
http://www.joomla51.com/forum/support/free-templates/styling-pagination
If you can solve that mystery, I'll have to give you 5 karma points! :)
  1. more than a month ago
  2. Free Templates / Extensions
  3. # 13
Accepted Answer Pending Moderation
0
Votes
Undo
Thank you very much for your detailed reply. I added the extra bit to the ei7 template, changed it to 13 px because I slightly shrank the logo.

The main body sneaks up on top of the logo? What browser does this? (I tested using ie9, chrome, and firefox).


That looks a lot better. Even in Safari. I was talking about IE7. Yes, it's dated but you'd be surprised how many people still use it. I know that on the four sites I run about 50 to 55 percent of my visitors are still using it.

I added an extra second of transition time to the slideshow. Originally it was much longer but my brother critiqued me telling me that it goes too slow before. ;)So the extra second I think should help, there is a pause button as well on the slideshow. Let me know what you think on that.

As for the logo, I used picasa 3 to round up the corners a bit. B)


As for the speed it all depends what you and your visitors like. Myself, when I see a slide show type of effect I like to take the time to view the images without having to pause the auto show. We each have our own likes and dislikes.

I really like the slide show that Joomla51 uses. I even went so far to as to try and write a [color=#993300]tutorial[/color] for the fine folks here at Joomla51 for their slide show. I'll be taking it down on Monday. I think they license their slide show from someone else. It is simple to set up which makes it good for some folks, but not others. If a user wants to get a more feature full slide show there are so many out there that at times it gets confusing figuring them out.

Best I can offer is to let you visit my [color=#993300]Joomla51 themed site[/color] and draw your own conclusions. I used their slideshow and created my own images. The inner shadow technique I used might work on your logo, adding some depth to it. If Picasa 3 won't do it pass the file along and I'll gladly do it for you.

That's one [color=#993300]awesome[/color] panoramic photograph on your Eldorado Peak page and would make a wonderful print at about four foot long. You might think about implementing this [color=#993300]technique[/color] on some of your images.

Somewhere on this [color=#993300]site[/color], I'm giving a link just to one page, I used an interesting concept. Using the method in the previous paragraph I took the center brown image and made a larger image pop up when the image was clicked. If you notice there is some text in the bottom left corner of the pop up. I took that text and turned it into a link to another person's site. As I said, it was some other image on my gaming site. I think it might work well on your site.

Might I suggest adding the following code to some of your paragraphs. Its some simple typography.

<p style="margin-left: 20px; margin-right: 20px; margin-bottom: 5px; text-align: justify;">Eldorado Peak is the "Queen of the Cascade River" according to Fred Beckey. Massively aloof, perched at the edge of the largest contiguous ice-sheet in the lower 48 states not connected to a volcano, the summit has a Himalayan-like splendor owing to its remoteness, position, and knife-edge summit ridge. The total climb encompasses a brutal 6800 vertical feet (before ups and downs) and can be made through one of two interesting approaches. The climb is not technically difficult, and a number of people que up each year to experience the thrill of stamping out a "just-wide-enough" path on the summit ridge and looking into the heart of the Klawatti-Inspiration-McAlister icecap. Views into Marble Creek, Dorado Needle, Forbidden Peak, Mt Buckner, Mt Logan, Johannesburg Mt and the other peaks of the Ptarmigan Traverse... It is an exhilerating summit experience, especially with the extreme alpine exposure.</p>
<p>a href="http://www.panoramio.com/photo/7138145"><img style="width: 100%;" src="http://static.panoramio.com/photos/large/7138145.jpg" alt="Eldorado Peak from Marblemount"></a></p>

I hope that comes thru okay and I'm not trying to be a nosy-body, just trying to help by offering suggestions. I'm no where as accomplished as Ciaran or some others on Joomla51, but at least I'm willing to help where I can. If you want some aesthetics help I'm willing to offer any help you'd be willing to accept. :unsure:

Cordially,
Wayne
  1. more than a month ago
  2. Free Templates / Extensions
  3. # 14
Accepted Answer Pending Moderation
0
Votes
Undo
Thank you very much for your detailed reply. I added the extra bit to the ei7 template, changed it to 13 px because I slightly shrank the logo.

The main body sneaks up on top of the logo? What browser does this? (I tested using ie9, chrome, and firefox).

I added an extra second of transition time to the slideshow. Originally it was much longer but my brother critiqued me telling me that it goes too slow before. ;)So the extra second I think should help, there is a pause button as well on the slideshow. Let me know what you think on that.

As for the logo, I used picasa 3 to round up the corners a bit. B)
  1. more than a month ago
  2. Free Templates / Extensions
  3. # 15
Accepted Answer Pending Moderation
0
Votes
Undo
Josh,

Ciaran got to it first. :evil:

I would suggest you add your same CSS statements to the IE7.CSS file as well. In it also add a "margin-bottom: ??px" statement also. Or what ever works, as your main body sneaks up and lays on top of your logo by a bit. I don't know how to accomplish this for Safari but it is doing the same thing as IE7.

If you're up for it I have a a thought or two. Those are some beautiful photographs. How about slowing the transition down a bit, letting the images shine thru. The visitor needs a little time to enjoy your work. Do some varying fades?

For your logo, and since IE and Safari want to lay over your main content, take advantage of it. Take your logo and round the top corners off and move the image over as Ciaran said. Make the logo seem to become part of the main content. You might have to make it a little taller, adding more to the bottom. I'd leave your text just where it is, making you stand out.

Any reason you're making the logo a linkable image to the site the visitor is already on? Never mind, now that I think on it the image can serve the same purpose as having a Home button. The way you're doing it makes it cleaner. :blush:

Nice background image as well...

Cordially,
Wayne
  1. more than a month ago
  2. Free Templates / Extensions
  3. # 16
Accepted Answer Pending Moderation
0
Votes
Undo
Not what I was expecting... but non the less it works! :cheer: Thank you very much for helping me with this. B)
  1. more than a month ago
  2. Free Templates / Extensions
  3. # 17
Accepted Answer Pending Moderation
0
Votes
Undo
Hi josh

May I suggest adding the following to the end of your templates template.css (../templates/j51_oxygen/css/template.css)

h1.logo a {left:12px;}


Ciarán
  1. more than a month ago
  2. Free Templates / Extensions
  3. # 18
Accepted Answer Pending Moderation
0
Votes
Undo
Sure thing, here is the url: http://www.joshklewis.com/
It's still not centered, but looks alright for now. Hope to get it centered eventually. ;)
  1. more than a month ago
  2. Free Templates / Extensions
  3. # 19
Accepted Answer Pending Moderation
0
Votes
Undo
Josh,

Can you send a link to the site please so people can take a look and offer suggestions?

Cordially,
Wayne
  1. more than a month ago
  2. Free Templates / Extensions
  3. # 20
  • Page :
  • 1


There are no replies made for this post yet.
Be one of the first to reply to this post!

Join Our Newsletter

* indicates required
We respect your privacy and do not tolerate spam and will never sell, rent, lease or give away your information (name, email, number, etc.) to any third party. Nor will we send you unsolicited email.
Joomla51 - Mullaghmore, Co. Sligo, Ireland
Joomla51.com is not affiliated with or endorsed by the Joomla! Project or Open Source Matters.
The Joomla! name and logo is used under a limited license granted by
Open Source Matters
the trademark holder in the United States and other countries.

We use cookies on our website. Some of them are essential for the operation of the site, while others help us to improve this site and the user experience (tracking cookies). You can decide for yourself whether you want to allow cookies or not. Please note that if you reject them, you may not be able to use all the functionalities of the site.

Ok