How I customized the Gallery 3 Beta 2 default theme

I thought I'd share what I learned about editing the Gallery 3 Beta 2 theme so that it might be of help to someone, but more importantly, hopefully someone will make note that changes like this should be able to be done in the theme files and not by editing core code. Because I basically learned how to do this over the course of a couple hours prior to the time of this post as I needed to get my gallery looking like the rest of my website (minimalist).

If there is an easier way to accomplish this, please let me/us know. And if this has been done before, I apologize for posting this, but please direct me to the original topic. Thanks!

Placing external links into the gallery header. If your website has different sections (ie. main splash page, a blog, an about me page,) then you will most likely want to put external links in the gallery's header to direct visitors to these areas, especially if visitors are coming to your site by way of a direct link to your gallery or search engine.

First, to add the links, edit the following file located in your gallery directory:

gallery3\module\gallery\helpers\gallery_menu.php

Then you need to look for the following code:

    $menu->append(Menu::factory("link")
                  ->id("home")
                  ->label(t("Home"))
                  ->url(url::site("albums/1")));

Copy & paste the above code right below it for as many links as you want, so that you get:

    $menu->append(Menu::factory("link")
                  ->id("home")
                  ->label(t("Home"))
                  ->url(url::site("albums/1")));

    $menu->append(Menu::factory("link")
                  ->id("home")
                  ->label(t("Home"))
                  ->url(url::site("albums/1")));

    $menu->append(Menu::factory("link")
                  ->id("home")
                  ->label(t("Home"))
                  ->url(url::site("albums/1")));

    $menu->append(Menu::factory("link")
                  ->id("home")
                  ->label(t("Home"))
                  ->url(url::site("albums/1")));

Then edit the code as follows:

    $menu->append(Menu::factory("link")
                  ->id("home")
                  ->label(t("Website Home"))
                  ->url("http://yourwebsitedotcom"));

    $menu->append(Menu::factory("link")
                  ->id("gallery")
                  ->label(t("Gallery"))
                  ->url(url::site("albums/1"))); leave one of these instances as is

    $menu->append(Menu::factory("link")
                  ->id("about")
                  ->label(t("About Me"))
                  ->url("http://yourwebsite/about"));

    $menu->append(Menu::factory("link")
                  ->id("blog")
                  ->label(t("Blog"))
                  ->url("http://yourwebsite/blog"));

The "id" is the link's unique Id to separate them from each other so they are each displayed. The "label" is the text that will appear on the website and the url is self explanatory. Leave one of the above set of code in its original state so that a direct link to your gallery will remain.

To customize the look of the link navigation "bar" (the default blue background), edit the following file:

\gallery3\lib\superfish\css\superfish.css

Look for the following code:

/*** DEMO SKIN ***/
.sf-menu {
	float:			left;
	margin-bottom:	1em;
}
.sf-menu a {
/*	border-left:	1px solid #fff; */
/*	border-top:		1px solid #CFDEFF; */
	padding: 		.75em 1em;
	text-decoration:none;
}
.sf-menu a, .sf-menu a:visited  { /* visited pseudo selector so IE6 applies text colour*/
	color:			#13a;
}
.sf-menu li {
	background:		#fff;
}
.sf-menu li li {
	background:		#AABDE6;
}
.sf-menu li li li {
	background:		#9AAEDB;
}
.sf-menu li:hover, .sf-menu li.sfHover,
.sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {
	background:		#fff;
	outline:		0;
}

The "background" style above is the default blue background for the default Gallery links that appear in the header (ie. "Home" and the admin links). You will also need to edit the "border" styles as there is a border around the blue background so that the links appear as blue blocks.

To edit the font family/size/style you need to edit the default theme's screen.css file. Look for the following code:

#gSiteMenu,
.gBreadcrumbs,
#gTagCloud ul {
  font-size: 1.2em;
}

The key code here is "sitemenu". Simply edit the font-size above, change the font look by adding "font-family", etc. Note: any changes you make will affect both the sitemenu as well as the breadcrumbs and the tagcloud since these are all grouped together. To separate the "sitemenu" code, simply delete "#gSitemenu," from the above and create a new line of code:

#gSiteMenu {
  font-size: 1.2em;
}

Then add your customization.

Remember: the above files are outside of the theme directory and are core files. Any updates to the gallery will most likely overwrite these files. So back them up as always before editing, please.

Again, I hope there will be an easier way to achieve this once the finaly Gallery version is released and it will be a manner of editing the theme files directly. Or maybe there already is a way to acheive this, as I said above, but i'm just not aware of it, and in that case, let me know! Thanks!

Paul
http://mindink.com/gallery/

I wouldn't bother editing the B2 theme. You'll need to remake a lot of changes for B3

Get the latest code first: http://codex.gallery2.org/Gallery3:Upgrading then start hacking away.

You should not need to dig around in any css other than what's in the theme. From there you should be able to override anything you want.

Start by copying the existing theme:
http://codex.gallery2.org/Gallery3:Tutorials:Themes

____________________________________________
Like Gallery? Like the support? Donate now!!! See G2 live here

We are working on a skeleton "zen" theme that could be a good basis to start with. While the default theme uses YUI, I've already seen 2 themes (heavily customized) that don't use any YUI stuff, as far as I can tell. Here's one of those: http://gallery.menalto.com/node/88765

Anything I've seen can be overridden in the theme pretty easily (yes, we're working on documentation). Any CSS for anything could be able to be overridden in the theme. If you want to change something like the HTML in the search block, simply copy that to your theme.

Copy modules/search/views/search.html.php to themes/MyTheme/views Then edit that file.
____________________________________________
Like Gallery? Like the support? Donate now!!! See G2 live here

That could very well have had to do with how we combine CSS and JS files into one file. If you don't edit the actual CSS files or remove their references then the combined files are not rebuilt (again still working on those docs ). I'm not exactly sure what you were trying to do, but that could have been it.
____________________________________________
Like Gallery? Like the support? Donate now!!! See G2 live here

So, how do I edit the site_menu in the header by only editing theme files?

thanks!

i'm sure others would like to have a navigation menu in their header to direct visitors to other parts of their website, if their website contains more than just a gallery. surely i can't be the only one ;)

____________________________________________
Like Gallery? Like the support? Donate now!!! See G2 live here

I'm still awaiting feedback on this. Granted I haven't dug into it much yet myself to see.

30 seconds later...

Looks like there may be away, I'm not sure what you can do with the site_menu function and I'm not sure what "content_menu" does. But I've got to run and I'll need to spend more time and probably ask a question or two to figure it out.

As for a "bunch of styled links in a header template". If we did that how would additional modules hook into it?
____________________________________________
Like Gallery? Like the support? Donate now!!! See G2 live here

i understand completely that developer time is spent elsewhere.

thanks for at least looking into this!