Custom CSS file

dwdallam

Joined: 2006-11-19
Posts: 394
Posted: Sat, 2012-05-19 23:29

In the Grey Dragon theme, the author has made it possible to create a directory and file (custom.css) where you can copy and paste any css rule and change it. The custom.css file is then read and dynamically replaces the css of the theme as each page is read. Since the custom.css file is in it's own directory, it never gets over written when you update G3. Additionally, there is no need to change specific css files--ever.

Does G3 Core offer a similar approach to customizing CSS?

I'm thinking if not, it really should. That way people can simply find the CSS they are looking for, copy it into the custom.css file, and modify it that way, without needed to dig around trying to find specific css pages.
Login or register to post comments
MarkRH

Joined: 2007-05-25
Posts: 214
Posted: Thu, 2012-05-24 09:13

It's real easy to do (I made a copy of the default Wind theme and placed it into its own folder in the themes directory and modified its theme.info file). Here's my theme.info file:

name = "Head Wind 303"
description = "Head Wind based on default Gallery 3.0.3 Wind Theme"
version = 1
author = "Mark Headrick"
site = 1
admin = 0
author_name = "Mark Headrick"

I then told Gallery to use my theme.

In /themes/(your theme)/css/ you can add any css over-rides to the bottom of screen.css or create a new file in the css directory (or whatever directory you choose) called mycustom.css and then in /themes/(your theme)/views/page.html.php load your custom css file at the bottom of the css loading section:

    <? /* Theme specific CSS/JS goes last so that it can override module CSS/JS */ ?>
    <?= $theme->script("ui.init.js") ?>
    <?= $theme->css("yui/reset-fonts-grids.css") ?>
    <?= $theme->css("superfish/css/superfish.css") ?>
    <?= $theme->css("themeroller/ui.base.css") ?>
    <?= $theme->css("screen.css") ?>
    <? if (locales::is_rtl()): ?>
    <?= $theme->css("screen-rtl.css") ?>
    <? endif; ?>
    <?= $theme->css("mycustom.css") ?>

Since you're modifying your own theme.. it will not be over-written. I only add css over-rides to mycustom.css. The actual css declaration are spread out all over the place.. many within the core directories of gallery and since it sends a combined css file to the browser, it's almost impossible to find the actual location for something.

- Mark H.

Using Gallery 3.0.3 - gallery.markheadrick.com
Login or register to post comments
dwdallam

Joined: 2006-11-19
Posts: 394
Posted: Fri, 2012-05-25 09:01

Is this a G3 core aspect? If so, then grey dragon jsut follows that core? Thanks. I didn't know that.
Login or register to post comments
MarkRH

Joined: 2007-05-25
Posts: 214
Posted: Sat, 2012-05-26 20:10

Grey Dragon is just an alternate Theme that can be used with G3.

- Mark H.

Using Gallery 3.0.3 - gallery.markheadrick.com
Login or register to post comments
Serge D
Serge D's picture

Joined: 2009-06-11
Posts: 2436
Posted: Thu, 2012-05-31 04:34
dwdallam wrote:
Is this a G3 core aspect? If so, then grey dragon jsut follows that core? Thanks. I didn't know that.

yes and no
if your custom css is placed within current's theme css folder then code above would work
if you decide to put it else where then either you need to use full path or have special code which would extend "look in" list of locations (this is what GD theme does)

Serge
_____________________________________________
Photo Gallery | GreyDragon Theme | Follow on Twitter
Login or register to post comments